xxxxxxxxxx
let cells = [];
let seg = 20;
let colors = ['#f70640', '#f78e2c', '#fdd903', '#cae509', '#63be93', '#81cfe5', '#299dbf', '#38187d', '#a4459f', '#f654a9', '#2F0A30'];
function setup() {
createCanvas(900, 900);
rectMode(CENTER);
let w = width / seg;
for (let i = 0; i < seg; i++) {
for (let j = 0; j < seg; j++) {
let x = i * w + w / 2;
let y = j * w + w / 2;
cells.push(new Shape(x, y, w));
}
}
shuffle(cells, true);
background(255);
noStroke();
for (let i = 0; i < cells.length; i++) {
let c = cells[i];
fill(random(colors));
square(c.x, c.y, c.w);
if (i > (cells.length * 0.5)) {
form(c.x, c.y, c.w);
}
}
}
function form(x, y, w) {
let s = int(random(2) + 1);
let col = random(colors);
push();
translate(x, y);
rotate(int(random(4)) * TAU / 4);
fill(col);
beginShape();
vertex(-w / 2, -w / 2);
vertex(w / 2, -w / 2);
vertex((w / 2) + s * w, (w / 2) + s * w - w);
vertex((w / 2) + s * w, (w / 2) + s * w);
vertex((w / 2) + s * w - w, (w / 2) + s * w);
vertex(-w / 2, w / 2);
endShape(CLOSE);
fill(255, 50);
beginShape();
vertex(-w / 2, -w / 2);
vertex(w / 2, -w / 2);
vertex((w / 2) + s * w, (w / 2) + s * w - w);
vertex((w / 2) + s * w, (w / 2) + s * w);
endShape(CLOSE);
fill(0, 50);
beginShape();
vertex(-w / 2, -w / 2);
vertex((w / 2) + s * w, (w / 2) + s * w);
vertex((w / 2) + s * w - w, (w / 2) + s * w);
vertex(-w / 2, w / 2);
endShape(CLOSE);
fill(col);
rect(w * s, w * s, w);
pop();
}
class Shape {
constructor(x, y, w) {
this.x = x;
this.y = y;
this.w = w;
}
}