Live pixelate filter (almost)

[NotMyFault]

Affinity lacks some live version of destructive filters - for no detectable reason.

This tutorial describes how to achieve a live pixelate effect - with some restrictions.

1. open the file to pixelate
2. Choose Radius (changing requires repeating the masking step)
3. activate grid, set to 2*radius +1
4. create pattern layer of same size like grid
5. move it to upper left 
6. use pixel brush and set exactly 1 pixel to white in center 
7. nest pattern layer into masking position of image/pixel layer
8. add fill layer in black below image
9. add maximum blur filter on top. Set radius. Chosen in step 2.

due to Affinity mipmap rendering the rendering works correct only for zoom level 100% or larger.

if you want to change the radius:

1. change grid accordingly
2. delete pattern layer and recreate it with new size (according to step 3)
3. adjust radius in blur filter.

i will provide a procedural texture filter later replacing the pattern layer, allowing to change the radius on the fly.

 

Constraints:

• pattern must use even integer values
• zoom below 50% gives wrong preview

 

[loukash]

2 hours ago, NotMyFault said:

Choose Radius

"Radius" of what?

[loukash]

Thinking of it: Isn't it easier to simply duplicate the image and pixelate the copy destructively…? 

[Komatös]

@loukash

I assume that radius is a value that you come up with yourself.

[NotMyFault]

7 hours ago, loukash said:

"Radius" of what?

Pixelate radius or strength. Number of pixels in x/y direction to get pixelated into one block.

[NotMyFault]

7 hours ago, loukash said:

Thinking of it: Isn't it easier to simply duplicate the image and pixelate the copy destructively…? 

As long as Affinity does not offer a live filter version out of the box, yes.

this is not the point of my tutorial. My point is

• proving that live versions are technically possible (and stepping Affinity developers on the foot that they should provide it)
• envisioning the added possibilities of live vs. destructive versions, giving arguments why a live filter is desirable
• offer this as proof of concept / pilot for interested users who are impatient/ too old to wait for Affinity
• having fun with the Affinity Apps
• train my Affinity and math skills, avoid getting rusty.
• This tutorial combines multiple tricks which can be very useful stand-alone in other situations
  • Use pattern layers with transparency as masks to choose specific pixels inside blocks that repeat
  • use the maximum blur. This blur filter is a gem ignored by most users. I showcase here one of the multiple uses, selecting one specific pixel of a block and apply the sampled color to the full block. Maximize basically delivers the maximum brightness of pixels inside the chosen radius, but this can be extremely useful for masking to grow or shrink the alpha channel, either rectangular or round.

the live versions has multiple properties not possible in destructive version:

• you can make adjustments or choices on the source layer while seeing the impact.
  • You can move (move tool) the mask (pattern layer) in whole pixels increments and choose which specific pixel the source layer will be used to sample the color. My version does not average the source pixels, it samples exactly one of the source pixels in each block.
  • if you observe that a specific area is lacking contrast and adjacent blocks show identical colors, just add any contrast increasing adjustments over source layer and see visually check the results. 
     
  •  

[loukash]

5 minutes ago, NotMyFault said:

proving that live versions are technically possible

Well, that proof is already made through the destructive filter's live preview…  
But yeah, proofs of concept are fun! Just yesterday I spent a few hours with my Line 6 HX Stomp guitar/bass multieffect to prove my concept theory that it can generate drum sounds and act as a drum machine – or at least as an "enhanced metronome". It works.

[NotMyFault]

25 minutes ago, loukash said:

Well, that proof is already made through the destructive filter's live preview…

Not fully. You can’t do any adjustments or edits to the layer while the destructive filter UI is active.

[leshido]

Thanks @NotMyFault!

I like the idea here and honestly was a little surprised this specific filter didn't have a live version. Solid solution.

On 4/18/2025 at 12:05 AM, NotMyFault said:

i will provide a procedural texture filter later replacing the pattern layer, allowing to change the radius on the fly.

Since you didn't end up providing a formula I went ahead and wrote one. It now makes the process even easier:

var modx=1-(fmod(radius+x+1,2*radius+1)); var mody=1-(fmod(radius+y+1,2*radius+1)); vec3(R,G,B)*(modx+mody)

Set this to output RGB and add a custom real number input (variable) called "radius". Use same radius as the input of the Maximum blur.

[NotMyFault]

7 hours ago, leshido said:

Since you didn't end up providing a formula I went ahead and wrote one.

Great. I intentionally waited for someone to ask, as older feedback was mostly negative.

Your version is actually better than my version which is working on alpha channel, and causes too much rendering artifacts when zoomed out.

Thank you for sharing

[loukash]

On 4/29/2025 at 11:25 PM, leshido said:

Set this to output RGB and add a custom real number input (variable) called "radius". Use same radius as the input of the Maximum blur.

Works great as a macro. Thanks, guys! 

[NotMyFault]

Another option, not depending on any filter, for Designer.

• requires pattern layer from Photo (*)
• Requires artboards and symbols from Designer 

1. create pattern layer from 2x2 px pixel layer. 1 transparent pixel, 3 black pixel
2. add 2 artboards of same size
3. add rectangle in black in canvas size
4. add image child nested
5. nest pattern layer as child to image or rectangle
6. ensure pixel alignment and view mode pixel is used
7. create symbol from rectangle
8. now use 2nd artboard.
9. add 4 instances of symbol
10. set blend mode to lighten 
11. distribute copies to position 0/0, 0/1, 1/0, 1/1 or artboard.

Result: pixelated by factor 1/4.

rendering is more stable when zoomed out vs. blur filter.

performance far better.

[NotMyFault]

(*) you can replace pattern layer by very special curve which dotted line giving checkered 1px result. On iPad a lot of tweaking.

using zig zag across canvas can fill full canvas with just one curve.