PureBasic Forums - English

Posted: **Fri Nov 03, 2017 10:29 pm**

I was looking around the forum for an image pixelation effect but could not find any so I did some tinkering and came up with this. It creates a pixelate effect from just simple code. Change 8 to increase of decrease pixels size. Best to choose a number from 5 to 10 for best appearance. Any number lower than 5 produces no pixelation effect during my testing.

Code: Select all

; Pixelate image keeping its aspect ratio
; Raul Clifton - aka - rc2k17
;modified from a previous demo
; PB V5.61


UseJPEGImageDecoder()


Procedure ResizeImgAR(ImgID.l,width.l,height.l)
  Define.l OriW, OriH, w, h, oriAR, newAR
  Define.f fw, fh

  OriW=ImageWidth(ImgID)
  OriH=ImageHeight(ImgID)

  If (OriH > OriW And height < width) Or (OriH < OriW And height > width)
    Swap width, height
  EndIf

  ; Calc Factor
  fw = width/OriW
  fh = height/OriH

  ; Calc AspectRatio
  oriAR = Round((OriW / OriH) * 10,0)
  newAR = Round((width / height) * 10,0)

  ; AspectRatio already correct?
  If oriAR = newAR
    w = width
    h = height
  ElseIf OriW * fh <= width
    w = OriW * fh
    h = OriH * fh
  ElseIf OriH * fw <= height
    w = OriW * fw
    h = OriH * fw 
  EndIf

  ResizeImage(ImgID,w,h,#PB_Image_Smooth)

EndProcedure 

#WindowFlags = #PB_Window_ScreenCentered|#PB_Window_SystemMenu|#PB_Window_MinimizeGadget|#PB_Window_MaximizeGadget|#PB_Window_SizeGadget

OpenWindow(0,0,0,675,350,"Test_Pixelation_Effect",#WindowFlags)
ImageGadget(0,25,25,300,300,0,#PB_Image_Border)
LoadImage(0,"c:/pic2.jpg")  ;  change this to one of your images
ResizeImgAR(0,GadgetWidth(0)/8,GadgetHeight(0)/8) ;change the 8 here to your desired number
ResizeImgAR(0,GadgetWidth(0),GadgetHeight(0))
SetGadgetState(0,ImageID(0))

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

Posted: **Sat Nov 04, 2017 12:56 am**

Crudely Animated:

Code: Select all

OpenWindow(0,0,0,675,350,"Test_Pixelation_Effect",#WindowFlags)
ImageGadget(0,25,25,300,300,0)
LoadImage(0,"c:/pic2.jpg")  ;  change this to one of your images
d.d = 10
For i = 100 To 1 Step -1
CopyImage(0,5)
ResizeImgAR(5,GadgetWidth(0)/d,GadgetHeight(0)/d) 
ResizeImgAR(5,GadgetWidth(0),GadgetHeight(0))
Delay(1)
SetGadgetState(0,ImageID(5))
d = (d - 0.1)
Next

Posted: **Sat Nov 04, 2017 2:23 am**

IdeasVacuum wrote:Crudely Animated:

Code: Select all

OpenWindow(0,0,0,675,350,"Test_Pixelation_Effect",#WindowFlags)
ImageGadget(0,25,25,300,300,0)
LoadImage(0,"c:/pic2.jpg")  ;  change this to one of your images
d.d = 10
For i = 100 To 1 Step -1
CopyImage(0,5)
ResizeImgAR(5,GadgetWidth(0)/d,GadgetHeight(0)/d) 
ResizeImgAR(5,GadgetWidth(0),GadgetHeight(0))
Delay(1)
SetGadgetState(0,ImageID(5))
d = (d - 0.1)
Next

Yeah but it still looks quite good. Probably could be used for a transition effect. Keep tinkering with it.

Posted: **Sat Nov 04, 2017 4:00 am**

Thanks for your code, rc2k17! I like it.

Posted: **Tue Nov 07, 2017 1:18 am**

Nice effect, thank you rc2k17

I slightly changed the code a bit (added a file requester + a constanct for the effect), e.g. I noticed that also a value of 3 for the pixelate effect can lead to good results if the source is very big in size....

Code: Select all

; http://www.purebasic.fr/english/viewtopic.php?f=12&t=69558

; Pixelate image keeping its aspect ratio
; Raul Clifton - aka - rc2k17
;modified from a previous demo
; PB V5.61


; It creates a pixelate effect from just simple code. 
; Change #PixelateEffect to increase of decrease pixels size. Best to choose a number from 5 to 10 for best appearance. 
; Any number lower than 5 produces no pixelation effect during my testing.
#PixelateEffect = 5

UseJPEGImageDecoder()


Procedure ResizeImgAR(ImgID.l,width.l,height.l)
  Define.l OriW, OriH, w, h, oriAR, newAR
  Define.f fw, fh
  
  OriW=ImageWidth(ImgID)
  OriH=ImageHeight(ImgID)
  
  If (OriH > OriW And height < width) Or (OriH < OriW And height > width)
    Swap width, height
  EndIf
  
  ; Calc Factor
  fw = width/OriW
  fh = height/OriH
  
  ; Calc AspectRatio
  oriAR = Round((OriW / OriH) * 10,0)
  newAR = Round((width / height) * 10,0)
  
  ; AspectRatio already correct?
  If oriAR = newAR
    w = width
    h = height
  ElseIf OriW * fh <= width
    w = OriW * fh
    h = OriH * fh
  ElseIf OriH * fw <= height
    w = OriW * fw
    h = OriH * fw
  EndIf
  
  ResizeImage(ImgID,w,h,#PB_Image_Smooth)
  
EndProcedure

#WindowFlags = #PB_Window_ScreenCentered|#PB_Window_SystemMenu|#PB_Window_MinimizeGadget|#PB_Window_MaximizeGadget|#PB_Window_SizeGadget

OpenWindow(0,0,0,675,350,"Test_Pixelation_Effect",#WindowFlags)
ImageGadget(0,25,25,300,300,0,#PB_Image_Border)

File$ = OpenFileRequester("Please choose an image (JPG)", "", ".jpg", 0)
If File$
  LoadImage(0,File$)
  ResizeImgAR(0,GadgetWidth(0)/#PixelateEffect ,GadgetHeight(0)/#PixelateEffect) ;change the 8 here to your desired number
  ResizeImgAR(0,GadgetWidth(0),GadgetHeight(0))
  SetGadgetState(0,ImageID(0))
EndIf

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

Posted: **Thu Nov 09, 2017 4:59 pm**

Thanks for the code addition Andre. I am going to check it out.

Posted: **Thu Nov 09, 2017 5:34 pm**

Works great
Thanks at you two for sharing

Posted: **Thu Nov 09, 2017 8:47 pm**

@Andre,

Did you check this out on a Mac?

I ask because the pixellation (large squares) does not occur whatever factor is used.
Looks great on my PC, though.

Thanks to you and rc2k17 your posts in this interesting thread.

Posted: **Fri Nov 10, 2017 5:34 am**

@rc2k17
I like the idea to use ResizeImage to create a pixelation effect.
I found that using the #PB_Image_Raw mode when resizing works better in my opinion.
I have expanded the code to make it easier to demonstrate and test this method.
Also, this version of code maintains the original image size.

Code: Select all

; http://www.purebasic.fr/english/viewtopic.php?f=12&t=69558
; It creates a pixelate effect from just simple code.
; original idea by Raul Clifton - aka - rc2k17
; this version by BasicallyPure 11/10/2017

EnableExplicit

UseJPEGImageDecoder()
UsePNGImageDecoder()

Enumeration ; images
   #imgRef : #imgPixelated
EndEnumeration

Enumeration ;menu items
   #Load : #Copy : #Pixelate : #Minimize : #Quit
EndEnumeration


Procedure PIXELATE_IMAGE(image, value)
   Protected ImgW, ImgH, result
   
   If value < 1 : value = 1 : EndIf
   
   If IsImage(image)
      ImgW = ImageWidth(image)
      ImgH = ImageHeight(image)
      
      If ResizeImage(image, ImgW / value , ImgH / value)
         If ResizeImage(image,ImgW,ImgH,#PB_Image_Raw) ;<-- #PB_Image_Raw works best
            result = #True
         EndIf
      EndIf
   EndIf
   
   ProcedureReturn result
EndProcedure

Procedure LOAD_IMAGE()
   Protected result, File$
   Static Path$ = ""
   
   File$ = OpenFileRequester("Please choose an image.", Path$, "*.jpg|*.jpg|*.png|*.png|*.bmp|*.bmp|*.*|*.*", 0)
   If File$
      result = LoadImage(#imgRef, File$)
      If result
         Path$ = GetPathPart(File$)
         If IsImage(#imgPixelated) : FreeImage(#imgPixelated) : EndIf
      EndIf
   EndIf
   
   ProcedureReturn result
EndProcedure

Procedure CHOOSE_VALUE()
   Static value = 10, value$ = "10"
   
   value$ = InputRequester("Choose value","Enter a pixelation value ",value$)
   If value$
      value = Val(value$)
   Else
      value$ = Str(value)
   EndIf
   
   ProcedureReturn value
EndProcedure


OpenWindow(0,0,0,640,480,"Pixelation_Effect", #PB_Window_BorderLess | #PB_Window_Maximize)
SetWindowColor(0,$808080)

CreatePopupMenu(1)
   ;MenuTitle("Action")
      MenuItem(#Load,"Load image")
      MenuItem(#Copy,"Copy to clipboard")
      MenuItem(#Pixelate,"pixelate")
      MenuItem(#Minimize,"Minimize")
      MenuItem(#Quit,"Quit")
      
ImageGadget(0,0,0,1,1,0)

If CreateImage(#imgRef,250,50,24,$808080)
   StartDrawing(ImageOutput(#imgRef))
      DrawText(10,10," Right click for menu ")
   StopDrawing()
   SetGadgetState(0,ImageID(#imgRef))
EndIf

Define.i quit = #False

Repeat
   Select WaitWindowEvent()
      Case #PB_Event_CloseWindow
         quit = #True
      Case #PB_Event_RightClick
         DisplayPopupMenu(1,WindowID(0))
      Case #PB_Event_Gadget
         If EventGadget() = 0 And EventType() = #PB_EventType_RightClick
            DisplayPopupMenu(1,WindowID(0))
         EndIf
      Case #PB_Event_Menu
         Select EventMenu()
            Case #Load
               If LOAD_IMAGE()
                  SetGadgetState(0,ImageID(#imgRef))
               EndIf
            Case #Copy
               If IsImage(#imgPixelated)
                  SetClipboardImage(#imgPixelated)
               ElseIf IsImage(#imgRef)
                  SetClipboardImage(#imgRef)
               EndIf
            Case #Pixelate
               If IsImage(#imgRef)
                  CopyImage(#imgRef,#imgPixelated)
                  If PIXELATE_IMAGE(#imgPixelated, CHOOSE_VALUE())
                     SetGadgetState(0,ImageID(#imgPixelated))
                  EndIf
               EndIf
            Case #Minimize
               SetWindowState(0,#PB_Window_Minimize)
            Case #Quit
               quit = #True
         EndSelect
   EndSelect
Until quit = #True

Posted: **Sat Nov 11, 2017 3:52 am**

@BasicallyPure
Absolutely fantastic. Thanks for the additional code. This just keeps getting better and better.

PureBasic Forums - English

Simple Pixelation Effect for Images

Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images

Re: Simple Pixelation Effect for Images