let animationProgress = 0; let currentLayer = 0; let currentPoint = 0; let allRegions = []; let isAnimating = true; let isPaused = false; let animationSpeed = 2.2; let maxLayers = 0; function setup() { createCanvas(700, 700); const container = document.getElementById('canvas-container'); const canvas = document.querySelector('canvas'); container.appendChild(canvas); // document.getElementById('restart-btn').addEventListener('click', restartAnimation); // document.getElementById('pause-btn').addEventListener('click', togglePause); generateAllRegions(); startAnimation(); } function draw() { if (!isAnimating || isPaused) return; background(255); drawAnimatedRegions(); currentPoint += animationSpeed; let allLayersComplete = true; for (let region of allRegions) { if (currentLayer < region.shapes.length) { if (currentPoint < region.shapes[currentLayer].points.length) { allLayersComplete = false; break; } } } if (allLayersComplete) { currentLayer++; currentPoint = 0; generateNewShapes(); } drawSoftRectangles(); } function generateAllRegions() { allRegions = []; const initialShapes = 50; const rects = [ { x: 60, y: 60 }, { x: 370, y: 60 }, { x: 60, y: 370 }, { x: 370, y: 370 } ]; for (let rectIndex = 0; rectIndex < rects.length; rectIndex++) { let regionShapes = []; for (let j = 0; j < initialShapes; j++) { regionShapes.push(createShape(rectIndex, j)); } allRegions.push({ shapes: regionShapes, rectIndex: rectIndex }); } } function createShape(rectIndex, shapeIndex) { const baseNoiseScale = 0.02; const baseAmp = 150; const step = 5; const rects = [ { x: 60, y: 60 }, { x: 370, y: 60 }, { x: 60, y: 370 }, { x: 370, y: 370 } ]; let r = rects[rectIndex]; let cx = r.x + 135; let cy = r.y + 135; let w = 270; let h = 270; let noiseScale = baseNoiseScale; let amp = baseAmp; let isBottomLeft = (r.x === 60 && r.y === 370); if (isBottomLeft) { noiseScale = 0.04; amp = 60; } let offset = random(1000); let points = []; let strokeColor = color(30, 50, 90, isBottomLeft ? random(30, 70) : random(20, 60)); for (let a = 0; a <= TWO_PI + 0.1; a += radians(step)) { let radiusW = w / 2 + 10; let radiusH = h / 2 + 10; if (isBottomLeft) { radiusW += sin(a * 3 + shapeIndex * 0.1) * 20; radiusH += cos(a * 2 + shapeIndex * 0.2) * 16; } let ex = cx + cos(a) * radiusW; let ey = cy + sin(a) * radiusH; let n = noise(ex * noiseScale, ey * noiseScale + offset); let jitter = (n - 0.5) * amp; let dx = ex + cos(a) * jitter; let dy = ey + sin(a) * jitter; points.push({x: dx, y: dy}); } return { points: points, strokeColor: strokeColor, isClosed: true }; } function generateNewShapes() { // 各領域に新しい図形を追加 for (let regionIndex = 0; regionIndex < allRegions.length; regionIndex++) { let region = allRegions[regionIndex]; let newShape = createShape(region.rectIndex, region.shapes.length); region.shapes.push(newShape); } } function drawAnimatedRegions() { noFill(); strokeWeight(0.5); // 各領域を同時に描画 for (let regionIndex = 0; regionIndex < allRegions.length; regionIndex++) { let region = allRegions[regionIndex]; // 完成したレイヤーを描画 for (let layerIndex = 0; layerIndex < currentLayer; layerIndex++) { if (layerIndex < region.shapes.length) { let shape = region.shapes[layerIndex]; stroke(shape.strokeColor); beginShape(); for (let point of shape.points) { curveVertex(point.x, point.y); } if (shape.isClosed) { endShape(CLOSE); } else { endShape(); } } } // 現在描画中のレイヤー if (currentLayer < region.shapes.length && currentPoint > 0) { let shape = region.shapes[currentLayer]; stroke(shape.strokeColor); beginShape(); let pointsToShow = Math.min(currentPoint, shape.points.length); for (let i = 0; i < pointsToShow; i++) { let point = shape.points[i]; curveVertex(point.x, point.y); } if (pointsToShow === shape.points.length && shape.isClosed) { endShape(CLOSE); } else { endShape(); } } } } function drawSoftRectangles() { noFill(); stroke(50, 50, 50, 30); strokeWeight(0.5); for (let y of [60, 370]) { for (let x of [60, 370]) { rect(x, y, 270, 270); } } } function startAnimation() { currentLayer = 0; currentPoint = 0; isAnimating = true; isPaused = false; } function restartAnimation() { background(255); generateAllRegions(); startAnimation(); }

相互作用する円