/** * color pallet */ let curl = "https://coolors.co/dd7373-3b3561-ead94c-d1d1d1-51a3a3"; let words = [ 'CONTROL', 'LOGIC', 'HATE', 'KISS', 'BREAK', 'HESITATE', 'NEGATIVE', 'POSITIVE', 'LOVE', 'PEACE', 'WORLD', 'WAR', 'PANIC', 'BLACK', 'WHITE' ]; let str; let bgColor; let seed, noiseArg; let bg, fb, ef, win; let fbbg; let buff; let obj; let obj1, obj2, obj3; 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 Eye({x: 300, y: 300, d: 80}); str = ''; for (let j = 0; j < 16; j++) { for (let i = 0; i < 10; i++) { str += words[int(random(words.length))] + ' '; } str += '\n'; } buff = createGraphics(600, 600); buff.angleMode(DEGREES); obj1 = new Eye({x: cos( 0-90)*60+300, y: sin( 0-90)*60+380, d: 80}); obj2 = new Eye({x: cos(120-90)*60+300, y: sin(120-90)*60+380, d: 70}); obj3 = new Eye({x: cos(240-90)*60+300, y: sin(240-90)*60+380, d: 60}); 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(0), color(50)); 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); /** fitting canvas scale for window **/ 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); // obj.draw(pg); // buff = createGraphics(600, 600); // buff.angleMode(DEGREES); buff.fill(255, 1); buff.noStroke(); buff.textFont('Impact'); buff.textSize(35); buff.textAlign(CENTER, CENTER); buff.text(str, 600 / 2, 600 / 2); // buff.blendMode(DIFFERENCE); // buff.fill(0); buff.noStroke(); // buff.circle(cos(frameCount*0.5)*200+300, sin(frameCount*0.5)*200+300, 100); let frame = createGraphics(600, 600); frame.angleMode(DEGREES); frame.rectMode(CENTER); frame.noStroke(); frame.fill(0); frame.circle(300, 380, 260); // obj.draw(frame, buff); obj1.draw(frame, buff, 0); obj2.draw(frame, buff, 0+120); obj3.draw(frame, buff, 0+240); pg.image(buff, 0, 0); pg.image(frame, 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; } class Eye { constructor({x: _x, y: _y, d: _d}) { this.x = _x; this.y = _y; this.d = _d; this.step = 120; 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.ta = this.sa + random(-120, 120); this.tr = random(this.d / 4); } draw(_pg, _buff, rot) { 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); _pg.push(); _pg.translate(this.x, this.y); _pg.rotate(rot); // eye1 _pg.strokeWeight(5); _pg.stroke(255); _pg.fill(0); _pg.circle(0, 0, this.d); // eye2 let px = cos(a) * r; let py = sin(a) * r; _pg.noStroke(); _pg.fill(255); _pg.circle(px, py, this.d/2); // eye3 px = cos(a) * r * 1.5; py = sin(a) * r * 1.5; _pg.noStroke(); _pg.fill(0); _pg.circle(px, py, this.d/4); // cover _pg.strokeWeight(10); _pg.stroke(255); _pg.noFill(); _pg.arc(0, this.d/2, this.d*2+20, this.d*2+20, -150, -30); // wink px = cos(a) * r; py = sin(a) * r; 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(255); _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(); // spotlight px = cos(a+rot) * (230 + r * 3) + this.x; py = sin(a+rot) * (230 + r * 3) + this.y; _buff.fill(0); _buff.noStroke(); // _buff.fill(0); _buff.strokeWeight(1); _buff.stroke(255); _buff.circle(px, py, map(r, 0, this.d / 4, 60, 200)); _pg.noFill(); _pg.strokeWeight(1); _pg.stroke(255, 100); px = cos(a) * (230 + r * 3); py = sin(a) * (230 + r * 3); _pg.circle(px, py, map(r, 0, this.d / 4, 60, 200)); _pg.pop(); this.frame++; } setPos(_x, _y) { this.x = _x; this.y = _y; } }

Monitoring your speech