How do I smoothly reduce the size of a large image?

I am having a simple problem.
When I generate a large image with and then display it at a reduced size, it does not display nicely.

For example, the following code generates with a size 10 times larger than the canvas size, draws a circle, and then reduces the size to 1/10 on the canvas. As a result, the edges of the circle are jagged. The original image is anti-aliased, but when the image is scaled down, it inevitably becomes jagged.

function setup() {
  createCanvas(400, 400);
  let offscr = createGraphics(4000,4000);

スクリーンショット 2022-06-14 195644

If I save an output image 10 times larger than the original and display it smaller in windows photo, it is beautifully anti-aliased.

I think there is a difference in the reduction algorithm between the two.

Is there any way to shrink the image cleanly with the standard p5.js functionality?

Or do I have to insert a known shrinking algorithm myself?

Thank you!

Hi @Chi3010 ,

Have you tried to use smooth function.

— mnse

1 Like

Hello @mnse !

Thank you for your reply!
I also tried SMOOTH but the situation remained the same. Apparently the p5js reduction algorithm is a perfect thinning. I would like to try to calculate the weighted average with pixel array.


Dunno if it’s any good, but you can try out this alternative resize algorithm:


Thanks for the code. I am surprised to see such a smart way of writing the code. It’s too awesome!!!

The nearest neighbor algorithm caused moiré for some images. For this reason I am in the process of implementing Pixel Mixing.

But your code is really beautiful and I am learning a lot. Thank you!

1 Like