Circles drawing differently in active and static modes

Processing Beginners
1

Hello all

I’ve just installed Processing 4, and when I run the following in static mode I get a smooth circle:

size(500,500);
noStroke();
circle(width/2,height/2,20);

smooth
smooth1016×1076 12.8 KB

But when I run the same code in active mode it draws more of a square with round corners:

void setup()
{
  size(500,500);
}

void draw()
{
  noStroke();
  circle(width/2,height/2,20);
}

Screenshot 2022-06-27 171202
Screenshot 2022-06-27 1712021018×1072 13 KB

I know this may seem like a small issue, but I don’t want to lose nice round edges on small shapes, and it’s very frustrating to run into unexpected behaviour on the most basic sketch. Does anyone know how to fix this?

Thanks

Edit:
Just checked this in P3 and the same thing is happening.

2

Hello @Nicholas,

Take a look at the reference for draw() :

The answer is in there…

:)

3

You need to clear the previous frame before drawing on top of it:

void setup()
{
  size(500,500);
}

void draw()
{
  background(200);
  noStroke();
  circle(width/2,height/2,250);
}

Otherwise, the semi-transparent pixels add up until they appear fully white.

1 Like
4

Hello,

I believe this is due to the smoothing that is applied each frame and is not related to transparency.

Code to visualize this:

// Smooth and anti- aliasing
// v1.0.0
// GLV 2022-06-28

PImage img; 

void setup() 
  {
  size(650, 650);
  background(255); // Try (0)
  smooth(2);    //Default. Try other values!
  //noSmooth(); // Try it with this!
  frameRate(1); // Slow things down to visualize
  }
  
void draw() 
  {
  noStroke();
  fill(255, 0, 0);
  circle(15, 15, 25);
  img = get(0, 0, 30, 30); // gets a rectangular section of image
  
  translate(30, 30);
  // Magnifies 20x
  int m = 20;
  for(int y = 0; y< img.height; y++)
    {
    for(int x = 0; x< img.width; x++)
      {
      int c = img.pixels[x+y*img.width];
      fill(c);
      rect(x*m, y*m, m, m);
      }
    }
  }
  
// Save a frame
void keyPressed()
  {
  saveFrame(str(frameCount) + ".png");
  }

image
image652×682 3.01 KB

References:

:)

5

Amazing!

Thank you very much everyone for the different levels of explanation, it is all helpful. I’m not new to processing but it’s been a while and this tripped me up :sweat_smile:
I’m remaking/ improving an instrument for performing lumia I’ve built previously, if you are interested this it it:

Linaeyeux

:peace_symbol:

2 Likes