PS(ペルソナ)の機能を使って驚くというプログラム作成しました。
他に喜び、悲しみなどの他の種類もあるので作成してみてください。

説明
<pa id="pa">
- 描画エリア(キャンバス)を作るタグです
id="pa"は、このエリアをプログラムから操作するための名前です
<hp id="pic1" x="200" y="400" scale="1" body="0" lua="0" lla="0" rua="0" rla="0" lul="0" lll="0" rul="0" rll="0"></hp>
- 人型ピクトグラム(キャラクター)を作成しています
id="pic1"→ このキャラの名前x="200" y="400"→ 位置(右に200、下に400)scale="1"→ 大きさ(1倍)body="0"→ 体の向き(正面)lua, lla, rua, rla→ 腕や足の角度(すべて0でまっすぐ)lul, lll, rul, rll→ さらに細かい腕・足の角度(これも0)
👉つまり「普通に立っている人」を配置しています
<ellipse id="" x="188" y="100" width="15" height="15" angle="0" color="#c0c0c0"></ellipse>
- 楕円(丸)を描いています
x="188" y="100"→ 位置width="15" height="15"→ サイズ(ほぼ円)color="#c0c0c0"→ 薄いグレー
👉 頭
<ellipse id="" x="207" y="130" width="28" height="20" angle="-20" color="#c0c0c0"></ellipse>
- 少し大きめの楕円
angle="-20"→ 少し傾いている- 同じく薄いグレー
👉 体
<ellipse id="" x="213" y="122" width="20" height="10" angle="-20" color="#808080"></ellipse>
- 中くらいの楕円
- 色は少し濃いグレー
👉 羽
<ellipse id="" x="182" y="96" width="3" height="3" angle="0" color="#808080"></ellipse>
- とても小さい円
- 濃いグレー
👉 目
<ellipse id="" x="170" y="105" width="5" height="2" angle="0" color="#808080"></ellipse>
- 横長の小さい楕円
👉 口
</pa>
- 描画エリアの終了
<script>
- JavaScript(動きをつけるプログラム)の開始
pa.PS("surprise");
PS= ポーズ(Pose)を設定"surprise"→ 驚きポーズ
👉 キャラクター(pic1)が「びっくりした動き」になります
</script>
- スクリプト終了
プログラム
驚く
ブログ作成者 Reiko Sugiyama