/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/ff6978-fffcf9-b1ede8-6d435a-352d39"; let curl = "https://coolors.co/c05746-adc698-d0e3c4-ffffff-503047"; let bgColor; let seed, noiseArg; let num; let obj; let p; let prev_p, next_p; 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); // obj = new Notes({y: 300}); obj = []; for (let i = 0; i < 5; i++) { obj[i] = new Notes({ y: map(i, 0, 5-1, -150, +150), num: (5-i)*4+15 }); } seed = random(1e+4); noiseArg = random(1e+4); background(bgColor); background(10); // effect(); // noise effect } function draw() { // randomSeed(seed); background(bgColor); // background(10); // blendMode(SCREEN); push(); translate(width/2, height/2); scale(min(width, height) / 600); for (let i = 0; i < obj.length; i++) { obj[i].draw(lerpColor(pal[0], pal[1], map(i, 0, obj.length-1, 0, 1)), i%2!=0); } pop(); noiseArg += 2e-3; /** reset **/ drawingContext.shadowOffsetX = 0; drawingContext.shadowOffsetY = 0; drawingContext.shadowBlur = 0; drawingContext.fillStyle = '#fff'; blendMode(BLEND); // effect(); // drawWindow(); } 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 keyPressed() { if (keyCode == ENTER) { save('200124.png'); } } function effect() { strokeWeight(1); for (let i = 0; i < width * height * 5 / 100; i++) { stroke(0, 0, 0, 10); let px = random(width); let py = random(height); point(px, py); } } function drawWindow() { w = width / 30; noStroke(); fill(255); rect(0, 0, width, w); rect(0, height - w, width, w); rect(0, 0, w, height); rect(width - w, 0, w, height); } 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 Notes{ constructor({y: _y, num:_num}){ this.y = _y; this.step = 80; this.p = []; this.prev_p = []; this.next_p = []; for (let i = 0; i < _num; i++) { this.p[i] = createVector(map(i, 0, _num-1, -200, +200), this.y); this.prev_p[i] = createVector(map(i, 0, _num-1, -200, +200), this.y); this.next_p[i] = createVector(map(i, 0, _num-1, -200, +200), this.y); } } init(){ let d = 100; let num = this.p.length; for (let i = 0; i < num; i++) { this.prev_p[i] = this.next_p[i]; } this.next_p[0] = createVector(-200, this.y); for (let i = 1; i < num-1; i++) { let sign1 = (i%2==0) ? +1 : -1; let sign2 = (int(frameCount/this.step)%2==0) ? +1 : -1; let sign = sign1 * sign2; this.next_p[i] = createVector( map(i, 0, num-1, -200, +200), constrain(this.next_p[i-1].y + random(d) * sign, this.y-d, this.y+d) ); } this.next_p[num-1] = createVector(+200, this.y); if (frameCount%(this.step*4)==0) { for (let i = 0; i < num; i++) { this.next_p[i] = createVector( map(i, 0, num-1, -200, +200), this.y ); } } for (let i = 0; i < num; i++) { this.p[i] = this.prev_p[i]; } } update(){ let t = map(frameCount%this.step, 0, this.step-1, 0, 1); let e = this.easeInQuart(t); for (let i = 0; i < this.p.length; i++) { this.p[i] = p5.Vector.lerp(this.prev_p[i], this.next_p[i], e); } } draw(_col, _bFill){ let r = 400 / this.p.length; if (_bFill) { strokeWeight(5); stroke(_col); fill(_col); } else { strokeWeight(5); stroke(_col); noFill(); } circle(this.p[0].x, this.p[0].y, r); for (let i = 1; i < this.p.length; i++) { let np = this.p[i]; let pp = this.p[i-1]; if (_bFill) { strokeWeight(5); stroke(_col); fill(_col); } // if (_bFill) { noStroke(); fill(_col); r+=10; } else { strokeWeight(5); stroke(_col); noFill(); } circle(np.x, np.y, r); // this.drawConnectLine(this.p[i-1].x, this.p[i-1].y, this.p[i].x, this.p[i].y, r/2, i%2); line(np.x-r/2, np.y, pp.x+r/2, pp.y); } this.update(); if (frameCount%this.step==0) { this.init(); } } drawConnectLine(x1, y1, x2, y2, s, bFlip) { let d = dist(x1, y1, x2, y2); let r = sqrt(d*d - (s*2)*(s*2)); let a = acos(r / d); let ang; let px1, py1, px2, py2; if (bFlip) { ang = atan2(y2-y1, x2-x1); px1 = cos(ang-(90-a))*s+x1; py1 = sin(ang-(90-a))*s+y1; ang = atan2(y1-y2, x1-x2); px2 = cos(ang-(90-a))*s+x2; py2 = sin(ang-(90-a))*s+y2; } else { ang = atan2(y2-y1, x2-x1); px1 = cos(ang+(90-a))*s+x1; py1 = sin(ang+(90-a))*s+y1; ang = atan2(y1-y2, x1-x2); px2 = cos(ang+(90-a))*s+x2; py2 = sin(ang+(90-a))*s+y2; } line(px1, py1, px2, py2); } easeInQuart(t) { return 1 + (--t) * t * t * t * t; } easeInOutQuart(t) { return t < 0.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; } easeInElastic(t) { return (0.01 - 0.01 / t) * Math.sin(60 * t) + 1; } }

Weaver step