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

p5.js Coding Questions
1

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

For example, the following code generates p5.graphics 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);
  offscr.background(200);
  offscr.noFill();
  offscr.stroke(0);
  offscr.strokeWeight(100);
  offscr.circle(2000,2000,3000);
  
  image(offscr,0,0,400,400,0,0,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!

2

Hi @Chi3010 ,

Have you tried to use smooth function.

Cheers
— mnse

1 Like
3

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.

Thanks!

4

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

2 Likes
5

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