/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/ff6666-ccff66-5d2e8c-2ec4b6-f1e8b8"; // let curl = "https://coolors.co/545863-00e8fc-f96e46-f9c846-ffe3e3"; let curl = "https://coolors.co/ee8434-c95d63-ae8799-717ec3-496ddb"; let bgColor; let seed, noiseArg; let obj; let bg, fb, ef, win; let fbbg; let step; function setup() { createCanvas(windowWidth, windowHeight); // colorMode(HSB, 360, 100, 100, 100); angleMode(DEGREES); background(255); // noLoop(); // frameRate(0.5); pal = createPallete(curl); let cid = int(random(pal.length)); bgColor = pal[cid]; pal.splice(cid, 1); pal = shuffle(pal); seed = random(1e+4); noiseArg = random(1e+4); obj = []; for (let i = 0; i < 16; i++) { obj[i] = new Hexagon({phase: int(random(6))}); } bg = genBackground(pal[0], pal[1]); // bg = genBackground(color(300), color(150)); // bg = genBackground(color(100), color(10)); ef = genEffect(); win = genWindow(); // fbbg = genBackground(pal[1], pal[2]); fbbg = genBackground(color(255), color(150)); // fbbg = genBackground(color(100), color(10)); fb = createGraphics(600, 600); fb.copy(fbbg, 0, 0, 600, 600, 0, 0, 600, 600); fb = genFramebuffer(fb); } function update() { fb = genFramebuffer(fb); } function draw() { // pal = shuffle(pal); // fbbg = genBackground(pal[1], pal[2]); // randomSeed(seed); background(30); push(); translate((width - min(width, height)) / 2, 0); scale(min(width, height) / 600); image(bg, 0, 0); image(fb, 0, 0); image(ef, 0, 0); image(win, 0, 0); pop(); update(); } function genFramebuffer(pg){ pg = createGraphics(600, 600); pg.copy(fbbg, 0, 0, 600, 600, 0, 0, 600, 600); shadow(pg, true); pg.blendMode(DIFFERENCE); // pg.strokeWeight(5); pg.stroke(0); pg.fill(255); // pg.circle(300, 300, 50); // pg.circle(sin(frameCount)*100+300, cos(frameCount)*100+300, 50); for (let i = 0; i < obj.length; i++) { obj[i].draw(pg); } return pg; } function genBackground(c1, c2) { pg = createGraphics(600, 600); let res = 180; let d = 600 / res + 1; pg.rectMode(CENTER); let col; for (let i = 0; i < res; i++) { for (let j = 0; j < res; j++) { let ns = map(noise(i*1e-1), 0, 1, -res/20, res/20); col = lerpColor(c1, c2, map(j + ns, 0, res - 1, 0, 1)); pg.stroke(col); pg.fill(col); pg.rect(map(i, 0, res - 1, 0, 600), map(j, 0, res - 1, 0, 600), d, d); } } pg.rectMode(CORNER); return pg; } function genEffect() { pg = createGraphics(600, 600); // glitch pg.strokeWeight(1); for (let i = 0; i < 600 / 4; i++) { pg.stroke(red(bgColor), green(bgColor), blue(bgColor), random(30)); let px = random(600); let py = random(600); pg.line(px, py, px, py + 200); } // noise pg.strokeWeight(1); for (let i = 0; i < 600 * 600 / 20; i++) { pg.stroke(red(bgColor), green(bgColor), blue(bgColor), random(100)); let px = random(600); let py = random(600); pg.point(px, py); } 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 shadow(pg, bShadow) { if (bShadow) { pg.drawingContext.shadowOffsetX = 5; pg.drawingContext.shadowOffsetY = 5; pg.drawingContext.shadowBlur = 10; // pg.drawingContext.shadowColor = color(30); pg.drawingContext.shadowColor = color(pal[0]); // drawingContext.shadowColor = bgColor; } else { pg.drawingContext.shadowOffsetX = 0; pg.drawingContext.shadowOffsetY = 0; pg.drawingContext.shadowBlur = 0; } } function keyPressed() { if (keyCode == ENTER) { save('screenshot.png'); } } 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 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; } class Hexagon{ constructor({phase: _phase}){ this.x = 300; this.y = 300; this.d = 100; this.vi = int(random(6)); this.grid = 10; let arg = this.init(); this.x = arg.x; this.y = arg.y; this.d = arg.d; this.px = arg.x; this.py = arg.y; this.pd = arg.d; this.nx = arg.x; this.ny = arg.y; this.nd = arg.d; this.frame = _phase; this.step = 120; } init(){ let cx = 300, cy = 300; let px = cos(60*this.vi)*200+cx, py = sin(60*this.vi)*200+cy; let gi = int(random(1, this.grid)); let x = map(gi, 0, this.grid, px, cx); let y = map(gi, 0, this.grid, py, cy); // let d = map(gd, 0, 5, 0, 200); let d = map(int(random(gi))+1, 0, this.grid, 0, 200); return {x: x, y: y, d: d}; } update(){ this.px = this.nx; this.py = this.ny; this.pd = this.nd; let arg = this.init(); this.nx = arg.x; this.ny = arg.y; this.nd = arg.d; } draw(_pg){ if (this.frame%this.step==0) { this.update(); } let t = map(this.frame%this.step, 0, this.step-1, 0, 1); let tx = map(easeInQuart(t), 0, 1, this.px, this.nx); let ty = map(easeInQuart(t), 0, 1, this.py, this.ny); let td = map(easeInQuart(t), 0, 1, this.pd, this.nd); _pg.push(); _pg.translate(tx, ty); _pg.fill(255); _pg.noStroke(); _pg.beginShape(); for (let i = 0; i < 6; i++) { _pg.vertex(cos(60*i)*td, sin(60*i)*td); } _pg.endShape(); // _pg.fill(0); _pg.noStroke(); // _pg.beginShape(); // for (let i = 0; i < 6; i++) { _pg.vertex(cos(60*i)*td, sin(60*i)*td); } // _pg.endShape(); _pg.pop(); this.frame++; } }

Glass faceting