Simple Pixelation Effect for Images

Share your advanced PureBasic knowledge/code with the community.
Post Reply
User avatar
rc2k17
New User
New User
Posts: 4
Joined: Sun Oct 29, 2017 7:48 pm

Simple Pixelation Effect for Images

Post by rc2k17 »

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
RC
Top
IdeasVacuum
Always Here
Always Here
Posts: 6426
Joined: Fri Oct 23, 2009 2:33 am
Location: Wales, UK
Contact:
Contact IdeasVacuum

Re: Simple Pixelation Effect for Images

Post by IdeasVacuum »

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
IdeasVacuum
If it sounds simple, you have not grasped the complexity.
Top
User avatar
rc2k17
New User
New User
Posts: 4
Joined: Sun Oct 29, 2017 7:48 pm

Re: Simple Pixelation Effect for Images

Post by rc2k17 »

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.
RC
Top
Dude
Addict
Addict
Posts: 1907
Joined: Mon Feb 16, 2015 2:49 pm

Re: Simple Pixelation Effect for Images

Post by Dude »

Thanks for your code, rc2k17! I like it.
Top
User avatar
Andre
PureBasic Team
PureBasic Team
Posts: 2139
Joined: Fri Apr 25, 2003 6:14 pm
Location: Germany (Saxony, Deutscheinsiedel)
Contact:
Contact Andre

Re: Simple Pixelation Effect for Images

Post by Andre »

Nice effect, thank you rc2k17 :D

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.... :wink:

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
Bye,
...André
(PureBasicTeam::Docs & Support - PureArea.net | Order:: PureBasic | PureVisionXP)
Top
User avatar
rc2k17
New User
New User
Posts: 4
Joined: Sun Oct 29, 2017 7:48 pm

Re: Simple Pixelation Effect for Images

Post by rc2k17 »

Thanks for the code addition Andre. I am going to check it out.
RC
Top
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5494
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Simple Pixelation Effect for Images

Post by Kwai chang caine »

Works great
Thanks at you two for sharing 8)
ImageThe happiness is a road...
Not a destination
Top
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Simple Pixelation Effect for Images

Post by davido »

@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. :D
Thanks to you and rc2k17 your posts in this interesting thread.
DE AA EB
Top
User avatar
BasicallyPure
Enthusiast
Enthusiast
Posts: 539
Joined: Thu Mar 24, 2011 12:40 am
Location: Iowa, USA

Re: Simple Pixelation Effect for Images

Post by BasicallyPure »

@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
BasicallyPure
Until you know everything you know nothing, all you have is what you believe.
Top
User avatar
rc2k17
New User
New User
Posts: 4
Joined: Sun Oct 29, 2017 7:48 pm

Re: Simple Pixelation Effect for Images

Post by rc2k17 »

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

Return to “Tricks 'n' Tips”