Hi All. Is anyone else having problems with no antialiasing now in the Chrome browser? I swear it was working yesterday. I’ve tried forcing it using smooth(); in setup. Any help?
Thanks.
no idea if there is a recent change,
Note that smooth() is active by default in 2D mode; noSmooth() can be used to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry.
but in WEBGL i see a difference ( in P2D not too much )
Thanks KLL. I modified your code to draw a circle, which is where I was seeing the aliasing artifacts, but they didn’t show up. I’m not using the p5 web editor which may be the problem. So I guess that’s solved. Thanks again for your work on it.
1 Like
still i wonder why i see a difference only in WEBGL renderer.
like the P2D Mode lost this feature?
in online editor i tested also old and new version, no difference
now working local in
PDE P5.js Mode
depends on when you installed that.
take a look at the
p5.min.js file used? might be a old one
/*! p5.js v0.7.3 January 20, 2019 */
the new one would be
/*! p5.js v0.9.0 July 01, 2019 */
if you got the old one, but want use the new one,
in every new sketch, must copy it over at
…\Processing\modes\p5jsMode\template\libraries\p5.min.js
1 Like
Please provide code when possible.
There could have been a change, in p5.js or in chrome, but the most common reason to believe that your antialiasing is suddenly broken is to forget to add background() to a sketch canvas or graphics buffer. Not clearing the screen causes antialiased layers to build up over multiple frames, making smooth edges look crunchy.
Not saying this is your problem – just that it is a very common reason for people to search the forum for “smoothing not working”.
1 Like
I’m having the same issue on Brave 1.15, which is built on Chromium 86.0 (my OS is Ubuntu 20.04). Here’s screenshot of the example code @jeremydouglass posted. To see the lack of antialiasing clearly, you may have to open the screenshot in an image viewer, because your browser may scale the image based on your screen resolution. Antialiasing works as expected in Chromium 88.0 and Firefox 85.0.
I see the same pattern in one of my own sketches, which only uses line primitives for drawing. Is this a problem with certain versions of Chrome? Is there any workaround? As @graphicsguy noted, calling smooth() in setup doesn’t help.
Brave 1.15 (built on Chromium 86.0)
Here’s another screenshot of the expected antialiasting, in Firefox 85.0.
Firefox 85.0
I was having issues with aliasing until I moved my call to background() to the draw() function. Just calling it in setup() doesn’t help.
In this example, uncomment “background()” inside the draw method to have it smoothly rendered instead: p5.js Web Editor.
Hi @mattopoly – that is right, call background in draw() if you are redrawing the same thing every frame. As I mentioned above:
If you call background() in setup, it only clears the screen once! Then when you draw the same things many times with the draw() loop without clearing using background(), transparency and antialiasing largely disappears as the layers build up on each other. If you want to draw something on top of itself many times, don’t call background. But you usually want to draw it just once – then call background() early in draw()!
Thanks @jeremydouglass now it makes more sense. For example, I can also just call noLoop() inside my setup() function and the graphics will be smooth.
1 Like