/** * color pallet */ let curl = "https://coolors.co/dd7373-3b3561-ead94c-d1d1d1-51a3a3"; let bgColor; let seed, noiseArg; let bg, fb, ef, win; let fbbg; let cx1, cy1, per1; let cx2, cy2, per2; let cx3, cy3, per3; 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); cx1 = []; cy1 = []; per1 = []; for (let i = 0; i < 5; i++) { cx1[i] = 300; cy1[i] = map(i, 0, 5, 0, 600); per1[i] = map(abs(cy1[i]-300), 0, 300, 1.0, 0.0); } cx2 = []; cy2 = []; per2 = []; for (let i = 0; i < 3; i++) { cx2[i] = 120; cy2[i] = map(i, 0, 3, 0, 600); per2[i] = map(abs(cy2[i]-300), 0, 300, 0.8, 0.0); } cx3 = []; cy3 = []; per3 = []; for (let i = 0; i < 3; i++) { cx3[i] = 480; cy3[i] = map(i, 0, 3, 0, 600); per3[i] = map(abs(cy3[i]-300), 0, 300, 0.6, 0.0); } bg = genBackground(pal[0], pal[1]); ef = genEffect(); win = genWindow(); fbbg = genBackground(pal[1], pal[2]); 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); /** drawing **/ // let buff = createGraphics(width, height); pg.stroke(0); pg.strokeWeight(3); pg.fill(255); for (let i = 0; i < cx1.length; i++) { drawObjectVert(pg, cx1[i], cy1[i], sin(frameCount+per1[i]*90)*per1[i]); // drawObjectHorz(pg, cy[i], cx[i], sin(frameCount+per[i]*90)*per[i]); } for (let i = 0; i < cx2.length; i++) { drawObjectVert(pg, cx2[i], cy2[i], sin(frameCount*1.2+per2[i]*90)*per2[i]); // drawObjectHorz(pg, cy[i], cx[i], sin(frameCount+per[i]*90)*per[i]); } for (let i = 0; i < cx3.length; i++) { drawObjectVert(pg, cx3[i], cy3[i], sin(frameCount*1.4+per3[i]*90)*per3[i]); // drawObjectHorz(pg, cy[i], cx[i], sin(frameCount+per[i]*90)*per[i]); } for (let i = 0; i < cx1.length; i++) { cx1[i] = cx1[i]; cy1[i] = (cy1[i] + 1) % 600; per1[i] = map(abs(cy1[i]-300), 0, 300, 1.0, 0.0); } for (let i = 0; i < cx2.length; i++) { cx2[i] = cx2[i]; cy2[i] = (cy2[i] + 1.2) % 600; per2[i] = map(abs(cy2[i]-300), 0, 300, 0.8, 0.0); } for (let i = 0; i < cx3.length; i++) { cx3[i] = cx3[i]; cy3[i] = (cy3[i] + 1.4) % 600; per3[i] = map(abs(cy3[i]-300), 0, 300, 0.6, 0.0); } return pg; } function drawObjectVert(pg, cx, cy, sc){ let dy = 50*sc; let dx = 150*sc; let mx = 30; pg.beginShape(); pg.vertex(cx, cy); for (let i = 180; i < 270-10; i++) { pg.vertex(cos(i)*dx+cx-mx, sin(i)*dy+cy); } pg.bezierVertex(cos(270+10)*dx+cx-mx, sin(270+10)*dy+cy, cx-10, cy-dy*2, cx-10, cy-dy*4); pg.vertex(cx-10, 0); pg.vertex(cx, 0); pg.vertex(cx, cy); for (let i = 180; i > 90+10; i--) { pg.vertex(cos(i)*dx+cx-mx, sin(i)*dy+cy); } pg.bezierVertex(cos( 90-10)*dx+cx-mx, sin( 90-10)*dy+cy, cx-10, cy+dy*2, cx-10, cy+dy*4); pg.vertex(cx-10, 600); pg.vertex(cx, 600); pg.vertex(cx, cy); for (let i = 180; i < 270-10; i++) { pg.vertex(cos(180-i)*dx+cx+mx, sin(180-i)*dy+cy); } pg.bezierVertex(cos(180-(270+10))*dx+cx+mx, sin(180-(270+10))*dy+cy, cx+10, cy-dy*2, cx+10, cy-dy*4); pg.vertex(cx+10, 0); pg.vertex(cx, 0); pg.vertex(cx, cy); for (let i = 180; i > 90+10; i--) { pg.vertex(cos(180-i)*dx+cx+mx, sin(180-i)*dy+cy); } pg.bezierVertex(cos(180-( 90-10))*dx+cx+mx, sin(180-( 90-10))*dy+cy, cx+10, cy+dy*2, cx+10, cy+dy*4); pg.vertex(cx+10, 600); pg.vertex(cx, 600); pg.endShape(CLOSE); } 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; }

欧風な柱 / Entasis