# 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() {
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);
}
}
``````

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?

Chrisir

Okay, it works now, Thanks!

I do have another problem though, itâ€™s not really seamless.

Are some circles still facing left correctly??

Yes.

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

Errâ€¦

I didnâ€™t see flaws in your code

And noSmooth()