# Shapes unexpectedly overlay other shapes

**URL:** <https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946>\
**Category:** Coding Questions\
**Created:** [October 27, 2020, 1:38pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946 "2020-10-27T13:38:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 1:38pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/1 "2020-10-27T13:38:32Z")

</div>

So, In my code, The circles sometimes fill up tiles that have been occupied by the Squares.  
As seen here:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d5607131062b4894ccb35bad4461fd78b04c99dd.png)

The relevant code is as follows

```auto
function draw() {
  noStroke();
  // These make a sort-of grid to be filled with things
  for (let x = 0; x < width; x += tw) {
    for (let y = 0; y < height; y += th) {
      const randomTile = random(0, 1);
      const randomDraw = random(0, 1);
      if (randomTile > 0.5) {
        drawTriangles(x, y, randomDraw);
      } else if (randomTile <= 0.5) {
        drawCircles(x, y, tw, th, randomDraw);
      }
    }
  }
}

function drawCircles(x, y, w, h, side) {
  if (side > 0.5) {
    fill(getFillColor());
    arc(x, y + 100, w, h, HALF_PI - TWO_PI, HALF_PI - PI);
  } else if (side <= 0.5) {
    fill(getFillColor());
    arc(x, y + 100, w, h, PI + HALF_PI, TWO_PI + HALF_PI);
  }
}

function drawTriangles(x, y, direction) {
  // Direction > .5 draws line ul to lr
  // Direction < .5 draws line lr to ur

  // Define triangle points
  let ulx = x;
  let uly = y;
  let llx = x;
  let lly = y + th;
  let urx = x + tw;
  let ury = y;
  let lrx = x + tw;
  let lry = y + th;

  // Draw triangles by direction
  if (direction > 0.5) {
    fill(getFillColor());
    triangle(ulx, uly, llx, lly, urx, ury);
    fill(getFillColor());
    triangle(llx, lly, urx, ury, lrx, lry);
  } else if (direction <= 0.5) {
    fill(getFillColor());
    triangle(ulx, uly, llx, lly, lrx, lry);
    fill(getFillColor());
    triangle(ulx, uly, urx, ury, lrx, lry);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 2:20pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/2 "2020-10-27T14:20:59Z")

</div>

I think the way you draw the half circle, it is either facing left or right.

When it’s facing left it’s inside the previous cell.

So in this case you could let the circle start at the right side of its own cell

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 2:22pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/3 "2020-10-27T14:22:27Z")

</div>

> [@Chrisir](#):
>
> you could let the circle start at the right side of its own cell

How would I do that, The Docs weren’t clear on this.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 2:23pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/4 "2020-10-27T14:23:26Z")

</div>

At tw to the x of the circle

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 2:26pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/5 "2020-10-27T14:26:50Z")

</div>

Did you mean add or at?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 2:34pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/6 "2020-10-27T14:34:23Z")

</div>

Oh add

My bad

Chrisir

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 2:35pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/7 "2020-10-27T14:35:09Z")

</div>

Okay, it works now, Thanks!

I do have another problem though, it’s not really seamless.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e5db9db359c2e2830d16099de1f2e3c527b05758.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 2:35pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/8 "2020-10-27T14:35:59Z")

</div>

Are some circles still facing left correctly??

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 2:36pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/9 "2020-10-27T14:36:40Z")

</div>

Yes.

It’s just the fact that this isn’t seamless.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 2:39pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/10 "2020-10-27T14:39:54Z")

</div>

I don’t know

Maybe try noSmooth(); in setup ()

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 2:41pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/11 "2020-10-27T14:41:03Z")

</div>

I meant how the shapes are arranged.

noSmooth() doesn’t do anything relevant.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 2:44pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/12 "2020-10-27T14:44:59Z")

</div>

That’s what I thought

But try it anyway

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [October 27, 2020, 2:46pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/13 "2020-10-27T14:46:40Z")

</div>

noSmooth(); just disables anti-aliasing, it does not make the shapes magically arranged better.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 3:12pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946/14 "2020-10-27T15:12:25Z")

</div>

Err…

I didn’t see flaws in your code

And noSmooth()