Circle edges are looking 'chunky'

[marcrleonard]

Test script:

from p5 import *

def setup():
    size(640, 360)
    no_stroke()
    background(204)

def draw():
    if mouse_is_pressed:
        fill(random_uniform(255), random_uniform(127), random_uniform(51), 127)
    else:
        fill(255, 15)

    circle_size = random_uniform(low=10, high=80)

    circle((mouse_x, mouse_y), circle_size)

def key_pressed(event):
    background(204)

run()

Expected behavior: The edges of the circle to be smooth. I referenced the GIF in the readme

Actual behavior When I use the example script, I am seeing very chunky edges. I am on a UHD monitor, and I tried running the script with the pixels 1:1 as well as my normal scaled 150%. I suspect this is some sort of OpenGL thing. Either a scaling issue or a dpi issue. Please let me know what other information I can provide!

Errors produced (if any):

p5 version: p5==0.3.0a2

• numpy [required: Any, installed: 1.13.3]
• pyglet [required: Any, installed: 1.3.0]
  • future [required: Any, installed: 0.16.0]
• PyOpenGL [required: Any, installed: 3.1.0]

Python version: Python 3.5 Operating System: Windows10

[abhikpal]

We manually tessellate a shape before drawing it, this could be causing the issue. Ideally this should be done in OpenGL, but we were already facing many issues with OpenGL so just decided to do it manually.

Two more things:

• I don't understand enough OpenGL myself to take this on, but would love if someone familiar with OpenGL would like to work on this.
• Could someone also try and reproduce this, please?

[marcrleonard]

I don't know opengl either... This is the best I got :-) https://www.opengl.org/discussion_boards/showthread.php/167955-drawing-a-smooth-circle

[marcrleonard]

I'm wondering if you couldn't drill into the pygame code to get the opengl pieces for arc/circle/ellipse etc...

[illus0r]

Could someone also try and reproduce this, please?

Mac OS, retina display, chunky edges:

But I'll give your lib a whirl, it looks fascinating after Pillow and p5.js :–)

Let me know if you need some Mac OS testing.

[arihantparsoya]

I am also getting the same error. I am using MacBook Pro (without retina display - 1920x1080).

But, I think this behaviour is occurring because the background is not cleared at every frame. This is discussed in Processing forum too:

constantly redrawing the same object over itself means that the pixels with partial alpha, the ones on the edges drawn that way to help smooth out the object, get less and less transparent with each frame. meaning you lose the smoothing.

When the background is cleared at every frame, the circles appear smoother. I have observed this behaviour while rendering SVGs in browser too. Redrawing the same SVG multiple times makes the edges of SVG look chunky in browser.

@illus0r could you try the following code and check if the edges are still chunky?:

from p5 import *

def setup():
    size(500, 500)
    no_stroke()
    background(204)

def draw():
    background(204)
    fill(random_uniform(255), random_uniform(127), random_uniform(51), 127)
    circle((mouse_x, mouse_y), 40)

run()

[marynelv]

I'm getting the same chunky (aliased) result in Ubuntu. Clearing the background doesn't help.

[abey79]

Same here. macOS Mojave and p5==0.5.0. Retina display (MacBook Pro 2018).

[pikeas]

Ditto. Pixelated circles on a Retina display with p5 0.6.0, with both @marcrleonard's and @parsoyaarihant's snippets.

[VivekChoudhary128]

Hi, is there any follow up to this? I could it be because smooth() hasn't been implemented and things are left for default anti-aliasing?

[jeremydouglass]

Several of these examples actually call mouse_is_pressed multiple times on a single click at 60fps, so they aren't so great for testing because they can write stacked circles (although the randomized width helps. Here is a simpler test:

from p5 import *

def setup():
    size(640, 360)
    no_stroke()

def draw():
    background(204)
    fill(192,64,128)
    circle((width/2, height/2), 32)

if __name__ == '__main__':
    run()

I can confirm on a retina display with p5 0.6.0 that the resulting circle has the correct size -- it is "32x32", and if you drag a desktop screenshot you get a 74x74 png (because retina), in which the circle is made of 2x2 pixels (because that's the size of the underlying pixel buffer in p5). This is all expected -- the "chunky" part that might be unexpected is the no anti-aliasing / smooth.

[ReneTC]

Same problem with stroke

def setup():
    size(1280, 720)


def draw():
    background(0)
    translate(1280/2, 720/2)
    stroke(255)
    stroke_weight(30)
    line((0,0),(1280,720))

if __name__ == '__main__':
   run()

Results in:

[sanchopanza35]

So are there any update for this?

[tushar5526]

@sanchopanza35 #212