//------------------------------------- // Wind Lines × LED Cube // 鉛筆風 Wind Lines の3モードを LED Cube の3サイズに割り当てる // // キー1 → LED_CUBE1 (2000×1440) + Mode 1（バネ） // キー2 → LED_CUBE2 (1536×768) + Mode 2（自由漂流） // キー3 → LED_CUBE3 (672×480) + Mode 3（風紋） // キー4 → 画面サイズ（現在のモードを維持） // G → wave（揺らぎ）フィルタ ON/OFF // D → 展開図ガイド ON/OFF //------------------------------------- let debugMode = true; // NEORTにアップロード時は false にしてください（展開図ガイドを消す） const CANVAS_SIZES = { LED_CUBE1: { width: 2000, height: 1440 }, LED_CUBE2: { width: 1536, height: 768 }, LED_CUBE3: { width: 672, height: 480 }, }; // サイズ → モードの対応 const SIZE_TO_MODE = { LED_CUBE1: 1, LED_CUBE2: 2, LED_CUBE3: 3 }; // 3つのキューブの物理的な並び（左→右）：キューブ3 → 1 → 2 const CUBE_LINEUP = { LED_CUBE3: -1, LED_CUBE1: 0, LED_CUBE2: 1 }; // 共有の風（時間ベース）の速度。全インスタンスで同じ風を見るため const GLOBAL_WIND_SPEED = 0.2; // テキスト配置パターン名（20秒ごとに巡回：軸→面→並び） const PATTERN_NAMES = ['軸', '面', '並び']; // 各キューブの面の中心（fraction 0..1, 展開図から概算） // 面データ（fraction 0..1）：front=正面の中心、faces=各面の矩形{x,y,w,h} const FACE_DATA = { LED_CUBE1: { front: { cx: 0.28, cy: 0.25 }, // 正面B faces: [ { x: 0.00, y: 0.0, w: 0.10, h: 0.5 }, // A { x: 0.10, y: 0.0, w: 0.36, h: 0.5 }, // B(front) { x: 0.46, y: 0.0, w: 0.36, h: 0.5 }, // C { x: 0.82, y: 0.0, w: 0.18, h: 0.5 }, // D { x: 0.10, y: 0.5, w: 0.18, h: 0.25 }, // E1 { x: 0.28, y: 0.5, w: 0.18, h: 0.5 }, // E2 ], }, LED_CUBE2: { front: { cx: 0.375, cy: 0.25 }, // 正面B faces: [ { x: 0.00, y: 0.0, w: 0.25, h: 0.5 }, // A { x: 0.25, y: 0.0, w: 0.25, h: 0.5 }, // B(front) { x: 0.50, y: 0.0, w: 0.25, h: 0.5 }, // C { x: 0.75, y: 0.0, w: 0.25, h: 0.5 }, // D { x: 0.25, y: 0.5, w: 0.25, h: 0.5 }, // E ], }, LED_CUBE3: { // 不規則・近似 front: { cx: 0.5, cy: 0.30 }, // 正面A faces: [ { x: 0.285, y: 0.0, w: 0.43, h: 0.6 }, // A(front) { x: 0.285, y: 0.6, w: 0.43, h: 0.4 }, // F { x: 0.00, y: 0.10, w: 0.19, h: 0.25 }, // 左上(緑) { x: 0.00, y: 0.45, w: 0.19, h: 0.25 }, // 左下(緑) { x: 0.715, y: 0.10, w: 0.19, h: 0.25 }, // 右上(赤) { x: 0.715, y: 0.45, w: 0.19, h: 0.25 }, // 右下(赤) ], }, }; // 面中心の配列（faceForWord 互換） const CUBE_FACES = {}; for (let k of Object.keys(FACE_DATA)) { CUBE_FACES[k] = FACE_DATA[k].faces.map(f => ({ fx: f.x + f.w / 2, fy: f.y + f.h / 2, rect: f })); } const BG = [172, 184, 197]; // キャンバスの地色（青みライトグレー）。Mode2/3 のフェード色も兼ねる // 背景演出：ランダム間隔の方眼が3秒で流れて消える（専用透明レイヤーに描画） const GRID = { LIFETIME: 3000, // 1枚の寿命(ms)＝3秒で消える SPAWN_MIN: 1200, SPAWN_MAX: 3200, // 次の方眼までの間隔(ms, ランダム) MAX_CONCURRENT: 2, // 同時に存在できる枚数 V_MAX: 4, // 縦線の本数を 0..V_MAX でランダム H_MAX: 4, // 横線の本数を 0..H_MAX でランダム MOVE: 160, // 寿命の間に流れる距離(px) * S WEIGHT: 1.4, // 線の太さ(px) * S COLOR: '195,222,240', // 線色（背景より少し明るい淡い水色。normal 合成で重ねる） MAX_ALPHA: 0.4, // 最大不透明度（normal 合成の効き。淡く） }; let gridCv = null, gctx = null, sweeps = [], nextSweepAt = 0; // 線の集まり全体をゆっくり漂わせる量（浮き対策＝背景の動きと一体化） const ART_DRIFT = { SPEED: 0.025, AMP_X: 0.22, AMP_Y: 0.18 }; // 青い線のキャンバス（レイヤー）自体をゆっくりスウェイ移動させる量 // SCALE で少し拡大（オーバースキャン）して端の見切れを防ぐ const ART_SWAY = { SPEED: 0.05, AMP: 0.03, SCALE: 1.08 }; // 風向きテキスト：風の流れ軸に沿って端から端まで配置（場所で from→to が分かる） // pos は符号付き（+ = 風下/TO 方向, - = 風上/FROM 方向） // size：遠近の基準サイズ（近い語ほど大きい） const WORDS = [ { t: 'あっち', pos: -0.42, kind: 'sure', size: 0.72 }, // 風上＝吹いてくる方・遠い→小 { t: 'そっち', pos: -0.14, kind: 'sure', size: 1.00 }, { t: 'こっち', pos: 0.16, kind: 'sure', size: 1.30 }, // 風下＝向かう方（ここ）・近い→大 { t: 'たぶん', pos: 0.42, kind: 'maybe', size: 0.62 }, // 不確かな行き先→小さめ ]; let wordEls = []; let wordStates = []; // 明滅の状態機械 let lastSrc = { x: -1, y: 0 }; // 無風時のフォールバック方向 // 明滅タイミング（ミリ秒・FPS非依存）— まばらに・ゆっくり・柔らかく（明朝の静けさ） const WORD_FADE_IN_MS = 350; const WORD_FADE_OUT_MS = 650; const randHold = () => random(300, 1200); // 少し留まる const randWait = () => random(2800, 7000); // 間を広く＝まばらに // ── 共通パラメータ ────────────────────────────── const SUBSAMPLE = 5; const MAX_HISTORY = 45; // Mode 1 のみ使用（軽量化のため短縮） const M1 = { NUM_TENDRILS: 6, SPRING_K: 0.02, DAMPING: 0.95, WIND_STRENGTH: 3.5, WIND_CHANGE_SPEED: 0.004, SPREAD: 1.4 }; const M2 = { SPAWN_INTERVAL: 18, LINES_PER_SPAWN: 2, MAX_TENDRILS: 5, MAX_LIFETIME: 300, START_OFFSET: 280, BIRTH_SPEED: 0.5, DAMPING: 0.97, WIND_STRENGTH: 4.5, WIND_CHANGE_SPEED: 0.003, SPREAD: 1.6, MAX_HISTORY: 48, // 軌跡の長さ(フレーム)。これを超えた古い端(起点)から消える（軽量化で短縮） WIDTH_SCALE: 15.0, // 束の広がり幅の倍率（束全体の幅。2.5倍に拡大） NUM_STRANDS: 15, // 束ねる糸の本数（束を太くするため増量） STRAND_WEIGHT: 1.3, // 1本の糸の太さ（p5.brush の weight。cube1/3 と同等） SAMPLE: 3 }; // 何フレームごとに線分を記録するか（小さいほど短い線分＝滑らか） const M3 = { NUM_BRUSHES: 6, STROKE_INTERVAL: 30, STROKE_LENGTH_SCALE: 30, BRUSH_DRIFT: 0.4, CENTER_PULL: 0.015, MIN_WIND: 0.5, WIND_STRENGTH: 5.0, WIND_CHANGE_SPEED: 0.003, FADE_ALPHA: 2, PAN_AMP: 0.05, PAN_SPEED: 0.06 }; // cube3 全体を上下左右へゆっくりパン（移動幅・速さ） // 線の藍色（R,G,B）。全モード共通。お好みで調整可（例：濃く [26,42,120] / 鮮やか [30,55,160]） const INK = [28, 50, 140]; // ── 状態 ──────────────────────────────────────── let mode = 1; let currentSize = "LED_CUBE1"; let glassMode = false; let canvasElt; let textPattern = -1; // 0軸 / 1面 / 2並び（20秒ごとに巡回） let S = 1; // スケール係数（基準高さ600） let tendrils = []; let brushes = []; let noiseOffset = 0; let modeStartFrame = 0; //------------------------------------- // Tendril（Mode 1 / Mode 2） class Tendril { constructor(startX, startY, initVx, initVy, springK, damping, spread, maxLifetime, maxHistory) { this.tip = { x: startX, y: startY, vx: initVx, vy: initVy }; this.noiseOff = random(10000); this.history = []; this.sampleCount = 0; this.segStart = { x: startX, y: startY }; this.lifetime = 0; this.springK = springK; this.damping = damping; this.spread = spread; this.maxLifetime = maxLifetime; this.maxHistory = maxHistory; } get isDead() { if (this.maxHistory > 0) return this.lifetime >= this.maxLifetime && this.history.length === 0; return this.lifetime >= this.maxLifetime; } updatePhysics(windX, windY) { this.lifetime++; let sx = -this.tip.x * this.springK; let sy = -this.tip.y * this.springK; let nx = (noise(this.tip.x * 0.005, this.tip.y * 0.005, this.noiseOff) - 0.5) * this.spread * 2 * S; let ny = (noise(this.tip.x * 0.005 + 50, this.tip.y * 0.005, this.noiseOff) - 0.5) * this.spread * 2 * S; this.tip.vx += windX + nx + sx; this.tip.vy += windY + ny + sy; this.tip.vx *= this.damping; this.tip.vy *= this.damping; this.tip.x += this.tip.vx; this.tip.y += this.tip.vy; } // Mode 1：物理 + 履歴管理 update(windX, windY) { this.updatePhysics(windX, windY); for (let s of this.history) s.age++; while (this.history.length && this.history[0].age >= this.maxHistory) this.history.shift(); if (this.lifetime < this.maxLifetime) { this.sampleCount++; if (this.sampleCount >= SUBSAMPLE) { this.sampleCount = 0; let d = dist(0, 0, this.tip.x, this.tip.y); let w = map(d, 0, 320 * S, 0.3, 1.8, true); this.history.push({ x1: this.segStart.x, y1: this.segStart.y, x2: this.tip.x, y2: this.tip.y, w, age: 0 }); this.segStart = { x: this.tip.x, y: this.tip.y }; } } } // Mode 1：全履歴を再描画（HB下層 + 2B上層） draw() { let off = 0.8 * S; for (let s of this.history) { let alpha = map(s.age, 0, this.maxHistory, 170, 0); if (alpha < 5) continue; brush.set("HB", color(INK[0], INK[1], INK[2], alpha * 0.5), s.w * 0.4); brush.line(s.x1 + off, s.y1 + off * 0.75, s.x2 + off, s.y2 + off * 0.75); brush.set("2B", color(INK[0], INK[1], INK[2], alpha), s.w); brush.line(s.x1, s.y1, s.x2, s.y2); } } // Mode 2：糸状態を遅延初期化（Mode 2 のみ生成 → Mode 1 に無影響） initStrands() { if (this.strands) return; this.strands = []; for (let i = 0; i < M2.NUM_STRANDS; i++) this.strands.push({ lane: map(i, 0, M2.NUM_STRANDS - 1, -0.5, 0.5), // 束内での基準レーン seed: random(1000), // 揺らぎ用ノイズ種 shade: random(0.85, 1.18), // 糸ごとの明度差（有機感） }); } // Mode 2：現在の tip で各ストランドの点を計算し履歴に積む（位置はアート空間=絶対座標） recordStep() { this.initStrands(); let d = dist(0, 0, this.tip.x, this.tip.y); let spread = map(d, 0, 320 * S, 2, 7, true) * M2.WIDTH_SCALE * S; let a = atan2(this.tip.y - this.segStart.y, this.tip.x - this.segStart.x); let px = cos(a + HALF_PI), py = sin(a + HALF_PI); let pts = this.strands.map(st => { let off = st.lane * spread + (noise(st.seed, this.lifetime * 0.04) - 0.5) * spread * 0.3; return { x: this.tip.x + px * off, y: this.tip.y + py * off }; }); this.history.push({ pts, age: 0 }); this.segStart = { x: this.tip.x, y: this.tip.y }; } // Mode 2：物理 + 履歴管理（Mode1 と同型。最古=起点から消える） updateM2(windX, windY) { this.updatePhysics(windX, windY); for (let s of this.history) s.age++; while (this.history.length && this.history[0].age >= this.maxHistory) this.history.shift(); if (this.lifetime < this.maxLifetime) { this.sampleCount++; if (this.sampleCount >= M2.SAMPLE) { this.sampleCount = 0; this.recordStep(); } } } // Mode 2：履歴を毎フレーム再描画。古いほど薄く＝尾が起点からフェードして消える drawM2() { if (!this.strands || this.history.length < 2) return; // 各糸を「履歴の全点を通す1本のスプライン」で描く（brush.line を毎セグメント呼ばない＝軽い） // 各点の pressure を起点(古)=細い → 頭(新)=太いにして「起点から細く消える」を表現 for (let k = 0; k < this.strands.length; k++) { let sh = this.strands[k].shade; let pts = []; for (let i = 0; i < this.history.length; i++) { let st = this.history[i]; let pr = Math.max(0.04, 1 - st.age / this.maxHistory); pts.push([st.pts[k].x, st.pts[k].y, pr]); } brush.set("2B", color(INK[0] * sh, INK[1] * sh, INK[2] * sh, 210), M2.STRAND_WEIGHT); brush.spline(pts, 0.5); } } } //------------------------------------- // WindBrush（Mode 3） class WindBrush { constructor() { this.x = random(-width * 0.42, width * 0.42); this.y = random(-height * 0.42, height * 0.42); this.sampleCount = floor(random(M3.STROKE_INTERVAL)); } update(windX, windY) { this.x += windX * M3.BRUSH_DRIFT; this.y += windY * M3.BRUSH_DRIFT; this.x -= this.x * M3.CENTER_PULL; this.y -= this.y * M3.CENTER_PULL; this.sampleCount++; if (this.sampleCount >= M3.STROKE_INTERVAL) { this.sampleCount = 0; this.drawStroke(windX, windY); } } drawStroke(windX, windY) { let len = sqrt(windX * windX + windY * windY); if (len < M3.MIN_WIND * S) return; let strokeLen = len * M3.STROKE_LENGTH_SCALE; let ex = this.x + (windX / len) * strokeLen; let ey = this.y + (windY / len) * strokeLen; let baseW = map(len, 0, 5 * S, 0.4, 1.6, true); let wScale = random(0.08, 1.4); // 細〜太をランダムに let w = baseW * wScale; let alpha = map(wScale, 0.08, 1.4, 90, 195); // 細い線は薄く、太い線は濃く brush.set("2B", color(INK[0], INK[1], INK[2], alpha), w); brush.line(this.x, this.y, ex, ey); } } //------------------------------------- // モード初期化 function initMode1() { mode = 1; tendrils = []; brushes = []; for (let i = 0; i < M1.NUM_TENDRILS; i++) { tendrils.push(new Tendril(0, 0, random(-0.5, 0.5), random(-0.5, 0.5), M1.SPRING_K, M1.DAMPING, M1.SPREAD, Infinity, MAX_HISTORY)); } updateLabel(); } function initMode2() { mode = 2; tendrils = []; brushes = []; modeStartFrame = frameCount; updateLabel(); } function initMode3() { mode = 3; tendrils = []; brushes = []; for (let i = 0; i < M3.NUM_BRUSHES; i++) brushes.push(new WindBrush()); updateLabel(); } function reinitCurrentMode() { if (mode === 1) initMode1(); else if (mode === 2) initMode2(); else initMode3(); } function spawnMode2(windX, windY) { let len = sqrt(windX * windX + windY * windY) || 1; let perpX = -windY / len, perpY = windX / len; for (let i = 0; i < M2.LINES_PER_SPAWN; i++) { let sp = random(-60, 60) * S; let sx = -(windX / len) * M2.START_OFFSET * S + perpX * sp; let sy = -(windY / len) * M2.START_OFFSET * S + perpY * sp; let ivx = windX * M2.BIRTH_SPEED + random(-0.8, 0.8) * S; let ivy = windY * M2.BIRTH_SPEED + random(-0.8, 0.8) * S; tendrils.push(new Tendril(sx, sy, ivx, ivy, 0, M2.DAMPING, M2.SPREAD, M2.MAX_LIFETIME, M2.MAX_HISTORY)); } } //------------------------------------- // キャンバスサイズ管理 let cnv; function applyScale() { S = height / 600; brush.scaleBrushes(2.5 * S); } // キャンバスは1ロードにつき1回だけ作る（サイズ切替はリロードで処理）。 // resizeCanvas は p5.brush の描画を壊し、createCanvas 作り直しは暗転するため使わない。 function buildCanvas(w, h) { cnv = createCanvas(w, h, WEBGL); canvasElt = cnv.elt; pixelDensity(1); applyScale(); // LED出力用：左上原点・ネイティブ解像度で表示（CSS縮小しない） canvasElt.style.position = 'absolute'; canvasElt.style.left = '0'; canvasElt.style.top = '0'; canvasElt.style.filter = glassMode ? 'url(#glass)' : 'none'; background(BG[0], BG[1], BG[2]); } function applySize(sizeKey) { currentSize = sizeKey; let w, h; if (CANVAS_SIZES[sizeKey]) { w = CANVAS_SIZES[sizeKey].width; h = CANVAS_SIZES[sizeKey].height; } else { w = windowWidth; h = windowHeight; } buildCanvas(w, h); syncNet(); updateURL(); } function syncNet() { // 展開図ガイドの img は無くても動くように null チェック（本番では削除/コメントアウト可） for (let k of Object.keys(CANVAS_SIZES)) { let el = document.getElementById('net-' + k); if (el) el.style.display = 'none'; } if (!debugMode || !CANVAS_SIZES[currentSize]) return; let img = document.getElementById('net-' + currentSize); if (!img) return; let r = canvasElt.getBoundingClientRect(); img.style.display = 'block'; img.style.left = (r.left + window.scrollX) + 'px'; img.style.top = (r.top + window.scrollY) + 'px'; img.style.width = r.width + 'px'; img.style.height = r.height + 'px'; } function updateURL() { const url = new URL(window.location); if (CANVAS_SIZES[currentSize]) url.searchParams.set('size', currentSize); else url.searchParams.delete('size'); window.history.replaceState({}, '', url); } function updateLabel() { let names = { 1: 'spring', 2: 'free drift', 3: 'wind trace' }; let sizeTxt = CANVAS_SIZES[currentSize] ? `${currentSize} (${CANVAS_SIZES[currentSize].width}×${CANVAS_SIZES[currentSize].height})` : `screen (${width}×${height})`; let g = glassMode ? ' · wave ON' : ''; let patTxt = textPattern >= 0 ? ` · text:${PATTERN_NAMES[textPattern]}` : ''; let labelEl = document.getElementById('label'); if (labelEl) labelEl.textContent = `MODE ${mode} — ${names[mode]} · ${sizeTxt}${patTxt} · 1/2/3/4 · G:wave · D:guide${g}`; } //------------------------------------- // 必要なDOM（テキスト層・waveフィルタ・フォント・CSS）を JS で用意する。 // NEORT 等が sketch.js だけを自前HTMLで実行する場合でも動くようにするため。 function ensureDom() { // Google Font（Klee One） if (!document.getElementById('klee-font')) { let link = document.createElement('link'); link.id = 'klee-font'; link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap'; document.head.appendChild(link); } // 最低限のCSS（style.css が無くても効く） if (!document.getElementById('wind-words-style')) { let st = document.createElement('style'); st.id = 'wind-words-style'; st.textContent = 'html,body{margin:0;padding:0;}canvas{position:absolute;top:0;left:0;}' + '.wind-word{position:absolute;transform:translate(-50%,-50%);' + 'color:rgb(255,255,255);font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;' + 'font-weight:700;letter-spacing:0.28em;pointer-events:none;white-space:nowrap;z-index:5;}' + '#label{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);' + 'color:#888;font-family:monospace;font-size:13px;pointer-events:none;' + 'user-select:none;white-space:nowrap;z-index:10;}'; document.head.appendChild(st); } // wave（揺らぎ）用 SVG フィルタ if (!document.getElementById('glass')) { document.body.insertAdjacentHTML('beforeend', ''); } // テキスト層コンテナ if (!document.getElementById('wind-words')) { let d = document.createElement('div'); d.id = 'wind-words'; document.body.appendChild(d); } // ラベル（デバッグ表示） if (!document.getElementById('label')) { let d = document.createElement('div'); d.id = 'label'; document.body.appendChild(d); } } //------------------------------------- // 風向きテキスト // 風の流れ方向(fdx,fdy)に対して、語の役割に応じた面の中心を返す // あっち=最も風上 / こっち=最も風下 / そっち=風下寄り中間 / たぶん=最も横向き function faceForWord(role, fdx, fdy) { let faces = CUBE_FACES[currentSize]; if (!faces) return null; let scored = faces.map(f => ({ f, p: (f.fx - 0.5) * fdx + (f.fy - 0.5) * fdy })); let byProj = [...scored].sort((a, b) => b.p - a.p); // 風下が先 if (role === 'こっち') return byProj[0].f; if (role === 'そっち') return byProj[Math.min(1, byProj.length - 1)].f; if (role === 'あっち') return byProj[byProj.length - 1].f; // たぶん：風に対して最も横向き（方向があいまい） return [...scored].sort((a, b) => Math.abs(a.p) - Math.abs(b.p))[0].f; } // 並び連動：このキューブが並びの中の位置と風で主に出す語を決める function lineupRole(dirX) { let L = CUBE_LINEUP[currentSize]; if (L === undefined) return null; // screen は軸にフォールバック if (Math.abs(dirX) < 0.35) return 'たぶん'; // 横風＝並び方向にあいまい let rank = (dirX > 0 ? 1 : -1) * L; // +1 風下 / 0 中央 / -1 風上 if (rank > 0.5) return 'こっち'; if (rank < -0.5) return 'あっち'; return 'そっち'; } const INSTANCES_PER_WORD = 2; // 同じ語を複数体出す（同じ面に複数出るように） let wordInst = []; // 各インスタンスが参照する語データ function buildWords() { let cont = document.getElementById('wind-words'); cont.innerHTML = ''; wordInst = []; wordEls = []; wordStates = []; for (let w of WORDS) { for (let k = 0; k < INSTANCES_PER_WORD; k++) { let el = document.createElement('span'); el.className = 'wind-word'; // 一文字ずつ子spanに分け、各文字へ微小な傾き＋上下ズレ（手で散らした明朝） for (let ch of w.t) { let c = document.createElement('span'); c.textContent = ch; c.style.display = 'inline-block'; let deg = random(-14, 14); let dy = random(-0.10, 0.10); // em c.style.transform = `rotate(${deg}deg) translateY(${dy}em)`; el.appendChild(c); } cont.appendChild(el); wordInst.push(w); wordEls.push(el); wordStates.push({ phase: 'wait', t: random(0, 4000), env: 0, px: 0, py: 0, peak: 0, font: 16, rot: 0, }); } } } // 正面の面矩形を返す（front中心を含む面） function frontFaceRect() { let d = FACE_DATA[currentSize]; if (!d) return null; for (let f of d.faces) { if (d.front.cx >= f.x && d.front.cx <= f.x + f.w && d.front.cy >= f.y && d.front.cy <= f.y + f.h) return f; } return d.faces[0]; } // 面矩形内のランダムな点（fraction）。lo/hi で端の使い具合を調整 function pointInRect(rect, lo, hi) { return { fx: rect.x + (lo + random() * (hi - lo)) * rect.w, fy: rect.y + (lo + random() * (hi - lo)) * rect.h, }; } // dirX,dirY = 風の流れ方向（単位, + = TO）, conf = 正規化強度(0..1), pattern = 0軸/1面/2並び function updateWords(dirX, dirY, conf, pattern) { let r = canvasElt.getBoundingClientRect(); let cx = r.left + r.width / 2 + window.scrollX; let cy = r.top + r.height / 2 + window.scrollY; let refLen = Math.min(r.width, r.height); let fx = dirX, fy = dirY; let perpx = -fy, perpy = fx; // 軸に直交 let baseFont = refLen * 0.040; let dt = Math.min(deltaTime, 100); let role = (pattern === 2) ? lineupRole(dirX) : null; let frect = frontFaceRect(); wordInst.forEach((w, i) => { let st = wordStates[i]; let el = wordEls[i]; // 並び連動：自分の役割語以外は出さない if (pattern === 2 && role !== null && w.t !== role) { st.phase = 'wait'; if (st.t > randWait()) st.t = randWait(); st.env = 0; el.style.opacity = 0; return; } // ── 明滅の状態機械（ミリ秒）：wait → in → hold → out → wait ── st.t -= dt; if (st.phase === 'wait') { st.env = 0; if (st.t <= 0) { // 出現の瞬間に位置・濃度・フォントを固定（以後は動かない） st.phase = 'in'; st.t = WORD_FADE_IN_MS; // 配置する面を決める：並び=正面 / 軸・面=風向きで面選択 let face = null; if (pattern === 2) face = frect; else { let ff = faceForWord(w.t, fx, fy); face = ff ? ff.rect : null; } if (face) { // 面の矩形内のランダムな点（端も使う＝多彩・同じ面に複数） let p = pointInRect(face, 0.15, 0.85); st.px = r.left + p.fx * r.width + window.scrollX; st.py = r.top + p.fy * r.height + window.scrollY; } else { // 面データなし（screen）：従来の風上→風下の軸配置 let jaFrac = (random() - 0.5) * 0.10; let jrFrac = (random() - 0.5) * 0.10; let along = (w.pos + jaFrac) * refLen; st.px = cx + fx * along + perpx * jrFrac * refLen; st.py = cy + fy * along + perpy * jrFrac * refLen; } st.peak = (w.kind === 'sure') ? map(conf, 0, 1, 0.25, 0.92) : map(conf, 0, 1, 0.92, 0.20); // たぶんは反転 // 遠近（語ごとの基準サイズ）× ランダムミックス（出現ごとにゆらぐ） st.font = constrain(baseFont * w.size * random(0.85, 1.18), 12, 60); st.rot = 0; // 明朝は正立で（傾けない） } } else if (st.phase === 'in') { st.env = constrain(1 - st.t / WORD_FADE_IN_MS, 0, 1); if (st.t <= 0) { st.phase = 'hold'; st.t = randHold(); } } else if (st.phase === 'hold') { st.env = 1; if (st.t <= 0) { st.phase = 'out'; st.t = WORD_FADE_OUT_MS; } } else { // out st.env = constrain(st.t / WORD_FADE_OUT_MS, 0, 1); if (st.t <= 0) { st.phase = 'wait'; st.t = randWait(); } } if (st.env <= 0.001) { el.style.opacity = 0; return; } // 表示中は固定スナップショットを使う（風で動かない） el.style.left = st.px + 'px'; el.style.top = st.py + 'px'; el.style.opacity = (st.env * st.peak).toFixed(3); el.style.fontSize = st.font + 'px'; el.style.transform = `translate(-50%, -50%) rotate(${st.rot}deg)`; }); } //------------------------------------- function setup() { // URLパラメータから開始サイズを決定（なければ LED_CUBE1）。'screen' は画面サイズ const sizeParam = new URLSearchParams(window.location.search).get('size'); let startSize = (sizeParam === 'screen' || (sizeParam && CANVAS_SIZES[sizeParam])) ? sizeParam : 'LED_CUBE1'; let startMode = SIZE_TO_MODE[startSize] || 1; ensureDom(); // 必要なDOMを用意（NEORT等で sketch.js 単体実行でも動くように） noiseSeed(7); // 風を決定論的に（全インスタンスで同じ風） currentSize = startSize; let w, h; if (CANVAS_SIZES[startSize]) { w = CANVAS_SIZES[startSize].width; h = CANVAS_SIZES[startSize].height; } else { w = windowWidth; h = windowHeight; } // screen buildCanvas(w, h); buildWords(); ensureGridLayer(); if (startMode === 1) initMode1(); else if (startMode === 2) initMode2(); else initMode3(); syncNet(); } // 背景グリッド演出 ───────────────────────────── // 本体と同サイズの透明2Dキャンバスを用意（毎フレーム消去するので滲まない）。 // normal 合成で、背景より少し明るい淡い水色の格子として重ねる。 function ensureGridLayer() { if (gridCv) gridCv.remove(); gridCv = document.createElement('canvas'); gridCv.width = width; gridCv.height = height; let s = gridCv.style; s.position = 'absolute'; s.left = '0'; s.top = '0'; s.width = width + 'px'; s.height = height + 'px'; s.pointerEvents = 'none'; s.zIndex = '1'; s.mixBlendMode = 'normal'; document.body.appendChild(gridCv); gctx = gridCv.getContext('2d'); sweeps = []; nextSweepAt = 0; } // 不規則間隔の方眼を1枚生成（ランダム方向に流れる） function spawnSweep() { let vN = floor(random(0, GRID.V_MAX + 1)); let hN = floor(random(0, GRID.H_MAX + 1)); if (vN + hN === 0) { if (random() < 0.5) vN = 1; else hN = 1; } // 最低1本は出す let xs = [], ys = []; for (let i = 0; i < vN; i++) xs.push(random(0, width)); // 縦線の x をランダム配置 for (let i = 0; i < hN; i++) ys.push(random(0, height)); // 横線の y をランダム配置 // 各線は自分と直交方向に動かす（縦線=横移動 vx / 横線=縦移動 vy）。両方とも非ゼロ＝必ず動いて見える let vx = (random() < 0.5 ? -1 : 1) * random(0.5, 1.3); let vy = (random() < 0.5 ? -1 : 1) * random(0.5, 1.3); sweeps.push({ xs, ys, vx, vy, born: Date.now() }); } // 毎フレーム：生成タイミング管理＋全消去して各方眼を描画 function updateGrid() { if (!gctx) return; let now = Date.now(); if (now >= nextSweepAt && sweeps.length < GRID.MAX_CONCURRENT) { spawnSweep(); nextSweepAt = now + random(GRID.SPAWN_MIN, GRID.SPAWN_MAX); } gctx.clearRect(0, 0, width, height); gctx.lineWidth = GRID.WEIGHT * S; for (let i = sweeps.length - 1; i >= 0; i--) { let sw = sweeps[i]; let p = (now - sw.born) / GRID.LIFETIME; if (p >= 1) { sweeps.splice(i, 1); continue; } let offx = sw.vx * GRID.MOVE * S * p; // 縦線の横移動（必ず非ゼロ＝動いて見える） let offy = sw.vy * GRID.MOVE * S * p; // 横線の縦移動（必ず非ゼロ＝動いて見える） let alpha = GRID.MAX_ALPHA * sin(PI * p); // 0→最大→0：すーっと現れて消える gctx.strokeStyle = 'rgba(' + GRID.COLOR + ',' + alpha + ')'; gctx.beginPath(); for (let x of sw.xs) { gctx.moveTo(x + offx, 0); gctx.lineTo(x + offx, height); } // 直線の縦線 for (let y of sw.ys) { gctx.moveTo(0, y + offy); gctx.lineTo(width, y + offy); } // 直線の横線 gctx.stroke(); } } function draw() { let p = mode === 1 ? M1 : mode === 2 ? M2 : M3; // 共有・時間ベースの風（全インスタンスで一致／FPS非依存） let tSec = Date.now() / 1000; let windAngle = noise(tSec * GLOBAL_WIND_SPEED) * TWO_PI * 3; let conf = noise(tSec * GLOBAL_WIND_SPEED + 100); // 0..1 正規化強度 let dirX = cos(windAngle), dirY = sin(windAngle); // 風向き（単位） let strength = conf * p.WIND_STRENGTH * S; // アート用の強さ（モード別） let windX = dirX * strength; let windY = dirY * strength; // テキスト配置パターン（20秒ごとに軸→面→並び。壁時計基準で全インスタンス同期） let pat = floor(Date.now() / 20000) % 3; if (pat !== textPattern) { textPattern = pat; updateLabel(); } updateWords(dirX, dirY, conf, pat); // text は方向(単位)+正規化強度 // アートの原点を「正面の中心」へ（オブジェクトが正面に乗る） let fc = FACE_DATA[currentSize] ? FACE_DATA[currentSize].front : { cx: 0.5, cy: 0.5 }; let offX = (fc.cx - 0.5) * width; let offY = (fc.cy - 0.5) * height; // 背景の動きと一体化させるため、原点をノイズでゆっくり漂わせる（決定論的＝noiseSeed準拠） let dts = Date.now() / 1000; offX += (noise(dts * ART_DRIFT.SPEED, 11.3) - 0.5) * 2 * ART_DRIFT.AMP_X * width; offY += (noise(dts * ART_DRIFT.SPEED, 47.8) - 0.5) * 2 * ART_DRIFT.AMP_Y * height; if (mode === 1) { background(BG[0], BG[1], BG[2]); push(); translate(offX, offY); for (let t of tendrils) { t.update(windX, windY); t.draw(); } pop(); } else if (mode === 2) { background(BG[0], BG[1], BG[2]); // 毎フレーム全消去（焼き付けない＝生きて動く） if ((frameCount - modeStartFrame) % M2.SPAWN_INTERVAL === 0) { spawnMode2(windX, windY); while (tendrils.length > M2.MAX_TENDRILS) tendrils.shift(); } while (tendrils.length && tendrils[0].isDead) tendrils.shift(); push(); translate(offX, offY); for (let t of tendrils) { t.updateM2(windX, windY); t.drawM2(); } pop(); } else { push(); noStroke(); fill(BG[0], BG[1], BG[2], M3.FADE_ALPHA); plane(width * 2, height * 2); pop(); push(); translate(offX, offY); for (let b of brushes) b.update(windX, windY); pop(); } updateGrid(); // 背景の方眼演出（別レイヤー） // キャンバス自体をゆっくり移動。cube3(Mode3) は元の表現を保ったまま上下左右へ大きめにパン let tsw = Date.now() / 1000; let amp = (mode === 3) ? M3.PAN_AMP : ART_SWAY.AMP; let spd = (mode === 3) ? M3.PAN_SPEED : ART_SWAY.SPEED; let scl = (mode === 3) ? 1.16 : ART_SWAY.SCALE; // パン幅に合わせて見切れ防止の拡大 let swx = (noise(tsw * spd, 200) - 0.5) * 2 * amp * width; let swy = (noise(tsw * spd, 300) - 0.5) * 2 * amp * height; canvasElt.style.transform = 'scale(' + scl + ') translate(' + swx + 'px,' + swy + 'px)'; } //------------------------------------- // サイズ切替はページをリロードして ?size= を変える（毎回 setup からやり直す）。 // p5.brush は resizeCanvas で描画が壊れ、createCanvas 作り直しは暗転するため、 // 「まっさらに作り直す＝リロード」が最も安全。本番は1サイズ固定なので影響なし。 function gotoSize(sizeKey) { let u = new URL(window.location); u.searchParams.set('size', sizeKey); window.location.href = u.toString(); } function keyPressed() { if (key === '1') { gotoSize('LED_CUBE1'); } else if (key === '2') { gotoSize('LED_CUBE2'); } else if (key === '3') { gotoSize('LED_CUBE3'); } else if (key === '4') { gotoSize('screen'); } else if (key === 'g' || key === 'G') { glassMode = !glassMode; canvasElt.style.filter = glassMode ? 'url(#glass)' : 'none'; document.getElementById('wind-words').style.filter = glassMode ? 'url(#glass)' : 'none'; updateLabel(); } else if (key === 'd' || key === 'D') { debugMode = !debugMode; syncNet(); } } function windowResized() { // 左上原点・ネイティブ表示のまま。文字オーバーレイの位置だけ追従 syncNet(); }