let w = 900, h = 900; let s = 10; let grid = 30; let g = 1; let ct = 0; let pal = ['#ECAA9C', '#B1D1C6', '#2E5B8B', '#F2CA60', '#d4c7a3', '#DE7830', '#513C2C', '#1F3858', '#C9292E', '#bfb8a3']; function mousePressed() { redraw(); } function setup() { createCanvas(w, h); pixelDensity(2); ct = 0; smooth(); colorMode(HSB, 360, 100, 100, 100); noLoop(); } function draw() { drawImage(); } function drawImage() { background(220); push(); translate(s * 5, s * 5); var m = 80 * s; var v = int(random(8, 24)); var num = v; var size = m / v; noStroke(); for (let i = 0; i < num; i++) { var nx = i * size; for (let j = 0; j < num; j++) { var ny = j * size; if (random() < 0.2) { continue; } var bezel = s * int(random(1, num / 2)); var n1 = 0; //(random(0, num/2)) * s; var n2 = 0; //(random(0, num/2)) * s; var cc = color(getColor()); fill(cc); beginShape(); vertex(nx, ny); vertex(nx + size, ny); vertex(nx + size, ny + size); vertex(nx, ny + size); beginContour(); var nn = random(); if (nn < 0.5) { vertex(nx + bezel, ny + bezel); vertex(nx + bezel, ny + size - bezel); vertex(nx + size - bezel, ny + size - bezel); vertex(nx + size - bezel, ny + bezel); } else if (nn < 0.75) { vertex(nx + bezel + n1, ny + bezel); vertex(nx + size - bezel - n1, ny + size - bezel); vertex(nx + size - bezel, ny + bezel + n2); } else { vertex(nx + bezel + n1, ny + bezel); vertex(nx + bezel, ny + size - bezel - n2); vertex(nx + size - bezel - n1, ny + size - bezel); } // vertex(nx + bezel + n1, ny + bezel); // vertex(nx + bezel, ny + size - bezel - n2); // vertex(nx + size - bezel- n1, ny + size - bezel); // vertex(nx + size - bezel, ny + bezel + n2); endContour(); endShape(); // rect(nx, ny, size); } } noFill(); var k1 = num; var k2 = num / 2; var e1 = random(); var e2 = (1 - e1) / 2; var l = int(random(10, 150)); for (let i = 0; i < l; i++) { var p = random(1, 3); stroke(getColor()); strokeWeight(p); var nx1 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var ny1 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var nx2 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var ny2 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var nx3 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var ny3 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var nx4 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var ny4 = (random() < 0.5) ? int(random(0, k2)) * size + size / 2 : int(random(k2, k1)) * size + size / 2; var type = random(); if (type < e1) { line(nx1, ny1, nx3, ny3); line(nx2, ny2, nx4, ny4); } else if (type < e2) { curve(nx1, ny1, nx2, ny2, nx3, ny3, nx4, ny4); } else { bezier(nx1, ny1, nx2, ny2, nx3, ny3, nx4, ny4); } } pop(); drawGrids(); drawFrame(); } // ------------------------------------- // // ------------------------------------- // // ------------------------------------- // function drawGrids() { push(); stroke(0, 0, 10, 100); strokeWeight(1.5); noFill(); var tx = int(w / s); var ty = int(h / s); for (let i = 0; i < ty; i++) { cy = i * s; for (let j = 0; j < tx; j++) { cx = j * s; point(cx, cy); } } pop(); } function drawFrame() { push(); var s = 10; rectMode(CENTER); noStroke(); fill(220); rect(s * 2 - 1, h / 2, s * 4, h); rect(w - s * 2 + 1, h / 2, s * 4, h); rect(w / 2, s * 2 - 1, w, s * 4); rect(w / 2, h - s * 2 + 1, w, s * 4); pop(); } function getColor() { var cc = random(); var l = pal.length; if (cc < 1 / l) { return pal[0]; } else if (cc < 2 / l) { return pal[1]; } else if (cc < 3 / l) { return pal[2]; } else if (cc < 4 / l) { return pal[3]; } else if (cc < 5 / l) { return pal[4]; } else if (cc < 6 / l) { return pal[5]; } else if (cc < 7 / l) { return pal[6]; } else if (cc < 8 / l) { return pal[7]; } else if (cc < 9 / l) { return pal[8]; } else { return pal[9]; } }

My Sketch 20221102