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);
}
}
