# Randomized Overlapping Translucent Quadrilaterals

This sketch is composed of randomized overlapping translucent quadrilaterals.

The sketch in draw in black, white, and gray in order to favor form over color. It is based on a regular grid of coordinate pairs. The actual vertices of the quadrilaterals are computed by adding a random factor to the coordinates in the grid. This causes the quadrilaterals to overlap. The fill is translucent, enabling the overlaps to be visible. Before any of them are drawn, the specifications for all of the quadrilaterals are computed, and the they are pushed onto an Array, which is subsequently shuffled, This is so that the pattern of overlapping is randomized, rather than its being biased by the positions of the quadrilaterals on the canvas.

p5.js code:

``````// Randomized Overlapping Translucent Quadrilaterals
new p5((p) => { // anonymous p5 instance
let b; // background color
let f; // fill color
let s = 32; // Quad size basis (prior to vertex randomization)
let quads = []; // Array of Quads

p.setup = () => {
p.createCanvas(256, 256);
b = p.color(0);
f = p.color(255, 255, 255, 192); // include some transparency
p.noStroke();
p.noLoop();
};

p.draw = () => {
p.background(b);
for (let x = 0; x < p.width; x += s) {
for (let y = 0; y < p.height; y += s) {
x + p.random(-s / 2, s / 2),
y + p.random(-s / 2, s / 2),
x + s + p.random(-s / 2, s / 2),
y + p.random(-s / 2, s / 2),
x + s + p.random(-s / 2, s / 2),
y + s + p.random(-s / 2, s / 2),
x + p.random(-s / 2, s / 2),
y + s + p.random(-s / 2, s / 2),
f
)
);
}
}
// randomize draw order
for (let i = 0; i < quads.length; i++) {
}
};

class Quad { // a quadrilateral with fill
constructor(x1, y1, x2, y2, x3, y3, x4, y4, f) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.x3 = x3;
this.y3 = y3;
this.x4 = x4;
this.y4 = y4;
this.f = f;
}

show() {
p.fill(this.f);
this.x1,
this.y1,
this.x2,
this.y2,
this.x3,
this.y3,
this.x4,
this.y4
);
};
}; // end class Quad
});
``````
2 Likes