/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/b8d8d8-7a9e9f-4f6367-eef5db-fe5f55"; // let curl = "https://coolors.co/083d77-ebebd3-f4d35e-ee964b-f95738"; let curl = "https://coolors.co/ff6666-ccff66-5d2e8c-2ec4b6-f1e8b8"; let bgColor; let seed, noiseArg; let obj, num; 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); bg = genBackground(pal[0], pal[1]); // bg = genBackground(color(300), color(150)); // bg = genBackground(color(100), color(10)); // fbbg = genBackground(pal[2], pal[3]); // fbbg = genBackground(color(300), color(150)); fbbg = genBackground(color(100), color(10)); ef = genEffect(); fb = genFramebuffer(); win = genWindow(); } function update() { fb = genFramebuffer(); } function draw() { 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 = createGraphics(600, 600); // fb.background(0); pg.image(fbbg, 0, 0); // shadow(pg, true); // pg.erase(); let n = 20; let p = 60; for (let i = 0; i < n; i++) { let frame = frameCount + i; let cid = int(frame/(p*4)); // pg.noFill(); pg.strokeWeight(map(i, 0, n-1, 1, 5)); pg.stroke(255); // pg.noFill(); pg.strokeWeight(map(i, 0, n-1, 1, 5)); pg.stroke(lerpColor(pal[0], pal[1], map(i, 0, n-1, 0, 1))); pg.noFill(); pg.strokeWeight(map(i, 0, n-1, 1, 6)); pg.stroke(lerpColor(pal[cid%4], pal[(cid+1)%4], map(i, 0, n-1, 0, 1))); if (int(frame/p)%4==0) { // drawMixHeartLine(pg, // 0, map(easeInOutQuart(map(frame%p, 0, p-1, 0, 1)), 0, 1, 200, 0), // map(i, 0, n-1, 140, 20), // easeInOutQuart(map(frame%p, 0, p-1, 1, 0))); drawMixHeartLine(pg, 0, map(easeInOutQuart(map(frame%p, 0, p-1, 0, 1)), 0, 1, 200, 0), map(i, 0, n-1, 140, 20) * map(frame%p, 0, p-1, 0.5, 1.0), easeInOutQuart(map(frame%p, 0, p-1, 1, 0))); } else if (int(frame/p)%4==1) { drawMixHeartCircle(pg, 0, 0, map(i, 0, n-1, 140, 20), easeInOutQuart(map(frame%p, 0, p-1, 1, 0))); } else if (int(frame/p)%4==2) { drawMixHeartCircle(pg, 0, 0, map(i, 0, n-1, 140, 20), easeInOutQuart(map(frame%p, 0, p-1, 0, 1))); } else { // drawMixHeartLine(pg, // 0, map(easeInOutQuart(map(frame%p, 0, p-1, 0, 1)), 0, 1, 0, -400), // map(i, 0, n-1, 140, 20), // easeInOutQuart(map(frame%p, 0, p-1, 0, 1))); drawMixHeartLine(pg, 0, map(easeInOutQuart(map(frame%p, 0, p-1, 0, 1)), 0, 1, 0, -400), map(i, 0, n-1, 140, 20) * map(frame%p, 0, p-1, 1.0, 0.5), easeInOutQuart(map(frame%p, 0, p-1, 0, 1))); } } // pg.noErase(); return pg; } function drawMixHeartCircle(pg, cx, cy, d, e) { let heartV = []; for (let i = 0; i < 360; i++) { let x = 16 * pow(sin(i), 3); let y = 13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i); heartV[i] = createVector(x*d/16+cx, y*d/16+cy); } let circleV = []; for (let i = 0; i < 360; i++) { circleV[i] = createVector(sin(i)*d*0.7+cx, cos(i)*d*0.7+cy); } pg.push(); pg.translate(600/2, 600/2); pg.rotate(PI); pg.beginShape(); for (let i = 0; i < 360; i++) { // let v = p5.Vector.lerp(heartV[i], circleV[i], e); let v = p5.Vector.lerp(circleV[i], heartV[i], e); pg.vertex(v.x, v.y); } pg.endShape(CLOSE); pg.pop(); } function drawMixHeartLine(pg, cx, cy, d, e) { let heartV = []; for (let i = 0; i < 360; i++) { let x = 16 * pow(sin(i), 3); let y = 13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i); heartV[i] = createVector(x*d/16+cx, y*d/16+cy); } let lineV = []; for (let i = 0; i < 360; i++) { lineV[i] = createVector(cx, cos(i)*d*1.2+cy); } pg.push(); pg.translate(600/2, 600/2); pg.rotate(PI); pg.beginShape(); for (let i = 0; i < 360; i++) { let v = p5.Vector.lerp(heartV[i], lineV[i], e); // let v = p5.Vector.lerp(lineV[i], heartV[i], e); pg.vertex(v.x, v.y); } pg.endShape(CLOSE); pg.pop(); } 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 = 3; pg.drawingContext.shadowOffsetY = 3; pg.drawingContext.shadowBlur = 6; pg.drawingContext.shadowColor = color(30); // drawingContext.shadowColor = bgColor; } else { pg.drawingContext.shadowOffsetX = 0; pg.drawingContext.shadowOffsetY = 0; pg.drawingContext.shadowBlur = 0; } } function keyPressed() { if (keyCode == ENTER) { save('200124.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; }