DOT ANIMATION
url:https://kosotsu-dev.github.io/Dot-animation/
📖 概要
- 画面を5pxドットで敷き詰め、入力テキストを発光ドットで流し込み表示
- リセットは右端から背景色へ掃き出すアニメーション
- 横画面専用（縦画面はオーバーレイでガイド）
🔑 主要機能
- テキストのピクセル化＋ドット点灯アニメーション
- 右端からの高速リセット（背景・枠線へ完全復帰）
- 文字数連動のフォントサイズ自動調整
- 下線ネオンの最小UI、ホバー時にふわっと浮上（親ラッパーでhover判定固定）
🛠 技術スタック
- HTML / CSS / JavaScript（Vanilla）
- Canvas API
- フォント: DotGothic16（UI）, Orbitron（描画ベース）
📁 ファイル構成
-
index.html: ヘッダー（DOT ANIMATION）、コントロール（入力・開始・リセット）、
<canvas> - style.css: 黒ヘッダー、アンダーライン入力、下線ネオンボタン、縦画面オーバーレイ
- script.js: グリッド生成、ピクセル解析、表示/消去アニメ、向き判定
⚙️ 動作仕様
-
ドットサイズ:
squareSize = 5px - グリッド: 画面サイズから行列数を算出
-
テキスト解析: 仮想Canvasに白文字描画 →
getImageDataでα>128を抽出 → ドット座標化 - 表示（生成）: 1ms間隔・1バッチ=5ドットで点灯（高速化のためバッチ処理）
-
リセット（消去）: X降順（右端→左）で0.25ms間隔・1バッチ=10ドット消灯
-
isLit=false,intensity=0
-
-
スムージング:
intensityとtargetIntensityを補間（ネオンのグロー感）
フォントサイズ調整（例）
- 3文字以下: 最大（画面の約1/3相当まで）
- 4–6文字: 基本（画面の約1/8相当）
- 7文字以上: 文字数に応じ逓減（必ず画面内に収める）
🎨 UI/UX
- ヘッダー: 黒背景、左上「DOT ANIMATION」（DotGothic16）
- 入力: 白ボトムボーダー、中央上
-
ボタン: 下線グラデ＋ネオングロー、ホバーで浮上（
span.btn-wrapでhover領域固定） - 縦画面: オーバーレイで横向きを案内
🚀 パフォーマンス設計
- 表示/消去ともバッチ処理＋極短インターバルで高速化
-
requestAnimationFrameで描画更新、補間で滑らかに - 色残り防止のため消去時に
intensity=0へ強制復帰
🔧 カスタマイズ
-
密度:
squareSize（小さくすると高精細） -
色:
darkColor（背景）、発光色（ピンク〜オレンジ/シアン系） - 速度: バッチサイズ / インターバル値
-
フォント:
tempCtx.font（種類/太さ）
⚠️ 既知の制約
- 密度を上げすぎると描画負荷増（高解像度で顕著）
- 超長文は最小フォント制御に依存（改行未対応）
制作記録
高卒から。
今回の制作物は、最初カーソルの移動やクリックに反応して変化する Web万華鏡 を作ろうと思ったのだが、
自分の考えたプロンプトでは上手く機能せず、代わりに React Bits でテンプレートを見に行った。
そのときに「cubes」というアニメーションを触って遊んでいたときにアイデアが浮かび、
難易度もそこまで高くなく実装できそうだと思い挑戦した。
実装の感想
そこまで苦戦することなく実装できたが、文字の生成スピード や リセットのスピード を調整するのが難しかった。
今回、文字の生成・リセット速度を「利用者が少し遅いな」と感じるくらいに設定した理由は、
- 文字ができる過程をじっくり見てほしかった
- すぐに結果に辿り着けるものは印象に残りづらいのではないか
と考えたからである。
これが正しかったのかはわからないが、自分の想像よりはそれっぽいものができたと思う。
振り返り
3日目にしてすでにネタ切れ感が漂いつつあるが、
明日の自分に任せて今日はデザインの勉強をしようと思う。
感想コメントお待ちしております。
あと今思ったけど、入力欄のフォントと出力される文字のフォントは一緒であるべきだったかも？
でも一緒だと逆に「文字を大きくしているだけ」に見えてしまいそうなので、
結果的に違っていてよかったのかもしれない。
どういう形で生成されるかワクワクするし。
ありがとうございました。
高卒から。