P5.js: Image resizing with nearest neighbor algorithm

[gncgnc]

Nearest neighbor resizing is a nice feature for user's working with things like pixel art. There is no native way to do this (except writing your own), so maybe it would be a sensible addition to p5. In Processing this can be done with using noSmooth(), but I'm not sure what the best way to implement this would be.

[lmccart]

at the moment, it's a bit beyond the capabilities of the core functionality. but this sounds like a great feature for some kind of addon library. see this doc if you're interested in creating one:
https://github.com/processing/p5.js/wiki/Libraries

[gncgnc]

I have implemented this here, for anyone who might be looking for this in the future. It's slower than the regular resize(), but it gets the job done.

[egordorichev]

Any news? :X

[limzykenneth]

@egordorichev You can simply copy and paste the code @gncgnc linked to in the previous comment into your sketch and you can call img.resizeNN in your sketch.

[egordorichev]

It's 10 times slower... And I need to scale up the whole game.

[limzykenneth]

@egordorichev There's an untested optimised version perhaps give that a go?

[gncgnc]

@egordorichev I've looked into it again and it appears this can be done natively in the canvas with CanvasRenderingContext2D.imageSmoothingEnabled. See here for the Mozilla documentation. I recommend looking at the example they have provided. You will need to access the drawing context p5 is using and set this property to false.

You can try doing this like so:

function setup() {
    let canvasElement = createCanvas(100,100).elt;
    let context = canvasElement.getContext('2d');
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
}

Hopefully it works for you, I have not tested this myself yet.

Alternatively you can try scaling up the p5 canvas with CSS as seen here, but currently the image-rendering CSS property has virtually no support. I'm leaving it here for future reference.

[beug]

@gncgnc your solution worked for me allowing me to scale up images and render with nearest-neighbor fashion instead of fuzzy browser interpolation. I am very happy about this. Thank you.

[GN-c]

you can use p5 built in function noSmooth();

https://p5js.org/reference/#/p5/noSmooth