# Is this really the best anti aliasing that p5 can do?
**URL:** https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525
**Category:** Coding Questions
**Created:** [December 26, 2020, 11:15pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525 "2020-12-26T23:15:55Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)
#### Post date: [December 26, 2020, 11:15pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/1 "2020-12-26T23:15:55Z")
I’m working on a game with animated characters and I’ve noticed that while I can tell that anti aliasing is happening, it doesn’t look very pretty. Idk how to describe it well, but you can look at the picture. It just doesn’t look as smooth as some of the other GUI elements around my screen, even the ones at even lower resolutions. So I’m left wondering if there’s something that I am missing. I want my game to look crispy smooth, so is there a way I can achieve that inside of p5?
---
### Author:  [@rbrauer](https://discourse.processing.org/u/rbrauer)
#### Post date: [December 27, 2020, 4:17pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/2 "2020-12-27T16:17:14Z")
You can use smooth(…) with a parameter, but the results may vary depending on a few things as stated in the documentation below.
Also, you might want to try drawing the characters at a higher resolution in a separate PGraphcis instance and then drawing that back into the main instance scaled back down.
> **[smooth() \\ Language (API) \\ Processing 3+](https://processing.org/reference/smooth_.html)**
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 27, 2020, 7:02pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/3 "2020-12-27T19:02:52Z")
I don’t know much about graphics but vector images (.svg) scale the best (because they are litterally instructions on what to draw instead of the drawing)
---
### Author:  [@noel](https://discourse.processing.org/u/noel)
#### Post date: [December 27, 2020, 10:36pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/4 "2020-12-27T22:36:40Z")
I think anti-aliasing actually is working well in P5.js. Perhaps you use zoom that amplifies it?
@CodeMasterX Using SVG is a good idea, but it’s not easy to trace a bitmap with few objects and knots. And if the curves are not simplified, the zigzag will continue.
Maybe this is the way to go.
Click left to zoom in, and right to zoom out.
https://editor.p5js.org/noelpil/present/fVHA-_7hJ
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [December 28, 2020, 12:06am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/5 "2020-12-28T00:06:34Z")
[https://editor.p5js.org/noelpil/sketches/fVHA-\_7hJ](https://editor.p5js.org/noelpil/sketches/fVHA-_7hJ)
---
### Author:  [@noel](https://discourse.processing.org/u/noel)
#### Post date: [December 28, 2020, 1:27am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/6 "2020-12-28T01:27:52Z")
@GoToLoop another way select inspect pick address change present sketches?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [December 28, 2020, 1:37am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/7 "2020-12-28T01:37:52Z")
That’s what I did! 😛
But not every1 can guess we have to replace “/present/” to “/sketches/” and we could hit CTRL + SHIFT + C in order to inspect a page element to find out the embedded’s address. 🧙
And that’s right, the CTRL + SHIFT + C combo; b/c we can’t right-click on your embedded sketch. 🖱
That’s why I always post the full URL of my sketches. 😇
---
### Author:  [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)
#### Post date: [December 31, 2020, 7:57pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/8 "2020-12-31T19:57:59Z")
I’m not sure I understand your explanation, and my curves are as simplified as I could make them.
@CodeMasterX Originally I wanted to do this using svg but there didn’t seem to be native support for svg in p5. So i converted the svg to html5 canvas lingo using a converter, then i went through and manually converted everything to p5’s syntax, so everything here is being drawn by p5’s built in drawing functions.
@rbrauer The bear is being drawn in a separate pgraphics that has the same resolution as the main canvas, but I might try your idea of drawing it at a higher resolution and then scaling it down.
I’d share my code with you but it’s really long because it has a bunch of different facial expressions for her, and I had to stop using the p5 web editor because the scrolling started to get skippy as the code got longer and longer so I’m just using atom atm.
---
### Author:  [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)
#### Post date: [December 31, 2020, 8:17pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/9 "2020-12-31T20:17:03Z")
Oh and also the pupils and the eyes are seperate pgraphics because I have to convert the eyeballs to an image in order to use them as a clipping mask for the pupils
---
### Author:  [@rbrauer](https://discourse.processing.org/u/rbrauer)
#### Post date: [December 31, 2020, 10:44pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/10 "2020-12-31T22:44:25Z")
I don’t have much experience with JS, but I was surprised to hear p5.js does not support SVG. Out of curiousity, I found [this example](https://editor.p5js.org/joeyklee/sketches/BykA7qNnm) and poked at it a bit.
The original does not render correctly, but the modified version below appears to work.
```javascript
var mySvg;
var scl;
function preload() {
// mySvg = loadImage("shapes.svg");
mySvg = createImg("shapes.svg");
mySvg.elt.style.display = "none";
}
function setup() {
createCanvas(400, 400);
imageMode(CENTER);
scl = 3;
}
function draw() {
background(220);
scale(scl);
image(mySvg, mouseX/scl, mouseY/scl);
}
```
---
### Author:  [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)
#### Post date: [January 1, 2021, 5:09am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/11 "2021-01-01T05:09:06Z")
> [@rbrauer](#):
>
> ```auto
> var mySvg;
> var scl;
>
> function preload() {
> // mySvg = loadImage("shapes.svg");
> mySvg = createImg("shapes.svg");
> mySvg.elt.style.display = "none";
> }
>
> function setup() {
> createCanvas(400, 400);
> imageMode(CENTER);
> scl = 3;
> }
>
> function draw() {
> background(220);
> scale(scl);
> image(mySvg, mouseX/scl, mouseY/scl);
> }
>
> ```
naahh fam im gettin some kinda “InvalidStateError: CanvasRenderingContext2D.drawImage: Passed-in image is “broken” (sketch: line 19)” error dang
---
### Author:  [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)
#### Post date: [January 1, 2021, 7:12pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/12 "2021-01-01T19:12:03Z")
Oh i think there may have been a misunderstanding. The screenshot is cropped in just to show u the anomalies. The bear is drawn to the screen at about 600 pixels tall. I’m not zooming or anything like that in the actual code. Here’s her full size as she’s rendered to the screen:
---
### Author:  [@rbrauer](https://discourse.processing.org/u/rbrauer)
#### Post date: [January 1, 2021, 9:57pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/13 "2021-01-01T21:57:51Z")
Heres one last “works for me” type example using SVG.
```javascript
//https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
var blah;
function preload() {
blah = createImg(
"https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189",
"altText"
);
blah.elt.style.display = "none";
}
function setup() {
createCanvas(640, 360);
imageMode(CENTER);
}
function draw() {
background(204);
var scl = ((sin(millis() * 0.001) + 1) * 0.5 + 0.5) * 3;
scale(scl);
image(blah, mouseX/scl, mouseY/scl);
}
```
---
### Author:  [@noel](https://discourse.processing.org/u/noel)
#### Post date: [January 2, 2021, 9:00am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/14 "2021-01-02T09:00:30Z")
> [@thesuperdaine](#):
>
> it has a bunch of different facial expressions for her
Click to hear sound.
https://editor.p5js.org/noelpil/embed/0vNuP8AlY
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 2, 2021, 9:18am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/15 "2021-01-02T09:18:18Z")
[editor.p5js.org/noelpil/sketches/0vNuP8AlY](http://editor.p5js.org/noelpil/sketches/0vNuP8AlY)
---
### Author:  [@noel](https://discourse.processing.org/u/noel)
#### Post date: [January 2, 2021, 9:19am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/16 "2021-01-02T09:19:34Z")
@GoToLoop Do you hear the sound?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 2, 2021, 9:23am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/17 "2021-01-02T09:23:14Z")
Yes! Seems like “U sux!” or something. 😛
---
### Author:  [@noel](https://discourse.processing.org/u/noel)
#### Post date: [January 2, 2021, 9:25am UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/18 "2021-01-02T09:25:17Z")
Ho ho, nope It’s bearish, saying, “Use Shapes!!”
---
### Author:  [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)
#### Post date: [January 26, 2021, 10:02pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525/19 "2021-01-26T22:02:56Z")
Lmao okay i did! I’m redoing the whole thing using shapes and im still getting this slightly fuzzy look but maybe that’s just the p5js aesthetic lol idk so i’ll just embrace it ig. I probably just have to make it a higher resolution if i want it to look smoother. Or maybe i should not sit like 2 inches from my monitor haha
