Underlap and overlap

Processing Coding Questions
1

Hi all,

Basic question, sorry.

When we draw overlapping circles in a circular pattern - a bit like the petals of a flower - using a for loop, each new circle overlaps the former.

However, the first circle is overlapped by both the second circle and the last circle. It is overlapped twice and the last circle is not overlapped at all.

How do we get the last circle to “underlap” the first, so that each circle in our for loop is underlapped once and overlapped once?

The code below illustrates the problem. The first circle (blue) is overlapped twice and the last circle (green) does not underlap the first.

Thanks for your help!

void setup() {
  size(400, 400);
  noLoop();
}

void draw() {
  background(220);

  int numCircles = 6;
  float radius = 100;
  float centerX = width / 2;
  float centerY = height / 2;

  for (int i = 0; i < numCircles; i++) {
    float angle = TWO_PI / numCircles * i;
    float x = centerX + cos(angle) * radius;
    float y = centerY + sin(angle) * radius;

    if (i == 0) {
      fill(0, 0, 255); //FIRST CIRCLE
    } else if (i == numCircles-1) {
      fill(0, 255, 0); //LAST CIRCLE
    } else {
      fill(0, i*255/numCircles, i*255/numCircles);
    }
    ellipse(x, y, 150, 150);
  }
}
2

By underlap I guess you mean the layer goes underneath the previous shape, right?

I think there are two ways to achieve this but neither is straightforward. One is to use 3d - slightly rotate every to simulate how they will be aligned in real life to make use of depth test (imagine they have some thickness so every circle is slightly slanted). It may be easier but the result may be slightly off from circle because of the perspective.

Another way is to draw the first circle again at the very end but only partially with arc or something to cover the last circle.

1 Like
3

Hello @Ernest,

Consider using PGraphics to achieve this:

image

I am sharing some of the code for one half as an example.
You can complete the rest.

PGraphics pg2;

void setup() {
  size(400, 400);
  pg2 = createGraphics(400, 400);
  noLoop();
}

void draw() {
  background(220);
  int numCircles = 6;
  float radius = 100;
  float centerX = width/2;
  float centerY = height/2;

  pg2.beginDraw();
  for (int i = 0; i < numCircles; i++) {
    float angle = TWO_PI / numCircles * i - TAU/2;
    float x = centerX + cos(angle) * radius;
    float y = centerY + sin(angle) * radius;
    pg2.strokeWeight(3);
    pg2.fill(0, 255, 0);
    pg2.ellipse(x, y, 150, 150);
  }
  pg2.endDraw();
  
  PImage img2 = pg2.get(200, 0, 200, 400);
  image(img2, 200, 0 );
}

image

:)

1 Like