//------------------------------------- // プロジェクトの基本設定ここから let debugMode = false; //デバッグモード、NEORTにアップロード時はfalseにしてください // キャンバスサイズの設定 const CANVAS_SIZES = { LED_CUBE1: { width: 2000, height: 1440 }, LED_CUBE2: { width: 1536, height: 768 }, LED_CUBE3: { width: 672, height: 480 }, }; // LEDキューブのレイアウト参考画像 let image1, image2, image3; // 現在のLEDキューブのサイズ let currentSize = ""; // GraphicsLayer配列の管理 let graphicsLayers = []; let currentLayerIndex = 0; // プロジェクトの基本設定ここまで //------------------------------------- function setup() { createCanvasSetup(); console.log("Setup完了 - active:", active); console.log("currentSize:", currentSize); createGraphicsLayers(); console.log("GraphicsLayers作成完了 - 数:", graphicsLayers.length); if (!currentSize && active.shapes) { console.log("フルスクリーンモード - タイル数:", active.shapes.length); console.log("タイル例:", active.shapes[0]); // タイルの配置範囲を確認 let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; active.shapes.forEach((shape) => { minX = min(minX, shape.img_x); maxX = max(maxX, shape.img_x + shape.w); minY = min(minY, shape.img_y); maxY = max(maxY, shape.img_y + shape.h); }); console.log(`タイル配置範囲: X(${minX} to ${maxX}), Y(${minY} to ${maxY})`); console.log(`Canvasサイズ: ${width}x${height}`); } } function draw() { background(0, 20); drawDebugMode(); // デバッグ用LEDキューブのレイアウト参考画像の描画 if (graphicsLayers.length > 0) { // レイヤーの計算・描画処理を実行 for (let i = 0; i < graphicsLayers.length; i++) { let layer = graphicsLayers[i]; layer.update(); layer.draw(); } // メインキャンバスに描画 for (let i = 0; i < active.shapes.length; i++) { let shape = active.shapes[i]; let layerIndex = shape.layerIndex || i; // フルスクリーンモードではlayerIndexを使用 // 確実に0-5の範囲に制限 layerIndex = layerIndex % 6; if (layerIndex < graphicsLayers.length) { let layer = graphicsLayers[layerIndex]; if (shape.type === "rect") { image( layer.graphics, shape.img_x, shape.img_y, shape.w || layer.baseSize, shape.h || layer.baseSize, (layer.actualGraphicsSize - layer.baseSize) / 2, (layer.actualGraphicsSize - layer.baseSize) / 2, layer.baseSize, layer.baseSize ); // デバッグ用：タイルの境界を描画 if (debugMode) { noFill(); stroke(255, 0, 0); strokeWeight(1); rect( shape.img_x, shape.img_y, shape.w || layer.baseSize, shape.h || layer.baseSize ); } else { noStroke(); } } else if (shape.type === "poly") { push(); if (debugMode) { stroke(255, 0, 0); } else { noStroke(); } clipPolygon(shape.points); drawingContext.clip(); image( layer.graphics, shape.img_x, shape.img_y, shape.w || layer.baseSize, shape.h || layer.baseSize, (layer.actualGraphicsSize - layer.baseSize) / 2, (layer.actualGraphicsSize - layer.baseSize) / 2, layer.baseSize, layer.baseSize ); pop(); } } else { // デバッグ用：layerIndexが範囲外の場合 if (debugMode && frameCount % 60 === 0) { // 1秒に1回のみ表示 console.log( `警告: layerIndex ${layerIndex} が範囲外 (最大: ${ graphicsLayers.length - 1 }), shape:`, shape ); } } } } else { // デバッグ用：GraphicsLayerが存在しない場合 if (debugMode && frameCount % 60 === 0) { // 1秒に1回のみ表示 console.log("警告: GraphicsLayerがない"); } } } // ======================================== // 調整可能なパラメータ設定 // ======================================== const EFFECT_PARAMS = { // 1. ストライプ設定 STRIPE: { WIDTH: 20, // ストライプの幅 WAVE_AMPLITUDE: 15, // 波の振幅 WAVE_SPEED: 0.015, // 波のスピード WAVE_FREQUENCY: 0.3, // 波の周波数 DEFORM_INTENSITY: 0.8, // 変形の強さ }, // 2. 水流設定 WATER_FLOW: { // 下向き水流（偶数ストライプ） DOWN_STREAMS: 48, // 下向き水流の数 DOWN_SPEED_MIN: 3.5, // 下向き最小速度 DOWN_SPEED_MAX: 6.0, // 下向き最大速度 DOWN_WIDTH_MIN: 3, // 下向き水流の最小幅 DOWN_WIDTH_MAX: 8, // 下向き水流の最大幅 DOWN_OPACITY_MIN: 180, // 下向き透明度最小 DOWN_OPACITY_MAX: 255, // 下向き透明度最大 // 上向き水流（奇数ストライプ） UP_STREAMS: 35, // 上向き水流の数 UP_SPEED_MIN: 2.8, // 上向き最小速度 UP_SPEED_MAX: 5.5, // 上向き最大速度 UP_WIDTH_MIN: 2, // 上向き水流の最小幅 UP_WIDTH_MAX: 6, // 上向き水流の最大幅 UP_OPACITY_MIN: 120, // 上向き透明度最小 UP_OPACITY_MAX: 200, // 上向き透明度最大 // 共通設定 WAVE_AMPLITUDE: 2.5, // 水流の横揺れ幅 WAVE_SPEED: 0.02, // 水流の横揺れ速度 TRAIL_LENGTH: 20, // 水流の軌跡の長さ SPARKLE_CHANCE: 0.3, // きらめきの発生確率 }, // 3. 回転設定 ROTATION: { INTERVAL: 7000, // 回転間隔（ミリ秒） EASING: 0.015, // 回転の滑らかさ（小さいほど滑らか） DEGREES: 90, // 1回の回転角度 INITIAL_DELAY_MIN: 300, // 初回回転の最小遅延時間 INITIAL_DELAY_MAX: 800, // 初回回転の最大遅延時間 REGENERATE_CHANCE: 0.3, // 回転時の水流再生成確率 }, // 4. 色変化設定 COLOR_CHANGE: { CYCLE_DURATION: 3000, // 色相変化のサイクル時間 HUE_AMPLITUDE: 15, // 色相変化の振幅 SATURATION_AMPLITUDE: 8, // 彩度変化の振幅 TEMPERATURE_AMPLITUDE: 20, // 色温度変化の振幅 WARMTH_AMPLITUDE: 15, // 暖色調変化の振幅 BREATHING_SPEED: 0.015, // 呼吸効果の速度 BREATHING_INTENSITY: 10, // 呼吸効果の強さ SEASON_DURATION: 7000, // 季節変化の時間 }, // パーティクル設定 PARTICLES: { COUNT: 400, // パーティクル数 SIZE_MIN: 2, // 最小サイズ SIZE_MAX: 5, // 最大サイズ SPEED_MIN: 2.0, // 最小速度 SPEED_MAX: 5.5, // 最大速度 GRAVITY: 0.04, // 重力 HORIZONTAL_SPEED: 0.9, // 横方向の速度 OPACITY_MIN: 50, // 透明度最小 OPACITY_MAX: 150, // 透明度最大 }, // スパークル設定 SPARKLES: { COUNT: 40, // スパークル数 CHANCE: 0.1, // 表示確率 SIZE_MIN: 0.5, // 最小サイズ SIZE_MAX: 2, // 最大サイズ OPACITY_MIN: 150, // 透明度最小 OPACITY_MAX: 255, // 透明度最大 AREA_START: 0.6, // 表示開始位置（画面下から） }, // グリッチ効果設定 GLITCH: { INTERVAL: 45000, // グリッチ発生間隔 DURATION: 3000, // グリッチ持続時間 INTENSITY: 3, // グリッチ強度 LINE_ALPHA: 15, // スキャンライン透明度 BLOCK_COUNT: 30, // ブロック数 BLOCK_ALPHA: 30, // ブロック透明度 WAVE_COUNT: 5, // 波エフェクト数 } }; // ======================================== // GraphicsLayer クラス（整理版） // ======================================== class GraphicsLayer { constructor(size, index, shape) { // 基本プロパティ this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = false; this.baseSize = size; // スケール設定 this.scaleConfig = this.calculateScaleConfig(); this.setupScaledElements(); // 各機能の初期化 this.initializeStripes(); // 1. ストライプ this.initializeWaterFlows(); // 2. 水流 this.initializeRotation(); // 3. 回転 this.initializeColorChange(); // 4. 色変化 this.initializeParticles(); this.initializeGlitch(); } calculateScaleConfig() { let globalScale = this.baseSize / 800; return { stripeScale: globalScale, particleScale: globalScale * globalScale, speedScale: globalScale, densityScale: globalScale }; } setupScaledElements() { this.actualGraphicsSize = Math.ceil(this.baseSize * Math.sqrt(2)) + 100; if (this.graphics) { this.graphics.remove(); } this.graphics = createGraphics(this.actualGraphicsSize, this.actualGraphicsSize); this.extendedSize = Math.ceil(this.actualGraphicsSize * 1.2); } // ======================================== // 1. ストライプ機能の初期化と管理 // ======================================== initializeStripes() { this.stripes = { width: EFFECT_PARAMS.STRIPE.WIDTH * this.scaleConfig.stripeScale, numStripes: Math.ceil(this.extendedSize / (EFFECT_PARAMS.STRIPE.WIDTH * this.scaleConfig.stripeScale)) + 8, offsets: [] }; for (let i = 0; i < this.stripes.numStripes; i++) { this.stripes.offsets[i] = 0; } } updateStripes() { const params = EFFECT_PARAMS.STRIPE; for (let i = 0; i < this.stripes.numStripes; i++) { let wave1 = sin(frameCount * params.WAVE_SPEED + i * params.WAVE_FREQUENCY) * params.WAVE_AMPLITUDE * this.scaleConfig.stripeScale; let wave2 = cos(frameCount * params.WAVE_SPEED * 0.8 + i * 0.5) * 14 * this.scaleConfig.stripeScale; let wave3 = sin(frameCount * params.WAVE_SPEED * 1.2 + i * 0.2) * 10 * this.scaleConfig.stripeScale; this.stripes.offsets[i] = wave1 + wave2 + wave3; } } drawStripes(g, palette) { const params = EFFECT_PARAMS.STRIPE; for (let i = 0; i < this.stripes.numStripes; i++) { let x = i * this.stripes.width + this.stripes.offsets[i]; // 色の変化計算 let hueShift = sin(this.colorChange.phase + i * 0.05) * EFFECT_PARAMS.COLOR_CHANGE.HUE_AMPLITUDE; let saturationShift = cos(this.colorChange.phase * 0.7 + i * 0.03) * EFFECT_PARAMS.COLOR_CHANGE.SATURATION_AMPLITUDE; let temperatureShift = sin(frameCount * 0.008 + i * 0.1) * EFFECT_PARAMS.COLOR_CHANGE.TEMPERATURE_AMPLITUDE; let warmth = cos(frameCount * 0.012 + i * 0.08) * EFFECT_PARAMS.COLOR_CHANGE.WARMTH_AMPLITUDE; if (i % 2 === 0) { // 明るいストライプ let lightColor = palette.light; g.fill( constrain(lightColor[0] + hueShift + temperatureShift, 0, 255), constrain(lightColor[1] + saturationShift + warmth * 0.5, 0, 255), constrain(lightColor[2] + hueShift * 0.5 - temperatureShift * 0.3, 0, 255), 200 ); } else { // 暗いストライプ let darkColor = palette.dark; g.fill( constrain(darkColor[0] + hueShift + temperatureShift * 0.7, 0, 255), constrain(darkColor[1] + saturationShift + warmth * 0.3, 0, 255), constrain(darkColor[2] + hueShift * 0.5 - temperatureShift * 0.2, 0, 255), 190 ); } g.noStroke(); // ストライプの描画（波形変形付き） g.beginShape(); let stepSize = 5 * this.scaleConfig.stripeScale; for (let y = 0; y <= this.extendedSize; y += stepSize) { let localWave = sin(y * 0.01 + frameCount * params.WAVE_SPEED + i * 0.2) * this.stripes.offsets[i] * params.DEFORM_INTENSITY; g.vertex(x + localWave, y); } for (let y = this.extendedSize; y >= 0; y -= stepSize) { let localWave = sin(y * 0.01 + frameCount * params.WAVE_SPEED + i * 0.2) * this.stripes.offsets[i] * params.DEFORM_INTENSITY; g.vertex(x + this.stripes.width + localWave, y); } g.endShape(CLOSE); } } // ======================================== // 2. 水流機能の初期化と管理 // ======================================== initializeWaterFlows() { this.waterFlows = { downStreams: [], // 下向き水流 upStreams: [] // 上向き水流 }; const params = EFFECT_PARAMS.WATER_FLOW; // 下向き水流の初期化（偶数ストライプ） for (let i = 0; i < this.stripes.numStripes; i++) { let streamX = i * this.stripes.width - (this.extendedSize - this.baseSize * this.scaleConfig.stripeScale) / 2 + this.stripes.width / 2; if (i % 2 === 0) { // 下向き水流 - 画面全体に分散配置 let streamCount = Math.floor(params.DOWN_STREAMS * this.scaleConfig.densityScale); streamCount = Math.max(streamCount, 20); for (let j = 0; j < streamCount; j++) { this.waterFlows.downStreams.push({ x: streamX + random(-this.stripes.width / 3, this.stripes.width / 3), y: random(-200 * this.scaleConfig.stripeScale, this.extendedSize), // 画面全体に分散 baseX: streamX, speed: random(params.DOWN_SPEED_MIN, params.DOWN_SPEED_MAX) * this.scaleConfig.speedScale, width: random(params.DOWN_WIDTH_MIN, params.DOWN_WIDTH_MAX) * this.scaleConfig.stripeScale, opacity: random(params.DOWN_OPACITY_MIN, params.DOWN_OPACITY_MAX), waveOffset: random(TWO_PI), originalSpeed: random(params.DOWN_SPEED_MIN, params.DOWN_SPEED_MAX) * this.scaleConfig.speedScale, }); } } else { // 上向き水流 - 画面全体に分散配置 let streamCount = Math.floor(params.UP_STREAMS * this.scaleConfig.densityScale); streamCount = Math.max(streamCount, 15); for (let j = 0; j < streamCount; j++) { this.waterFlows.upStreams.push({ x: streamX + random(-this.stripes.width / 3, this.stripes.width / 3), y: random(-200 * this.scaleConfig.stripeScale, this.extendedSize + 200 * this.scaleConfig.stripeScale), // 画面全体に分散 baseX: streamX, speed: random(params.UP_SPEED_MIN, params.UP_SPEED_MAX) * this.scaleConfig.speedScale, width: random(params.UP_WIDTH_MIN, params.UP_WIDTH_MAX) * this.scaleConfig.stripeScale, opacity: random(params.UP_OPACITY_MIN, params.UP_OPACITY_MAX), waveOffset: random(TWO_PI), originalSpeed: random(params.UP_SPEED_MIN, params.UP_SPEED_MAX) * this.scaleConfig.speedScale, }); } } } } updateWaterFlows() { const params = EFFECT_PARAMS.WATER_FLOW; // 下向き水流の更新 for (let stream of this.waterFlows.downStreams) { let waveX = sin(frameCount * params.WAVE_SPEED + stream.waveOffset) * params.WAVE_AMPLITUDE * this.scaleConfig.stripeScale; let stripeIndex = floor((stream.baseX + (this.extendedSize - this.baseSize * this.scaleConfig.stripeScale) / 2) / this.stripes.width); if (stripeIndex >= 0 && stripeIndex < this.stripes.numStripes) { let stripeDeform = this.stripes.offsets[stripeIndex] * 0.9; let localWave = sin(stream.y * 0.01 + frameCount * EFFECT_PARAMS.STRIPE.WAVE_SPEED) * stripeDeform * 0.3; stream.x = stream.baseX + waveX + stripeDeform + localWave + random(-0.3, 0.3) * this.scaleConfig.stripeScale; } stream.y += stream.speed; // 画面外に出たらリセット if (stream.y > this.extendedSize + 50 * this.scaleConfig.stripeScale) { stream.y = random(-200 * this.scaleConfig.stripeScale, -50 * this.scaleConfig.stripeScale); stream.x = stream.baseX + random(-this.stripes.width / 3, this.stripes.width / 3); stream.speed = stream.originalSpeed; stream.width = random(params.DOWN_WIDTH_MIN, params.DOWN_WIDTH_MAX) * this.scaleConfig.stripeScale; } } // 上向き水流の更新 for (let stream of this.waterFlows.upStreams) { let waveX = sin(frameCount * params.WAVE_SPEED * 0.9 + stream.waveOffset) * params.WAVE_AMPLITUDE * 0.6 * this.scaleConfig.stripeScale; let stripeIndex = floor((stream.baseX + (this.extendedSize - this.baseSize * this.scaleConfig.stripeScale) / 2) / this.stripes.width); if (stripeIndex >= 0 && stripeIndex < this.stripes.numStripes) { let stripeDeform = this.stripes.offsets[stripeIndex] * 0.7; let localWave = sin(stream.y * 0.01 + frameCount * EFFECT_PARAMS.STRIPE.WAVE_SPEED) * stripeDeform * 0.2; stream.x = stream.baseX + waveX + stripeDeform + localWave + random(-0.2, 0.2) * this.scaleConfig.stripeScale; } stream.y -= stream.speed; // 画面外に出たらリセット if (stream.y < -50 * this.scaleConfig.stripeScale) { stream.y = random(this.extendedSize + 50 * this.scaleConfig.stripeScale, this.extendedSize + 300 * this.scaleConfig.stripeScale); stream.x = stream.baseX + random(-this.stripes.width / 3, this.stripes.width / 3); stream.speed = stream.originalSpeed; stream.width = random(params.UP_WIDTH_MIN, params.UP_WIDTH_MAX) * this.scaleConfig.stripeScale; } } } drawWaterFlows(g, palette) { const params = EFFECT_PARAMS.WATER_FLOW; // 下向き水流の描画 for (let stream of this.waterFlows.downStreams) { let stripeIndex = floor((stream.baseX + (this.extendedSize - this.baseSize * this.scaleConfig.stripeScale) / 2) / this.stripes.width); if (stripeIndex >= 0 && stripeIndex < this.stripes.numStripes && stripeIndex % 2 === 0) { let waterColor = palette.water; let streamTemperature = sin(frameCount * 0.01 + stream.y * 0.005) * 15; let streamWarmth = cos(frameCount * 0.008 + stream.x * 0.01) * 10; let speedAlpha = map(stream.speed / this.scaleConfig.speedScale, params.DOWN_SPEED_MIN, params.DOWN_SPEED_MAX, 1.0, 0.6); // メイン水流 g.stroke( constrain(waterColor[0] + streamTemperature, 0, 255), constrain(waterColor[1] + streamWarmth * 0.5, 0, 255), constrain(waterColor[2] - streamTemperature * 0.3, 0, 255), stream.opacity * speedAlpha ); g.strokeWeight(stream.width); g.line(stream.x, stream.y, stream.x, stream.y - params.TRAIL_LENGTH * this.scaleConfig.stripeScale); // 外側のぼかし g.stroke( constrain(waterColor[0] - 40 + streamTemperature * 0.5, 0, 255), constrain(waterColor[1] - 20 + streamWarmth * 0.3, 0, 255), constrain(waterColor[2] - streamTemperature * 0.2, 0, 255), stream.opacity * 0.6 * speedAlpha ); g.strokeWeight(stream.width + 2 * this.scaleConfig.stripeScale); g.line(stream.x, stream.y, stream.x, stream.y - 15 * this.scaleConfig.stripeScale); // スパークル効果 if (random() < params.SPARKLE_CHANCE) { g.fill( constrain(waterColor[0] + streamTemperature, 0, 255), constrain(waterColor[1] + streamWarmth * 0.5, 0, 255), constrain(waterColor[2] - streamTemperature * 0.3, 0, 255), random(100, 200) * speedAlpha ); g.noStroke(); g.circle( stream.x + random(-2, 2) * this.scaleConfig.stripeScale, stream.y + random(-10, 10) * this.scaleConfig.stripeScale, random(1, 3) * this.scaleConfig.stripeScale ); } } } // 上向き水流の描画 for (let stream of this.waterFlows.upStreams) { let stripeIndex = floor((stream.baseX + (this.extendedSize - this.baseSize * this.scaleConfig.stripeScale) / 2) / this.stripes.width); if (stripeIndex >= 0 && stripeIndex < this.stripes.numStripes && stripeIndex % 2 === 1) { let darkColor = palette.dark; let reverseTemperature = sin(frameCount * 0.009 + stream.y * 0.003) * 12; let reverseWarmth = cos(frameCount * 0.007 + stream.x * 0.008) * 8; let reverseSpeedAlpha = map(stream.speed / this.scaleConfig.speedScale, params.UP_SPEED_MIN, params.UP_SPEED_MAX, 1.0, 0.7); // メイン水流 g.stroke( constrain(darkColor[0] + 30 + reverseTemperature, 0, 255), constrain(darkColor[1] + 30 + reverseWarmth * 0.5, 0, 255), constrain(darkColor[2] + 30 - reverseTemperature * 0.2, 0, 255), stream.opacity * reverseSpeedAlpha ); g.strokeWeight(stream.width); g.line(stream.x, stream.y, stream.x, stream.y + 18 * this.scaleConfig.stripeScale); // 外側のぼかし g.stroke( constrain(darkColor[0] + 10 + reverseTemperature * 0.5, 0, 255), constrain(darkColor[1] + 15 + reverseWarmth * 0.3, 0, 255), constrain(darkColor[2] + 15 - reverseTemperature * 0.1, 0, 255), stream.opacity * 0.5 * reverseSpeedAlpha ); g.strokeWeight(stream.width + 1.5 * this.scaleConfig.stripeScale); g.line(stream.x, stream.y, stream.x, stream.y + 12 * this.scaleConfig.stripeScale); // スパークル効果 if (random() < params.SPARKLE_CHANCE * 0.67) { g.fill( constrain(darkColor[0] + 50 + reverseTemperature, 0, 255), constrain(darkColor[1] + 50 + reverseWarmth * 0.5, 0, 255), constrain(darkColor[2] + 45 - reverseTemperature * 0.2, 0, 255), random(80, 150) * reverseSpeedAlpha ); g.noStroke(); g.circle( stream.x + random(-1.5, 1.5) * this.scaleConfig.stripeScale, stream.y + random(-8, 8) * this.scaleConfig.stripeScale, random(0.8, 2.5) * this.scaleConfig.stripeScale ); } } } } // ======================================== // 3. 回転機能の初期化と管理 // ======================================== initializeRotation() { const params = EFFECT_PARAMS.ROTATION; this.rotation = { current: 0, target: 0, timer: 0, initialDelay: random(params.INITIAL_DELAY_MIN, params.INITIAL_DELAY_MAX) }; } updateRotation() { const params = EFFECT_PARAMS.ROTATION; // 回転の滑らかな補間 this.rotation.current += (this.rotation.target - this.rotation.current) * params.EASING; // 回転タイミングの管理 this.rotation.timer += 16.67; // 約60FPS想定 if (this.rotation.timer > params.INTERVAL + this.rotation.initialDelay) { this.rotation.target = (this.rotation.target + params.DEGREES) % 360; this.rotation.timer = 0; this.rotation.initialDelay = 0; // 初回以降は遅延なし // 一定確率で水流を再生成 if (random() < params.REGENERATE_CHANCE) { this.initializeWaterFlows(); } } } // ======================================== // 4. 色変化機能の初期化と管理 // ======================================== initializeColorChange() { this.colorChange = { timer: 0, phase: 0, breathingPhase: 0, seasonTimer: 0, currentSeason: floor(random(12)) }; } updateColorChange() { const params = EFFECT_PARAMS.COLOR_CHANGE; // 色相サイクルの更新 this.colorChange.timer += 16.67; this.colorChange.phase = (this.colorChange.timer / params.CYCLE_DURATION) * TWO_PI; // 呼吸効果の更新 this.colorChange.breathingPhase += params.BREATHING_SPEED; // 季節変化の更新 this.colorChange.seasonTimer += 16.67; if (this.colorChange.seasonTimer > params.SEASON_DURATION) { let newSeason; do { newSeason = floor(random(12)); } while (newSeason === this.colorChange.currentSeason); this.colorChange.currentSeason = newSeason; this.colorChange.seasonTimer = 0; // 季節に応じてパーティクル速度を調整 for (let particle of this.waterParticles) { let speedMultiplier = 0.8 + (this.colorChange.currentSeason % 4) * 0.1; particle.vy = particle.originalVy * speedMultiplier; } } } // ======================================== // パーティクル機能 // ======================================== initializeParticles() { this.waterParticles = []; const params = EFFECT_PARAMS.PARTICLES; let particleCount = Math.floor(params.COUNT * this.scaleConfig.particleScale); particleCount = Math.min(particleCount, 2000); particleCount = Math.max(particleCount, 100); for (let i = 0; i < particleCount; i++) { let scaledBaseSize = this.baseSize * this.scaleConfig.stripeScale; this.waterParticles.push({ x: random(-100 * this.scaleConfig.stripeScale, scaledBaseSize + 100 * this.scaleConfig.stripeScale), y: random(-500 * this.scaleConfig.stripeScale, scaledBaseSize), vx: random(-params.HORIZONTAL_SPEED, params.HORIZONTAL_SPEED) * this.scaleConfig.speedScale, vy: random(params.SPEED_MIN, params.SPEED_MAX) * this.scaleConfig.speedScale, size: random(params.SIZE_MIN, params.SIZE_MAX) * this.scaleConfig.stripeScale, opacity: random(params.OPACITY_MIN, params.OPACITY_MAX), stripeIndex: floor((random(-100 * this.scaleConfig.stripeScale, scaledBaseSize + 100 * this.scaleConfig.stripeScale) + (this.extendedSize - scaledBaseSize) / 2) / this.stripes.width), originalVy: random(params.SPEED_MIN, params.SPEED_MAX) * this.scaleConfig.speedScale, }); } } updateParticles() { const params = EFFECT_PARAMS.PARTICLES; for (let particle of this.waterParticles) { particle.x += particle.vx; particle.y += particle.vy; particle.vy += params.GRAVITY * this.scaleConfig.speedScale; let scaledBaseSize = this.baseSize * this.scaleConfig.stripeScale; if ( particle.y > this.extendedSize + 10 * this.scaleConfig.stripeScale || particle.x < -150 * this.scaleConfig.stripeScale || particle.x > this.extendedSize + 150 * this.scaleConfig.stripeScale ) { particle.x = random(-100 * this.scaleConfig.stripeScale, this.extendedSize + 100 * this.scaleConfig.stripeScale); particle.y = random(-100 * this.scaleConfig.stripeScale, -10 * this.scaleConfig.stripeScale); particle.vx = random(-params.HORIZONTAL_SPEED, params.HORIZONTAL_SPEED) * this.scaleConfig.speedScale; particle.vy = particle.originalVy; particle.stripeIndex = floor((particle.x + (this.extendedSize - scaledBaseSize) / 2) / this.stripes.width); } } } drawParticles(g, palette) { for (let particle of this.waterParticles) { if ( particle.stripeIndex >= 0 && particle.stripeIndex < this.stripes.numStripes && particle.stripeIndex % 2 === 0 ) { let waterColor = palette.water; g.fill(waterColor[0], waterColor[1], waterColor[2], particle.opacity); g.noStroke(); g.circle(particle.x, particle.y, particle.size); } } } // ======================================== // スパークル機能 // ======================================== drawSparkles(g, palette) { const params = EFFECT_PARAMS.SPARKLES; let sparkleCount = Math.floor(params.COUNT * this.scaleConfig.densityScale); for (let i = 0; i < sparkleCount; i++) { let sparkX = random(-50 * this.scaleConfig.stripeScale, this.extendedSize + 50 * this.scaleConfig.stripeScale); let sparkY = random(this.extendedSize * params.AREA_START, this.extendedSize); let stripeIndex = floor((sparkX + (this.extendedSize - this.baseSize * this.scaleConfig.stripeScale) / 2) / this.stripes.width); if ( stripeIndex >= 0 && stripeIndex < this.stripes.numStripes && stripeIndex % 2 === 0 && random() < params.CHANCE ) { let waterColor = palette.water; let sparkleTemperature = sin(frameCount * 0.05 + i * 2) * 20; let sparkleWarmth = cos(frameCount * 0.04 + i * 1.5) * 15; g.fill( constrain(waterColor[0] + sparkleTemperature, 0, 255), constrain(waterColor[1] + sparkleWarmth * 0.5, 0, 255), constrain(waterColor[2] - sparkleTemperature * 0.3, 0, 255), random(params.OPACITY_MIN, params.OPACITY_MAX) ); g.noStroke(); g.circle(sparkX, sparkY, random(params.SIZE_MIN, params.SIZE_MAX) * this.scaleConfig.stripeScale); } } } // ======================================== // グリッチ効果機能 // ======================================== initializeGlitch() { const params = EFFECT_PARAMS.GLITCH; this.glitch = { timer: 0, isActive: false, phase: 0 }; } updateGlitch() { const params = EFFECT_PARAMS.GLITCH; this.glitch.timer += 16.67; if (this.glitch.timer > params.INTERVAL) { this.glitch.isActive = true; setTimeout(() => { this.glitch.isActive = false; }, params.DURATION); this.glitch.timer = 0; } if (this.glitch.isActive) { this.glitch.phase += 0.015; } else { this.glitch.phase = 0; } } drawGlitchEffect(g) { if (!this.glitch.isActive) return; const params = EFFECT_PARAMS.GLITCH; let glitchIntensity = sin(this.glitch.phase) * 0.5 + 0.5; let maxShift = glitchIntensity * params.INTENSITY * this.scaleConfig.stripeScale; // 縦方向のスキャンライン効果 let lineStep = 4 * this.scaleConfig.stripeScale; for (let y = 0; y < this.extendedSize; y += lineStep) { let lineIntensity = sin(y * 0.01 + this.glitch.phase) * 0.3 + 0.7; g.stroke(255, 255, 255, lineIntensity * params.LINE_ALPHA); g.strokeWeight(0.5 * this.scaleConfig.stripeScale); let xShift = sin(y * 0.02 + this.glitch.phase) * maxShift; g.line(0 + xShift, y, this.extendedSize + xShift, y); } // 波のような歪み効果 let waveIntensity = sin(this.glitch.phase * 0.7) * glitchIntensity; for (let i = 0; i < params.WAVE_COUNT; i++) { let waveY = this.extendedSize * (i / params.WAVE_COUNT) + sin(this.glitch.phase + i) * 50 * this.scaleConfig.stripeScale; let waveAlpha = waveIntensity * 20; g.stroke(255, 200, 150, waveAlpha); g.strokeWeight(1 * this.scaleConfig.stripeScale); let pointStep = 10 * this.scaleConfig.stripeScale; for (let x = 0; x < this.extendedSize; x += pointStep) { let waveOffset = sin(x * 0.01 + this.glitch.phase + i) * 2 * this.scaleConfig.stripeScale; g.point(x, waveY + waveOffset); } } // データモザイク効果 if (random() < 0.05 * glitchIntensity) { let blockSize = 4 * this.scaleConfig.stripeScale; let blocksX = this.extendedSize / blockSize; let blocksY = this.extendedSize / blockSize; let blockCount = Math.floor(params.BLOCK_COUNT * this.scaleConfig.densityScale); for (let i = 0; i < blockCount; i++) { let bx = floor(random(blocksX)) * blockSize; let by = floor(random(blocksY)) * blockSize; g.fill(random(150, 255), random(150, 255), random(150, 255), params.BLOCK_ALPHA); g.noStroke(); g.rect(bx, by, blockSize, blockSize); } } } // ======================================== // メイン更新・描画処理 // ======================================== update() { this.updateStripes(); // 1. ストライプ this.updateWaterFlows(); // 2. 水流 this.updateRotation(); // 3. 回転 this.updateColorChange(); // 4. 色変化 this.updateParticles(); this.updateGlitch(); } draw() { let g = this.graphics; // 現在の季節パレットを取得 let palette = this.seasonPalettes[this.colorChange.currentSeason]; let bgColor = palette.bg; // 呼吸効果付きの背景 let breathIntensity = sin(this.colorChange.breathingPhase) * EFFECT_PARAMS.COLOR_CHANGE.BREATHING_INTENSITY + EFFECT_PARAMS.COLOR_CHANGE.BREATHING_INTENSITY; g.background( bgColor[0] + breathIntensity, bgColor[1] + breathIntensity, bgColor[2] + breathIntensity ); g.push(); // 回転の適用 g.translate(this.actualGraphicsSize / 2, this.actualGraphicsSize / 2); g.rotate(radians(this.rotation.current)); g.translate(-this.extendedSize / 2, -this.extendedSize / 2); // 各要素の描画 this.drawStripes(g, palette); // 1. ストライプ this.drawWaterFlows(g, palette); // 2. 水流 this.drawParticles(g, palette); // パーティクル this.drawSparkles(g, palette); // スパークル this.drawGlitchEffect(g); // グリッチ効果 g.pop(); } // 季節パレット（各レイヤーのプロパティとして定義） get seasonPalettes() { return [ // 桜の春 { bg: [30, 25, 40], light: [255, 180, 220], dark: [160, 200, 100], water: [255, 230, 245], }, // 青い夏 { bg: [20, 35, 50], light: [180, 220, 255], dark: [100, 150, 180], water: [200, 240, 255], }, // 紅葉の秋 { bg: [40, 30, 25], light: [255, 160, 120], dark: [200, 140, 100], water: [255, 200, 170], }, // 氷の冬 { bg: [20, 30, 50], light: [220, 230, 255], dark: [120, 140, 160], water: [240, 250, 255], }, // パステルコーラル { bg: [40, 20, 30], light: [255, 160, 200], dark: [200, 100, 140], water: [255, 200, 230], }, // 深海 { bg: [5, 15, 35], light: [80, 120, 180], dark: [50, 70, 110], water: [120, 180, 255], }, // 森林 { bg: [15, 25, 15], light: [120, 200, 100], dark: [60, 100, 50], water: [180, 255, 180], }, // 薄明 { bg: [30, 25, 35], light: [200, 160, 180], dark: [120, 80, 100], water: [240, 200, 220], }, // 紫の夜 { bg: [25, 15, 40], light: [170, 120, 255], dark: [100, 90, 170], water: [220, 180, 255], }, // パステルミント { bg: [30, 40, 35], light: [200, 255, 220], dark: [120, 180, 140], water: [220, 255, 240], }, // 極光 { bg: [10, 20, 30], light: [100, 255, 200], dark: [50, 120, 100], water: [150, 255, 220], }, // 夕焼け { bg: [50, 25, 30], light: [255, 140, 180], dark: [220, 100, 120], water: [255, 200, 220], }, ]; } // レイヤーを削除 remove() { if (this.graphics && this.graphics.remove) { this.graphics.remove(); } } // アクティブ状態を切り替え toggleActive() { this.isActive = !this.isActive; } } // GraphicsLayer配列を作成 function createGraphicsLayers() { // 既存のLayersを削除 removeGraphicsLayers(); if (!active.spec) { console.log("createGraphicsLayers: active.specが未定義"); return; } const graphicsSize = active.spec.size; console.log( "createGraphicsLayers: graphicsSize =", graphicsSize, "currentSize =", currentSize ); if (!currentSize) { // フルスクリーンモードの場合は6個のGraphicsLayerを作成 console.log("フルスクリーンモード - 6個のGraphicsLayerを作成"); for (let i = 0; i < 6; i++) { const layer = new GraphicsLayer(graphicsSize, i, null); graphicsLayers.push(layer); } } else { // 通常モードの場合は形状数分のGraphicsLayerを作成 const numShapes = active.shapes.length; console.log("通常モード -", numShapes, "個のGraphicsLayerを作成"); for (let i = 0; i < numShapes; i++) { const layer = new GraphicsLayer(graphicsSize, i, active.shapes[i]); graphicsLayers.push(layer); } } console.log("createGraphicsLayers完了 - 作成数:", graphicsLayers.length); } // GraphicsLayer配列を削除 function removeGraphicsLayers() { graphicsLayers.forEach((layer) => { if (layer && layer.remove) { layer.remove(); } }); graphicsLayers = []; currentLayerIndex = 0; } // ウィンドウリサイズ時の処理 function windowResized() { // URLパラメータが設定されていない場合のみcanvasをリサイズ if (!currentSize || !CANVAS_SIZES[currentSize]) { resizeCanvas(windowWidth, windowHeight); console.log(`Canvasリサイズ: ${windowWidth}x${windowHeight}`); } } //------------------------------------- // ユーティリティここから // レイアウト参考画像の読み込み function preload() { // 画像を読み込む（ファイルが存在しない場合エラー回避） if (debugMode) { try { image1 = loadImage( "images/LED_CUBE1.png", function () { console.log("LED_CUBE1.png 読み込み成功"); }, function () { console.log("LED_CUBE1.png が不明"); } ); } catch (e) { console.log("LED_CUBE1.png の読み込みをスキップ"); } try { image2 = loadImage( "images/LED_CUBE2.png", function () { console.log("LED_CUBE2.png 読み込み成功"); }, function () { console.log("LED_CUBE2.png が不明"); } ); } catch (e) { console.log("LED_CUBE2.png の読み込みをスキップ"); } try { image3 = loadImage( "images/LED_CUBE3.png", function () { console.log("LED_CUBE3.png 読み込み成功"); }, function () { console.log("LED_CUBE3.png が不明"); } ); } catch (e) { console.log("LED_CUBE3.png の読み込みをスキップ"); } } } // レイアウト参考画像の描画（draw関数内） function drawDebugMode() { if (debugMode) { if (image1 && image1.width > 0 && currentSize === "LED_CUBE1") { image(image1, 0, 0, width, height); } else if (image2 && image2.width > 0 && currentSize === "LED_CUBE2") { image(image2, 0, 0, width, height); } else if (image3 && image3.width > 0 && currentSize === "LED_CUBE3") { image(image3, 0, 0, width, height); } } } // キーボードでLED_CUBEのサイズを変更（1-4キー） function keyPressed() { // キーボードでサイズを切り替え if (key === "1") { currentSize = "LED_CUBE1"; setActive(1); } else if (key === "2") { currentSize = "LED_CUBE2"; setActive(2); } else if (key === "3") { currentSize = "LED_CUBE3"; setActive(3); } else if (key === "4") { currentSize = ""; // フルスクリーンレイアウト setActive(4); } // GraphicsLayer配列の切り替え if (key === "1" || key === "2" || key === "3" || key === "4") { updateURLAndCanvas(); // フルスクリーンモードの場合は少し遅延してGraphicsLayerを作成 if (key === "4") { setTimeout(() => { createGraphicsLayers(); console.log("4キー - GraphicsLayers作成完了:", graphicsLayers.length); }, 100); } else { createGraphicsLayers(); } } // レイヤーの切り替え（左右矢印キー） if (keyCode === LEFT_ARROW) { if (graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex - 1 + graphicsLayers.length) % graphicsLayers.length; console.log( `レイヤー切り替え: ${currentLayerIndex + 1}/${graphicsLayers.length}` ); } } if (keyCode === RIGHT_ARROW) { if (graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex + 1) % graphicsLayers.length; console.log( `レイヤー切り替え: ${currentLayerIndex + 1}/${graphicsLayers.length}` ); } } // スペースキーで現在のレイヤーのアクティブ状態を切り替え if (key === " ") { if (graphicsLayers.length > 0 && graphicsLayers[currentLayerIndex]) { graphicsLayers[currentLayerIndex].toggleActive(); console.log( `レイヤー ${currentLayerIndex + 1} のアクティブ状態を切り替え` ); } } background(0); } // アクティブなLEDキューブを設定 function setActive(n) { if (n === 1) active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; if (n === 2) active = { shapes: LED_CUBE2, spec: CUBE_SPEC_2 }; if (n === 3) active = { shapes: LED_CUBE3, spec: CUBE_SPEC_3 }; if (n === 4) { // フルスクリーン用の設定を動的に計算 createFullscreenLayout(); active = { shapes: LED_CUBE4, spec: CUBE_SPEC_4 }; console.log("フルスクリーンモード設定完了:", active); // フルスクリーンモードの場合はGraphicsLayerを即座に作成 setTimeout(() => { createGraphicsLayers(); console.log( "setActive(4) - GraphicsLayers作成完了:", graphicsLayers.length ); }, 50); } } //クエリパラメーターでLED_CUBEのサイズを変更 function createCanvasSetup() { // クエリパラメータからサイズを取得 const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]) { currentSize = sizeParam; // アクティブなLEDキューブを設定 if (sizeParam === "LED_CUBE1") setActive(1); if (sizeParam === "LED_CUBE2") setActive(2); if (sizeParam === "LED_CUBE3") setActive(3); } else { // URLパラメータが指定されていない場合はフルスクリーンレイアウト currentSize = ""; } createCanvasWithSize(); //キャンバスサイズの設定 // フルスクリーンモードの場合はキャンバス作成後にレイアウトを設定 if (!currentSize) { setActive(4); } } //URLParamsを更新してキャンバスサイズを変更 function updateURLAndCanvas() { // URLパラメータを更新 const url = new URL(window.location); if (currentSize) { url.searchParams.set("size", currentSize); } else { url.searchParams.delete("size"); // sizeパラメータを完全に削除 } window.history.replaceState({}, "", url); createCanvasWithSize(); // キャンバスサイズを変更 } //キャンバスサイズの設定 function createCanvasWithSize() { let size; if (currentSize && CANVAS_SIZES[currentSize]) { size = CANVAS_SIZES[currentSize]; } else { // URLパラメータが設定されていない場合はwindowWidthとwindowHeightを使用 size = { width: windowWidth, height: windowHeight }; } // 既存のキャンバスを削除 if (window.canvas) { window.canvas.remove(); } // キャンバスを作成 pixelDensity(1); createCanvas(size.width, size.height); console.log( `Canvasサイズ変更 : ${currentSize || "screen"} (${size.width}x${ size.height })` ); } // ======== LEDキューブ形状処理ユーティリティ ======== // rect/polyをポリゴン配列に正規化 function toPolygon(item) { return item.type === "rect" ? rectToPoly(item) : item.points; } // 矩形をポリゴンに変換 const rectToPoly = ({ x, y, w, h }) => [ [x, y], [x + w, y], [x + w, y + h], [x, y + h], ]; // クリッピング適用 function clipPolygon(poly) { push(); fill(0, 0); beginShape(); for (let i = 0; i < poly.length; i++) { vertex(poly[i][0], poly[i][1]); } endShape(CLOSE); pop(); } // フルスクリーンレイアウトの作成 function createFullscreenLayout() { const screenWidth = windowWidth; const screenHeight = windowHeight; // 既存のデータをクリア LED_CUBE4 = []; CUBE_SPEC_4 = null; // Graphicsサイズを画面幅の1/4に固定 const graphicsSize = screenWidth / 4; // 画面を覆い尽くす格子を計算 const gridCols = ceil(screenWidth / graphicsSize); const gridRows = ceil(screenHeight / graphicsSize); // 格子状にタイルを作成（正しく敷き詰める） LED_CUBE4 = []; for (let row = 0; row < gridRows; row++) { for (let col = 0; col < gridCols; col++) { // ランダムにGraphicsLayerのインデックスを選択（0-5の範囲） const randomIndex = floor(random(6)); LED_CUBE4.push({ type: "rect", name: `tile_${row}_${col}`, x: col * graphicsSize, y: row * graphicsSize, w: graphicsSize, h: graphicsSize, img_x: col * graphicsSize, img_y: row * graphicsSize, layerIndex: randomIndex % 6, // 確実に0-5の範囲に制限 }); } } // デバッグ: layerIndexの範囲を確認 let minLayerIndex = Infinity, maxLayerIndex = -Infinity; LED_CUBE4.forEach((tile) => { minLayerIndex = min(minLayerIndex, tile.layerIndex); maxLayerIndex = max(maxLayerIndex, tile.layerIndex); }); console.log( `layerIndex範囲: ${minLayerIndex} - ${maxLayerIndex} (6個のGraphicsLayerを使用)` ); // スペックを設定 CUBE_SPEC_4 = { w: screenWidth, h: screenHeight, size: graphicsSize, }; console.log( `フルスクリーンレイアウト作成: ${screenWidth}x${screenHeight}, 格子: ${gridCols}×${gridRows}, Graphicsサイズ: ${graphicsSize}, タイル数: ${LED_CUBE4.length}` ); } // LEDキューブの形状定義 // LED_CUBE1 2000×1440 const CUBE_SPEC_1 = { w: 2000, h: 1440, size: 720 }; const LED_CUBE1 = [ { type: "rect", name: "r1", x: 0, y: 0, w: 200, h: 720, img_x: -520, img_y: 0, }, { type: "rect", name: "r2", x: 200, y: 0, w: 720, h: 720, img_x: 200, img_y: 0, }, { type: "rect", name: "r3", x: 920, y: 0, w: 720, h: 720, img_x: 920, img_y: 0, }, { type: "rect", name: "r4", x: 1640, y: 0, w: 360, h: 720, img_x: 1640, img_y: 0, }, { type: "poly", name: "p1", points: [ [560, 1439], [560, 1079], [200, 1079], [200, 720], [919, 720], [919, 1439], [560, 1439], ], img_x: 200, img_y: 720, }, ]; // LED_CUBE2 1536×768 const CUBE_SPEC_2 = { w: 1536, h: 768, size: 384 }; const LED_CUBE2 = [ { type: "rect", name: "r1", x: 0, y: 0, w: 384, h: 384, img_x: 0, img_y: 0 }, { type: "rect", name: "r2", x: 384, y: 0, w: 384, h: 384, img_x: 384, img_y: 0, }, { type: "rect", name: "r3", x: 768, y: 0, w: 384, h: 384, img_x: 768, img_y: 0, }, { type: "rect", name: "r4", x: 1152, y: 0, w: 384, h: 384, img_x: 1152, img_y: 0, }, { type: "rect", name: "r5", x: 384, y: 384, w: 384, h: 384, img_x: 384, img_y: 384, }, ]; // LED_CUBE3 672×480 const CUBE_SPEC_3 = { w: 672, h: 480, size: 288 }; const LED_CUBE3 = [ { type: "rect", name: "r1", x: 192, y: 0, w: 288, h: 288, img_x: 192, img_y: 0, }, { type: "rect", name: "r2", x: 192, y: 288, w: 288, h: 192, img_x: 192, img_y: 288, }, { type: "poly", name: "p1", points: [ [64, 0], [192, 0], [192, 288], [0, 288], [0, 224], [96, 224], [96, 96], [64, 96], ], img_x: -96, img_y: 0, }, { type: "poly", name: "p2", points: [ [480, 287], [480, 0], [607, 0], [607, 95], [575, 95], [575, 224], [671, 224], [671, 287], [480, 287], ], img_x: 480, img_y: 0, }, ]; // フルスクリーン用の設定（動的に計算） let CUBE_SPEC_4 = null; let LED_CUBE4 = null; // 現在アクティブなLEDキューブの設定 let active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; // ユーティリティここまで //-------------------------------------

summer flow2