/** * 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/565554-2e86ab-f6f5ae-f5f749-f24236"; 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 = new Gene(); // obj = new Eye({x: 300, y: 300, d: 150}); // bg = genBackground(pal[0], pal[1]); bg = genBackground(color(255), 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)); // fbbg = genBackground(color(225), color(225)); 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.angleMode(DEGREES); obj.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 Gene { constructor() { this.obj = []; this.eid = []; this.eid[0] = int(random(12)); for (let i = 1; i < 5; i++) { this.eid[i] = (this.eid[i-1] + int(random(2, 4))) % 12; } this.cid = []; for (let i = 0; i < 12; i++) { if (!this.eid.includes(i)) { append(this.cid, i); } } for (let i = 0; i < 12; i++) { let a = map(i, 0, 12, 0, 360); let n = random(0.8, 1); let x = cos(a) * 120; let y = sin(a) * 150; let dx = random(60, 125); let dy = random(60, 125); if (this.eid.includes(i)) { this.obj[i] = new Eye({x: x, y: y, d: random(80, 100)}); } else { this.obj[i] = new Cell({x: x, y: y, dx: dx, dy: dy}); } } this.step = 180; this.frame = int(random(this.step)); this.sa = 0; this.ea = this.sa; } update(){ this.sa = this.ea; this.ea = this.ea + 360 / this.obj.length * int(random(this.obj.length / 3)); } draw(_pg) { if (this.frame % this.step == 0) { this.update(); } let t, e; t = map(this.frame % this.step, 0, this.step-1, 0, 1); e = easeInQuart(t); let ta = map(e, 0, 1, this.sa, this.ea); for (let i = 0; i < this.obj.length; i++) { let a = map(i, 0, this.obj.length, 0+ta, 360+ta); let x = cos(a) * 120; let y = sin(a) * 150; x += cos(noise(i, this.frame*4e-3)*360) * noise(i*1e+2, this.frame*4e-3) * 20; y += sin(noise(i, this.frame*4e-3)*360) * noise(i*1e+2, this.frame*4e-3) * 20; this.obj[i].setPos(x, y); } _pg.push(); _pg.translate(300, 300); for (let i = 0; i < this.cid.length; i++) { let idx = this.cid[i]; this.obj[idx].draw(_pg); } for (let i = 0; i < this.eid.length; i++) { let idx = this.eid[i]; this.obj[idx].draw(_pg); } _pg.pop(); this.frame++; } } class Eye { constructor({x: _x, y: _y, d: _d}) { this.x = _x; this.y = _y; this.d = _d; this.step = 100; this.frame = int(random(this.step)); this.a = random(180); this.r = random(this.d / 4); this.sa = random(360); this.ta = random(180); this.sr = random(this.d / 4); this.tr = random(this.d / 4); } update() { this.sa = this.ta; this.sr = this.tr; this.ta = random(360); this.tr = random(this.d / 4); } draw(_pg) { if (this.frame % this.step == 0) { this.update(); } // eye move let t, e; t = map(this.frame % this.step, 0, this.step-1, 0, 1); t = min(t * 1.2, 1); e = easeInQuart(t); let a = map(e, 0, 1, this.sa, this.ta); let r = map(e, 0, 1, this.sr, this.tr); // eye1 _pg.noStroke(); _pg.fill(200, 0, 0); _pg.circle(this.x, this.y, this.d); // eye2 let px = cos(a) * r + this.x; let py = sin(a) * r + this.y; _pg.noStroke(); _pg.fill(225); _pg.circle(px, py, this.d/2); // eye3 px = cos(a) * r * 1.5 + this.x; py = sin(a) * r * 1.5 + this.y; _pg.noStroke(); _pg.fill(0, 100, 200); _pg.circle(px, py, this.d/4); // wink px = cos(a) * r + this.x; py = sin(a) * r + this.y; let cd = map(pow(sin(this.frame+map(noise(this.frame*1e-2), 0, 1, 1, 10)), 80), 0, 1, -1, 1); _pg.noStroke(); _pg.fill(200, 0, 0); _pg.beginShape(); for (let i = -180; i < 0; i++) { _pg.vertex(cos(i)*this.d/4 + px, sin(i)*this.d/4 + py) } // upper for (let i = 0; i < 180; i++) { _pg.vertex(cos(i)*this.d/4 + px, sin(i)*(this.d/4*cd) + py) } // lower _pg.endShape(); this.frame++; } setPos(_x, _y) { this.x = _x; this.y = _y; } } class Cell { constructor({x: _x, y: _y, dx: _dx, dy: _dy}) { this.x = _x; this.y = _y; this.dx = _dx; this.dy = _dy; this.step = 100; this.frame = int(random(this.step)); } update() { this.sa = this.ta; this.sr = this.tr; this.ta = random(360); this.tr = random(this.d / 4); } draw(_pg) { // if (this.frame % this.step == 0) { this.update(); } _pg.noStroke(); _pg.fill(200, 0, 0); _pg.ellipse(this.x, this.y, this.dx, this.dy); this.frame++; } setPos(_x, _y) { this.x = _x; this.y = _y; } }

Light of life / いのちの輝き