Resizing an image without losing resolution

xna

Hi there. I am trying to resize an image according to the window size. However, when I make the window small and then make it great again (haha..) then the resolution is lost.

function setup() {
  moon = loadImage("assets/moonwalk.jpg");
  createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(255);
    image(moon,0,0);
    moon.resize(windowWidth,0)
}

http://alpha.editor.p5js.org/mxa/sketches/Hy9CEZj5-

xna

Relevant reference: https://p5js.org/reference/#/p5.Image/resize

GoToLoop

Dunno whether it's any better than original p5.Image::resize() method, but here's an alternative resizing method: 8-|

https://Gist.GitHub.com/GoToLoop/2e12acf577506fd53267e1d186624d7c

xna

This looks good. Forgive my ignorance, how do I use it? Shall I save this into the addons folder, load it in the html and then call it as resizeNN()?

GoToLoop

• The way it is written, library p5.js needs to be loaded already before running that gist.
• So either make sure p5.js is active before running that gist or run that gist in preload() or setup().
• As you can see, it adds an extra method called resizeNN() to the class p5.Image.
• Then just call resizeNN() in place of original resize() method. :ar!

GoToLoop

Let's say your sketch file is called "sketch.js", and that gist file is called "resizeNN.js".
Then the ".index.html" file below should load them all in the right order for them to work: :>

<script defer src=https://CDN.JSDelivr.net/npm/p5></script>
<script defer src=resizeNN.js></script>
<script defer src=sketch.js></script>

xna

Hm. I did this, and there is no error, so resizeNN() is properly loaded, but: the blurriness problem persists. See minimal example https://alpha.editor.p5js.org/mxa/sketches/Hy9CEZj5-

GoToLoop

Like I said, I have no idea whether that's any better. X_X
It wasn't written by moi either. Here's the original code: :\">

https://Gist.GitHub.com/gncgnc/fc645b8db00ec43d43fecef37d58df73

According to its description:

Extends p5.Image to handle nearest neighbor resizing for scaling small images (e.g. pixel art) without blurring.

It is only supposed to avoid blurring for small images though. :-\"

xna

I think the issue is that the image in the memory gets actually resized and thus the pixel information gets lost when the size becomes smaller. I need to keep the original in the memory, just scale it for display.

TfGuy44

Don't resize the image stored in memory. Just draw it as a different size:

image(moon,0,0, windowWidth, windowHeight);

xna

@TfGuy44 yea, this is where I started. I need to keep the image in the original proportions, I don't want to stretch it to fit the window in both directions.

GoToLoop

I need to keep the original in the memory, ...

Just make a clone of it via p5.Image::get() method, and resizeNN() that clone instead: *-:)
https://p5js.org/reference/#/p5.Image/get

let moon, clone;

function preload() {
  moon = loadImage('assets/moonwalk.jpg', img => clone = img.get());
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  clone.resizeNN(width, 0);
}

xna

I think we need a draw function. There is no more image.. https://alpha.editor.p5js.org/mxa/sketches/Hy9CEZj5-

GoToLoop

I think we need a draw() function.

My sample above doesn't include a draw() callback function. ^#(^
I was expecting you to write 1! :P
Don't forget function image() there too in order to display moon & clone: L-)
https://p5js.org/reference/#/p5/image

GoToLoop

Here's an online example for a similar sketch and its source code "sketch.js": $-)

1. https://ThimbleProjects.org/gotoloop/97931/
2. https://ThimbleProjects.org/gotoloop/97931/sketch.js

That example uses mask() in place of resize() though. 8-|

xna

calling it a day, maybe it becomes obvious tomorrow morning with a coffee, right now I have no idea how to do it. But thanks so far. Very appreciated.

xna

i clicked the "answered" tag too early.

xna

made a new question as this one is marked as "answered" https://forum.processing.org/two/discussion/24149/scale-an-image-according-to-the-adaptive-canvas-size