let w = 900, h = 900; let s = 10; let ss = s*6; let g = 10; 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); strokeCap(SQUARE); } function draw() { rectMode(CENTER); shuffle(pal, true); strokeWeight(4); background(220); circleRecusion(ss, ss, w/2-s*6, num); drawGrids(); drawFrame(); } // ------------------------------------- // // ------------------------------------- // // ------------------------------------- // let num = 5; function circleRecusion(x, y, t, n) { var ss = t; var rec = random() < 0.9; var px, py; push(); drawingContext.setLineDash([2, 1]); strokeWeight(2); fill(220); stroke(5); px = x+ss/2; py = y+ss/2; if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } px = x+ss/2; py = h-(y+ss/2); if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } px = w-(x+ss/2); py = y+ss/2; if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } px = w-(x+ss/2); py = h-(y+ss/2); if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } pop(); if(random() < 0.4) { var c1 = color( getColor(x, y) ); if(random() < 0.6) { strokeWeight(4); fill(220); stroke(c1); } else { noStroke(); fill(c1); } px = x+ss/2; py = y+ss/2; if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } line(px, py, px, py+ss/2); px = x+ss/2; py = h-(y+ss/2); if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } line(px, py, px, py-ss/2); px = w-(x+ss/2); py = y+ss/2; if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } line(px, py, px, py+ss/2); px = w-(x+ss/2); py = h-(y+ss/2); if(rec) { circle(px, py, ss); } else { rect(px, py, ss); } line(px, py, px, py-ss/2); } n--; if (n >= 0) { var pp = map(n, 0, num-1, 0.7, 0); var tt = t/2; if (random() > pp) { circleRecusion(x, y, tt, n); } if (random() > pp) { circleRecusion(x+tt, y, tt, n); } if (random() > pp) { circleRecusion(x+tt, y+tt, tt, n); } if (random() > pp) { circleRecusion(x, y+tt, tt, n); } } } // ------------------------------------- // // ------------------------------------- // // ------------------------------------- // 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() { 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(h/2, h-s*2+1, h, s*4); } function getColor(x, y) { var cc = noise(x/g, y/g); 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]; } }