/** * color pallet */ let curl = "https://coolors.co/dd7373-3b3561-ead94c-d1d1d1-51a3a3"; // let curl = "https://coolors.co/ffc857-e9724c-c5283d-481d24-255f85"; let p, r, b; let SIZE, DEG; let win; function setup() { createCanvas(windowWidth, windowHeight); background(30); strokeJoin(ROUND); // noLoop(); frameRate(0.5); pal = createPallete(curl); let cid = int(random(pal.length)); bgColor = pal[cid]; pal.splice(cid, 1); pal = shuffle(pal); win = genWindow(); // SIZE = 450; DEG = 5; SIZE = 450; DEG = int(random(2, 6)); } function draw() { background(30); /** fitting canvas scale for window **/ push(); translate((width - min(width, height)) / 2, 0); scale(min(width, height) / 600); p = []; r = []; b = []; recursive(300, 300, SIZE, SIZE, DEG); pal = shuffle(pal); shadow(this, false); neon(this, true, pal[0]); blendMode(ADD); let d = SIZE/(2**DEG) / 10; drawDigitalBox(600/2, 600/2, SIZE*2, SIZE*2, d); // let e = easeInElastic(map(frameCount%120, 0, 120-1, 0, 1)); // let col = color(250, map(pow(e, 4), 0, 1, 0, 250)); for (let i = 0; i < b.length; i++) { if (b[i]==0) { let col = pal[0]; drawDigitalBox(p[i].x, p[i].y, r[i], r[i], d, col); } else { let col = color(red(pal[1]), green(pal[1]), blue(pal[1]), 35); drawDigitalBox(p[i].x, p[i].y, r[i], r[i], d, col); } } blendMode(BLEND); neon(this, false); shadow(this, true); image(win, 0, 0); pop(); } function drawDigitalBox(x, y, w, h, d, col=color(250)) { // drawSegment(x, y-h/2, w - d * 4, d, true); // drawSegment(x, y+h/2, w - d * 4, d, true); // drawSegment(x-h/2, y, h - d * 4, d, false); // drawSegment(x+h/2, y, h - d * 4, d, false); let min_w = SIZE / (2**DEG); let n = w / min_w; let m = h / min_w; for (let i = 0; i < n; i++) { for (let j = 0; j < m+1; j++) { // if (j > 0 && j < n) { continue; } if (j > 0 && j < n) { fill(color(250, 10)); stroke(color(250, 10));} else { fill(col); stroke(col); } drawSegment( map(i, 0, max(n-1, 1), x-w/2+min_w/2, x+w/2-min_w/2), map(j, 0, m, y-h/2, y+h/2), min_w - d * 4, d, true); } } for (let j = 0; j < m; j++) { for (let i = 0; i < n+1; i++) { // if (i > 0 && i < n) { continue; } if (i > 0 && i < n) { fill(color(250, 10)); stroke(color(250, 10));} else { fill(col); stroke(col); } drawSegment( map(i, 0, n, x-w/2, x+w/2), map(j, 0, max(m-1, 1), y-h/2+min_w/2, y+h/2-min_w/2), min_w - d * 4, d, false); } } } function drawSegment(x, y, w, h, horz=true) { strokeWeight(h); if (horz) { beginShape(); vertex(x-w/2, y); vertex(x-w/2+h/2, y-h/2); vertex(x+w/2-h/2, y-h/2); vertex(x+w/2, y); vertex(x+w/2-h/2, y+h/2); vertex(x-w/2+h/2, y+h/2); endShape(CLOSE); } else { beginShape(); vertex(x, y-w/2); vertex(x-h/2, y-w/2+h/2); vertex(x-h/2, y+w/2-h/2); vertex(x, y+w/2); vertex(x+h/2, y+w/2-h/2); vertex(x+h/2, y-w/2+h/2); endShape(CLOSE); } } function recursive(x, y, w, h, depth) { if (depth-1 > 0) { if (random(1e+4) < 5e+3) { recursive(x - w / 4, y - h / 4, w / 2, h / 2, depth - 1); } else { p.push(createVector(x - w / 4, y - h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); } if (random(1e+4) < 5e+3) { recursive(x + w / 4, y - h / 4, w / 2, h / 2, depth - 1); } else { p.push(createVector(x + w / 4, y - h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); } if (random(1e+4) < 5e+3) { recursive(x - w / 4, y + h / 4, w / 2, h / 2, depth - 1); } else { p.push(createVector(x - w / 4, y + h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); } if (random(1e+4) < 5e+3) { recursive(x + w / 4, y + h / 4, w / 2, h / 2, depth - 1); } else { p.push(createVector(x + w / 4, y + h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); } } if (depth==1) { p.push(createVector(x - w / 4, y - h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); p.push(createVector(x + w / 4, y - h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); p.push(createVector(x - w / 4, y + h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); p.push(createVector(x + w / 4, y + h / 4)); r.push(w / 2); b.push(random(1e+4) < 5e+3); } } function genWindow() { pg = createGraphics(600, 600); let w = 600 / 30; pg.noStroke(); pg.fill(255); pg.rect(0, 0, 600, w); pg.rect(0, 600 - w, 600, w); pg.rect(0, 0, w, 600); pg.rect(600 - w, 0, w, 600); return pg; } function easeInQuart(t) { return 1 + (--t) * t * t * t * t; } function easeInOutQuart(t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; } function easeInElastic(t) { return (0.01 - 0.01 / t) * Math.sin(60 * t) + 1; } function normDist(x, mu, sigma) { return (exp(-pow(x - mu, 2) / (2 * pow(sigma, 2)))) / sqrt(2 * PI * sigma); } function neon(pg, bNeon, col=color(30), blur=10) { if (bNeon) { pg.drawingContext.shadowBlur = blur; pg.drawingContext.shadowColor = col; } else { pg.drawingContext.shadowBlur = 0; } } function shadow(pg, bShadow, col=color(30)) { if (bShadow) { pg.drawingContext.shadowOffsetX = 5; pg.drawingContext.shadowOffsetY = 5; pg.drawingContext.shadowBlur = 10; pg.drawingContext.shadowColor = col; // pg.drawingContext.shadowColor = color(30); // pg.drawingContext.shadowColor = color(200); // pg.drawingContext.shadowColor = color(pal[1]); // drawingContext.shadowColor = bgColor; } else { pg.drawingContext.shadowOffsetX = 0; pg.drawingContext.shadowOffsetY = 0; pg.drawingContext.shadowBlur = 0; } } function createPallete(_url) { let slash_index = _url.lastIndexOf('/'); let pallate_str = _url.slice(slash_index + 1); let arr = pallate_str.split('-'); for (let i = 0; i < arr.length; i++) { arr[i] = color('#' + arr[i]); } return arr; } function keyPressed() { if (keyCode == ENTER) { save('screenshot.png'); } }