Is this really the best anti aliasing that p5 can do?

p5.js Coding Questions
1

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?

image

2

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.

1 Like
3

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)

4

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.

5

https://editor.p5js.org/noelpil/sketches/fVHA-_7hJ

6

@GoToLoop another way select inspect pick address change present sketches?

7

That’s what I did! :stuck_out_tongue:

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

And that’s right, the CTRL + SHIFT + C combo; b/c we can’t right-click on your embedded sketch. :computer_mouse:

That’s why I always post the full URL of my sketches. :innocent:

8

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.

9

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

10

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 and poked at it a bit.

The original does not render correctly, but the modified version below appears to work.

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);
}
11

naahh fam im gettin some kinda “InvalidStateError: CanvasRenderingContext2D.drawImage: Passed-in image is “broken” (sketch: line 19)” error dang

12

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:

photo_2021-01-01_13-11-05
photo_2021-01-01_13-11-05372×577 16.5 KB

13

Heres one last “works for me” type example using SVG.

//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);
}
1 Like
14

Click to hear sound.

1 Like
15

editor.p5js.org/noelpil/sketches/0vNuP8AlY

16

@GoToLoop Do you hear the sound?

17

Yes! Seems like “U sux!” or something. :stuck_out_tongue:

18

Ho ho, nope It’s bearish, saying, “Use Shapes!!”

19

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
image