/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/a40e4c-2c2c54-acc3a6-f5d6ba-f49d6e"; let curl = "https://coolors.co/eef4d4-daefb3-ea9e8d-d64550-1c2826"; let bgColor; let seed, noiseArg; let obj, num; let cs, ds, ps; let bg, fb, ef, win; let maxDepth; 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 = []; cs = []; ds = []; ps = []; for (let i = 0; i < 5; i++) { let x = random(120, 480); // cs[i] = createVector(map(i, 0, 3-1, 120, 480), 100); cs[i] = createVector(x, 100); ds[i] = map(i, 0, 5-1,10, 20); ps[i] = int(random(120)); obj[i] = new Bubble(x, 0-10); } genEffect(); // genFramebuffer(); genBackground(); genWindow(); } function update() { } 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); push(); translate(0, 340); image(bg, 80, 0, 440, 120); for (let i = 0; i < cs.length; i++) { let e = easeInQuart(map((frameCount+ps[i])%160, 0, 160-1, 0, 1)); cs[i].y = map(e, 0, 1, -200, 200); if (cs[i].y > 0) { cs[i].y = map(e, 0, 1, -200+120, 200-120); obj[i].draw(); obj[i].update(); } else { obj[i].init(); } strokeWeight(3); stroke(255); circle(cs[i].x, cs[i].y, ds[i]); if ((frameCount+ps[i])%160 == 160-1) { let x = random(120, 480); cs[i].x = x; obj[i].x = x; } } pop(); image(ef, 0, 0); image(win, 0, 0); pop(); update(); } function genFramebuffer(){ fb = createGraphics(600, 600); fb.push(); fb.translate(600/2, 600/2); // circle(); fb.pop(); } function genBackground() { bg = createGraphics(600, 600); let res = 180; let d = 600 / res + 1; bg.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(pal[0], pal[1], map(j + ns, 0, res - 1, 0, 1)); bg.stroke(col); bg.fill(col); bg.rect(map(i, 0, res - 1, 0, 600), map(j, 0, res - 1, 0, 600), d, d); } } bg.rectMode(CORNER); } function genEffect() { ef = createGraphics(600, 600); // glitch ef.strokeWeight(1); for (let i = 0; i < 600 / 4; i++) { ef.stroke(red(bgColor), green(bgColor), blue(bgColor), random(30)); let px = random(600); let py = random(600); ef.line(px, py, px, py + 200); } // noise ef.strokeWeight(1); for (let i = 0; i < 600 * 600 / 20; i++) { ef.stroke(red(bgColor), green(bgColor), blue(bgColor), random(100)); let px = random(600); let py = random(600); ef.point(px, py); } } 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(bShadow) { if (bShadow) { drawingContext.shadowOffsetX = 3; drawingContext.shadowOffsetY = 3; drawingContext.shadowBlur = 6; drawingContext.shadowColor = color(30); // drawingContext.shadowColor = bgColor; } else { drawingContext.shadowOffsetX = 0; drawingContext.shadowOffsetY = 0; drawingContext.shadowBlur = 0; } } function keyPressed() { if (keyCode == ENTER) { save('200124.png'); } } function genWindow() { win = createGraphics(600, 600); let w = 600 / 30; win.noStroke(); win.fill(255); win.rect(0, 0, 600, w); win.rect(0, 600 - w, 600, w); win.rect(0, 0, w, 600); win.rect(600 - w, 0, w, 600); } 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 Bubble { constructor(_x, _y) { this.x = _x; this.y = _y; this.f = 0; this.dxs = []; this.dys = []; this.ps = []; this.ds = []; for (let i = 0; i < 12; i++) { let a = random(-90-60, -90+60); let d = random(30, 100); this.dxs[i] = cos(a) * d; this.dys[i] = sin(a) * d * 1.1; // this.ps[i] = map(i, 0, 20-1, 0, 120); this.ds[i] = map(abs(-90-a), 0, 30, 40, 20); } } update() { this.f++; } draw() { push(); translate(this.x, this.y); noStroke(); fill(255); for (let i = 0; i < this.dxs.length; i++) { let e = easeInQuart(map(this.f%160, 0, 160-1, 0, 0.8)); let x = map(e, 0, 1, 0, this.dxs[i]); let y = map(e, 0, 1, 0, this.dys[i]); let d = map(e, 0, 1, 10, this.ds[i]); circle(x, y, d); } pop(); } init() { this.f = 0; } }

plop plot