let w = 900, h = 900; let s = 10; let type; let grid = 52; let hh = (h - s*8) / grid; let ww = (w - s*8) / grid; let r = 32; let ss = 25; let ratio = 14/7; let pal = ['#ECAA9C','#B1D1C6', '#2E5B8B', '#F2CA60', '#d4c7a3', '#DE7830', '#513C2C', '#1F3858', '#C9292E', '#bfb8a3']; function mousePressed() { redraw(); } function setup() { createCanvas(w, h); pixelDensity(2); noLoop(); smooth(); colorMode(HSB, 360, 100, 100, 100); } /// ------------------------------- /// function draw() { r = random(12,36); ss = random(6,24); ratio = random(9,18)/7; print("r ..." + r + "/ ss ..." + ss + "/ratio ..." + ratio); rectMode(CORNER); background(220); var nx, ny, x1, y1, x2, y2, x3, y3; drawGrids(); var ctx = drawingContext; push(); translate(s*4, s*4); fill(0,0,0,100); for(let i = 0; i < grid; i++) { ny = i * (r*ratio) - s*2; stroke(0,0,0,100); for(let j = 0; j < grid; j++) { nx = j * (r*ratio) - s*2; setShadowNone(ctx); fill(getColor()); rect(nx, ny, ss); push(); if(j % 2 == 0) { if(i % 2 == 0) { if(random() < 0.87) { setShadowRight(ctx); line(nx, ny, nx, ny + (r*ratio)); } if(random() < 0.91) { setShadowUp(ctx); line(nx, ny+ss, nx + (r*ratio), ny+ss); } } else { if(random() < 0.91) { setShadowLeft(ctx); line(nx+ss, ny, nx+ss, ny + (r*ratio)); } if(random() < 0.81) { setShadowDown(ctx); line(nx, ny, nx + (r*ratio), ny); } } } else { if(i % 2 == 0) { if(random() < 0.84) { setShadowLeft(ctx); line(nx+ss, ny, nx+ss, ny + (r*ratio)); } if(random() < 0.82) { setShadowDown(ctx); line(nx, ny, nx + (r*ratio), ny); } } else { if(random() < 0.77) { setShadowRight(ctx); line(nx, ny, nx, ny + (r*ratio)); } if(random() < 0.82) { setShadowUp(ctx); line(nx, ny+ss, nx + (r*ratio), ny+ss); } } } pop(); } } pop(); drawFrame(); } // ------------------------------------- // // ------------------------------------- // // ------------------------------------- // function drawColorLinesYoko(x, y, i) { var k; strokeWeight(2); var hon = 10; var offset = 100; push(); if(i % 2 == 0) { translate(0, y+offset); for(let i = 0; i < hon; i++) { for(let j = 0; j < 16; j++) { k = j * (r*ratio) - s*2; if(j % 2 == 0) { line(k, i*3-3, k + 65, i*3-3); } } } } else { translate(0, y+offset); for(let i = 0; i < hon; i++) { for(let j = 0; j < 16; j++) { k = j * (r*ratio) - s*2; if(j % 2 == 0) { line(k+s*6, i*3-3, k+s*6 + 65, i*3-3); } } } } pop(); } /// ------------------------------- /// function setShadowUp(ctx) { ctx.shadowColor = color(10); ctx.shadowBlur = 5; ctx.shadowOffsetY = -5; ctx.shadowOffsetX = 0; } function setShadowDown(ctx) { ctx.shadowColor = color(10); ctx.shadowBlur = 5; ctx.shadowOffsetY = 5; ctx.shadowOffsetX = 0; } function setShadowRight(ctx) { ctx.shadowColor = color(10); ctx.shadowBlur = 5; ctx.shadowOffsetY = 0; ctx.shadowOffsetX = 5; } function setShadowLeft(ctx) { ctx.shadowColor = color(10); ctx.shadowBlur = 5; ctx.shadowOffsetY = 0; ctx.shadowOffsetX = -5; } function setShadowNone(ctx) { ctx.shadowOffsetY = 0; ctx.shadowOffsetX = 0; ctx.shadowBlur = 0; } // ------------------------------------- // // ------------------------------------- // // ------------------------------------- // function drawGrids() { 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); } } } function drawFrame() { 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); } function getColor() { var l = pal.length; var cc = random(); shuffle(pal, true); if(cc < 1/l) { return pal[0]; } else if (cc < 2/l + .05) { return pal[1]; } else if (cc < 3/l - .03) { return pal[2]; } else if (cc < 4/l + .05) { return pal[3]; } else if (cc < 5/l - .02) { return pal[4]; } else if (cc < 6/l + .06) { return pal[5]; } else if (cc < 7/l + .02) { return pal[6]; } else if (cc < 8/l - .01) { return pal[7]; } else if (cc < 9/l + .02) { return pal[8]; } else { return pal[9]; } }

My Sketch 20220928