Search code examples
javagraphicsdrawingprocessingantialiasing

Why are circles drawn using Processing so jagged?

I draw a simple circle using the following code:

import processing.core.PApplet;

public class A3 extends PApplet {

    public static void main(String[] args) {
        PApplet.main(A3.class.getCanonicalName());
    }

    public void settings() {
        size(800, 600);

    }

    public void draw() {
        background(255);
        stroke(0);
        ellipse(200,200,300,300);
    }

    public void setup() {
        background(255);

    }
}

And the result is the following jagged circle: The jagged circle

I have tried using smooth(8);, but it didn't help.

Solution

  • What do you expect it to look like instead?

    Note that you're only really seeing the "jaggedness" because you've increased the size of the picture. Here's what you should actually see:

    anti-aliased circle

    I wouldn't call this circle jagged. In fact, by default Processing uses anti-aliasing to make drawings look more smooth. Try disabling this by calling noSmooth() inside the setup() function, and you'll see this:

    non anti-aliased circle

    To me that looks much more jagged.

    You could also try increasing the line width by calling strokeWeight() inside the draw() function. Here's strokeWeight(8):

    thick circle

    Honestly if I were you I would just not worry about this. Processing uses anti-aliasing by default, so everything should look pretty reasonable without you doing anything special. If you look close enough at any pixel drawing, you're going to find some jaggedness.