スイミングで花を描いてみました。
説明
＜HTML部分＞
<pa>
→ 描画エリア（キャンバス）を作るタグです。
<hp id=”pic1″ x=”0″ y=”-100″></hp>
→ 「pic1」というピクトグラムを配置
→ 初期位置は x=0, y=-100
<hp id=”pic2″ x=”0″ y=”-100″></hp>
→ 「pic2」という2つ目のピクトグラムを配置
→ 位置はpic1と同じ
</pa>
→ 描画エリア終了
＜JavaScript部分＞
<script>
→ ここから動きのプログラム開始
■ 外側のループ（4回繰り返し）
for(let j = 0; j < 4; j++){
→ これからの動きを 4回繰り返す
● pic1の動き
pic1.FD(600, 1);
→ 前に600進む（速度1）
pic1.RTW(360, 1);
→ 右に360度回転（1秒かけて）
→ その場で1回転
● pic2の動き
pic2.FD(400, 1);
→ 前に400進む
pic2.RT(360, 1);
→ 右に360度回転（その場回転）
※ RTとRTWの違い
- RT：向きだけ変える
- RTW：動きとして回る（アニメーション）
■ 内側のループ（10回繰り返し）
for (let i = 0; i < 10; i++) {
→ 次の動きを10回繰り返す
pic2.W(0.05);
→ 0.05秒待つ
pic2.DIVE();
→ 潜る（線の下に入る）
pic2.W(0.05);
→ さらに少し待つ
pic2.FLOAT();
→ 浮上（線の上に戻る）
}
→ 内側ループ終了
👉 つまり
pic2がチカチカ上下（潜る・浮く）を繰り返す
■ 向きを少し変える
pic1.RTW(90,0.02);
→ pic1を右に90度（すごく速く回転）
pic2.RTW(90,0.02);
→ pic2も同じ
}
→ 外側ループ終了（これを4回繰り返した）
👉 全体として
四角形のような軌跡を描く動き
■ pic1の位置移動
pic1.RTW(180,0.02);
→ 180度回転
pic1.MW(0,400,0);
→ 座標(0,400)へ移動（瞬間移動）
pic1.RTW(-180,0.02);
→ 向きを元に戻す
■ 図形を描く（ここからがメインの模様）
pic1.FD(120, 1);
→ 前に120進む
pic1.RTW(45, 1);
→ 右に45度回転
pic1.FD(120, 1);
→ さらに前進
pic1.RTW(45, 1);
→ さらに45度回転
pic1.RTW(90,0.02);
→ 向きを90度変更
同じようなパターンが続く
これ以降は：
- 120進む
- 45度回る
を繰り返して、
● 右回転パターン
pic1.FD → RTW(45)
● 左回転パターン
pic1.LTW(45)
→ 左回りに変わる
■ 全体の意味
この後半のコードは：
👉 ジグザグ（または星・花のような形）を描いている
■ まとめ
このプログラムは大きく3つの動きです
① 最初
- pic1とpic2が四角形状に移動
- pic2が「潜る・浮く」を繰り返す
② 次
- pic1を上に移動
③ 最後
- 直線＋45度回転で模様を描く
- 右回りと左回りを組み合わせた図形
プログラム
スイミングで花
ブログ作成者 Reiko Sugiyama