const w = 1080; const h = 1080; const framesPerStage = 200; let s1Ease; let s2Ease; let palette = []; let executionOrder = []; // 実行順序の配列 let currentIndex = 0; // 実行中の関数インデックス let currentInstance = null; // 実行中の関数インスタンス let currentStartFrame = 0; // 現在の関数のframecount window.setup = function () { createCanvas(w, h); palette = colorArray[0].colors; background(palette[0]); fill(palette[1]); noStroke(); textSize(16); textFont("Open Sans"); textAlign(RIGHT); textStyle(ITALIC); initializeExecutionOrder(); startNextFunction(); }; window.draw = function () { background(palette[0]); if (currentInstance) { currentInstance.update(); currentInstance.draw(); if (currentInstance.isComplete()) { console.log(`Done - function ${currentInstance.id}`); currentIndex++; if (currentIndex < executionOrder.length) { startNextFunction(); } else { noLoop(); // ループさせない場合はコメントアウト initializeExecutionOrder(); loop(); startNextFunction(); // ループさせない場合はコメントアウト } } } }; // FunctionRunner クラス class FunctionRunner { constructor(id, framesPerStage) { this.id = id; // 関数ID this.s1Count = 0; this.s2Count = 0; this.speed = 1 / framesPerStage; // 1フレームあたりの増加量 this.isFinished = false; // 関数の完了フラグ this.overlapTrigger = 0.5; //s2のスタート this.s2Started = false; // s2Count開始フラグ this.s1f = 0; this.s2f = 0; this.vw = w; this.vh = h; this.vr; } draw() { //色の決定 createColor(currentIndex); text(frameCount, this.vw - 30, this.vh - 26); // 描画ロジック switch (this.id) { // ====================================================== case 0: console.log("Open"); this.vr = this.vh / 2; s1Ease = createEasing(0.31, 0.92, 0.7, -0.23); this.s1f = s1Ease(this.s1Count) * this.vr; push(); translate(0, this.vh / 2); rect(0, -this.s1f, this.vw, this.s1f * 2); pop(); break; // ====================================================== case 1: console.log("20250604"); this.overlapTrigger = 0.2; this.vr = this.vh; s1Ease = createEasing(0, 0.67, 0.948, -0.928); s2Ease = createEasing(0.56, 0.13, 0.79, 0.5); this.s1f = s1Ease(this.s1Count) * this.vr; this.s2f = this.vh; if (this.s2Started) { this.s2f = (1 - s2Ease(this.s2Count)) * this.vh; } push(); beginShape(); vertex(0, this.vh); vertex(this.vw, this.vh); for (let i = this.vw; i >= 0; i--) { push(); let angle = (PI / this.vw) * i; let vx = i; let vy1 = Math.exp(-pow(angle - PI / 2 + sin(frameCount * 0.07), 2) * 6) * this.s2f * 0.15; // 中央 let vy2 = Math.exp(-pow(angle - PI / 4 + cos(frameCount * 0.1), 2) * 4) * this.s2f * 0.12; // 左 let vy3 = Math.exp( -pow(angle - (PI * 3) / 4 - sin(frameCount * 0.06), 2) * 5 ) * this.s2f * 0.13; // 右 let vy = vy1 + vy2 + vy3; // 合成 vertex(vx, this.vh - vy - this.s1f); pop(); } endShape(CLOSE); pop(); break; // ====================================================== case 2: console.log("20250601"); push(); this.vr = this.vw * 1.7; this.overlapTrigger = 0; s1Ease = createEasing(1, -0.01, 0.14, -0.07); s2Ease = createEasing(0.1, 0.9, 0.1, 0.99); this.s1f = sin(s1Ease(this.s1Count)) * this.vr; if (this.s2Started) { this.s2f = sin(s2Ease(this.s2Count) * TWO_PI * 2); } translate(this.vw / 2, this.vh / 2 + (this.s2f * this.vw) / 10); beginShape(); for (let i = 0; i < TWO_PI; i += TWO_PI / 60) { let r = this.s1f + this.vw / 10; let stretch = map(abs(this.s2f), 0, 1, 1.2, 0.5); let x = cos(i) * r * (this.s2f < 0 ? stretch : 1); let y = sin(i) * r * (this.s2f > 0 ? stretch : 1); vertex(x, y); } endShape(CLOSE); pop(); break; // ====================================================== case 3: console.log("20250609"); push(); this.vr = this.vh / 5; this.overlapTrigger = 0; s1Ease = createEasing(0.94, 0.26, 0.9, 0.51); s2Ease = createEasing(0.6, 0.94, 1, 0.94); this.s1f = s1Ease(this.s1Count) * this.vh; this.s2f = 0; if (this.s2Started) { this.s2f = (1 - s2Ease(this.s2Count)) * this.vr; } beginShape(); vertex(0, this.vh); let count = 0; for (let i = 0; i < this.vw + 1; i++) { push(); let vy1 = sin(i * 0.02 + frameCount * 0.25) * this.s2f; let vy2 = abs(sin(i * 0.05 - frameCount * 0.15)) * this.s2f; let vy3 = sin(i * 0.01 + frameCount * 0.1) * this.s2f * 0.5; let vy = vy1 + vy2 + vy3; let vx = i; vertex(vx, this.vh - (this.s1f - vy)); pop(); count++; } vertex(this.vw, this.vh); endShape(CLOSE); pop(); // noLoop(); break; // ====================================================== case 4: console.log("20250531"); push(); this.overlapTrigger = 0.07; s1Ease = createEasing(0.14, 1.35, 0.1, 0.11); s2Ease = createEasing(0.4, 1.08, 0.92, -0.11); this.vr = this.vw / 5; this.s1f = (1 - s1Ease(this.s1Count)) * this.vh; this.s2f = 0; if (this.s2Started) { this.s2f = sin(s2Ease(this.s2Count) * PI) * this.vr; } beginShape(); vertex(0, 0); for (let i = -1; i < this.vh; i++) { let angle = PI - (TWO_PI / this.vh) * i; let vx = (sin(angle) / angle) * this.s2f; let vy = i + 1; vertex(vx + this.s1f, vy); } vertex(this.vw, this.vh); vertex(this.vw, 0); endShape(CLOSE); pop(); break; // ====================================================== case 5: console.log("20250608"); push(); this.overlapTrigger = 0.2; s1Ease = createEasing(0.34, 0.94, 0.3, -0.09); s2Ease = createEasing(0.46, 1.52, 0.84, -0.4); this.vr = this.vh / 8; this.s1f = s1Ease(this.s1Count) * (this.vh + this.vr) - this.vr; this.s2f = 0; if (this.s2Started) { this.s2f = s2Ease(this.s2Count) * PI * this.vr; } beginShape(); vertex(this.vw, 0); vertex(0, 0); for (let i = 0; i < this.vw + 1; i++) { push(); let angle = PI * (TWO_PI / this.vw) * i; let vx = i; let vy1 = sin(angle * 0.26) * cos(angle * 0.4) * sin(frameCount * 0.1 + angle * 0.04) * this.s2f * (1 - this.s1Count) * 1.5; let vy2 = Math.sign(sin(angle + sin(frameCount * 0.002) * this.vr)) * this.vr * (1 - this.s1Count); let vy = vy1 + vy2; vertex(vx, vy + this.s1f); pop(); } endShape(CLOSE); pop(); break; // ====================================================== case 6: console.log("20250606"); push(); this.vr = this.vw / 2; this.overlapTrigger = 0.1; s1Ease = createEasing(0.33, 0.79, 0.79, 0.5); s2Ease = createEasing(0.96, 0.13, 0.26, 0.75); this.s1f = s1Ease(this.s1Count) * this.vr; this.s2f = 0; if (this.s2Started) { this.s2f = s2Ease(this.s2Count) * TWO_PI; } translate(this.vw / 2, this.vh / 2); rotate(this.s2f); rect(-this.s1f, -this.s1f, this.s1f * 2, this.s1f * 2); pop(); break; // ====================================================== case 7: console.log("20250607"); push(); this.overlapTrigger = 0.24; s1Ease = createEasing(0.05, 0.77, 0.73, 0.44); s2Ease = createEasing(0.12, 0.99, 0.39, 0.62); this.vr = this.vh * 1.1; let num = 10; let rw = this.vw / num; for (let i = 0; i < num; i++) { push(); translate(i * rw, 0); let rd = this.vr * 0.6; this.s1f = s1Ease(this.s1Count - i * 0.02) * rd; if (this.s2Started) { this.s2f = s2Ease(this.s2Count - (num - i) * 0.05) * rd; } rect(0, 0, rw, this.s1f + this.s2f); pop(); } pop(); break; // ====================================================== case 8: console.log("20250603"); push(); rectMode(CENTER); this.overlapTrigger = 0; s1Ease = createEasing(0.1, -1.39, 0.9, 0.11); s2Ease = createEasing(0.1, -1.21, 0.83, 0.2); this.vr = this.vw / 2; this.s1f = s1Ease(this.s1Count) * this.vr; this.s2f = 0; if (this.s2Started) { this.s2f = s2Ease(this.s2Count) * this.vr; } translate(this.vw / 2, this.vh / 2); push(); translate(-this.vw / 4, -this.vh / 4); let s1f1 = s1Ease(this.s1Count) * this.vr; let s2f1 = this.s2Started ? s2Ease(this.s2Count) * this.vr : 0; rect(0, 0, s1f1, s2f1); pop(); push(); translate(this.vw / 4, -this.vh / 4); let s1f2 = s1Ease(map(this.s1Count, 0.08, 1, 0, 1)) * this.vr; let s2f2 = this.s2Started ? s2Ease(map(this.s2Count, 0.08, 1, 0, 1)) * this.vr : 0; rect(0, 0, s1f2, s2f2); pop(); push(); translate(-this.vw / 4, this.vh / 4); let s1f3 = s1Ease(map(this.s1Count, 0.16, 1, 0, 1)) * this.vr; let s2f3 = this.s2Started ? s2Ease(map(this.s2Count, 0.16, 1, 0, 1)) * this.vr : 0; rect(0, 0, s1f3, s2f3); pop(); push(); translate(this.vw / 4, this.vh / 4); let s1f4 = s1Ease(map(this.s1Count, 0.24, 1, 0, 1)) * this.vr; let s2f4 = this.s2Started ? s2Ease(map(this.s2Count, 0.24, 1, 0, 1)) * this.vr : 0; rect(0, 0, s1f4, s2f4); pop(); pop(); break; // ====================================================== case 9: console.log("Close"); this.vr = this.vh / 2; s1Ease = createEasing(0.25, 1.8, 0.23, -0.4); this.s1f = s1Ease(this.s1Count) * this.vr; this.s2f = 0; push(); rect(0, 0, this.vw, this.s1f); pop(); push(); translate(0, this.vh); rect(0, -this.s1f, this.vw, this.vh); pop(); break; // ====================================================== default: break; } } // カウントロジックを更新 update() { if (this.isFinished) return; // s1Count進行 if (this.s1Count < 1) { this.s1Count += this.speed; if (this.s1Count >= 1) { this.s1Count = 1; console.log(`${this.id}: Done s1Count`); } } // s1Count進捗 s2Count開始 if (!this.s2Started && this.s1Count >= this.overlapTrigger) { this.s2Started = true; console.log(`${this.id}: s1Count ${this.overlapTrigger} Start s2Count `); } // s2Count開始 if (this.s2Started && this.s2Count < 1) { this.s2Count += this.speed; if (this.s2Count >= 1) { this.s2Count = 1; console.log(`${this.id}: Done s2Count`); } } // 両方完了 if (this.s1Count >= 1 && this.s2Count >= 1) { this.isFinished = true; } } isComplete() { return this.isFinished; } } // 次の関数へ function startNextFunction() { const functionId = executionOrder[currentIndex]; currentInstance = new FunctionRunner(functionId, framesPerStage); console.log(`${functionId} Start`); } // 配列シャッフル function initializeExecutionOrder() { let middleNumbers = []; for (let i = 1; i <= 8; i++) { middleNumbers.push(i); } for (let i = middleNumbers.length - 1; i > 0; i--) { const j = int(random(i + 1)); [middleNumbers[i], middleNumbers[j]] = [middleNumbers[j], middleNumbers[i]]; // スワップ } executionOrder = [0, ...middleNumbers, 9]; currentIndex = 0; currentStartFrame = frameCount; } // イージング function createEasing(p1x, p1y, p2x, p2y) { function getX(t) { return ( (1 - t) * (1 - t) * (1 - t) * 0 + 3 * (1 - t) * (1 - t) * t * p1x + 3 * (1 - t) * t * t * p2x + t * t * t * 1 ); } function getY(t) { return ( (1 - t) * (1 - t) * (1 - t) * 0 + 3 * (1 - t) * (1 - t) * t * p1y + 3 * (1 - t) * t * t * p2y + t * t * t * 1 ); } // X座標が`time` // ベジェ曲線のパラメータを二分探索 function bezierEasing(time) { if (time <= 0) return 0; if (time >= 1) return 1; let lower = 0; let upper = 1; let x = 0; let currentT = 0; for (let i = 0; i < 100; i++) { currentT = (lower + upper) / 2; x = getX(currentT); if (x < time) { lower = currentT; } else { upper = currentT; } } return getY(currentT); } return bezierEasing; } //色変更 function createColor(currentIndex) { if (currentIndex % 2 == 0) { background(palette[1]); fill(palette[0]); } else { background(palette[0]); fill(palette[1]); } } const colorArray = [ { id: 0, name: ["生成り色", "深縹"], colors: ["#fbfaf5", "#2a4073"], }, ];

something like a diary