6 4月 2026

ハイパーピクトグラミング 例10　驚く（ペルソナブロック例）

by | posted in: 開発者ブログ | 0

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

26 3月 2026

ハイパーピクトグラミング 例9　まちがいさがし1

by | posted in: 開発者ブログ | 0

一人だけ角度がちがう人型ピクトがいます。
どの人型ピクトでしょうか。。
実行ボタンを押すとランダムで位置が変ります。
プログラムが苦手だよという方でもプログラムをアクセスして実行ボタンを押すと次のような画像が出てきます。
毎回位置がかわるので子どもさんなどが行列に並んでるとき、何か待ってる時間などにやってもてもいいのじゃないでしょうか。
24行目から28行目までが手足体の角度の調整部分です。
手足の場所を追加したいときは行をたしたり、角度を変えてみようかなと思ったら数字を変えるなど
下の図を参考にしてみてください。
使い方もホームページにあるので詳しく知りたい方はそちらもみてください。

参考

 

 

 

 

 

 

 

プログラム

 

まちがいさがし　1

 

 

ブログ作成者　Reiko　Sugiyama

 

23 3月 2026

ハイパーピクトグラミング 例8　スイミングで花を描いてみよう

by | posted in: 開発者ブログ | 0

スイミングで花を描いてみました。

 

 

 

 

説明

 

＜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

 

16 3月 2026

ハイパーピクトグラミング 例7　ダブルループで自転車を描こう

by | posted in: 開発者ブログ | 0

<pa>エリアで人型ピクトグラムを乗せることもできるし、あとから<script>エリアで自転車を描いてる人型ピクトグラムを自転車に乗せる事ができます。
ダブルループのコードの数字をかえることで、いろいろな模様も描けます。

 

説明

 

① 描画エリアの設定

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

  • pa = 描画エリア（キャンバス）

  • id=”pa” → この名前でプログラムから操作できる

  • type=”n” → 通常の座標モード

  • scale=”1″ → 拡大率1倍

  • background-color=”#ffffff” → 背景色を白

② 自転車のフレームを描く

上のフレーム

<line id=“a” x1=“-172” y1=“112” x2=“-35” y2=“112” width=“5” color=“#222325”></line>

  • 直線aを描く

  • 始点 (-172,112)

  • 終点 (-35,112)

  • 太さ5

  • 色 黒

👉 自転車の上のパイプ

右フレーム

<line id=“b” x1=“128” y1=“112” x2=“115” y2=“-55” width=“5” color=“#222325”></line>

右側のフレーム

左三角

<line id=“c” x1=“-172” y1=“112” x2=“-35” y2=“-27” width=“5” color=“#222325”></line>

左の三角フレーム

下フレーム

<line id=“d” x1=“-35” y1=“-27” x2=“116” y2=“-27” width=“5” color=“#222325”></line>

自転車の下の棒

斜めフレーム

<line id=“e” x1=“-35” y1=“112” x2=“118” y2=“0” width=“5” color=“#222325”></line>

上から斜めのフレーム

シートポスト

<line id=“” x1=“-35” y1=“112” x2=“-35” y2=“-55” width=“5” color=“#222325”></line>

座席の棒

ペダル

<line id=“” x1=“-45” y1=“-55” x2=“-5” y2=“-55” width=“10” color=“#222325”></line>

クランク

ペダル右

<line id=“” x1=“115” y1=“-55” x2=“90” y2=“-60” width=“10” color=“#222325”></line>

右ペダル

③ 人（ピクトグラム）の作成

左の人

<hp id=“pic1” x=“-150” y=“200” scale=“0.5”

  • pic1 = 人

  • 位置 (-150,200)

  • 大きさ0.5

body=”0″
lua=”0″
lla=”0″

各パーツの角度

右の人

<hp id=“pic2” x=“150” y=“200”

もう一人

👉 車輪を描くための人

自転車の人

<hp id=“pic3” x=“-10” y=“-45”

自転車に乗るポーズ

④ ペンを手に持つ

pic1.PEN_HOLD(“LLA”);

左下腕にペンを持たせる

pic1.SK();

ペンをスケッチモード

pic1.penw(3);

ペンの太さ3

⑤ 車輪を描く（左）

for (let k = 0; k < 36; k++)

36回回転

👉 360度 / 10度

for (let i = 0; i < 4; i++)

4回

pic1.RW(“LUA”, 90, 0);

左上腕を

90度回転

👉 四角形

pic1.RW(“LUA”, 10, 0);

10度ずらす

👉 花模様

つまり

四角形 × 36回転

＝

車輪模様

⑥ 右の車輪

同じコードを

pic2

で実行

👉 右車輪

⑦ 細い線の模様

pic1.penw(1);

線を細く

pic1.RW(“LUA”, 900, 0);

900度回転

👉 模様を増やす

⑧ ペンを離す

pic1.PEN_RELEASE(“LLA”);
pic2.PEN_RELEASE(“LLA”);

ペンを手放す

⑨ 車輪を移動

pic1.MW(120, –220, 1);

左車輪移動

pic2.MW(85, 250, 1);

右車輪移動

pic3.MW(400, 0, 1);

人を移動

⑩ 人をリセット

pic1.C();

初期姿勢に戻す

⑪ 自転車に乗せる

pic1.SD();

描画開始

pic1.M(–10, –45, 1);

自転車の位置へ移動

次は

pic1.R(“BODY”, –30, 1);

体を傾ける

pic1.R(“LUA”, 50, 1);
pic1.R(“LLA”, 40, 1);

腕をハンドル位置

pic1.R(“LUL”, 70, 1);
pic1.R(“LLL”, –75, 1);

足をペダル位置

 

 

 

 

 

プログラム

自転車

 

 

ブログ作成者　Reiko　Sugiyama

 

 

 

2 3月 2026

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

by | posted in: 開発者ブログ | 0

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

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

どのようにみえますか？

 

 

 

 

 

説明

 

① 画面の準備

<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);

→ 元の中央へ戻る

 

プログラム

錯視

 

 

 

 

 

 

29 1月 2026

ハイパーピクトグラミング 例5 黄色の花

by | posted in: 開発者ブログ | 0

ハイパーピクトグラミングのペンの機能を使い、黄色い花を描いてみました。
今回はBODYにペンを持たせましたが、LUAやLLAなどでも描けるので試してみてください。
持たせる場所で違う形になったりしておもしろいですよ。

 

 

 

 

 

 

 

プログラム

 

黄色の花

 

ハイパーピクトグラミングにアクセスしていただければ使い方の説明も記載されています。

 

 

 

ブログ作成者　Reiko　Sugiyama

 

18 12月 2025

ハイパーピクトグラミング 例2 推し活バンド

by | posted in: 開発者ブログ | 0

ハイパーピクトグラミングのグループの機能を使ってドラムやギターマイクなどの作成と、ギターを持って移動させる機能を使ってます。
色も透明化してます。

 

 

 

 

プログラム　クリックしてね

バンド

 

 

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

ドラム、ボーカル、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) のように ギター全体を一度の命令で動かせる のが利点。もしグループ化していなければ、胴やネックを個別に動かす必要が出ます。

ギターの透明化

  • 透明度は 8桁の16進色の末尾2桁（アルファ）で表現。
    例：#808080aa（グレー＋aaの半透明）、#99ffffaa（シアン＋半透明）。

  • これにより本体の上に重ねたハイライトや、身体のパーツが透けて見える表現が可能になります（ピックガードやボディの“光り感”を演出）。

ギターが動いてとまって、また動く

  • 反復アニメは 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 を変えると、歪みの差で動きの向きが伝わる）

ちょっとした注意

  • <ellipse ...></ellipse>1 のようにタグ直後の 1 はそのまま描画される可能性があるので、不要なら削除を。

  • 使っていない stick1 は、将来の追加演出に使うか、未使用なら整理しておくとコードが読みやすくなります。

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

ブログ作成者　Reiko　Sugiyama