# Underlap and overlap

**URL:** <https://discourse.processing.org/t/underlap-and-overlap/43158>\
**Category:** Coding Questions\
**Created:** [November 7, 2023, 9:33am UTC](https://discourse.processing.org/t/underlap-and-overlap/43158 "2023-11-07T09:33:58Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 7, 2023, 11:30pm UTC](https://discourse.processing.org/t/underlap-and-overlap/43158/3 "2023-11-07T23:30:38Z")

</div>

Hello @Ernest,

Consider using PGraphics to achieve this:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/8/784ae95ef435098610526baceb11ae36782f3b5e.png)

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/8/d85953a7e263afb418863121859e13a57c915c35.png)

`:)`

---

_[View the full topic](https://discourse.processing.org/t/underlap-and-overlap/43158)._