//------------------------------------- // プロジェクトの基本設定ここから 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, layer.graphics.width, layer.graphics.height ); // デバッグ用：タイルの境界を描画 if (debugMode) { noFill(); stroke(255, 0, 0); strokeWeight(1); rect( shape.img_x, shape.img_y, layer.graphics.width, layer.graphics.height ); } 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, layer.graphics.width, layer.graphics.height ); 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がない"); } } } // 個別Graphics管理クラス class GraphicsLayer { constructor(size, index, shape) { //クラスの変更しないほうがいいプロパティ this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = false; // 波のエフェクト用の初期化 this.waveStep = this.graphics.height / 4.0; // 波の数を調整 this.waveOffset = this.waveStep; this.easeX = this.graphics.width / 2; this.colorBase = 200; // 統一された色のベース（青系） this.waveNoiseOffset = 0; // 面ごとのnoiseオフセット（異なる動きのため） this.noiseOffsets = { front: 0, back: 0, left: 0, right: 0, bottom: 4000 }; // 固定された色配列（青系に限定） this.waveColors = []; for (let i = 0; i < 8; i++) { // 青系の色合いのみを作成 let blueHue; if (i < 4) { blueHue = 200 + random(-20, 20); // 標準的な青（185-215） } else if (i < 6) { blueHue = 210 + random(-30, 30); // 少し明るい青（200-220） } else { blueHue = 190 + random(-30, 30); // 少し暗い青（180-200） } this.waveColors.push({ h: blueHue, s: random(70, 90), // 彩度を上げる b: random(80, 95) // 明度を上げる }); } } // このレイヤーの計算処理 update() { // 波のエフェクトのみを使用 } // このレイヤーの描画処理 draw() { // 面の方向に応じて描画内容を変更 // 波のエフェクトを描画 this.drawWaves(); } // 面の方向を判定 getFaceDirection() { if (!this.shape) return 'front'; // shapeの名前から方向を判定 if (this.shape.name) { if (this.shape.name === 'left') return 'left'; if (this.shape.name === 'right') return 'right'; if (this.shape.name === 'front') return 'front'; if (this.shape.name === 'back') return 'back'; if (this.shape.name === 'bottom') return 'bottom'; } // フォールバック：元の名前での判定 if (this.shape.name) { if (this.shape.name === 'r1') return 'left'; if (this.shape.name === 'r2') return 'front'; if (this.shape.name === 'r3') return 'right'; if (this.shape.name === 'r4') return 'back'; if (this.shape.name === 'r5') return 'bottom'; if (this.shape.name === 'p1') return 'left'; if (this.shape.name === 'p2') return 'back'; } return 'front'; } // 波のエフェクトを描画 drawWaves() { this.graphics.push(); // HSBカラーモードを設定 this.graphics.colorMode(this.graphics.HSB, 360, 100, 100, 100); // 面の方向を取得 let direction = this.getFaceDirection(); // 底面の場合は静的なグラデーションを描画 if (direction === 'bottom') { this.drawBottomGradient(); } else { // その他の面は波のエフェクトを描画 this.drawWaveEffect(); } this.graphics.pop(); } // 底面用の円形波エフェクト drawBottomGradient() { // 背景を青色に設定（HSBモード） this.graphics.background(240, 120, 80); // 青系の色でグラデーション（HSBモード） this.graphics.colorMode(this.graphics.HSB, 360, 100, 100, 100); // 中心座標 let centerX = this.graphics.width / 2; let centerY = this.graphics.height / 2; // 円形の波を描画（断層的に重なる） let maxRadius = Math.max(this.graphics.width, this.graphics.height) / 2; let layerCount = 4; // 5つの明確な層 let layerHeight = maxRadius / layerCount; // 各層の高さ for (let layer = 0; layer < layerCount; layer++) { let time = frameCount * 0.003; // 時間の進行 // 各層の半径を明確に分離（大きさの差を調整） let baseRadius = maxRadius * (1 - layer * 0.22); // 各層が12%ずつ小さくなる // 層ごとに異なる青色（青色の中で差をつける） let layerColorVariation = this.graphics.sin(layer * 0.05 + time * 0.8) * 3; // 色の変化を抑制 let baseHue = 200 + (5-layer) * 8; // 層ごとに異なる青色（200-232の範囲） let c = this.graphics.color( baseHue + layerColorVariation, // 層ごとに異なる青色 100, 105 + layer * 6 // 明度を上げて差を穏やかに ); this.graphics.noStroke(); this.graphics.beginShape(); // グラデーション効果 let gradient = this.graphics.drawingContext.createRadialGradient( centerX, centerY, baseRadius * 0.1, centerX, centerY, baseRadius ); gradient.addColorStop(0, c); // グラデーションの外側の色（非常に穏やかな変化） let c2 = this.graphics.color( this.graphics.hue(c) + 10, // 色相の変化を大幅に抑制 this.graphics.saturation(c) + 30, // 彩度の変化を大幅に抑制 this.graphics.brightness(c) + 50 // 明度の変化を大幅に抑制 ); gradient.addColorStop(1, c2); this.graphics.drawingContext.fillStyle = gradient; // シャドウを設定 this.graphics.drawingContext.shadowColor = this.graphics.color(0, 0, 0, 100); this.graphics.drawingContext.shadowOffsetY = 3; this.graphics.drawingContext.shadowBlur = 15; // 各層の円形の波の形状を描画 let segments = 80; // 円の分割数を増やして滑らかに for (let i = 0; i <= segments; i++) { let angle = (i / segments) * this.graphics.TWO_PI; // ノイズによる波の変形（層ごとに異なるパターン、より動的に） let noiseX = (centerX + Math.cos(angle) * baseRadius) * 0.005; let noiseY = (centerY + Math.sin(angle) * baseRadius) * 0.005; let noiseTime = frameCount * 0.02 + layer * 30; // より速い時間変化 let n = this.graphics.noise(noiseX, noiseY, noiseTime); // 追加の動的な変形 let dynamicOffset = this.graphics.sin(angle * 3 + time * 2) * 10; let radiusVariation = this.graphics.cos(angle * 2 + time * 1.5) * 15; // 波の高さを計算（5つの層でより明確に） let waveIntensity = 60 - layer * 10; // 波の強度を層ごとに大きく差をつける let waveHeight = this.graphics.map(n, 0, 1, -waveIntensity, waveIntensity) + dynamicOffset + radiusVariation; // 層の厚みを追加（5つの層でより明確に） let layerThickness = baseRadius * 0.1 + this.graphics.sin(time * 0.5 + layer) * 10; // 半径に比例した厚み let waveRadius = baseRadius + waveHeight + layerThickness; let x = centerX + Math.cos(angle) * waveRadius; let y = centerY + Math.sin(angle) * waveRadius; this.graphics.curveVertex(x, y); } this.graphics.endShape(this.graphics.CLOSE); } // フェード効果 this.graphics.fill(0, 0, 0, 4); this.graphics.rect(0, 0, this.graphics.width, this.graphics.height); } // 波のエフェクトを描画 drawWaveEffect() { // 波のアニメーション更新 this.updateWaves(); // 背景を黒に設定（HSBモード） this.graphics.background(0, 0, 0); // 波の描画（グラデーション版） for (let y = 0; y <= this.graphics.height; y += this.waveStep) { // 時間に応じて変化する色を使用 let timeBasedParams = this.getTimeBasedNoiseParams(); // 5つの層それぞれに異なる色を割り当て let layerIndex = Math.floor(y / (this.graphics.height / 5)); let layerColors = [ { hue: 220, sat: 85, bright: 90 }, // 深い青 { hue: 210, sat: 80, bright: 85 }, // 青 { hue: 200, sat: 75, bright: 80 }, // 明るい青 { hue: 190, sat: 70, bright: 75 }, // 水色 { hue: 180, sat: 65, bright: 70 } // 薄い青 ]; let layerColor = layerColors[layerIndex % layerColors.length]; let colorVariation = this.graphics.sin(y * 0.01 + frameCount * 0.02) * 5; // 色の変化を小さく let c = this.graphics.color( layerColor.hue + colorVariation, layerColor.sat, layerColor.bright, 100 ); this.graphics.fill(c); this.graphics.noStroke(); this.graphics.beginShape(); // グラデーション効果（青系に調整） let gradient = this.graphics.drawingContext.createLinearGradient(0, y, 0, y + this.waveStep * 1.5); gradient.addColorStop(0, c); // 青系の色でグラデーションを作成 let c2 = this.graphics.color( this.graphics.hue(c)+30, // 元の色相を使用 this.graphics.saturation(c) + 20, // 彩度を少し上げる this.graphics.brightness(c) + 30 // 明度を上げる ); gradient.addColorStop(1, c2); this.graphics.drawingContext.fillStyle = gradient; // 波の影を設定 this.graphics.drawingContext.shadowColor = this.graphics.color(0, 0, 0, 100); this.graphics.drawingContext.shadowOffsetY = 5; this.graphics.drawingContext.shadowBlur = 20; // 波の形状を描画 this.graphics.curveVertex(-this.waveStep, y + this.graphics.height); for (let x = -this.waveStep; x <= this.graphics.width + this.waveStep; x += this.waveStep) { // 面ごとに異なるノイズの計算 let direction = this.getFaceDirection(); // 時間に応じてノイズパラメータを動的に変化 let timeBasedParams = this.getTimeBasedNoiseParams(); let noiseX = (x + this.getWaveNoiseX(direction)) * timeBasedParams.noiseXScale; let noiseY = y * timeBasedParams.noiseYScale; let noiseTime = this.noiseOffsets[direction] * timeBasedParams.noiseTimeScale; let n = this.graphics.noise(noiseY, noiseX, noiseTime); // ノイズ値の平滑化（スムージング） if (!this.previousNoiseValues) { this.previousNoiseValues = {}; } let key = `${direction}_${x}_${y}`; if (!this.previousNoiseValues[key]) { this.previousNoiseValues[key] = n; } // 前の値との補間で滑らかにする let smoothingFactor = 0.3; // 0.1-0.5の範囲で調整（小さいほど滑らか） let smoothedN = this.graphics.lerp(this.previousNoiseValues[key], n, smoothingFactor); this.previousNoiseValues[key] = smoothedN; // 面ごとに異なる波の動き（高さ制限付き） let maxWaveHeight = this.graphics.height / 4; // 波の高さを制限 let waveHeight = this.graphics.map(smoothedN, 0, 1, -maxWaveHeight, maxWaveHeight); // さらに滑らかにするための補間 let y2 = y + waveHeight; this.graphics.curveVertex(x, y2); } this.graphics.curveVertex(this.graphics.width + this.waveStep, y + this.graphics.height / 2.5); this.graphics.endShape(this.graphics.CLOSE); } // フェード効果 this.graphics.fill(0, 0, 0, 4); this.graphics.rect(0, 0, this.graphics.width, this.graphics.height); } // 時間に応じてノイズパラメータを動的に変化させる getTimeBasedNoiseParams() { let time = frameCount * 0.003; // 時間変化を緩和 let cycleLength = 500; // 1パターンの長さ let currentCycle = frameCount % cycleLength; // 現在のサイクル内での位置 let pattern = Math.floor(frameCount / cycleLength) % 4; // 現在のパターン let nextPattern = (pattern + 1) % 4; // 次のパターン let transitionProgress = currentCycle / cycleLength; // 0-1の遷移進行度 // 各パターンのパラメータと色を定義（青系のみ） let patterns = [ // パターン0: 細かい波（深い青） { noiseXScale: 0.02 + this.graphics.sin(time * 0.8) * 0.0003, noiseYScale: 0.003 + this.graphics.sin(time * 0.5) * 0.003, noiseTimeScale: 0.004 + this.graphics.sin(time * 0.3) * 0.0008, baseHue: 220, baseSaturation: 85, baseBrightness: 90 }, // パターン1: 大きな波（明るい青） { noiseXScale: 0.001 + this.graphics.sin(time * 0.7) * 0.0002, noiseYScale: 0.05 + this.graphics.sin(time * 0.4) * 0.005, noiseTimeScale: 0.006 + this.graphics.sin(time * 0.6) * 0.001, baseHue: 200, baseSaturation: 80, baseBrightness: 95 }, // パターン2: 中程度の波（水色） { noiseXScale: 0.0025 + this.graphics.sin(time * 0.8) * 0.0004, noiseYScale: 0.025 + this.graphics.sin(time * 0.6) * 0.004, noiseTimeScale: 0.005 + this.graphics.sin(time * 0.5) * 0.0012, baseHue: 190, baseSaturation: 75, baseBrightness: 85 }, // パターン3: 穏やかな波（薄い青） { noiseXScale: 0.0015 + this.graphics.sin(time * 0.3) * 0.0002, noiseYScale: 0.04 + this.graphics.sin(time * 0.2) * 0.002, noiseTimeScale: 0.003 + this.graphics.sin(time * 0.4) * 0.0006, baseHue: 210, baseSaturation: 70, baseBrightness: 80 } ]; // 現在のパターンと次のパターン間を補間 let current = patterns[pattern]; let next = patterns[nextPattern]; // スムーズな補間（イージング関数を使用） let easeProgress = this.easeInOutQuad(transitionProgress); return { noiseXScale: this.graphics.lerp(current.noiseXScale, next.noiseXScale, easeProgress), noiseYScale: this.graphics.lerp(current.noiseYScale, next.noiseYScale, easeProgress), noiseTimeScale: this.graphics.lerp(current.noiseTimeScale, next.noiseTimeScale, easeProgress), // 色の補間 baseHue: this.graphics.lerp(current.baseHue, next.baseHue, easeProgress), baseSaturation: this.graphics.lerp(current.baseSaturation, next.baseSaturation, easeProgress), baseBrightness: this.graphics.lerp(current.baseBrightness, next.baseBrightness, easeProgress) }; } // イージング関数（スムーズな補間のため） easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; } // ノイズの値の調整用 getWaveNoiseX(direction) { switch(direction) { case 'left': return 0; // 左側面 case 'right': return this.graphics.width*2; // 右側面 case 'front': return this.graphics.width; // 前面 case 'back': return this.graphics.width*3; // 裏面 default: return 1.0; } } // 波のアニメーション更新 updateWaves() { // マウス位置に基づく波の動き（中央を基準に） let targetX = this.graphics.width / 2; let dx = targetX - this.easeX; this.easeX += dx * 0.08; // 面ごとに異なるnoiseオフセットを更新 let direction = this.getFaceDirection(); if (this.noiseOffsets[direction] !== undefined) { this.noiseOffsets[direction] += 1.4; } } // ボールの描画と物理演算 drawBalls(g) { g.push(); g.noStroke(); for (let i = 0; i < this.balls.length; i++) { let ball = this.balls[i]; // ボールの描画 g.fill(ball.color); g.ellipse(ball.x, ball.y, ball.size); // ボールの影を描画 g.fill(0, 50); g.ellipse(ball.x + 2, ball.y + 2, ball.size); } g.pop(); } // レイヤーを削除 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: "left", x: 0, y: 0, w: 200, h: 720, img_x: -520, img_y: 0, }, { type: "rect", name: "front", x: 200, y: 0, w: 720, h: 720, img_x: 200, img_y: 0, }, { type: "rect", name: "right", x: 920, y: 0, w: 720, h: 720, img_x: 920, img_y: 0, }, { type: "rect", name: "back", x: 1640, y: 0, w: 360, h: 720, img_x: 1640, img_y: 0, }, { type: "poly", name: "bottom", 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: "left", x: 0, y: 0, w: 384, h: 384, img_x: 0, img_y: 0 }, { type: "rect", name: "front", x: 384, y: 0, w: 384, h: 384, img_x: 384, img_y: 0, }, { type: "rect", name: "right", x: 768, y: 0, w: 384, h: 384, img_x: 768, img_y: 0, }, { type: "rect", name: "back", x: 1152, y: 0, w: 384, h: 384, img_x: 1152, img_y: 0, }, { type: "rect", name: "bottom", 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: "front", x: 192, y: 0, w: 288, h: 288, img_x: 192, img_y: 0, }, { type: "rect", name: "bottom", x: 192, y: 288, w: 288, h: 192, img_x: 192, img_y: 288, }, { type: "poly", name: "left", 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: "right", 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 }; // ユーティリティここまで //-------------------------------------

wave2