//------------------------------------- // プロジェクトの基本設定ここから 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(); getCurrentTime(); selectTheme(); 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}`); } createArrows(); } 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(); } arrows.sort((a, b) => { //大きい矢印を手前に if (a.size < b.size) { return -1 } else if (a.size > b.size) { return 1 } return 0 }); if (frameCount % 600 == 0) { const rand = random(); if (rand < 0.2) { arrows.forEach(el => { el.vel.mult(0, 1); }); } else if (rand < 0.4) { arrows.forEach(el => { el.vel.mult(-1, 0); }); } else if (rand < 0.6) { arrows.forEach(el => { el.vel.mult(-1); }); } else if (rand < 0.8) { arrows.forEach(el => { el.vel.mult(0, -1); }); } else { arrows.forEach(el => { el.vel.mult(1, 0); }); } } arrows.forEach(el => { el.move(); el.show(); }); // メインキャンバスに描画 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 ); push(); //idを表示 if (shape.id === 1) { textAlign(RIGHT, TOP); text(shape.id, shape.img_x + layer.graphics.width, shape.img_y); } else { textAlign(LEFT, TOP); text(shape.id, shape.img_x, shape.img_y); } pop(); } 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 ); if (debugMode) { //idを表示 if (shape.id === 1) { textAlign(RIGHT, TOP); text(shape.id, shape.img_x + layer.graphics.width, shape.img_y); } else { textAlign(LEFT, TOP); text(shape.id, shape.img_x, shape.img_y); } } pop(); } else if (shape.type === "hidden") { //rectと描画方法は変わらないが、仮想平面は通常は隠れているため、描画しない // デバッグ用：画面の右下に描画タイルの境界を描画する if (debugMode) { image( layer.graphics, width + shape.img_x, height + shape.img_y, shape.w, shape.h ); noFill(); stroke(255, 0, 0); strokeWeight(1); rect( width + shape.img_x, height + shape.img_y, shape.w, shape.h ); push(); //idを表示 textAlign(LEFT, TOP); text(shape.id, width + shape.img_x, height + shape.img_y); pop(); } else { noStroke(); } } } 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 baseTheme = { dawn: { name: "dawn", palette: [ ["#2c2355ff", "#f1364fff"], ["#131238ff", "#7361ecff"], ["#0B132Bff", "#ecd8f3ff"] ], initFunc: (graphics) => { graphics.background(0); }, bgFunc: (graphics) => { graphics.blendMode(MULTIPLY); graphics.background(253, 245, 255); graphics.blendMode(DIFFERENCE); graphics.background(2, 2, 1); graphics.blendMode(BLEND); } }, dusk: { name: "dusk", palette: [ ["#2c2355ff", "#f58516ff"], ["#131238ff", "#eccb87ff"], ["#0B132Bff", "#4a7bd6ff"] ], initFunc: (graphics) => { graphics.background(0); }, bgFunc: (graphics) => { graphics.blendMode(MULTIPLY); graphics.background(255, 245, 254); graphics.blendMode(DIFFERENCE); graphics.background(1, 1, 2); graphics.blendMode(BLEND); } }, night: { name: "night", palette: [ ["#131238ff", "#8a2fb7ff"], ["#0B132Bff", "#b6e9c3ff"], ["#2c2355ff", "#f0ed25ff"] ], initFunc: (graphics) => { graphics.background(0); }, bgFunc: (graphics) => { graphics.blendMode(MULTIPLY); graphics.background(245, 245, 254); graphics.blendMode(DIFFERENCE); graphics.background(2, 1, 2); graphics.blendMode(BLEND); } }, stardust: { name: "stardust", palette: [ ["#131238ff", "#dfedfbff"], ["#0b182bff", "#f1ee99ff"], ["#2c2355ff", "#7ea0eeff"] ], initFunc: (graphics) => { graphics.background(0); }, bgFunc: (graphics) => { graphics.blendMode(MULTIPLY); graphics.background(245, 245, 254); graphics.blendMode(DIFFERENCE); graphics.background(2, 1, 2); graphics.blendMode(BLEND); } }, chestnut: { name: "chestnut", palette: [ ["#3C1518", "#d65a07ff"], ["#69140E", "#D58936"], ["#115353", "#0E9594"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, chocolate: { name: "chocolate", palette: [ ["#EBBAB9", "#CC2936"], ["#b4ccd1ff", "#08415C"], ["#ecce9c", "#86421b"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, lolipop: { name: "lolipop", palette: [ ["#ebb9ccff", "#e25496ff"], ["#b4ccd1ff", "#3ea6c6ff"], ["#ecce9c", "#643318ff"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, highland: { name: "highland", palette: [ ["#9cf17dff", "#54c988ff"], ["#e9ffb6ff", "#28a456ff"], ["#edebaeff", "#ee8427ff"], ], initFunc: (graphics) => { graphics.background(random(["#eec080", "#80c988", "#7fc180"])); }, bgFunc: (graphics) => { graphics.blendMode(SCREEN); graphics.background(1, 2, 1); graphics.blendMode(BLEND); } }, mono: { name: "mono", palette: [ ["#e6eeefff", "#0a0a79ff"], ["#7f9095ff", "#221f2fff"], ["#010004ff", "#e9ebf0ff"], ], initFunc: (graphics) => { graphics.background(0); }, bgFunc: (graphics) => { graphics.blendMode(MULTIPLY); graphics.background(245, 245, 245); graphics.blendMode(DIFFERENCE); graphics.background(2, 2, 2); graphics.blendMode(BLEND); } }, sakura: { name: "sakura", palette: [ ["#054127ff", "#65bd4bff"], ["#F9B9C3", "#D87CAC"], ["#271c03ff", "#FFDA22"], ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, rose: { name: "rose", palette: [ ["#2C0703", "#ec4267ff"], ["#f1c6c3ff", "#890620"], ["#31260aff", "#f57abaff"], ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, iris: { name: "iris", palette: [ ["#e9ddefff", "#B14AED"], ["#bce3ecff", "#454ADE"], ["#5063f1ff", "#1B1F3B"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, beach: { name: "beach", palette: [ ["#36C9C6", "#F4F1BB"], ["#df911cff", "#9BC1BC"], ["#df7466ff", "#E6EBE0"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, forest: { name: "forest", palette: [ ["#CFEE9E", "#1E2019"], ["#abecacff", "#316026ff"], ["#2b3b2fff", "#8DAB7F"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } }, cray: { name: "cray", palette: [ ["#d9dcc8ff", "#3D405B"], ["#eaedd3ff", "#E07A5F"], ["#1b2329ff", "#F4F1DE"] ], initFunc: (graphics) => { graphics.background(random(colorTheme.palette)[1]); }, bgFunc: (graphics) => { } } } let colorTheme; let currentTime; // 速さの最大値 let speed = 2; // 操舵力の最大値 const maxForce = 0.1; // 矢印の総数 // createArrows()で時間に応じて設定 let qty = 150; // 視角範囲 const viewAngle = Math.PI * 1.5; // Arrowクラスを格納する let arrows = []; // 出現にかかる時間 (frame) const appearTime = 240; // 位置がリセットされるまでの時間 (frame) const duration = 1200; // サイズが0の時間 (frame) const sleepTime = 400; // setDynamicsConfig()で再設定可能 let dynamicsConfig = { separateLevel: 1.5, alignLevel: 1.2, cohesionLevel: 1.1, wanderLevel: 0.2 } // 矢印のクラス class Arrow { /** * * @param {p5.Vector} pos 位置ベクトル * @param {p5.Vector} vel 速度ベクトル */ constructor(pos, vel) { // 位置と速度のベクトル this.pos = pos; this.vel = vel; // 徘徊するためのノイズのシード値 this.seed = random(duration); this.age = int(this.seed); // ランダムな大きさにする this.maxSize = active.spec.size / 15 + abs(randomGaussian(0, active.spec.size / 30)); this.size = 0; // 速度ベクトルから表示する向きを取得 this.updateAngle(); this.updateSize(); // 初期位置をランダムに決める this.mainGraphics = graphicsLayers[int(random(graphicsLayers.length))]; this.neighborTransform = []; this.strokeW = random(0.4, 0.8) } /** * 塗りと縁の色を決める * @param {Array} palette */ setColor(palette) { // subColが縁の色 this.mainColor = color(palette[0]); this.subColor = color(palette[1]); } /** * ベクトルの操作を行う */ move() { this.updateAngle(); this.updateDynamics(arrows); // idが0（フルスクリーン、もしくは読み込みに失敗している）場合、元の平面にとどまる if (this.mainGraphics.id === 0) { this.warp(); } else { this.changeMainGraphics(); this.getNeighborGraphics(); } this.updateSize(); this.age++; this.age = this.age % (duration + sleepTime); if (this.age === 0) { this.resetPos(); } } /** * 時間によって大きさを変える */ updateSize() { if (this.age < appearTime) { this.size = lerp(0, this.maxSize, easeInOutCubic(map(this.age, 0, appearTime, 0, 1))); } else if (this.age >= duration - appearTime) { this.size = lerp(0, this.maxSize, easeInOutCubic(map(this.age, duration - appearTime, duration, 1, 0))); } else { this.size = this.maxSize; } this.size = constrain(this.size, 0, this.maxSize); } /** * 速度ベクトルを基に矢印の方向を決める */ updateAngle() { // 速度が非常に小さい場合は、角度を更新しない if (this.vel.magSq() < 0.0001) { return; } let targetAngle = this.vel.heading(); if (this.angle === undefined) { this.angle = targetAngle; } else { //-PI< this.angle <= PIに抑える while (this.angle < -PI) { this.angle += TAU; } while (this.angle > PI) { this.angle -= TAU; } // 現在の角度と目標の角度の差を計算 let angleDiff = targetAngle - this.angle; // 角度の差が180度（PIラジアン）を超えないように、最短経路で回転するように調整 if (angleDiff < -PI) { targetAngle += TAU; } if (angleDiff > PI) { targetAngle -= TAU; } this.angle = lerp(this.angle, targetAngle, 0.08); } } /** * 位置によって所属する平面を変えるメソッド */ changeMainGraphics() { let transform; // 判定が重なった場合は50%の確率で振り分けられる if (this.pos.x < 0 && this.pos.y < 0) { if (random() < 0.5) { // connectionListに隣接する平面とその変換が格納されている transform = connectionList.LEFT[this.mainGraphics.id]; } else { transform = connectionList.TOP[this.mainGraphics.id]; } } else if (this.pos.x > active.spec.size && this.pos.y > active.spec.size) { if (random() < 0.5) { transform = connectionList.RIGHT[this.mainGraphics.id]; } else { transform = connectionList.BOTTOM[this.mainGraphics.id]; } } else if (this.pos.x < 0) { transform = connectionList.LEFT[this.mainGraphics.id]; } else if (this.pos.x > active.spec.size) { transform = connectionList.RIGHT[this.mainGraphics.id]; } else if (this.pos.y < 0) { transform = connectionList.TOP[this.mainGraphics.id]; } else if (this.pos.y > active.spec.size) { transform = connectionList.BOTTOM[this.mainGraphics.id]; } // transformのidが0の場合、何もしない if (transform && transform.id !== 0) { const nextGraphics = graphicsLayers[transform.id - 1]; // 線形変換する const nextPos = p5.Vector.rotate(this.pos, transform.rotation * PI).add(transform.moveX * active.spec.size, transform.moveY * active.spec.size); const nextVel = p5.Vector.rotate(this.vel, transform.rotation * PI); this.mainGraphics = nextGraphics; this.pos.set(nextPos); this.vel.set(nextVel); // 角度に即時適用する this.angle += transform.rotation * PI; } } /** * 隣接した平面をneighborTransform配列に入れるメソッド */ getNeighborGraphics() { // 平面のコーナーに位置が属する場合、写り込みは隣接する二つの平面に発生するため、配列によって管理する this.neighborTransform = []; const marginLevel = 2; // 平面の境界を超えた時、急に出現するのを防ぐため、セーフマージンを超えたら別のグラフィックでの描画を準備する if (this.pos.x < this.size * marginLevel) { this.neighborTransform.push(connectionList.LEFT[this.mainGraphics.id]); } else if (this.pos.x > active.spec.size - this.size * marginLevel) { this.neighborTransform.push(connectionList.RIGHT[this.mainGraphics.id]); } if (this.pos.y < this.size * marginLevel) { this.neighborTransform.push(connectionList.TOP[this.mainGraphics.id]); } else if (this.pos.y > active.spec.size - this.size * marginLevel) { this.neighborTransform.push(connectionList.BOTTOM[this.mainGraphics.id]); } } /** * 位置によって写り込みが発生する平面に矢印を描画するメソッド */ applyNeighborGraphics() { this.neighborTransform.forEach(area => { // 取得した平面の変換プロパティで位置と向きを補正する // idが0の場合、何もしない if (area.id === 0) return; const neighborGraphics = graphicsLayers[area.id - 1]; // 線形変換する const neighborPos = p5.Vector.rotate(this.pos, area.rotation * PI).add(area.moveX * active.spec.size, area.moveY * active.spec.size); const neighborAngle = this.angle + area.rotation * PI // 隣接する平面上の擬似的な位置で描画する this.applyGraphics(neighborGraphics.graphics, neighborPos, neighborAngle); }); } /** * 描画メソッド */ show() { //矢印自身が所属するGraphicsLayerを描画する this.applyGraphics(this.mainGraphics.graphics); //矢印自身が周囲に映り込むGraphicsLayerを描画する this.applyNeighborGraphics(); } /** * 指定した平面（GraphicsLayer）に対して描画するメソッド * @param {p5.Graphics} graphics GraphicsLayerから渡される * @param {p5.Vector} pos 位置ベクトル（隣接する平面によって変換された座標が入れられることもある） * @param {number} angle 矢印の角度（隣接する平面によって変換された角度が入れられることもある） */ applyGraphics(graphics, pos = this.pos, angle = this.angle) { const g = graphics; g.noFill(); // 縁を描く g.stroke(this.subColor); this.arrow(g, pos, this.size, angle, this.size * this.strokeW); // 塗りを描く g.stroke(this.mainColor); this.arrow(g, pos, this.size, angle, this.size * 0.25); } /** * 矢印を描くメソッド * @param {p5.Graphics} graphics GraphicsLayerから渡される * @param {p5.Vector} pos 位置ベクトル * @param {number} size 大きさ * @param {number} angle 矢印の角度 * @param {number} weight 太さ */ arrow(graphics, pos, size, angle, weight = size / 4) { graphics.strokeWeight(weight); graphics.line(-size / 2 * Math.cos(angle) + pos.x, -size / 2 * Math.sin(angle) + pos.y, size / 2* Math.cos(angle) + pos.x, size / 2 * Math.sin(angle) + pos.y); graphics.line(size / 2 * Math.cos(angle-PI/2) + pos.x, size / 2 * Math.sin(angle-PI/2) + pos.y, size / 2* Math.cos(angle) + pos.x, size / 2 * Math.sin(angle) + pos.y); graphics.line(size / 2 * Math.cos(angle+PI/2) + pos.x, size / 2 * Math.sin(angle+PI/2) + pos.y, size / 2* Math.cos(angle) + pos.x, size / 2 * Math.sin(angle) + pos.y); } /** * ランダムな表示されている平面の位置をリセットするメソッド */ resetPos() { this.pos.set(random(active.spec.size), random(active.spec.size)); if (this.mainGraphics.id !== 0) { const visibleLayerID = graphicsLayers.filter(layer => layer.shape.type !== "hidden").map(layer => layer.id); this.mainGraphics = graphicsLayers[random(visibleLayerID)-1]; } } /** * 範囲外に移動した場合、対面に移動させるメソッド * ドラクエ方式で上下、左右が繋がっている * 基本、デバッグ時にしか使用しない */ warp() { if (this.pos.x < -this.size) { this.pos.x += (active.spec.size + this.size * 2); } else if (this.pos.x > active.spec.size + this.size) { this.pos.x -= (active.spec.size + this.size * 2); } if (this.pos.y < -this.size) { this.pos.y += (active.spec.size + this.size * 2); } else if (this.pos.y > active.spec.size + this.size) { this.pos.y -= (active.spec.size + this.size * 2); } } /** * Boidアルゴリズムを適用する関数 * 一般的な群衆アルゴリズムを応用 * @param {Array} arrowArr arrowが格納されている配列 */ updateDynamics(arrowArr) { const visibleArrow = []; arrowArr.forEach(otherArrow => { // この矢印クラスの平面座標系の位置に合わせた相手の位置を得る const transformedState = this.getTransformedState(otherArrow); // 座標が取得できた場合のみ、距離と視野角のチェックを行う if (transformedState) { const distance = this.pos.dist(transformedState.pos); const combinedRadius = (this.size + transformedState.size) * 2; if (distance > 0 && distance < combinedRadius) { // 互いの位置を減算して、自分から相手へのベクトルを得る const toOther = p5.Vector.sub(transformedState.pos, this.pos); let angleDiff = toOther.heading() - this.vel.heading(); //角度の正規化 if (angleDiff > PI) angleDiff -= TAU; if (angleDiff < -PI) angleDiff += TAU; if (abs(angleDiff) < viewAngle / 2) { // 見える相手の「変換後の情報」をリストに追加 visibleArrow.push(transformedState); } } } }); // 分離 const separateForce = this.separate(visibleArrow); // 整列 const alignForce = this.align(visibleArrow); // 凝集 const cohesionForce = this.cohesion(visibleArrow); // 徘徊 const wanderForce = this.wander(); separateForce.mult(dynamicsConfig.separateLevel); alignForce.mult(dynamicsConfig.alignLevel); cohesionForce.mult(dynamicsConfig.cohesionLevel); wanderForce.mult(dynamicsConfig.wanderLevel); const force = createVector(); // 全ての外力を合計する force.add(separateForce); force.add(alignForce); force.add(cohesionForce); force.add(wanderForce); // 速度ベクトルに適用する this.vel.add(force); // 規定値で制限 this.vel.limit(speed); // 位置ベクトルに適用する this.pos.add(this.vel); } /** * 隣接面に存在する矢印を自身の平面の座標系に変換するメソッド * @param {Arrow} otherArrow * @returns {Object} 逆変換がかけられた位置ベクトル、速度ベクトル、大きさ */ getTransformedState(otherArrow) { // 自身は判定しない if (this === otherArrow) { return null; } // 同じ平面にいる場合 if (this.mainGraphics.id === otherArrow.mainGraphics.id) { // 変換は不要なので、そのままの位置と速度を返す return { pos: otherArrow.pos.copy(), vel: otherArrow.vel.copy(), size: otherArrow.size }; } // 隣接する平面にいるかチェック const transform = this.neighborTransform.find(area => area.id === otherArrow.mainGraphics.id); if (transform) { // 相手がこの隣接面にいるので、逆変換を適用する const transformedPos = otherArrow.pos.copy(); const transformedVel = otherArrow.vel.copy(); // 逆変換 transformedPos.sub(transform.moveX * active.spec.size, transform.moveY * active.spec.size); transformedPos.rotate(-PI * transform.rotation); transformedVel.rotate(-PI * transform.rotation); return { pos: transformedPos, vel: transformedVel, size: otherArrow.size }; } return null; } /** * 追従するために加える力のベクトルを求めるメソッド * @param {p5.Vector} target 目標となる位置ベクトル * @returns {p5.Vector} 操舵力 */ follow(target) { // 減算によって、誘導する方向を得る const attraction = p5.Vector.sub(target, this.pos); // 速さを調整する attraction.setMag(speed); // 減算によって、誘導する速度の方向を得る const steer = p5.Vector.sub(attraction, this.vel); // 最大値でクランプする steer.limit(maxForce); return steer; } /** * 分離する力のベクトルを求めるメソッド * @param {Array} visibleArrow 座標変換済みのarrowが格納されている配列 * @returns {p5.Vector} 操舵力 */ separate(visibleArrow) { let sum = createVector(0, 0); if (visibleArrow.length === 0) return sum; visibleArrow.forEach(el => { const d = this.pos.dist(el.pos); const diff = p5.Vector.sub(this.pos, el.pos); diff.normalize(); const sizeFactor = (this.size + el.size) * 2; diff.mult(sizeFactor); diff.div(pow(d, 1.2)); sum.add(diff); }); sum.div(visibleArrow.length); if (sum.mag() > 0) { sum.setMag(speed); const steer = p5.Vector.sub(sum, this.vel); steer.limit(maxForce); return steer; } return createVector(0); } /** * 凝集する力のベクトルを求めるメソッド * @param {Array} visibleArrow 座標変換済みのarrowが格納されている配列 * @returns {p5.Vector} 操舵力 */ cohesion(visibleArrow) { let steer = createVector(0, 0); if (visibleArrow.length === 0) return steer; visibleArrow.forEach(el => steer.add(el.pos)); return this.follow(steer.div(visibleArrow.length)); } /** * 整列する力のベクトルを求めるメソッド * @param {Array} visibleArrow 座標変換済みのarrowが格納されている配列 * @returns {p5.Vector} 操舵力 */ align(visibleArrow) { let sum = createVector(0, 0); if (visibleArrow.length === 0) return sum; visibleArrow.forEach(el => sum.add(el.vel)); sum.div(visibleArrow.length); if (sum.mag() > 0) { sum.setMag(speed); const steer = p5.Vector.sub(sum, this.vel); steer.limit(maxForce); return steer; } return createVector(0); } /** * 徘徊するために加える力のベクトルを求めるメソッド * @returns {p5.Vector} 操舵力 */ wander() { // ノイズによって回転を指定する const noiseSpeed = 0.005; const noiseLevel = PI / 64; const wanderAngle = noiseLevel * (2 * noise(frameCount * noiseSpeed) - 1, this.seed); const wanderVel = p5.Vector.rotate(this.vel, wanderAngle); const steer = p5.Vector.sub(wanderVel, this.vel); steer.limit(maxForce); return steer; } } /** * 矢印クラスが格納された配列を作成する関数 * GraphicLayerが再構築された時に呼び出し、時間に応じた矢印の総数とboidのコンフィグを設定する */ function createArrows() { const hour = currentTime.h; /* DEFAULT separateLevel: 1.5, alignLevel: 1.2, cohesionLevel: 1.1, wanderLevel: 0.2 */ if (hour < 6) { qty = int(random(50, 100)); setDynamicsConfig(1.8, 1.2, 1.3, 0.5); } else if (hour < 11) { qty = int(random(200, 350)); setDynamicsConfig(1.5, 1.2, 1.1, 0.2); } else if (hour < 17) { qty = int(random(150, 220)); setDynamicsConfig(1.6, 1.3, 1.3, 0.4); } else if (hour < 20) { qty = int(random(200, 250)); setDynamicsConfig(1.5, 1.2, 1.1, 0.2); } else { qty = int(random(100, 150)); setDynamicsConfig(1.5, 2, 1.5, 0.5); } console.log(`矢印の数 ${qty}個`); arrows = []; speed = active.spec.size / 200; for (let i = 0; i < qty; i++) { arrows.push(new Arrow(createVector(random(active.spec.size), random(active.spec.size)), p5.Vector.random2D().mult(5))); arrows[arrows.length - 1].setColor(selectPalette()); } } function setDynamicsConfig(separate, align, cohesion, wander) { dynamicsConfig.separateLevel = separate; dynamicsConfig.alignLevel = align; dynamicsConfig.cohesionLevel = cohesion; dynamicsConfig.wanderLevel = wander; } /** * テーマを選ぶ関数 * @param {string} themeName テーマ名 */ function selectTheme(themeName) { // themeNameが指定され、かつbaseThemeに存在する場合 if (themeName && baseTheme[themeName]) { colorTheme = baseTheme[themeName]; } else { const hour = currentTime.h; if (hour < 4) { themeName = random(["night", "stardust", "mono"]); } else if (hour < 6) { themeName = random(["dawn", "dusk", "beach"]); } else if (hour < 18) { themeName = random(["chestnut", "chocolate", "lolipop", "highland", "mono", "rose", "iris", "beach", "forest"]); } else if (hour < 20) { themeName = random(["dawn", "dusk"]); } else { themeName = random(["night", "stardust", "mono"]); } colorTheme = baseTheme[themeName]; console.log(`現在のテーマ　name= ${themeName} palette= ${colorTheme.palette}`); } } /** * 確率によって色を選定する関数 * @returns {Array} 0番目の要素に明度の低い色、1番目の要素に明度の高い色が格納されているパレット */ function selectPalette() { const val = random(); if (val < 0.45) { return colorTheme.palette[0] } else if (val < 0.9) { return colorTheme.palette[1] } else { return colorTheme.palette[2] } } /** * 現在時刻を取得する関数 * 引数を入力することで、時間を指定できる * * @param {Object} * @returns {Object} 時、分、秒をプロパティに持つオブジェクト */ function getCurrentTime(time) { if (time) { currentTime = time; } else { currentTime = { h: hour(), m: minute(), s: second() }; console.log(`現在時刻を取得： ${currentTime.h}時${currentTime.m}分${currentTime.s}秒`); } return currentTime; } function easeInOutCubic(x) { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } // 個別Graphics管理クラス class GraphicsLayer { constructor(size, index, shape, id) { //クラスの変更しないほうがいいプロパティ this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = false; //ここに初期化のコードを書く this.id = id; colorTheme.initFunc(this.graphics); } // このレイヤーの計算処理 update() { } // このレイヤーの描画処理 draw() { // 指定されたテーマに基づくブラー、背景処理を行う colorTheme.bgFunc(this.graphics); } // レイヤーを削除 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++) { // フルスクリーンモードの場合、idは全て0 const layer = new GraphicsLayer(graphicsSize, i, null, 0); graphicsLayers.push(layer); } } else { // 通常モードの場合は形状数分のGraphicsLayerを作成 const numShapes = active.shapes.length; // 仮想平面のGraphicsLayerの枚数を取得 const numPseudoShapes = active.shapes.filter(shape => shape.type === "hidden").length; console.log("通常モード -", numShapes - numPseudoShapes, "個の表示されるGraphicsLayerを作成 ", numPseudoShapes, "個の非表示のGraphicsLayerを作成"); // 仮想平面を含めた全てのGraphicsLayerを作成 for (let i = 0; i < numShapes; i++) { const layer = new GraphicsLayer(graphicsSize, i, active.shapes[i], active.shapes[i].id); 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(() => { // 現在時刻を取得 getCurrentTime(); // テーマを定義 selectTheme(); createGraphicsLayers(); // 矢印を作成する createArrows(); console.log("4キー - GraphicsLayers作成完了:", graphicsLayers.length); }, 100); } else { // 現在時刻を取得 getCurrentTime(); // テーマを定義 selectTheme(); createGraphicsLayers(); // 矢印を作成する createArrows(); } } // レイヤーの切り替え（左右矢印キー） 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(() => { //現在時刻を取得 getCurrentTime(); selectTheme(); createGraphicsLayers(); createArrows(); 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}` ); } /* 立方体の展開図 ┌───┐ │ 6 │ ┌───┼───┼───┬───┐ │ 1 │ 2 │ 3 │ 4 │ └───┼───┼───┴───┘ │ 5 │ └───┘ LEDキューブの平面のidプロパティには上記の通りに番号が割り振られている 2が正面 */ // 平面のidから任意の方向にどのように隣接しているかのリスト // 例) "3"の"上部"に隣接しているのは connectionList.TOP[3] で id: 6 // 3から6に遷移するためには平面における左上の頂点を原点として -PI/2回転し、エリアのサイズを一単位としてX、Y方向に1づつ移動した場所に変換すればよい const connectionList = { RIGHT: [ { id: 0 }, { id: 2, rotation: 0, moveX: -1, moveY: 0 }, { id: 3, rotation: 0, moveX: -1, moveY: 0 }, { id: 4, rotation: 0, moveX: -1, moveY: 0 }, { id: 1, rotation: 0, moveX: -1, moveY: 0 }, { id: 3, rotation: -1 / 2, moveX: 0, moveY: 2 }, { id: 3, rotation: 1 / 2, moveX: 1, moveY: -1 }, ], BOTTOM: [ { id: 0 }, { id: 5, rotation: -1 / 2, moveX: -1, moveY: 1 }, { id: 5, rotation: 0, moveX: 0, moveY: -1 }, { id: 5, rotation: 1 / 2, moveX: 2, moveY: 0 }, { id: 5, rotation: 1, moveX: 1, moveY: 2 }, { id: 4, rotation: 1, moveX: 1, moveY: 2 }, { id: 2, rotation: 0, moveX: 0, moveY: -1 }, ], LEFT: [ { id: 0 }, { id: 4, rotation: 0, moveX: 1, moveY: 0 }, { id: 1, rotation: 0, moveX: 1, moveY: 0 }, { id: 2, rotation: 0, moveX: 1, moveY: 0 }, { id: 3, rotation: 0, moveX: 1, moveY: 0 }, { id: 1, rotation: 1 / 2, moveX: 1, moveY: 1 }, { id: 1, rotation: -1 / 2, moveX: 0, moveY: 0 }, ], TOP: [ { id: 0 }, { id: 6, rotation: 1 / 2, moveX: 0, moveY: 0 }, { id: 6, rotation: 0, moveX: 0, moveY: 1 }, { id: 6, rotation: -1 / 2, moveX: 1, moveY: 1 }, { id: 6, rotation: 1, moveX: 1, moveY: 0 }, { id: 2, rotation: 0, moveX: 0, moveY: 1 }, { id: 4, rotation: 1, moveX: 1, moveY: 0 }, ], } //デバッグ時の擬似平面の表示サイズ const hiddenPlaneSize = 80; // LEDキューブの形状定義 // 擬似立方体を構成するために順序を一部入れ替えたり、追加されている // LED_CUBE1 2000×1440 const CUBE_SPEC_1 = { w: 2000, h: 1440, size: 720 }; const LED_CUBE1 = [ { type: "rect", name: "r1", id: 1, x: 0, y: 0, w: 200, h: 720, img_x: -520, img_y: 0, }, { type: "rect", name: "r2", id: 2, x: 200, y: 0, w: 720, h: 720, img_x: 200, img_y: 0, }, { type: "rect", name: "r3", id: 3, x: 920, y: 0, w: 720, h: 720, img_x: 920, img_y: 0, }, { type: "rect", name: "r4", id: 4, x: 1640, y: 0, w: 360, h: 720, img_x: 1640, img_y: 0, }, { type: "poly", name: "p1", id: 5, points: [ [560, 1439], [560, 1079], [200, 1079], [200, 720], [919, 720], [919, 1439], [560, 1439], ], img_x: 200, img_y: 720, }, //展開図を構築するための仮想平面を設定 { type: "hidden", name: "h1",//r2の上部の仮想平面 id: 6, img_x: -hiddenPlaneSize, img_y: -hiddenPlaneSize, w: hiddenPlaneSize, h: hiddenPlaneSize, } ]; // LED_CUBE2 1536×768 const CUBE_SPEC_2 = { w: 1536, h: 768, size: 384 }; const LED_CUBE2 = [ { type: "rect", name: "r1", id: 1, x: 0, y: 0, w: 384, h: 384, img_x: 0, img_y: 0 }, { type: "rect", name: "r2", id: 2, x: 384, y: 0, w: 384, h: 384, img_x: 384, img_y: 0, }, { type: "rect", name: "r3", id: 3, x: 768, y: 0, w: 384, h: 384, img_x: 768, img_y: 0, }, { type: "rect", name: "r4", id: 4, x: 1152, y: 0, w: 384, h: 384, img_x: 1152, img_y: 0, }, { type: "rect", name: "r5", id: 5, x: 384, y: 384, w: 384, h: 384, img_x: 384, img_y: 384, }, //展開図を構築するための仮想平面を設定 { type: "hidden", name: "h1",//r2の上部の仮想平面 id: 6, img_x: -hiddenPlaneSize, img_y: -hiddenPlaneSize, w: hiddenPlaneSize, h: hiddenPlaneSize, } ]; // LED_CUBE3 672×480 const CUBE_SPEC_3 = { w: 672, h: 480, size: 288 }; const LED_CUBE3 = [ { type: "poly", name: "p1", id: 1, points: [ [64, 0], [192, 0], [192, 288], [0, 288], [0, 224], [96, 224], [96, 96], [64, 96], ], img_x: -96, img_y: 0, }, { type: "rect", name: "r1", id: 2, x: 192, y: 0, w: 288, h: 288, img_x: 192, img_y: 0, }, { type: "poly", name: "p2", id: 3, 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, }, //展開図を構築するための仮想平面を設定 { type: "hidden", name: "h1",//r1の背面の仮想平面 id: 4, img_x: -hiddenPlaneSize * 2, img_y: -hiddenPlaneSize, w: hiddenPlaneSize, h: hiddenPlaneSize, }, { type: "rect", name: "r2", id: 5, x: 192, y: 288, w: 288, h: 192, img_x: 192, img_y: 288, }, //展開図を構築するための仮想平面を設定 { type: "hidden", name: "h2",//r1の上面の仮想平面 id: 6, img_x: -hiddenPlaneSize, img_y: -hiddenPlaneSize, w: hiddenPlaneSize, h: hiddenPlaneSize, } ]; // フルスクリーン用の設定（動的に計算） let CUBE_SPEC_4 = null; let LED_CUBE4 = null; // 現在アクティブなLEDキューブの設定 let active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; // ユーティリティここまで //-------------------------------------

#opencube_workshop