ハイパーピクトグラミング例6　錯視

ハイパーピクトグラミングで錯視を作成しました。

人型ピクトグラムを反転させ左右に移動させてみたり、線を増やしたり。

どのようにみえますか？

説明

① 画面の準備

<pa id=“pa” type=“n” scale=“1” background-color=“#ffffff”>

</pa>

🔹 `<pa ...>`

描画エリア（キャンバス）をつくっています。

id="pa"
→ この画面を「pa」という名前で使います。
type="n"
→ 通常モード。
scale="1"
→ 拡大率1倍。
background-color="#ffffff"
→ 背景色は白。

② 縦線をたくさん描く

for(let i=-320; i<=320; i+=40){

pa.L(“”,i,–320,i,320);

};

🔹 `for(let i=-320; i<=320; i+=40)`

i を -320 から 320 まで
40ずつ増やしながらくり返す

つまり
-320, -280, -240 … 320 まで動く

🔹 `pa.L("",i,-320,i,320);`

線を描く命令です。

pa.L(色, x1, y1, x2, y2);

ここでは

x1 = i
y1 = -320
x2 = i
y2 = 320

つまり

👉 上から下までの縦線

それを40ピクセル間隔で並べています。

🟦 結果：縦しま模様の背景

③ 1人目のピクトグラム

pa.HP(“pic1”);

→ 「pic1」という人を作る

pic1.CL(“#0000ff”);

→ 色を青にする

pic1.R(“body”,90,0);

→ 体（body）を90度回転

つまり横向きになります。

pic1.SC(0.3);

→ サイズを0.3倍（小さくする）

④ 2人目のピクトグラム

pa.HP(“pic2”);

→ 「pic2」を作る

pic2.CL(“#ffff00”);

→ 色を黄色にする

pic2.M(0,100);

→ 上に100移動する

pic2.R(“body”,90,0);

→ 横向きに回転

pic2.SC(0.3);

→ 小さくする

⑤ 10回くり返しアニメーション

for (let i = 0; i < 10; i++) {

→ 10回くり返す

🔹 左へ少し動く

pic1.MW(–300,0,2);

pic2.MW(–300,0,2);

MW(x,y,分割数) は
なめらかに移動します。

左へ300動く
2ステップで

🔹 反転

pic1.R(“body”,180,0);

pic2.R(“body”,180,0);

→ 180度回転
→ 進行方向が逆になる

🔹 右へ大きく移動

pic1.MW(600,0,4);

pic2.MW(600,0,4);

→ 右へ600動く
→ 4ステップで

🔹 もう一度反転

pic1.R(“body”,180,0);

pic2.R(“body”,180,0);

→ また向きを変える

🔹 左へ戻る

pic1.MW(–300,0,2);

pic2.MW(–300,0,2);

→ 元の中央へ戻る