# P5,js Smoothing Not Working?

**URL:** <https://discourse.processing.org/t/p5-js-smoothing-not-working/14585>\
**Category:** p5.js\
**Created:** [October 10, 2019, 6:46pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585 "2019-10-10T18:46:37Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![graphicsguy](https://avatars.discourse-cdn.com/v4/letter/g/f6c823/32.png) [@graphicsguy](https://discourse.processing.org/u/graphicsguy)\
**Post date:** [October 10, 2019, 6:46pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/1 "2019-10-10T18:46:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 11, 2019, 1:19am UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/2 "2019-10-11T01:19:08Z")

</div>

no idea if there is a recent change,

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

> 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.

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

but in WEBGL i see a difference ( in P2D not too much )

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/FG9-Rj02D)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![graphicsguy](https://avatars.discourse-cdn.com/v4/letter/g/f6c823/32.png) [@graphicsguy](https://discourse.processing.org/u/graphicsguy)\
**Post date:** [October 11, 2019, 7:10am UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/3 "2019-10-11T07:10:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 11, 2019, 9:13am UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/4 "2019-10-11T09:13:33Z")

</div>

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

```auto
/*! p5.js v0.7.3 January 20, 2019 */

```

the new one would be

```auto
/*! 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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 13, 2019, 4:57pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/5 "2019-10-13T16:57:42Z")

</div>

> [@graphicsguy](#):
>
> Is anyone else having problems with no antialiasing now in the Chrome browser?

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.

> **[p5.js Web Editor](https://editor.p5js.org/jeremydouglass/sketches/dWjhObsT2)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

Not saying this is your problem – just that it is a very common reason for people to search the forum for “smoothing not working”.

---

<div class="post-metadata">

**Author:** ![Vectornaut](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@Vectornaut](https://discourse.processing.org/u/Vectornaut)\
**Post date:** [February 3, 2021, 5:13pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/6 "2021-02-03T17:13:25Z")

</div>

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](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/5) @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)**

 ![smooth-brave](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3accb4eb4c5ed04c6c82124bbb935bbfd0d03915.png)

---

<div class="post-metadata">

**Author:** ![Vectornaut](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@Vectornaut](https://discourse.processing.org/u/Vectornaut)\
**Post date:** [February 3, 2021, 5:14pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/7 "2021-02-03T17:14:30Z")

</div>

Here’s a screenshot of the expected antialiasing, in Chromium 88.0.

**Chromium 88.0**

 ![smooth-chrome](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2d3d85e5b30d6e896aea227239823383e49f5119.png)

---

<div class="post-metadata">

**Author:** ![Vectornaut](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@Vectornaut](https://discourse.processing.org/u/Vectornaut)\
**Post date:** [February 3, 2021, 5:15pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/8 "2021-02-03T17:15:09Z")

</div>

Here’s another screenshot of the expected antialiasting, in Firefox 85.0.

**Firefox 85.0**  
 ![smooth-firefox](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bada052cb6fe11896b49ff2168e66b90c65482f9.png)

---

<div class="post-metadata">

**Author:** ![mattopoly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mattopoly/32/14531_2.png) [@mattopoly](https://discourse.processing.org/u/mattopoly)\
**Post date:** [September 22, 2021, 11:23pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/9 "2021-09-22T23:23:14Z")

</div>

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](https://editor.p5js.org/mattopoly/sketches/xJWE0whpf).

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 22, 2021, 11:46pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/10 "2021-09-22T23:46:03Z")

</div>

Hi @mattopoly – that is right, call background in `draw()` if you are redrawing the same thing every frame. As I mentioned above:

> [@jeremydouglass](#):
>
> 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.

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()!

---

<div class="post-metadata">

**Author:** ![mattopoly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mattopoly/32/14531_2.png) [@mattopoly](https://discourse.processing.org/u/mattopoly)\
**Post date:** [September 23, 2021, 8:04pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585/11 "2021-09-23T20:04:43Z")

</div>

> [@jeremydouglass](#):
>
> 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

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.