//------------------------------------- // プロジェクトの基本設定ここから // キャンバスサイズの設定 const CANVAS_SIZES = { LED_CUBE1: { width: 2880, height: 1440 }, LED_CUBE2: { width: 1536, height: 768 }, LED_CUBE3: { width: 1152, height: 576 }, }; // 描画レイアウトの基準となる「フレーム1辺」のサイズ (px)。 // 全アニメーションは frameA〜frameE の格子 (横4×縦2) を単位として組まれ、 // この size を変えるだけで同じ比率・同じ配置のまま拡大縮小される。 const CUBE_SIZES = { LED_CUBE1: 720, LED_CUBE2: 384, // 現在の実装のベースサイズ LED_CUBE3: 288, }; const BASE_SIZE = 384; // マジックナンバーを相対化する際の基準 (LED_CUBE2) // 現在のフレームサイズに対するスケール倍率 (= size / BASE_SIZE)。 // 線幅やフォントなど「長さ」の相対化に使う。draw() の先頭で毎フレーム更新。 let gScale = 1; // currentSize に応じたフレーム1辺サイズを返す。 // 指定なし(画面サイズモード)はキャンバス高さの半分 (= 縦2段) を1フレームとみなす。 function frameSizeOf() { if (currentSize && CUBE_SIZES[currentSize]) return CUBE_SIZES[currentSize]; return height / 2; } // LEDキューブのレイアウト参考画像 let image1, image2, image3; // 現在のLEDキューブのサイズ let currentSize = ""; // 秒針の先端から発生するパーティクル let secondParticles = []; // グリフ輪郭の抽出キャッシュ (key: "weight|font|str" → {contours, } )。輪郭補間モーフで使用 let glyphCanvas = null, glyphCtx = null; const glyphContourCache = {}; // バー色の遷移状態 (12本それぞれ独立。各分の 59.5→00秒で別のグラデ組へ) let barFromIdx = [0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1]; // 各バーの現在グラデ組インデックス let barToIdx = [0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1]; // 各バーの遷移先グラデ組インデックス let bgTransitionSlot = -1; // この10秒スロットの遷移先を選択済みか判定 // 切替演出(スライド+シャッフル)の周期(秒)。本番=60(毎分)、デバッグ=10(10秒ごと)。 const REEL_PERIOD = 60; // 時報(HH:MM)を毎分の :00 に同期。テスト時は 10 にすると10秒ごとに発火 const REEL_RISE = 0.5; // 入場の長さ(秒)。:00 ちょうどに入場開始し REEL_RISE 秒で中央到達 (:00.0→:00.5) const REEL_HOLD = 0.5; // 中央での滞在(秒)。中央到達→+REEL_HOLD (:00.5→:01.0) const REEL_EXIT = 0.5; // 退場の長さ(秒)。退場開始→元の位置へ (:01.0→:01.5) const SEC_MORPH = 0.4; // 秒ラベルのその場モーフにかける時間(秒)。残りは静止して可読性を確保。 const SEC_MORPH_BLUR = 14; // クロスフェード時に中間でかける最大ブラー(px)。大きいほど旧→新が溶け合う。 const SEC_OUTLINE_MORPH = true; // true=グリフ輪郭の頂点補間 / false=クロスフェード+ブラー const GLYPH_BOX = 256; // 輪郭抽出用オフスクリーンキャンバスの一辺(px) const GLYPH_RENDER_PX = 160; // 抽出時の基準フォントサイズ(px)。幅が収まらない語は自動で縮小 const GLYPH_PTS = 96; // 各輪郭の再標本化点数。多いほど滑らかで重い // 秒ラベルの語 (帯内位置 1..10)。輪郭抽出プリウォームと secondsLabel で共用。 const SEC_WORDS = { en: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'], ja: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'], es: ['uno', 'dos', 'tres', 'cuatro', 'cinco', 'seis', 'siete', 'ocho', 'nueve', 'diez'], ko: ['일', '이', '삼', '사', '오', '육', '칠', '팔', '구', '십'], fr: ['un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept', 'huit', 'neuf', 'dix'], }; // ブロックが表示する内容(種類)。境界ごとにシャッフルして入れ替える (位置・グラデは固定) let blockContent = ['month', 'day', 'hourmin', 'sec', 'sec', 'sec', 'sec', 'sec', 'sec', 'sec', 'sec', 'sec']; let blockShuffleSlot = -1; // このスロット(境界)のシャッフルを実施済みか判定 // HH:MM スライド演出の状態 let blkEpoch0 = null; // ブロック移動の基準エポック秒。ステップ境界を実時刻の秒に合わせる let reelLatched = false; // リール進行中か (軸を固定するため) let reelVert = false; // 入場時のブロックの伸縮が縦か (true=縦伸縮, false=横伸縮) // ブロック塗りのビビッドな2色グラデ (左上→右下)。12ブロックに循環割当。 const BLOCK_GRADIENTS = [ ['#FFD60A', '#FF3B30'], // 黄 → 赤 ['#0A84FF', '#30D158'], // 青 → 緑 ['#FF3B30', '#FF2D92'], // 赤 → ピンク ['#30D158', '#FFD60A'], // 緑 → 黄 ['#FFFFFF', '#0A84FF'], // 白 → 青 ]; // 背景色 (参考画像のダークネイビー) const BG_COLOR = '#0B1626'; // 再生時刻のオフセット (ms)。実際の現在時刻に対して進める量。 // ロジックは変えず、参照する「現在時刻」だけをこの分だけ進めて再生する。 const TIME_OFFSET_MS = 10 * 1000; // +10秒 // オフセットを適用した現在時刻のヘルパー。 // 既存の Date.now() / new Date() / p5 の hour()/minute()/second() の代わりに使う。 function nowMs() { return Date.now() + TIME_OFFSET_MS; } function nowDate() { return new Date(nowMs()); } function curHour() { return nowDate().getHours(); } function curMinute() { return nowDate().getMinutes(); } function curSecond() { return nowDate().getSeconds(); } function curMonth() { return nowDate().getMonth() + 1; } // p5 の month() と同じ 1-12 function curDay() { return nowDate().getDate(); } // プロジェクトの基本設定ここまで //------------------------------------- function setup() { createCanvasSetup(); warmGlyphCache(); // 秒ラベル(漢字等)の輪郭を事前抽出し、表示中の抽出カクつきを防ぐ } // 起動時に秒ラベルのグリフ輪郭を事前抽出してキャッシュへ。 // 毎秒のキャッシュミス抽出 (特に画数の多い漢字は境界セグメントが多く重い) による // 表示中のカクつきを防ぐ。フォントごとに必要文字を確実にロードしてから抽出する。 function warmGlyphCache() { if (typeof document === 'undefined' || !document.fonts) return; const byFont = new Map(); // font -> { chars:Set, words:[] } const addWord = (w, font) => { if (!byFont.has(font)) byFont.set(font, { chars: new Set(), words: [] }); const e = byFont.get(font); e.words.push(w); for (const ch of w) e.chars.add(ch); }; for (const lang of Object.keys(SEC_WORDS)) { const font = fontFor(lang); for (const w of SEC_WORDS[lang]) addWord(w, font); } for (let n = 1; n <= 10; n++) addWord(String(n), '"Nunito"'); // num帯(51-60)の数字 byFont.forEach((e, font) => { const text = Array.from(e.chars).join(''); // CJK は unicode-range で subset 分割されるため、対象文字を指定して確実にロードしてから抽出 document.fonts.load(`900 160px ${font}`, text) .then(() => warmExtractGlyphs(e.words.slice(), font)) .catch(() => {}); }); } // 1フレームあたり数msだけ抽出し、残りは次フレームへ回す (起動時の一括ジャンク回避) function warmExtractGlyphs(words, font) { let i = 0; const step = () => { const t0 = performance.now(); while (i < words.length) { getGlyphContours(words[i], font, 900); i++; if (performance.now() - t0 > 6) break; } if (i < words.length) requestAnimationFrame(step); }; step(); } function draw() { background(BG_COLOR); // 参考画像のダークネイビー背景 drawDebugMode(); // デバッグ用LEDキューブのレイアウト参考画像の描画 noStroke(); fill(BG_COLOR); // 全体背景もダークネイビー rect(0, 0, width, height); // currentSize から基準フレームサイズとスケール倍率を決定 (この2値で全レイアウトが相対化される) const size = frameSizeOf(); gScale = size / BASE_SIZE; // サイズ別に、比率・配置はそのままで描画領域全体を左へずらす量 (px)。 // 背景/デバッグ画像はずらさず、以降のアニメーション描画だけを平行移動 (pop() は draw 末尾)。 const CUBE_OFFSET_X = { LED_CUBE1: -520, LED_CUBE3: -96 }; const offsetX = CUBE_OFFSET_X[currentSize] || 0; push(); translate(offsetX, 0); // バーの色: 10秒ごと (9.5→10, 19.5→20, …, 59.5→00) で 2色グラデを「別の組」へ 0.5秒かけて滑らかに補間。 // 各ブロックは塗りに斜め2色グラデを使い、barGrad[i] = [開始色, 終了色]。 const ms = nowMs() % 1000; const tS = ms / 1000; const contSec = curSecond() + tS; const cyclePos = contSec % 10; // 10秒周期内の位置 (0..10) let bgT = 0; // 遷移進行 0..1 if (cyclePos >= 9.5) { const slot = curMinute() * 6 + Math.floor(contSec / 10); // 10秒スロットの一意キー if (bgTransitionSlot !== slot) { bgTransitionSlot = slot; for (let i = 0; i < 12; i++) { let next; do { next = Math.floor(random(BLOCK_GRADIENTS.length)); } while (next === barFromIdx[i]); barToIdx[i] = next; // 各バー独立に別のグラデ組を抽選 } } bgT = (cyclePos - 9.5) / 0.5; } else { for (let i = 0; i < 12; i++) barFromIdx[i] = barToIdx[i]; // 遷移完了を確定 } // 各バーのグラデ2色: from組→to組を bgT で補間 const barGrad = []; for (let i = 0; i < 12; i++) { const f = BLOCK_GRADIENTS[barFromIdx[i]]; const tcol = BLOCK_GRADIENTS[barToIdx[i]]; barGrad[i] = [ lerpColor(color(f[0]), color(tcol[0]), bgT).toString(), lerpColor(color(f[1]), color(tcol[1]), bgT).toString(), ]; } // フレームは size を単位に横4×縦2 の格子で配置 (共通の法則で動的算出) const frameA = { x: 0, y: 0, w: size, h: size }; const frameB = { x: size, y: 0, w: size, h: size }; const frameC = { x: size * 2, y: 0, w: size, h: size }; const frameD = { x: size * 3, y: 0, w: size, h: size }; const frameE = { x: size, y: size, w: size, h: size }; // 時用と分用の表示帯 (centerX は「進行度=0 のとき現在値が来る x 座標」= frameB 中心) const frameBcx = frameB.x + frameB.w / 2; const hourStrip = { x: 0, y: 0, w: size * 4, h: size * (300 / 384), centerX: frameBcx }; // 背景: y=0..2*size の縦線を 60 本 (x:0-4*size を等分、秒針より後ろ) drawVerticalLines({ x: 0, y: 0, w: size * 4, h: size * 2 }, 60); // 現在の時を 1-12, 分を 1-60 表記に (時=0時→12, 分=0分→60) const h24 = curHour(); const h12 = ((h24 % 12) === 0) ? 12 : (h24 % 12); const min0 = curMinute(); const m60 = (min0 === 0) ? 60 : min0; // 各単位の進行度 (0..1) const tM = (curSecond() + tS) / 60; const tH = (min0 + tM) / 60; // 時: 4*size 幅の帯。中央 (帯高の半分) に 1-12 を配置、frameB 中心 (x=1.5*size) に現在の時。 // ラベル間に隙間なく敷き詰め (tightPack)。不透明度は全位置で1、横幅は中央〜最遠で 0.3倍まで圧縮。 // 末尾の 1.0 (tightness): 大きくするとフォント拡大&重なり。-0.1 (multiDigitKerning): より負で2ケタ字間詰め。 // drawScrollingRow(hourStrip, 12, h12, tH, 0.5, 1.0, 1.0, 1.0, 0.3, 1, 1.0, true, 0.9, -0.0); // 秒: x=0..4*size を 60 秒で横断する縦線。y=size を中心に上下対称に伸び、60秒で y=0..2*size まで到達。 // 下半分 (y>size) は x 領域で挙動を変える: frameB列はそのまま、それ以外は frameE 中心を軸に回転表示。 drawSecondLine(0, size * 4, size, size, curSecond() + tS, frameE); // w384 h128 のブロック: 1秒で右へ384、次の1秒で下へ128 を繰り返す階段移動。 // blkT は実時刻基準にして、ステップ境界(=1秒)を時計の秒に一致させる (リールを :00 に同期させるため)。 if (blkEpoch0 === null) blkEpoch0 = Math.floor(nowMs() / 1000); const blkT = nowMs() / 1000 - blkEpoch0; const leftPattern = [-1, 1, -1, -1, 1]; // 横パターンを反転 (純左ドリフト) // 表示する時刻値。月/日/秒は現在の秒に対応する言語で表記 (10秒帯ごとに切替) const lang = langOfSecond(curSecond()); const langFont = fontFor(lang); // 言語に応じたフォント (ja=丸ゴ, ko=Jua, 他=Nunito) const moStr = monthLabel(curMonth(), lang); // 月 (現在の言語) const dyStr = dayLabel(curDay(), lang); // 日 (現在の言語) const hrNum = String(curHour()).padStart(2, '0'); // 0-23 を2桁ゼロ埋め (01, 06 など) const miNum = String(curMinute()).padStart(2, '0'); // 0-59 を2桁ゼロ埋め const secLabel = secondsLabel(curSecond()); // 秒は10秒帯ごとに言語を変えて表示 const hmStr = `${hrNum}:${miNum}`; // 時:分をまとめて表示 (e.g. 10:10) // 切替演出は実時刻の :00 (REEL_PERIOD 秒ごと) に同期。:00 ちょうどに入場開始し、 // 入場 REEL_RISE 秒で中央到達 → 滞在 REEL_HOLD 秒 → 退場 REEL_EXIT 秒で元の位置へ戻る。 // (例 RISE=HOLD=EXIT=0.5: 入場 :00.0 / 中央 :00.5 / 退場開始 :01.0 / 復帰 :01.5) // 入退場の軸は入場時のブロック移動軸に固定 (縦移動中=下から上へ / 横移動中=左から右へ) しまっすぐ流す。 const phase = (curSecond() + tS) % REEL_PERIOD; // 0..REEL_PERIOD (0 = :00 境界) let reelT = null; // -1..0=入場, 0..1=滞在, 1..2=退場, null=演出なし if (phase < REEL_RISE) reelT = phase / REEL_RISE - 1; // 入場 [-1,0): :00 から中央へ else if (phase < REEL_RISE + REEL_HOLD) reelT = (phase - REEL_RISE) / REEL_HOLD; // 滞在 [0,1) else if (phase < REEL_RISE + REEL_HOLD + REEL_EXIT) reelT = (phase - REEL_RISE - REEL_HOLD) / REEL_EXIT + 1; // 退場 [1,2) // 入場時のブロック移動軸でアナウンスの流れ軸を固定 (奇数ステップ=縦移動→縦コンベア, 偶数=横移動→横コンベア) if (reelT !== null) { if (!reelLatched) { reelLatched = true; reelVert = (Math.floor(blkT) % 2 === 1); } } else { reelLatched = false; } // 滞在中 (announce が中央を覆う間) に内容シャッフルを一度だけ const reelMark = Math.floor((curMinute() * 60 + curSecond()) / REEL_PERIOD); if (reelT !== null && reelT >= 0 && reelT < 1 && blockShuffleSlot !== reelMark) { blockShuffleSlot = reelMark; for (let i = blockContent.length - 1; i > 0; i--) { const j = Math.floor(random(i + 1)); const tmp = blockContent[i]; blockContent[i] = blockContent[j]; blockContent[j] = tmp; } } // アナウンス HH:MM。演出は :00 以降に走るので現在時刻の分をそのまま表示。 let announceStr = null; if (reelT !== null) { const d = nowDate(); announceStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; } // ブロックの位置/動き (固定スロット)。中身(token)は blockContent[i] でシャッフルされる。グラデ barGrad[i] も位置固定。 // 座標は size 基準: y は size/3 刻み (0, 2/3, 4/3 段 / 1/3, 1, 5/3 段)、x は size 刻み (0,1,2,3 列)。 const slots = [ { y: 0, x: 0, vDir: 1, hp: [1, -1, 1, 1, -1] }, { y: size * 2 / 3, x: 0, vDir: 1, hp: [1, -1, 1, 1, -1] }, { y: size * 4 / 3, x: 0, vDir: 1, hp: [1, -1, 1, 1, -1] }, { y: 0, x: size * 2, vDir: 1, hp: [1, -1, 1, 1, -1] }, { y: size * 2 / 3, x: size * 2, vDir: 1, hp: [1, -1, 1, 1, -1] }, { y: size * 4 / 3, x: size * 2, vDir: 1, hp: [1, -1, 1, 1, -1] }, { y: size / 3, x: size, vDir: -1, hp: leftPattern }, { y: size, x: size, vDir: -1, hp: leftPattern }, { y: size * 5 / 3, x: size, vDir: -1, hp: leftPattern }, { y: size / 3, x: size * 3, vDir: -1, hp: leftPattern }, { y: size, x: size * 3, vDir: -1, hp: leftPattern }, { y: size * 5 / 3, x: size * 3, vDir: -1, hp: leftPattern }, ]; // その場モーフ準備: 秒は毎秒、月/日は言語が変わる10秒境界で、旧(1秒前)→新へ補間する。 const secNow = curSecond(); const secPrev = (secNow + 59) % 60; const prevLang = langOfSecond(secPrev); // 1秒前の言語帯 const prevLangFont = fontFor(prevLang); // 1秒前の言語フォント const prevSecLabel = secondsLabel(secPrev); // 1秒前の秒ラベル (フェードアウトする旧表示) const langChanged = (lang !== prevLang); // この秒で言語帯が切替わったか (月/日のモーフ起点) const prevMoStr = monthLabel(curMonth(), prevLang); // 1秒前の言語での月 const prevDyStr = dayLabel(curDay(), prevLang); // 1秒前の言語での日 const secMorphP = easeInOut(Math.min(tS / SEC_MORPH, 1), 3); // モーフ進行 0..1 (SEC_MORPH 秒で完了し以後静止) // 全ブロックともウェイトは 900 固定。分(hourmin)以外にアナウンスのリールを出す。 for (let i = 0; i < 12; i++) { const sl = slots[i]; const token = blockContent[i]; let str, col, wt, fnt, morph = null; if (token === 'month') { str = moStr; col = '#ffffff'; wt = 900; fnt = langFont; // 言語が変わる境界で旧言語の月表記からモーフ if (langChanged) morph = { fromLabel: prevMoStr, fromColor: '#ffffff', fromWeight: 900, fromFont: prevLangFont, p: secMorphP }; } else if (token === 'day') { str = dyStr; col = '#ffffff'; wt = 900; fnt = langFont; if (langChanged) morph = { fromLabel: prevDyStr, fromColor: '#ffffff', fromWeight: 900, fromFont: prevLangFont, p: secMorphP }; } else if (token === 'hourmin') { str = hmStr; col = '#ffffff'; wt = 900; fnt = '"Nunito"'; } else { str = secLabel; col = '#000000'; wt = 900; fnt = langFont; morph = { fromLabel: prevSecLabel, fromColor: '#000000', fromWeight: 900, fromFont: prevLangFont, p: secMorphP, }; } const ann = (token !== 'hourmin') ? announceStr : null; // 分ブロックにはリールを出さない drawMovingBlock(size, size / 3, blkT, barGrad[i], str, col, wt, fnt, i + 1, sl.y, sl.x, sl.vDir, sl.hp, ann, reelT, reelVert, morph); } // 秒針の先端 (上方向に伸びる先, y=size→0) からパーティクルの円を発生 (ブロックの上に加算合成) // ※現在は非表示。再表示するには下記2行のコメントを外す。 // const secT = ((second() + tS) % 60) / 60; // updateSecondParticles(secT * size * 4, size - secT * size); pop(); // offsetX の平行移動を解除 } // 1秒ごとに「横へ stepW」「縦へ stepH」を交互に繰り返すブロック。x は 4*size で巻き戻し。 // colorPair: 斜め2色グラデの [開始色, 終了色], label: 中心に出す文字 (null で非表示), labelColor: 文字色, labelWeight: フォントウェイト, labelFont: フォント名(CSS), seed: 揺れ乱数のシード(ブロック固有), // yOffset/xOffset: 開始位置オフセット, vDir: 縦移動の向き (1=下, -1=上), hPattern: 横移動の方向パターン (1=右, -1=左) // announce: 分切替時にスライドする HH:MM (null で演出なし), reelT: 進行 (-1..0=入場, 0..1=滞在, 1..2=退場), reelVert: 入場時の伸縮が縦か // morph: 秒のその場モーフ {fromLabel,fromColor,fromWeight,fromFont,p(0..1)} (null で無効)。旧(from)→新(label)を同位置でクロスフェード+ブラーで溶け合わせる。 function drawMovingBlock(blockW, blockH, t, colorPair = ['#ffffff', '#ffffff'], label = null, labelColor = '#000000', labelWeight = 900, labelFont = '"Nunito"', seed = 0, yOffset = 0, xOffset = 0, vDir = 1, hPattern = [1, -1, 1, 1, -1], announce = null, reelT = null, reelVert = false, morph = null) { const size = blockW; // blockW は frameSizeOf() のフレーム1辺。これを単位に全量を相対化 const stepW = size; // 横ステップ = 1フレーム const stepH = blockH; // 縦ステップ = ブロック高さ (size/3) const cycleX = size * 4; // 横の巻き戻し (4列ぶん) const cycleY = size * 2; // 縦の巻き戻し (2段ぶん。canvas 高さに依らず size 基準で一定) // イージング強さ: 1=リニア, 2=quad, 3=cubic... 大きいほど開始/終了がゆっくり緩急が強い const easingPower = 3; const s = Math.floor(t); // 現在のステップ番号 (1秒=1ステップ) const frac = easeInOut(t - s, easingPower); // ステップ内進行 (0..1) にイージング適用 const hMovesDone = Math.ceil(s / 2); // 完了した横移動数 const vMovesDone = Math.floor(s / 2); // 完了した縦移動数 // 完了した横移動の累積変位 (方向パターンに従う) let xDisp = 0; for (let i = 0; i < hMovesDone; i++) { xDisp += hPattern[i % hPattern.length] * stepW; } let yDisp = vMovesDone * stepH * vDir; // 現在ステップの部分移動 if (s % 2 === 0) { // 偶数ステップ: 横移動 (この移動は hMovesDone 番目) xDisp += hPattern[hMovesDone % hPattern.length] * frac * stepW; } else { // 奇数ステップ: 縦へ移動 (vDir で上下) yDisp += frac * stepH * vDir; } let x = xDisp + xOffset; // 開始位置の横オフセット let y = yDisp + yOffset; // 開始位置の縦オフセット const xw = ((x % cycleX) + cycleX) % cycleX; const yw = ((y % cycleY) + cycleY) % cycleY; // 膨らむスケール: 横移動(偶数)は幅を 1→2→1、縦移動(奇数)は高さを 1→2.5→1 に膨らませる。 // ただしアナウンス演出中 (reelT!=null) はスケールせず基準サイズを保つ。 const swell = (reelT != null) ? 0 : Math.sin((t - s) * Math.PI); // 0→1→0 const ws = (s % 2 === 0) ? 1 + swell : 1; // 横: 最大2倍 const hs = (s % 2 === 0) ? 1 : 1 + 1.5 * swell; // 縦: 最大2.5倍 const drawW = blockW * ws; const drawH = blockH * hs; drawingContext.save(); drawingContext.beginPath(); drawingContext.rect(0, 0, cycleX, cycleY); drawingContext.clip(); // 60%の不透明度で斜めレインボーグラデ塗り + 枠線 + 右端→左端 / 下端→上端の巻き戻し複写 drawingContext.globalAlpha = 0.6; drawingContext.lineWidth = 3 * gScale; const grainPat = drawingContext.createPattern(grainTileFor(seed), 'repeat'); // ブロックごとに別パターン for (const dx of [0, -cycleX]) { for (const dy of [0, -cycleY]) { const cx = xw + dx + blockW / 2; // 中央基準でスケール const cy = yw + dy + blockH / 2; const left = cx - drawW / 2; const top = cy - drawH / 2; const grad = blockGradient(left, top, drawW, drawH, colorPair[0], colorPair[1]); drawingContext.fillStyle = grad; drawingContext.strokeStyle = grad; drawingContext.fillRect(left, top, drawW, drawH); drawingContext.strokeRect(left, top, drawW, drawH); // グラデの上にグレインノイズを overlay でうっすら重ねる (パターンはブロック左上を原点に追従) drawingContext.save(); drawingContext.globalCompositeOperation = 'overlay'; drawingContext.globalAlpha = 0.1; drawingContext.translate(left, top); drawingContext.fillStyle = grainPat; drawingContext.fillRect(0, 0, drawW, drawH); drawingContext.restore(); } } // ラベル。分切替時 (announce!=null) は HH:MM がスライドして入場→滞在→退場するリール演出。 // ブロック内にクリップして、押し出される/せり込む文字を端でマスクする。content と announce は常に // blockW/blockH ぶん離れて同方向にスクロールするので重ならない。 if (label != null) { const lx = blockLabelOffsetX(t, hPattern, seed); // 横位置 (現状 0.5=中央) const inTrans = (announce != null && reelT != null); drawingContext.textAlign = 'center'; drawingContext.textBaseline = 'middle'; for (const dx of [0, -cycleX]) { for (const dy of [0, -cycleY]) { const cx = xw + dx + blockW / 2; const cy = yw + dy + blockH / 2; const tx = xw + dx + lx * blockW; drawingContext.save(); drawingContext.beginPath(); drawingContext.rect(cx - drawW / 2, cy - drawH / 2, drawW, drawH); drawingContext.clip(); if (inTrans) { // アナウンスはブロックの移動方向と「反対」の辺から入場し、その方向へ流す (移動軸に沿って逆向き)。 // dir = ブロック移動向きの反転 (縦: vDir +1=下/-1=上, 横: hPattern +1=右/-1=左を反転)。 // ブロックの移動と枠内スクロールが同軸なので、合成motionは斜めにならずその辺から現れて見える。 // content(通常表記)と announce(HH:MM白)は常に1ブロック分離れて同方向に流れる (重ならない)。 const dir = -(reelVert ? vDir : hPattern[Math.ceil(s / 2) % hPattern.length]); let aX = 0, aY = 0, cX = 0, cY = 0; if (reelT < 0) { const rp = easeOut(reelT + 1); // 入場 (ease-out): dir 側の端 → 中央 if (reelVert) { aY = dir * blockH * (1 - rp); cY = -dir * blockH * rp; } // dir辺から / 旧を反対へ else { aX = dir * blockW * (1 - rp); cX = -dir * blockW * rp; } } else if (reelT < 1) { // 滞在: announce 中央。新 content は入場辺 (dir 側) で待機(隠れ) if (reelVert) { cY = dir * blockH; } else { cX = dir * blockW; } } else { const ep = easeOut(reelT - 1); // 退場 (ease-out): 中央 → 反対辺、新は dir 辺から if (reelVert) { aY = -dir * blockH * ep; cY = dir * blockH * (1 - ep); } else { aX = -dir * blockW * ep; cX = dir * blockW * (1 - ep); } } drawBlockText(label, labelColor, labelWeight, labelFont, tx + cX, cy + cY); drawBlockText(announce, '#ffffff', 900, '"Nunito"', tx + aX, cy + aY); } else if (morph != null && morph.p < 1) { const p = morph.p; const baseA = drawingContext.globalAlpha; // ブロックの不透明度 (0.6) を基準にする // 輪郭補間モーフ: グリフ輪郭を点列にして頂点補間。失敗(フォント未ロード等)時はクロスフェードへ。 const drawn = SEC_OUTLINE_MORPH && drawOutlineMorph( morph.fromLabel, morph.fromFont, morph.fromWeight, label, labelFont, labelWeight, labelColor, p, tx, cy, 80 * gScale, baseA); if (!drawn) { // クロスフェード+ブラー: 中間(p=0.5)でブラー最大にして溶け合わせる。 drawingContext.filter = `blur(${Math.sin(p * Math.PI) * SEC_MORPH_BLUR * gScale}px)`; drawingContext.globalAlpha = baseA * (1 - p); // 旧: フェードアウト drawBlockText(morph.fromLabel, morph.fromColor, morph.fromWeight, morph.fromFont, tx, cy); drawingContext.globalAlpha = baseA * p; // 新: フェードイン drawBlockText(label, labelColor, labelWeight, labelFont, tx, cy); drawingContext.filter = 'none'; drawingContext.globalAlpha = baseA; } } else { drawBlockText(label, labelColor, labelWeight, labelFont, tx, cy); } drawingContext.restore(); } } } drawingContext.restore(); } // ブロック内テキストを1つ描画 (textAlign/baseline は呼び出し側で設定済み前提) // フォントサイズは基準 80px に gScale を掛けて size に追従させる。 function drawBlockText(str, color, weight, font, x, y) { drawingContext.fillStyle = color; drawingContext.font = `${weight} ${80 * gScale}px ${font}, sans-serif`; drawingContext.fillText(String(str), x, y); } //------------------------------------- // グリフ輪郭の頂点補間モーフここから // オフスクリーンにグリフを描画→マーチングスクエア法で輪郭を点列抽出→from/to を頂点補間する。 // CSS Web フォントをそのまま使え、追加ライブラリ不要。穴(8の2つ→9の1つ等)は面積順に対応付け、 // 余った輪郭は重心へ収束させて消す/現すので、穴が閉じる・開くモーフになる。 // 同一フレーム内で生成済みの「原点基準モーフ Path2D」キャッシュ。 // 全 sec ブロック(最大9個)×巻き戻し複写4枚は (from→to, p, サイズ) が完全に同一なので、 // 1フレームにつき1回だけ Path2D を作り、描画側は translate(cx,cy) で使い回す (最大36回→1回)。 let morphPathFrame = -1; const morphPathMap = new Map(); // (fromStr→toStr) を原点基準で輪郭補間した Path2D を返す (フレーム内メモ化)。フォント未ロード等は null。 function getMorphPath(fromStr, fromFont, fromWeight, toStr, toFont, toWeight, p, fontSizePx) { if (frameCount !== morphPathFrame) { morphPathFrame = frameCount; morphPathMap.clear(); } const key = `${fromWeight}|${fromFont}|${fromStr}>${toWeight}|${toFont}|${toStr}@${p}#${fontSizePx}`; if (morphPathMap.has(key)) return morphPathMap.get(key); const A = getGlyphContours(fromStr, fromFont, fromWeight); const B = getGlyphContours(toStr, toFont, toWeight); if (!A || !B || (A.length === 0 && B.length === 0)) { morphPathMap.set(key, null); return null; } // 面積降順に並べ index で対応付け (大きい輪郭=外形どうし、穴=穴どうし) const as = A.slice().sort((u, v) => v.area - u.area); const bs = B.slice().sort((u, v) => v.area - u.area); const n = Math.max(as.length, bs.length); const path = new Path2D(); for (let i = 0; i < n; i++) { const a = as[i], b = bs[i]; let pts; if (a && b) pts = lerpPts(a.pts, b.pts, p); else if (a) pts = collapsePts(a.pts, a.cx, a.cy, p); // 消える輪郭 (p:0→1 で重心へ) else pts = collapsePts(b.pts, b.cx, b.cy, 1 - p); // 現れる輪郭 (p:0→1 で重心から) addPolyToPath(path, pts, 0, 0, fontSizePx); // 原点基準。位置は描画側 translate で付与 } morphPathMap.set(key, path); return path; } // (fromStr→toStr) を輪郭補間して (cx,cy) に fontSizePx で塗る。描けたら true。 function drawOutlineMorph(fromStr, fromFont, fromWeight, toStr, toFont, toWeight, color, p, cx, cy, fontSizePx, alpha) { const path = getMorphPath(fromStr, fromFont, fromWeight, toStr, toFont, toWeight, p, fontSizePx); if (!path) return false; drawingContext.save(); drawingContext.globalAlpha = alpha; drawingContext.fillStyle = color; drawingContext.translate(cx, cy); // 原点基準パスを目的位置へ平行移動 drawingContext.fill(path, 'evenodd'); // evenodd で穴を抜く drawingContext.restore(); return true; } // グリフの輪郭群を抽出 (em正規化・面積/重心付き)。フォント未ロード時はキャッシュせず null を返し再試行。 function getGlyphContours(str, font, weight) { str = String(str); if (str === '' || str === ' ') return []; const key = `${weight}|${font}|${str}`; if (key in glyphContourCache) return glyphContourCache[key]; if (!glyphCanvas) { glyphCanvas = document.createElement('canvas'); glyphCanvas.width = GLYPH_BOX; glyphCanvas.height = GLYPH_BOX; glyphCtx = glyphCanvas.getContext('2d', { willReadFrequently: true }); } const g = glyphCtx; const half = GLYPH_BOX / 2; // 幅が箱に収まるよう描画サイズを決定 (語が長い言語対応) g.font = `${weight} 100px ${font}, sans-serif`; const w100 = g.measureText(str).width || 1; const margin = GLYPH_BOX * 0.86; let renderPx = Math.min(GLYPH_RENDER_PX, 100 * margin / w100, GLYPH_BOX * 0.66); g.clearRect(0, 0, GLYPH_BOX, GLYPH_BOX); g.fillStyle = '#fff'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.font = `${weight} ${renderPx}px ${font}, sans-serif`; g.fillText(str, half, half); const data = g.getImageData(0, 0, GLYPH_BOX, GLYPH_BOX).data; const inside = (x, y) => data[(y * GLYPH_BOX + x) * 4 + 3] > 128 ? 1 : 0; const raw = extractContours(inside, GLYPH_BOX, GLYPH_BOX); const unit = 1 / renderPx; // em正規化 (final = pt * fontSizePx) const out = []; for (const c of raw) { if (c.length < 6) continue; let rs = resampleContour(c, GLYPH_PTS); if (!rs) continue; if (polyArea(rs) < 0) rs.reverse(); // 向きをCCWに統一 rs = rotateToTop(rs); // 始点を上端に揃え対応付けのねじれを軽減 const pts = rs.map(q => ({ x: (q.x - half) * unit, y: (q.y - half) * unit })); const area = Math.abs(polyArea(pts)); if (area < 1e-4) continue; // ごく小さい輪郭(ノイズ)は捨てる const ce = centroidOf(pts); out.push({ pts, area, cx: ce.x, cy: ce.y }); } let loaded = true; try { loaded = document.fonts.check(`${weight} ${renderPx}px ${font}`); } catch (e) {} if (out.length && loaded) glyphContourCache[key] = out; // ロード済みのみ確定キャッシュ return out.length ? out : null; } // 二値グリッドからマーチングスクエア法で閉輪郭群を抽出 function extractContours(inside, w, h) { const segs = []; const push = (a, b) => segs.push([a, b]); for (let y = 0; y < h - 1; y++) { for (let x = 0; x < w - 1; x++) { const a = inside(x, y), b = inside(x + 1, y), c = inside(x + 1, y + 1), d = inside(x, y + 1); const ci = a * 8 + b * 4 + c * 2 + d; if (ci === 0 || ci === 15) continue; const T = { x: x + 0.5, y: y }; const R = { x: x + 1, y: y + 0.5 }; const B = { x: x + 0.5, y: y + 1 }; const L = { x: x, y: y + 0.5 }; switch (ci) { case 1: push(L, B); break; case 2: push(B, R); break; case 3: push(L, R); break; case 4: push(T, R); break; case 5: push(T, R); push(L, B); break; // saddle case 6: push(T, B); break; case 7: push(T, L); break; case 8: push(T, L); break; case 9: push(T, B); break; case 10: push(T, L); push(R, B); break; // saddle case 11: push(T, R); break; case 12: push(L, R); break; case 13: push(B, R); break; case 14: push(L, B); break; } } } return stitchSegments(segs); } // 線分群を端点で繋いで閉ループ(輪郭)の配列にする function stitchSegments(segs) { const k = p => p.x + ',' + p.y; const map = new Map(); segs.forEach((s, i) => { for (const e of [0, 1]) { const key = k(s[e]); if (!map.has(key)) map.set(key, []); map.get(key).push(i); } }); const used = new Array(segs.length).fill(false); const contours = []; for (let i = 0; i < segs.length; i++) { if (used[i]) continue; used[i] = true; const contour = [segs[i][0]]; let nextPt = segs[i][1]; let guard = 0; while (guard++ < segs.length + 5) { contour.push(nextPt); const cand = map.get(k(nextPt)); let found = -1; if (cand) for (const j of cand) { if (!used[j]) { found = j; break; } } if (found === -1) break; used[found] = true; const seg = segs[found]; nextPt = (k(seg[0]) === k(nextPt)) ? seg[1] : seg[0]; } if (contour.length >= 4) contours.push(contour); } return contours; } // 閉ポリラインを弧長で n 点に等間隔再標本化 function resampleContour(pts, n) { const m = pts.length; const d = new Array(m); let total = 0; for (let i = 0; i < m; i++) { const a = pts[i], b = pts[(i + 1) % m]; d[i] = Math.hypot(b.x - a.x, b.y - a.y); total += d[i]; } if (total < 1e-6) return null; const step = total / n; const out = []; let seg = 0, segStart = 0; for (let s = 0; s < n; s++) { const target = s * step; while (seg < m - 1 && segStart + d[seg] < target) { segStart += d[seg]; seg++; } const a = pts[seg], b = pts[(seg + 1) % m]; const f = d[seg] > 1e-9 ? (target - segStart) / d[seg] : 0; out.push({ x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f }); } return out; } // 多角形の符号付き面積 (CCWで正) function polyArea(p) { let a = 0; for (let i = 0; i < p.length; i++) { const q = p[(i + 1) % p.length]; a += p[i].x * q.y - q.x * p[i].y; } return a / 2; } // 点群の平均重心 function centroidOf(p) { let x = 0, y = 0; for (const q of p) { x += q.x; y += q.y; } return { x: x / p.length, y: y / p.length }; } // 始点を最上(同点なら最左)の点に回す function rotateToTop(p) { let mi = 0; for (let i = 1; i < p.length; i++) { if (p[i].y < p[mi].y || (p[i].y === p[mi].y && p[i].x < p[mi].x)) mi = i; } return p.slice(mi).concat(p.slice(0, mi)); } // 同数点の2輪郭を頂点補間 function lerpPts(a, b, p) { const out = new Array(a.length); for (let i = 0; i < a.length; i++) { out[i] = { x: a[i].x + (b[i].x - a[i].x) * p, y: a[i].y + (b[i].y - a[i].y) * p }; } return out; } // 輪郭を重心へ収束 (q:0=元の形, 1=重心の点)。対応の取れない輪郭の消滅/出現に使用 function collapsePts(pts, ccx, ccy, q) { return pts.map(pt => ({ x: pt.x + (ccx - pt.x) * q, y: pt.y + (ccy - pt.y) * q })); } // em座標の点群を (cx,cy) 中心・scale 倍で Path2D に閉路追加 function addPolyToPath(path, pts, cx, cy, scale) { if (!pts.length) return; path.moveTo(cx + pts[0].x * scale, cy + pts[0].y * scale); for (let i = 1; i < pts.length; i++) path.lineTo(cx + pts[i].x * scale, cy + pts[i].y * scale); path.closePath(); } // グリフ輪郭の頂点補間モーフここまで //------------------------------------- // ease-in-out。power=1 でリニア、2,3,4... と上げるほど開始/終了がゆっくりになる function easeInOut(t, power) { if (t < 0.5) return 0.5 * Math.pow(2 * t, power); return 1 - 0.5 * Math.pow(2 * (1 - t), power); } // ease-in (cubic)。開始がゆっくりで終端に向けて加速する function easeIn(t) { return t * t * t; } // ease-out (cubic)。開始が速く終端でゆっくり止まる function easeOut(t) { return 1 - Math.pow(1 - t, 3); } // ブロック矩形に斜め(左上→右下)の2色グラデを作る。 function blockGradient(left, top, w, h, colorA, colorB) { const g = drawingContext.createLinearGradient(left, top, left + w, top + h); g.addColorStop(0, colorA); g.addColorStop(1, colorB); return g; } // グレインノイズのタイル (seed ごとに異なるモノクロ・ノイズ画像)。各ブロックに別パターンを乗せる用。 // 初回生成後はキャッシュ。tile は repeat パターンとして使う。 const grainTiles = {}; function grainTileFor(seed) { if (grainTiles[seed]) return grainTiles[seed]; const TILE = 128; const c = document.createElement('canvas'); c.width = TILE; c.height = TILE; const ctx = c.getContext('2d'); const img = ctx.createImageData(TILE, TILE); // seed から決定的なノイズ (LCG)。ブロックごとに seed が違うので別パターンになる。 let s = (seed * 1973 + 9277) >>> 0; const rnd = () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; }; const d = img.data; for (let i = 0; i < d.length; i += 4) { const v = (rnd() * 256) | 0; d[i] = d[i + 1] = d[i + 2] = v; d[i + 3] = 255; } ctx.putImageData(img, 0, 0); grainTiles[seed] = c; return c; } // 序数表記 (1→1st, 2→2nd, 3→3rd, 11→11th, 27→27th ...) function ordinal(n) { const s = ['th', 'st', 'nd', 'rd']; const v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); } // 秒ラベルで使う5言語。1-50 の5帯に重複なしランダム順で割り当てる。 const SEC_LANGS = ['en', 'ja', 'es', 'ko', 'fr']; // seed から決定的に SEC_LANGS をシャッフル (Fisher-Yates + LCG)。 function shuffledSecLangs(seed) { const arr = SEC_LANGS.slice(); let s = (seed * 2654435761 + 1013904223) >>> 0; const rnd = () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; }; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(rnd() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } // 当該分の言語割当 (5帯=5言語の重複なしランダム順)。分が変わるたびに再シャッフルし、分内では固定。 let _secLangSeed = -1; let _secLangCache = null; function secLangOrder() { const epochMin = curHour() * 60 + curMinute(); // 分ごとに変わるシード if (epochMin !== _secLangSeed) { _secLangSeed = epochMin; _secLangCache = shuffledSecLangs(epochMin); } return _secLangCache; } // 現在の秒に対応する言語キー。 // 1-50 = 5言語を分ごとにランダム割当した10秒帯 / 51-60(=00) = num(数字) function langOfSecond(sec) { if (sec === 0 || sec >= 51) return 'num'; // 51-59, 0(=60) return secLangOrder()[Math.floor((sec - 1) / 10)]; // 1-10,11-20,…,41-50 → 帯 0..4 } // 言語ごとのフォント。日本語=M PLUS Rounded 1c, 韓国語=Jua(丸ゴシック), その他=Nunito。 function fontFor(lang) { if (lang === 'ja') return '"M PLUS Rounded 1c"'; if (lang === 'ko') return '"Jua"'; return '"Nunito"'; } // 秒ラベル: 帯内位置 1..10 を現在の言語で表示。num帯(51-60)は数字 1-10。 function secondsLabel(sec) { const pos = (sec === 0) ? 10 : ((sec - 1) % 10) + 1; // 帯内位置 1..10 const lang = langOfSecond(sec); if (lang === 'num') return String(pos); // 51-60帯は数字 1-10 return SEC_WORDS[lang][pos - 1]; } // 月ラベル (1-12) を現在の言語で。num帯(秒が数字)は英語表記。 function monthLabel(m, lang) { const months = { en: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'June', 'July', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'], ja: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], es: ['Ene.', 'Feb.', 'Mar.', 'Abr.', 'Mayo', 'Junio', 'Julio', 'Ago.', 'Sept.', 'Oct.', 'Nov.', 'Dic.'], ko: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], fr: ['Janv.', 'Févr.', 'Mars', 'Avr.', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'], }; if (lang === 'num') return months.en[m - 1]; return months[lang][m - 1]; } // 日ラベルを現在の言語で。en/num=序数(27th), ja=27日, ko=27일, es/fr=数字。 function dayLabel(d, lang) { if (lang === 'en' || lang === 'num') return ordinal(d); if (lang === 'ja') return d + '日'; if (lang === 'ko') return d + '일'; return String(d); } // ブロック内ラベルの正規化x位置 (0=左端, 1=右端, 0.5=中央)。 // 揺れは一旦オフ (常に中央)。元は横移動と同期して 0.5→0.5±amp→0.5 と sin で往復させていた。 function blockLabelOffsetX(t, hPattern, seed) { return 0.5; } // 秒針先端からパーティクル(円)を発生・更新・描画する function updateSecondParticles(tipX, tipY) { const dt = deltaTime / 1000; // 経過秒 (フレームレート非依存) // 先端から発生。spawnCount は小数可: 整数部は確定で発生、小数部は確率で +1 // 例) 0.1 → 1/10 の確率で1個, 2.3 → 必ず2個 + 30%で更に1個 const spawnCount = 0.2; let nSpawn = Math.floor(spawnCount); if (random() < spawnCount - nSpawn) nSpawn++; for (let i = 0; i < nSpawn; i++) { const hue = random(360); secondParticles.push({ x: tipX, y: tipY, vx: -random(60, 180), // 右→左に流れる (px/秒) vy: random(-45, 90), // 上下に少し散る (px/秒) life: 1.0, // 1.0→0 でフェード lifeSec: random(13, 17), // 寿命 15秒前後の揺らぎ size: random(4, 42), hue: hue, // 中心の色相 hue2: (hue + random(30, 90)) % 360, // 外側の色相 (グラデ用) age: 0, // 経過秒 wobbleFreq: random(2, 6), // 縦揺らぎの周波数 (rad/秒) wobblePhase: random(TWO_PI), // 位相 wobbleAmp: random(20, 60), // 縦揺らぎの振幅 (px/秒) }); } // 更新と描画 (加算合成: 重なるほど明るく色が混ざる) drawingContext.save(); drawingContext.globalCompositeOperation = 'lighter'; for (let i = secondParticles.length - 1; i >= 0; i--) { const p = secondParticles[i]; p.age += dt; p.x += p.vx * dt; // 縦方向はドリフト + サイン波の揺らぎ p.y += (p.vy + Math.sin(p.age * p.wobbleFreq + p.wobblePhase) * p.wobbleAmp) * dt; p.life -= dt / p.lifeSec; if (p.life <= 0) { secondParticles.splice(i, 1); continue; } drawingContext.globalAlpha = p.life; const r = Math.max(p.size * p.life, 0.1); // 中心 → 外側で色相が変わるラジアルグラデーション const grad = drawingContext.createRadialGradient(p.x, p.y, 0, p.x, p.y, r); grad.addColorStop(0, `hsl(${p.hue}, 100%, 75%)`); grad.addColorStop(1, `hsl(${p.hue2}, 90%, 45%)`); drawingContext.fillStyle = grad; drawingContext.beginPath(); drawingContext.arc(p.x, p.y, r, 0, TWO_PI); drawingContext.fill(); } drawingContext.globalAlpha = 1; drawingContext.restore(); } // box の幅を count 等分し、各セル中央に y方向の縦線を引く function drawVerticalLines(box, count) { drawingContext.save(); drawingContext.strokeStyle = 'rgba(255,255,255,0.12)'; drawingContext.lineWidth = Math.max(1, gScale); for (let i = 0; i < count; i++) { const x = box.x + (i + 0.5) * (box.w / count); drawingContext.beginPath(); drawingContext.moveTo(x, box.y); drawingContext.lineTo(x, box.y + box.h); drawingContext.stroke(); } drawingContext.restore(); } function drawSecondLine(xMin, xMax, yCenter, halfLengthMax, secondsContinuous, frameE) { const t = (secondsContinuous % 60) / 60; // 00秒の位置を frameB センター (= frameE 列の中心 x=1.5*size) に合わせ、右端 (xMax) で左端 (xMin) に巻き戻す。 const width = xMax - xMin; const x = xMin + ((t * width + (frameE.x + frameE.w / 2 - xMin)) % width); // 高さは 2分周期の三角波: 偶数分は 0→max、奇数分は max→0 (分境界で連続)。列境界でのスケール縮小はしない。 const halfLen = halfLengthMax * ((curMinute() % 2 === 0) ? t : (1 - t)); const hw = 4 * gScale; // 線幅の半分 (先端の丸み半径) drawingContext.save(); drawingContext.strokeStyle = '#fff'; drawingContext.fillStyle = '#fff'; drawingContext.lineWidth = 8 * gScale; drawingContext.lineCap = 'butt'; // 中心側 (yCenter=384px付近) は直角に切り落とす。先端だけ後で円で丸める。 // 上半分 (y 0) { drawingContext.beginPath(); drawingContext.arc(x, yCenter - halfLen, hw, 0, Math.PI * 2); drawingContext.fill(); } // 下半分 (y>size): frameE へ投影。4列を frameE の各辺へ対応づけて描画する。 // B列(frameE と同じ列)はそのまま下へ、A/C/D列は frameE 中心を軸に回転して各辺へマップ。 // どの列も frameE にクリップして描くため、太い秒針が列境界をまたぐと // 隣接する2列の描画が両方 frameE に残り、2つの辺にまたがって表示される。 const eCx = frameE.x + frameE.w / 2; const eCy = frameE.y + frameE.h / 2; const regions = [ { regionStart: frameE.x - frameE.w, angle: -Math.PI / 2 }, // 0〜1列 (frameA) { regionStart: frameE.x, angle: 0 }, // 1〜2列 (frameB / frameE 列) { regionStart: frameE.x + frameE.w, angle: Math.PI / 2 }, // 2〜3列 (frameC) { regionStart: frameE.x + 2 * frameE.w, angle: Math.PI }, // 3〜4列 (frameD) ]; for (const { regionStart, angle } of regions) { const lineX = frameE.x + (x - regionStart); drawingContext.save(); drawingContext.beginPath(); drawingContext.rect(frameE.x, frameE.y, frameE.w, frameE.h); drawingContext.clip(); drawingContext.translate(eCx, eCy); drawingContext.rotate(angle); drawingContext.translate(-eCx, -eCy); drawingContext.beginPath(); drawingContext.moveTo(lineX, frameE.y); drawingContext.lineTo(lineX, frameE.y + halfLen); drawingContext.stroke(); if (halfLen > 0) { // 先端 (frameE 下端側) を円で丸める。中心側 (frameE.y) は butt で切り落とし drawingContext.beginPath(); drawingContext.arc(lineX, frameE.y + halfLen, hw, 0, Math.PI * 2); drawingContext.fill(); } drawingContext.restore(); } drawingContext.restore(); } // strip ({x,y,w,h, centerX?}) で示す帯の上に 1..total の数字を横スクロール表示する。 // currentVal が frameBcx (= strip.centerX or stripX+stripW/2) に来るよう配置し、 // 1単位経過で次のラベルが中心に来るよう線形補間でスライド、cycleW = 帯幅で巻き戻し。 // yRatio は帯高さに対する縦位置 (0..1)。 // alphaCenter / alphaFar : 中央〜最遠 (cycleW/2) の間で線形補間される不透明度。 // widthScaleCenter / widthScaleFar : 同区間で線形補間されるラベル横方向スケール。 // multiDigitSlotMul : 2ケタ以上ラベルが占有するスロット幅倍率 (1ケタ=1, デフォルト1)。tightPack=true のとき無視。 // padFactor : フォントサイズに掛かるパディング係数 (デフォルト 0.85)。 // tightPack : true のときラベルを自然幅で隣接配置 (ラベル間スペース無し)。 // tightness : スロット位置を変えずレンダーフォントだけ拡縮する倍率 (1超で隣ラベルと重なって詰まる)。 // multiDigitKerning : 2ケタ以上の文字間調整 (fontSize に対する係数。-0.1 = -10%、より負にすると詰まる)。 function drawScrollingRow(strip, total, currentVal, progressInUnit, yRatio, alphaCenter = 1, alphaFar = 1, widthScaleCenter = 1, widthScaleFar = 1, multiDigitSlotMul = 1, padFactor = 0.85, tightPack = false, tightness = 1, multiDigitKerning = -0.3 ) { const stripX = strip.x; const stripW = strip.w; const stripY = strip.y; const stripH = strip.h; const frameBcx = strip.centerX != null ? strip.centerX : stripX + stripW / 2; // 各ラベルの自然幅 (at fontSize 100, drawChromeDigits 内の letterSpacing 補正済み) と "0" の高さ drawingContext.save(); drawingContext.font = `900 70px "Nunito", sans-serif`; const naturalAt100 = []; for (let n = 1; n <= total; n++) { const str = String(n); let w = drawingContext.measureText(str).width; if (str.length >= 2) w += (str.length - 1) * (100 * multiDigitKerning); naturalAt100.push(w); } const m0 = drawingContext.measureText("0"); const heightAt100 = m0.actualBoundingBoxAscent + m0.actualBoundingBoxDescent; // スロットの pixel 幅と fontSize を決定 let slotPx; let fontSize; if (tightPack) { // 自然幅をそのままスロットに、合計 = stripW になるよう fontSize を逆算 const totalAt100 = naturalAt100.reduce((a, b) => a + b, 0); fontSize = Math.min( 100 * stripH / heightAt100, 100 * stripW / totalAt100 ) * padFactor; slotPx = naturalAt100.map(w => w * fontSize / 100); } else { // 単位ベースのスロット (1 or multiDigitSlotMul) const slotUnits = []; let totalSlotUnits = 0; for (let n = 1; n <= total; n++) { const u = String(n).length >= 2 ? multiDigitSlotMul : 1; slotUnits.push(u); totalSlotUnits += u; } const unitPx = stripW / totalSlotUnits; slotPx = slotUnits.map(u => u * unitPx); // 最多ケタが自分のスロットに収まる fontSize const totalStr = String(total); const totalSlotForLabel = totalStr.length >= 2 ? multiDigitSlotMul : 1; const m = drawingContext.measureText(totalStr); fontSize = Math.min( 100 * stripH / (m.actualBoundingBoxAscent + m.actualBoundingBoxDescent), 100 * (totalSlotForLabel * unitPx) / m.width ) * padFactor; } drawingContext.restore(); // ラベルの中心位置 (テープ降順: 左から N=total, total-1, ..., 1) const centers = new Array(total); let cum = 0; for (let N = total; N >= 1; N--) { centers[N - 1] = cum + slotPx[N - 1] / 2; cum += slotPx[N - 1]; } const cycleW = cum; const cy = stripY + stripH * yRatio; // currentVal が frameBcx に来る scrollOffset を、次のラベルへ移行する間線形補間 const curIdx = currentVal - 1; const nextIdx = currentVal % total; const curC = centers[curIdx]; let nextC = centers[nextIdx]; if (nextC > curC) nextC -= cycleW; // 降順タープで巡回 const scrollOffset0 = frameBcx - curC; const scrollOffsetEnd = frameBcx - nextC; const scrollOffset = scrollOffset0 + (scrollOffsetEnd - scrollOffset0) * progressInUnit; push(); drawingContext.save(); drawingContext.beginPath(); drawingContext.rect(stripX, stripY, stripW, stripH); drawingContext.clip(); for (let n = 1; n <= total; n++) { let x = centers[n - 1] + scrollOffset; x = ((x - stripX) % cycleW + cycleW) % cycleW + stripX; // 中央からの巡回距離 (0..cycleW/2) を 0..1 に正規化 const half = cycleW / 2; const signed = ((x - frameBcx) % cycleW + cycleW + half) % cycleW - half; const t = Math.abs(signed) / half; const alpha = alphaCenter + (alphaFar - alphaCenter) * t; const widthScale = widthScaleCenter + (widthScaleFar - widthScaleCenter) * t; drawingContext.globalAlpha = alpha; // 端ではみ出した分が反対側に出るよう、±cycleW にも複写して描画 (clip で範囲外は捨てられる) for (const xOff of [0, cycleW, -cycleW]) { const dx = x + xOff; if (widthScale !== 1) { drawingContext.save(); drawingContext.translate(dx, 0); drawingContext.scale(widthScale, 1); drawingContext.translate(-dx, 0); drawChromeDigits(String(n), dx, cy, fontSize * tightness, multiDigitKerning); drawingContext.restore(); } else { drawChromeDigits(String(n), dx, cy, fontSize * tightness, multiDigitKerning); } } } drawingContext.globalAlpha = 1; drawingContext.restore(); pop(); } // 枠内の右下にラベルを描画 function drawFrameLabel(frame, label) { const padding = 16; const size = 40; drawingContext.save(); drawingContext.font = `900 ${size}px "Nunito", sans-serif`; drawingContext.textAlign = 'right'; drawingContext.textBaseline = 'bottom'; drawingContext.fillStyle = '#ffffff'; drawingContext.fillText(label, frame.x + frame.w - padding, frame.y + frame.h - padding); drawingContext.restore(); } // 上から落ちてくる数字を軌跡つきで描画 function drawFallingDigits(frame, currentValue, modulo, t, fontSize, intervalSec) { const sx = frame.x + frame.w / 2; const sy = frame.y + frame.h / 2; const startY = sy - frame.h; const step = sy - startY; // 1単位あたりの移動量 (px) const pxPerSec = step / intervalSec; // 実時間1秒あたりのpx const trailCount = 8; const trailLength = pxPerSec * 0.4; // 直近0.4秒ぶんの軌跡 push(); drawingContext.save(); drawingContext.beginPath(); drawingContext.rect(frame.x, frame.y, frame.w, frame.h); drawingContext.clip(); for (let k = 0; k < 100; k++) { const y = startY + (k + t) * step; if (y - fontSize / 2 > frame.y + frame.h) break; // t=0 で currentValue が枠中央に来るよう +1 シフト const val = ((currentValue - k + 1) % modulo + modulo) % modulo; // 軌跡: 上方向に薄く強めのブラーでゴーストを重ねる drawingContext.filter = 'blur(10px)'; for (let g = trailCount; g >= 1; g--) { const offset = (g / trailCount) * trailLength; drawingContext.globalAlpha = (1 - g / trailCount) * 0.35 + 0.05; drawChromeDigits(nf(val, 2), sx, y - offset, fontSize); } // 現在位置: 弱めのブラーで本体 drawingContext.filter = 'blur(2px)'; drawingContext.globalAlpha = 1; drawChromeDigits(nf(val, 2), sx, y, fontSize); } drawingContext.filter = 'none'; drawingContext.globalAlpha = 1; drawingContext.restore(); pop(); } // シンプルな縦グラデーションで2桁テキストを描画（生 canvas API でp5の fill 上書きを回避） function drawChromeDigits(str, cx, cy, size) { const top = cy - size / 2; const bottom = cy + size / 2; // 上が白〜中央が中間グレー〜下が黒に向かって落ちる柔らかなグラデーション const grad = drawingContext.createLinearGradient(0, top, 0, bottom); grad.addColorStop(0.00, '#ffffff'); grad.addColorStop(0.35, '#bbbbbb'); grad.addColorStop(0.65, '#888888'); grad.addColorStop(1.00, '#000000'); drawingContext.save(); drawingContext.fillStyle = grad; drawingContext.font = `900 ${size}px "Nunito", sans-serif`; drawingContext.textAlign = 'center'; drawingContext.textBaseline = 'middle'; // 2文字以上ならカーニングを詰める (例: "10" の 1-0 間) if (str.length >= 2) { drawingContext.letterSpacing = `${-size * 0.1}px`; } drawingContext.fillText(str, cx, cy); drawingContext.restore(); } //------------------------------------- // ユーティリティここから // レイアウト参考画像の読み込み function preload() { // 画像を読み込む（ファイルが存在しない場合エラー回避） try { image1 = loadImage( "images/cube1Max.png", function () { console.log("LED_CUBE1.png 読み込み成功"); }, function () { console.log("LED_CUBE1.png が不明"); } ); } catch (e) { console.log("LED_CUBE1.png の読み込みをスキップ"); } try { image2 = loadImage( "images/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/cube3Max.png", function () { console.log("LED_CUBE3.png 読み込み成功"); }, function () { console.log("LED_CUBE3.png が不明"); } ); } catch (e) { console.log("LED_CUBE3.png の読み込みをスキップ"); } } // レイアウト参考画像の描画（draw関数内） function drawDebugMode() { 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"; } else if (key === "2") { currentSize = "LED_CUBE2"; } else if (key === "3") { currentSize = "LED_CUBE3"; } else if (key === "4") { currentSize = ""; // URLパラメータを空にする } if (key === "1" || key === "2" || key === "3" || key === "4") { updateURLAndCanvas(); } } //クエリパラメーターでLED_CUBEのサイズを変更 function createCanvasSetup() { // クエリパラメータからサイズを取得 const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]) { currentSize = sizeParam; } createCanvasWithSize(); //キャンバスサイズの設定 } //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 })` ); } // ウィンドウリサイズ時の処理 function windowResized() { // URLパラメータが設定されていない場合のみcanvasをリサイズ if (!currentSize || !CANVAS_SIZES[currentSize]) { resizeCanvas(windowWidth, windowHeight); console.log(`Canvasリサイズ: ${windowWidth}x${windowHeight}`); } } // ユーティリティここまで //-------------------------------------