Shapes unexpectedly overlay other shapes

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

The relevant code is as follows

function draw() {
  // 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) {
    arc(x, y + 100, w, h, HALF_PI - TWO_PI, HALF_PI - PI);
  } else if (side <= 0.5) {
    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) {
    triangle(ulx, uly, llx, lly, urx, ury);
    triangle(llx, lly, urx, ury, lrx, lry);
  } else if (direction <= 0.5) {
    triangle(ulx, uly, llx, lly, lrx, lry);
    triangle(ulx, uly, urx, ury, lrx, lry);

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

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

At tw to the x of the circle

Did you mean add or at?

Oh add

My bad


Okay, it works now, Thanks!

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

Are some circles still facing left correctly??


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

I don’t know

Maybe try noSmooth(); in setup ()

I meant how the shapes are arranged.

noSmooth() doesn’t do anything relevant.

1 Like

That’s what I thought

But try it anyway

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

1 Like


I didn’t see flaws in your code

And noSmooth()