let allStrokes = []; let currentStroke = 0; let t = 0; let drawnStrokes = []; let grassEffect = false; let flowerEffect = false; let bubbleEffect = false; let grassX, grassY; // 草の位置 let flowers = []; let bubbles = []; let grassBlades = []; let effectTriggerPoints = {}; let bgGraphics; let endMotion = false; let endFrame = 0; let endEffectStartTime = 0; // 「終わり！」演出の開始時刻 let whiteFadeTime = 150; // 白い画面のフェード時間 let squareSize = 0; // 四角形のサイズ function setup() { createCanvas(windowWidth, windowHeight); stroke(0); strokeWeight(4); noFill(); // 幾何学背景を作成 bgGraphics = createGraphics(width, height); drawBackgroundPattern(bgGraphics); let offsetX = width / 2 - 250; // 全体的に右に少し移動 let offsetY = height / 2 - 100; // 中央に配置 // 多 let strokes1 = [ [10, 10, 1, 60], [10, 10, 50, 10], [50, 10, 30, 120], [7, 40, 35, 40], [55, 50, 44, 120], [55, 50, 98, 50], [55, 50, 98, 50], [98, 50, 80, 180], [53, 78, 86, 78] ]; addStrokes(strokes1, offsetX, offsetY); let multiEnd = allStrokes.length; // 摩 let strokes2 = [ [50, 10, 50, 25], [1, 25, 100, 25], [1, 25, 1, 180], [15, 50, 45, 50], [28, 40, 28, 80], [25, 50, 15, 80], [31, 50, 40, 80], [68, 50, 95, 50], [81, 40, 81, 80], [78, 50, 70, 80], [83, 50, 95, 80], [35, 100, 75, 100], [20, 115, 95, 115], [17, 130, 100, 130], [55, 100, 55, 180], [55, 180, 40, 180] ]; addStrokes(strokes2, offsetX + 150, offsetY); let frictionEnd = allStrokes.length; // 美 let strokes3 = [ [50, 5, 50, 20], [70, 5, 70, 20], [25, 20, 100, 20], [60, 20, 60, 75], [35, 45, 90, 45], [25, 60, 95, 60], [15, 75, 110, 75], [60, 75, 15, 180], [60, 75, 100, 180] ]; addStrokes(strokes3, offsetX + 300, offsetY); let beautyEnd = allStrokes.length; // エフェクトのトリガーポイントを中央に合わせて設定 effectTriggerPoints = { grass: multiEnd, // 草は「多」の字の下 flowers: frictionEnd, // 花は「摩」の字の下 bubbles: beautyEnd // シャボン玉は「美」の字の下 }; // 草の位置を「多」の字の下に配置 grassX = width / 2 - 250; // 「多」の字の下 grassY = height / 2 + 120; // 草の位置 // 花の位置を「摩」の字の下に配置 flowerX = width / 2 + 100; // 「摩」の下 flowerY = height / 2 + 120; // 花の位置 // シャボン玉の位置を「美」の字の下に配置 bubbleX = width / 2 + 150; bubbleY = height / 2 + 120; // シャボン玉の位置 } function draw() { background(255); image(bgGraphics, 0, 0); // ストローク描画 for (let s of drawnStrokes) { stroke(0); strokeWeight(4); line(s[0], s[1], s[2], s[3]); } if (currentStroke < allStrokes.length) { let s = allStrokes[currentStroke]; let [x1, y1, x2, y2] = s; let progress = constrain(t / 30.0, 0, 1); let x = lerp(x1, x2, progress); let y = lerp(y1, y2, progress); stroke(0); strokeWeight(4); line(x1, y1, x, y); t++; if (progress >= 1) { drawnStrokes.push(s); currentStroke++; t = 0; } } // エフェクトトリガー if (currentStroke === effectTriggerPoints.grass && !grassEffect) { grassEffect = true; initGrass(grassX, grassY, 20); } if (currentStroke === effectTriggerPoints.flowers && !flowerEffect) { flowerEffect = true; for (let i = 0; i < 10; i++) { flowers.push({ x: random(flowerX - 50, flowerX + 50), y: flowerY, size: random(5, 15) }); } } if (currentStroke === effectTriggerPoints.bubbles && !bubbleEffect) { bubbleEffect = true; for (let i = 0; i < 20; i++) { bubbles.push({ x: random(bubbleX - 50, bubbleX + 50), y: random(bubbleY - 50, bubbleY + 50), r: random(10, 30), speed: random(0.5, 1.5) }); } } // 草 if (grassEffect) drawGrass(); // 花 if (flowerEffect) { for (let f of flowers) { fill(255, 0, 0); noStroke(); ellipse(f.x, f.y, f.size, f.size); } } // シャボン玉 if (bubbleEffect) { for (let b of bubbles) { noFill(); stroke(100, 100, 255, 100); ellipse(b.x, b.y, b.r); b.y -= b.speed; b.x += sin(frameCount * 0.01 + b.r) * 0.5; } } // 「終わり！」モーション if (currentStroke >= allStrokes.length && !endMotion) { endMotion = true; endFrame = frameCount; endEffectStartTime = frameCount; } if (endMotion) { let elapsed = frameCount - endEffectStartTime; // 1. 大きな白い円が広がる if (elapsed < 60) { noStroke(); fill(255, 255, 255, 200); ellipse(width / 2, height / 2, elapsed * 20); // 円が大きくなる } // 2. 四角形が広がる if (elapsed >= 60 && elapsed < 120) { squareSize = map(elapsed, 60, 120, 0, 300); noFill(); stroke(0); strokeWeight(4); rectMode(CENTER); rect(width / 2, height / 2, squareSize, squareSize); } // 3. 画面全体が白くフェードアウト if (elapsed >= 120 && elapsed < whiteFadeTime) { let alpha = map(elapsed, 120, whiteFadeTime, 255, 0); fill(255, alpha); noStroke(); rect(0, 0, width, height); } } } function addStrokes(strokeList, offsetX, offsetY) { for (let s of strokeList) { allStrokes.push([ s[0] + offsetX, s[1] + offsetY, s[2] + offsetX, s[3] + offsetY ]); } } function initGrass(x, y, count) { grassBlades = []; for (let i = 0; i < count; i++) { grassBlades.push({ x: x + i * 5, y: y, targetHeight: random(10, 30), currentHeight: 0, speed: random(0.2, 0.5) }); } } function drawGrass() { stroke(0, 150, 0); for (let blade of grassBlades) { if (blade.currentHeight < blade.targetHeight) { blade.currentHeight += blade.speed; } let x2 = blade.x + random(-1, 1); let y2 = blade.y - blade.currentHeight; line(blade.x, blade.y, x2, y2); // 草の描画 } } function drawBackgroundPattern(graphics) { graphics.background(255); graphics.stroke(0, 50); graphics.strokeWeight(2); for (let x = 0; x < width; x += 20) { for (let y = 0; y < height; y += 20) { graphics.rect(x, y, 20, 20); } } }