Resizing problem: blurring images

Hi to everybody,
First of all, excuse my English. Besides of that, I’m a newbie on p5.js :slight_smile:
I developed a series of programs coded in p5.js and processing that you can find in: https://github.com/agrgal/sistemaSolar. Please, feel free to fetch them!
My problem is about the last of those programs: SIS_SOL_4 , which is coded in p5.js
This program perfoms planets movement turning around Sun. Using cursor arrows left and right, you can zoom in and out orbits. An algorithm (tp function) reckons relative planet size (exception for Sun; this must be reviewed) and the problem is planet images blur when zoom in and out several times. For instance, focus the misbehaviour on planet Earth.
How can this flaw be avoided? Thanks.
As long as instructions are written in spanish, keys are: “i -> instructions”, “cursors left and right --> zoom in and out”, “space bar --> hide/view orbits”, “e --> orbits elliptical information”, “p-> perspective” , “+/- --> time speed up and down”, “pointing a planet with cursor -> an information box appears”.

Each call to method resize() makes the p5.Image lose a portion of its quality.

So you should keep the original p5.Image and only call resize() over a clone of it via get():
p5js.org/reference/#/p5.Image/get

For an alternative resizing algorithm you can use resizeNN() from the link below:

1 Like

Thanks a lot, GoToLoop

After reading what you sent, and some other of your articles I came to a workaround. Didn’t use loadImage but createImg and planets were loaded as DOM objects which can be resized, hide, show… That seems to work better.

At the same github address , SIS_SOL_5 code works under this workaround. I still must work on planet size and refine code. Thanks again.

2 Likes