# Resizing problem: blurring images

**URL:** <https://discourse.processing.org/t/resizing-problem-blurring-images/22552>\
**Category:** Coding Questions\
**Created:** [July 11, 2020, 4:05pm UTC](https://discourse.processing.org/t/resizing-problem-blurring-images/22552 "2020-07-11T16:05:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![agrgal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/agrgal/32/9914_2.png) [@agrgal](https://discourse.processing.org/u/agrgal)\
**Post date:** [July 11, 2020, 4:05pm UTC](https://discourse.processing.org/t/resizing-problem-blurring-images/22552/1 "2020-07-11T16:05:14Z")

</div>

Hi to everybody,  
First of all, excuse my English. Besides of that, I’m a newbie on p5.js 🙂  
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”.

 ![blurring_images](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/36155e9997efb25bf6e7f88effd0541a2227b85b.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 11, 2020, 9:12pm UTC](https://discourse.processing.org/t/resizing-problem-blurring-images/22552/2 "2020-07-11T21:12:33Z")

</div>

> [@agrgal](#):
>
> How can this flaw be avoided?

Each call to method [**resize()**](https://p5js.org/reference/#/p5.Image/resize) makes the [p5.Image](https://p5js.org/reference/#/p5.Image) lose a portion of its quality.

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

> **[reference | p5.js](https://p5js.org/reference/#/p5.Image/get)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

> <https://gist.github.com/GoToLoop/2e12acf577506fd53267e1d186624d7c>

---

<div class="post-metadata">

**Author:** ![agrgal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/agrgal/32/9914_2.png) [@agrgal](https://discourse.processing.org/u/agrgal)\
**Post date:** [July 12, 2020, 9:37am UTC](https://discourse.processing.org/t/resizing-problem-blurring-images/22552/3 "2020-07-12T09:37:00Z")

</div>

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.

 ![nuevo](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/48b69ff1bd6f1e68f07bf3913bc644ce802b759f.png)