/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/e3170a-a9e5bb-fcf6b1-f7b32b-2d1e2f"; let curl = "https://coolors.co/dd7373-3b3561-ead94c-d1d1d1-51a3a3"; let bgColor; let seed, noiseArg; let bg, fb, ef, win; let fbbg; let obj1, obj2; let buf1, buf2; 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); obj1 = []; obj2 = []; // for (let i = 0; i < 16; i++) { // for (let j = 0; j < 16; j++) { // obj[i*16+j] = createVector( // map(i, 0, 16-1, 150, 450), // map(j, 0, 16-1, 150, 450) // ); // } // } for (let i = 0; i < 360; i++) { obj1[i] = createVector(cos(i)*150+300, sin(i)*150+300); obj2[i] = createVector(cos(i)*100+300, sin(i)*100+300); } 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)); buf1 = createGraphics(600, 600); buf2 = createGraphics(600, 600); 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); pg.angleMode(DEGREES); // shadow(pg, true); pg.blendMode(DIFFERENCE); pg.noStroke(); pg.fill(255); pg.circle(300, -600, 2000); buf1.noFill(); buf1.stroke(255); buf1.strokeWeight(10); buf1.circle(300, 300, 300); for (let i = 0; i < obj1.length; i++) { buf1.strokeWeight(2); buf1.stroke(255, 50); buf1.point(obj1[i].x, obj1[i].y); } for (let i = 0; i < obj1.length; i++) { let n = noise(1e+1, obj1[i].x*6e-3, obj1[i].y*6e-3); n = floor(n * 12) / 12; let a = map(n, 0, 1, -360, 360); obj1[i].x += cos(a); obj1[i].y += sin(a); } // buf2.noFill(); buf2.stroke(255); buf2.strokeWeight(10); buf2.fill(255); buf2.noStroke(); buf2.circle(300, 300, 200); for (let i = 0; i < obj2.length; i++) { buf2.strokeWeight(2); buf2.stroke(255, 50); buf2.point(obj2[i].x, obj2[i].y); } for (let i = 0; i < obj2.length; i++) { let n = noise(1e+2, obj2[i].x*6e-3, obj2[i].y*6e-3); n = floor(n * 12) / 12; let a = map(n, 0, 1, -360, 360); obj2[i].x += cos(a); obj2[i].y += sin(a); } pg.image(buf1, 0, 0); pg.image(buf2, 0, 0); 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(200); // 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 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 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; }