ハイパーピクトグラミングで錯視を作成しました。
人型ピクトグラムを反転させ左右に移動させてみたり、線を増やしたり。
どのようにみえますか？
説明
① 画面の準備
<pa id=“pa” type=“n” scale=“1” background-color=“#ffffff”>
</pa>
</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);
};
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);
pic2.MW(–300,0,2);
MW(x,y,分割数) は
なめらかに移動します。
-
左へ300動く
-
2ステップで
🔹 反転
pic1.R(“body”,180,0);
pic2.R(“body”,180,0);
pic2.R(“body”,180,0);
→ 180度回転
→ 進行方向が逆になる
🔹 右へ大きく移動
pic1.MW(600,0,4);
pic2.MW(600,0,4);
pic2.MW(600,0,4);
→ 右へ600動く
→ 4ステップで
🔹 もう一度反転
pic1.R(“body”,180,0);
pic2.R(“body”,180,0);
pic2.R(“body”,180,0);
→ また向きを変える
🔹 左へ戻る
pic1.MW(–300,0,2);
pic2.MW(–300,0,2);
pic2.MW(–300,0,2);
→ 元の中央へ戻る
プログラム
錯視
