/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/eef4d4-daefb3-ea9e8d-d64550-1c2826"; // let curl = "https://coolors.co/e56399-d3a588-ece2d0-7fd1b9-7a6563"; // let curl = "https://coolors.co/04e762-f5b700-dc0073-008bf8-89fc00"; let curl = "https://coolors.co/91a6ff-ff88dc-faff7f-ffffff-ff5154"; 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); // obj = new BumpHeart(6, 15, 120); step = 60; obj = []; for (let i = 0; i < 2; i++) { obj[i] = new BumpHeart( map(i, 0, 2-1, 4, 7), map(i+1, 0, 2-1, 13, 20), step); } ef = genEffect(); bg = genBackground(pal[0], pal[1]); fbbg = genBackground(pal[1], pal[2]); fb = genFramebuffer(); win = genWindow(); } function update() { fb = genFramebuffer(); } function draw() { // randomSeed(seed); background(30); push(); scale(min(width, height) / 600); translate((width - min(width, height)) / 2, 0); 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); pg.erase(); pg.noFill(); pg.strokeWeight(15); shadow(pg, true); // fb.circle(300, 300, 200); pg.push(); pg.translate(600/2, 600/2); pg.rotate(PI); pg.noFill(); pg.stroke(255); pg.strokeWeight(4); obj[1].draw(pg); if (frameCount > 0 && frameCount%step==step-1) { obj[1].update(); } pg.noFill(); pg.stroke(255); pg.strokeWeight(6); obj[0].draw(pg); if (frameCount > 0 && frameCount%step==step-1) { obj[0].update(); } pg.fill(255); pg.noStroke(); pg.beginShape(); for (let i = 0; i < 360; i++) { pg.vertex(16 * pow(sin(i), 3), 13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i)); } pg.endShape(); pg.pop(); pg.noErase(); return pg; } function genBackground(c1, c2) { pg = createGraphics(600, 600); let res = 180; let d = width / 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, width), map(j, 0, res - 1, 0, height), d, d); } } pg.rectMode(CORNER); return pg; } function genEffect() { pg = createGraphics(600, 600); // glitch pg.strokeWeight(1); for (let i = 0; i < width / 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 < width * height / 20; i++) { pg.stroke(red(bgColor), green(bgColor), blue(bgColor), random(100)); let px = random(width); let py = random(height); 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; } class BumpHeart{ constructor(d1, d2, step){ this.d1 = d1; this.d2 = d2; this.step = step; this.p = genPoints(this.d1, this.d2); this.prev_p = this.p; this.next_p = this.p; } update(){ this.prev_p = this.next_p; this.next_p = genPoints(this.d1, this.d2); } draw(pg){ pg.beginShape(); let e = easeInQuart(map(frameCount%this.step, 0, this.step-1, 0, 1)); for (let i = 0; i < this.p.length; i++) { pg.vertex( map(e, 0, 1, this.prev_p[i].x, this.next_p[i].x) * map(e, 0, 1, 0.9, 1.0), map(e, 0, 1, this.prev_p[i].y, this.next_p[i].y) * map(e, 0, 1, 0.9, 1.0) ); } pg.endShape(); } } function genPoints(d1, d2){ let p = []; let as = []; let ras = []; let reg = 360 / 6; for (let i = 0; i < 6; i++) { as[i] = random(reg/2+reg*i-25, reg/2+reg*i+25); ras[i] = random(5, 15); } for (let t = 0; t <= 1800; t++) { let i = map(t, 0, 1800, 0, 360); let idx = int(i/reg); let a = as[idx]; let ra = ras[idx]; let d = d1; if (i > a-ra/2 && i < a-ra/4) { let e = easeInOutQuart(map(i, a-ra/2, a-ra/4, 0, 1)); d = map(e, 0, 1, d1, d2); } if (i >= a-ra/4 && i <= a+ra/4) { d = d2; } if (i > a+ra/4 && i < a+ra/2) { let e = easeInOutQuart(map(i, a+ra/4, a+ra/2, 0, 1)); d = map(e, 0, 1, d2, d1); } let x = 16 * pow(sin(i), 3); let y = 13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i); p[t] = createVector(x*d, y*d); } return p; }

Rhythmic heart