バンドのアニメを読み解く

ドラム、ボーカル、2人のギタリストを、独自タグ（<hp>, <ellipse>, <line>, <group> など）と簡単なアニメ API（M, MW, RW, W）で動かすプログラムです。指定された6つの観点でポイントを整理します。

グループ化

ギターは部品（胴＝楕円×2＋ネック＝線）を <group id="guitar" x="200" y="150" color="#222325"> ... </group> にまとめています。
グループには座標や色が付き、子要素はそれを継承します（子で色を指定した場合は上書き）。
まとまりで移動できるので、guitar.MW(-100, 0, waveTime) のように ギター全体を一度の命令で動かせる のが利点。もしグループ化していなければ、胴やネックを個別に動かす必要が出ます。

反復アニメは perform() と stop() の分離で実現：
- perform() 内で
  - pic3.M(-100, 0, waveTime); ... pic3.M(100, 0, waveTime);（右側ギタリストの本体を左右へ）
  - guitar.MW(-100, 0, waveTime); ... guitar.MW(100, 0, waveTime);（ギターのグループも追従）
  - RW("LLA", ±waveAngle, waveTime)（腕を振る）
- stop() で W(stopTime) を各オブジェクトに出して一斉に待機。
最後に perform(); stop(); perform(); stop(); ... と並べて、動→静→動の“止めどころ”を作っています。
ここで使う API の読み方（本コードの文脈）
- M(dx, dy, t) / MW(dx, dy, t)：位置アニメーション（グループや個体を t 秒で平行移動）。
- RW(target, angle, t)：指定部位（例："LLA"＝左前腕）の回転。
- W(t)：t 秒間待機。
  ＊ギターを本体と別オブジェクトにしておくと、将来“ギターだけ止める/遅らせる”などの演出も簡単になります。

ネックやスティック、スタンド、マイクは <line x1 y1 x2 y2 width color> で作成。
太さは width、色は16進（不透明／半透明どちらも可）。
ドラムスティック（id="stick"）のように 線オブジェクト自体をアニメ（stick.MW(0, 30, waveTime)）して叩く動きを出しています。
直線は“方向性”を強く示すので、演奏の勢いや視線の誘導に有効。

ドラム面：
- 外側の濃いリム #333132 → <ellipse ... width="75" height="75">
- 内側の皮 #fffff2 → <ellipse ... width="65" height="65">
  → 同心の2枚で“縁取り”と“面”を分ける。
ギター胴：
- 角度付き（angle="20"）の楕円を重ね、輪郭と質量感を表現。
マーカー/ハイライト：半透明楕円を重ねて**当たり（ストローク領域）**を見せています。

色や大きさを変えて重ねると視覚効果が生まれます：
1. 縁取り効果（ドラムのように外＝濃色・内＝淡色で厚みが出る）
2. 重なりの合成（半透明同士は重なった部分が濃くなる＝“影/ハイライト”や“グロス感”を演出）
3. 方向の強調（angle を変えると、歪みの差で動きの向きが伝わる）

以上。グループ化で“道具”をまとめ、半透明楕円の重ねと線の強さで“演奏の勢い”を作り、perform()/stop() の分離で“止めどころ”を演出しているのが、このプログラムの肝です。

ブログ作成者　Reiko　Sugiyama