search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.68k stars 3.33k forks source link

noSmooth behaviour inconsistent #2659

Closed TheCell closed 6 years ago

TheCell commented 6 years ago

Nature of issue?

Most appropriate sub-area of p5.js?

Which platform were you using when you encountered this?

Details about the bug:

wrong output at 100% examplewrongoutput right output at zoom level 300% exampleoutput

limzykenneth commented 6 years ago

noSmooth and in turn imageSmoothingEnabled is designed to work when you resize images, ie. say you have a 200px by 200px image and you draw it 400px by 400px on the canvas, it does not affect browser zooming. The dithering algorithm you are using probably need to be tweaked to work on the right resolution in this case.

TheCell commented 6 years ago

Thanks for your answer. I do see that noSmooth is not designed for this as it stands right now. I wanted to get feedback on the status of the Mozilla Request from the linked issue, maybe Mozilla will update this in the future or a workaround function is beeing made for p5js.

The Dithering Algorithm was written by me using the Wikipedia and the Coding Challenge 90 from Shiffman. As you said it does not affect browser zooming but this issue is in fact saying that it is sometimes. That the algorithm is the problem could only be the case when the image density is changed while zoomed in with the browser I did not check that. But the two images above were made after each other only by pressing refresh in the browser and having different zoom levels. The first image clearly shows that smoothing is occuring. This asumption is based on the observation that the pixels in the first image are not all equal in size and corners are rounded. The algorithm loads the pixels and goes through pixel by pixel.

limzykenneth commented 6 years ago

I'm not aware of any request or bug report being sent to Mozilla or any other vendors regarding this issue, the link in the issue simply links to MDN's documentation of imageSmoothingEnabled.

I'm also not entirely sure why and how the issue is occuring in this case, maybe it is about pixel density, maybe it is something else, I don't have a clear idea and so couldn't say for sure if a workaround is even possible.

As you said it does not affect browser zooming but this issue is in fact saying that it is sometimes.

Do you mean that if noSmooth was not called, this issue doesn't present itself?

TheCell commented 6 years ago

Hey thanks for the answer and sorry for bothering you. I made a big mistake and was so occupied in finding out if the smoothing occurs all the time that I forgot to check without noSmooth. It does occur even if I comment out noSmooth in the setup. So this issue basically is wortthless :/ I am not sure where to push further with this issue.

limzykenneth commented 6 years ago

No worries! I would still be suspicious of the implementation of the dithering algorithm especially since I don't think it take into account browser zooming (however that works and how it affects the canvas/algorithm). I'm not sure what is the best next step to solve this, but if there isn't an obvious bug in p5.js I suggest closing this and maybe asking this question on the forum or stackoverflow, hopefully someone there would have experience with this kind of problem.

Spongman commented 6 years ago

Does it make any difference if your put 'pixelDensity(1);' at the start of your 'setup()' function?

TheCell commented 6 years ago

ok, thanks again @limzykenneth Yes @Spongman after putting in the pixelDensity(1) it always smoothed. Therefore I conclude that the zoom of the browser does mess with the p5 density. I will have a look at my algorithm and incorporate the density into it.