魔法陣シミュレーター

主要機能

✦

20 種の魔法陣

五芒星・六芒星・召喚陣・炎陣・水陣など、20 種類の個性的な魔法陣を収録。属性と効果がそれぞれ異なります。

◎

リアルタイムアニメーション

Canvas 2D API によるフレームごとの描画で、各魔法陣がなめらかに回転・発光します。

⚡

回転速度コントロール

スライダーで×0.0〜×3.0 の範囲で速度を調整。完全停止から超高速回転まで自由に設定できます。

☽

グロウ発光エフェクト

各陣ごとの固有カラーでグロウ（発光）が適用され、ルーン文字や幾何図形が神秘的に輝きます。

ᚠ

ルーン文字装飾

北欧のフサルク・ルーン文字（ᚠᚢᚦᚨ…）が外周を彩り、本物の魔法陣の雰囲気を演出します。

▦

ワンクリック切替

グリッド状に並んだ20 個のボタンで即座に切り替え。選択中の陣名と属性テキストも同時に更新されます。

魔法陣カタログ（全 20 種）

①

五芒星・基本陣

万能・安定・バランス

5頂点の連続線五芒星。外周ルーン文字と内円付き。最も汎用性の高い魔法陣。

②

六芒星・結界陣

防御・封印

2つの正三角形が重なるダビデの星。二層回転と頂点光点で封印感を演出。

③

三重円・召喚陣

異界接続・ボス召喚

3重の同心円＋ 8芒星。二層のルーン文字と中央光点で最強の召喚感。

④

炎三角陣

破壊・攻撃・火属性

逆三角形の入れ子構造。赤橙の強い発光で攻撃性と炎の破壊力を表現。

⑤

水波紋陣

流動・回復・ヒール系

多重同心円の波紋。透明度の段階的変化が水の揺らぎと広がりを再現。

⑥

風渦陣

加速・拡散・スピード系

ログスパイラル（対数螺旋）で渦を描画。疾風のような加速感を演出。

⑦

土方陣

固定・防御・重力

正方形の入れ子＋対角線。茶色の重厚な色調で大地の固さと重力を表現。

⑧

神聖十字陣

浄化・回復・聖属性

十字＋外周スター状放射線。白金色の発光で神聖・浄化のオーラを演出。

⑨

堕天陣（ダーク）

禁忌・暴走・ラスボス

逆五芒星＋歪み描画。マゼンタ発光と不規則な動きで禁忌感を強烈に演出。

⑩

鎖拘束陣

拘束・封印・足止め

破線の同心円＋放射状チェーン線。グレーの無機質な色で拘束感を表現。

⑪

時計陣

時間操作・高位魔法

時計盤の目盛＋時針・分針の動き。文字盤を模した構造で時間魔法を表現。

⑫

空間転移陣

ワープ・ポータル

中心から外へ広がる放射線＋非対称回転。次元の歪みをビジュアル化。

⑬

太陽陣

生命・エネルギー・バフ

放射状の太陽光線＋炎状外周装飾。黄色の強い発光で生命力と熱を表現。

⑭

月影陣

幻惑・精神・幻術系

三日月カーブ＋ランダムに点滅する星粒。薄青紫の淡い発光で幻想を演出。

⑮

ルーン環陣

詠唱強化・魔法強化

内外二重のルーン文字列＋六角形コア。ルーン文字の密度が最も高い陣。

⑯

数式陣（知識系）

知性・解析・魔法学者

∑∫∂π などの数学記号を円周上に配置。三角形と数式の融合で知性を表現。

⑰

竜紋陣

力・支配・召喚強化

ベジェ曲線のドラゴンシルエット＋ 8方向の炎状線。圧倒的な力感を演出。

⑱

花紋陣（和風）

調和・自然・陰陽道風

8枚の楕円花びら＋内部6弁。和の美意識を取り入れた唯一の和風デザイン。

⑲

無限陣（∞）

永続・ループ・バフ持続

レムニスケート曲線（∞記号）を数学的に描画。多重同心円が永続性を表現。

⑳

フラクタル陣（最上級）

無限・神域・超高度魔法

六角形の再帰フラクタル描画（深さ4）。自己相似構造で無限の複雑さを表現する最上位陣。

属性と発光カラー対応

水・氷・風

青系 / シアン
回復・加速・防御

炎・破壊

赤橙系
攻撃・破壊・火属性

召喚・禁忌

紫・マゼンタ系
召喚・暴走・堕天

聖・太陽・知

白・黄系
浄化・バフ・知識

土・重力

茶系
固定・防御・大地

封印・拘束

グレー系
拘束・足止め・封印

時間・空間

アンバー・水色系
時間操作・ワープ

神域・最上級

白色
フラクタル・神域

使い方

開く

HTML ファイルをブラウザで開くだけ。インストール不要、ネット接続も不要。即座に魔法陣が起動します。

魔法陣を選ぶ

画面下部のグリッドから①〜⑳のボタンをクリック。選んだ陣の名前と属性が表示されます。

速度を調整

スライダーで回転速度を ×0.0〜×3.0 で調整。×0.0 で完全停止、×3.0 で超高速回転になります。

眺める・活用する

魔法陣がリアルタイムで回転・発光してアニメーションします。創作・演出・鑑賞にご活用ください。

画面構成・UI 解説

UI 要素	説明
✦ ヘッダー	「魔法陣シミュレーター」のタイトルを表示。青いグロウの細い区切り線が画面上端を飾ります。アプリ全体のタイトルバーとして機能します。
Canvas 描画エリア	300 × 300 px の Canvas 要素。選択された魔法陣がここにリアルタイムで描画されます。 requestAnimationFrame ループで毎フレーム再描画されます。
陣名・属性テキスト	Canvas の直下に選択中の魔法陣の名称（例：①五芒星・基本陣）と属性（例：万能・安定・バランス）を表示。ボタンを切り替えるたびにリアルタイムで更新されます。
選択グリッド	5列 × 4行 = 20個のボタンが並んだ選択パネル。各ボタンに①〜⑳の番号が表示されます。アクティブな陣のボタンは青く光り、視認性が高まります。
回転速度スライダー	0.0〜3.0 の範囲で回転速度を調整するレンジスライダー。右隣に「×1.0」などの現在値をリアルタイム表示。内部では angle += 0.008 × speedMul でフレームごとに角度が加算されます。

描画技術・実装の特徴

グロウ発光

ctx.shadowColor と ctx.shadowBlur の組み合わせ。各陣の固有色で線・点・文字を発光させます。ブラー値は 6〜30 px で用途ごとに変化。

ルーン文字配置

円周上に文字を等間隔配置し、各文字を rotate() して接線方向に向けます。北欧フサルクの 24 文字（ᚠᚢᚦ…）を使用。

フラクタル再帰描画

フラクタル陣（⑳）は hexFractal() 関数を深さ 4 まで再帰呼び出し。各レベルで半径を 0.38 倍に縮小しながら六角形を配置。

レムニスケート曲線

無限陣（⑲）は r = 75√cos(2θ) の数式でポーラー座標描画。720 点の折れ線近似で滑らかな ∞ 記号を実現。

アニメーションループ

requestAnimationFrame による毎フレーム更新。角度変数 angle を蓄積し、各描画関数に渡すことで全陣が統一タイミングで回転。

共通描画ユーティリティ

ring()・poly()・star()・dots()・radials() の 5 関数を全陣で共有。グロウ設定も内包しコードを簡潔に保ちます。

技術仕様

項目	詳細
動作環境	モダンブラウザ（Chrome / Firefox / Edge / Safari）。インストール不要。オフライン動作可能。
描画エンジン	HTML5 Canvas 2D API。外部ライブラリ一切不使用。Vanilla JavaScript のみで実装。
Canvas サイズ	固定 300 × 300 px。すべての魔法陣の中心座標は (150, 150) に統一。
アニメーション	requestAnimationFrame ループ。毎フレーム全面クリア（clearRect）後に再描画。
収録魔法陣数	全 20 種。各陣は CIRCLES 配列に id・name・desc・color・draw 関数として定義。
ファイル構成	単一 HTML ファイル。CSS・JavaScript・描画ロジックをすべてインライン収録。
使用フォント	ルーン文字・数式記号の描画に monospace システムフォントを使用。外部フォント依存なし。
カラーテーマ	背景色 #050a14（深夜ネイビー）。各陣に固有のグロウカラー（青・紫・赤・白など）を割り当て。