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

11 12月 2025

ハイパーピクトグラミング 例１ 三人の会話

by | posted in: トップページに表示する記事, 更新情報, 開発者ブログ | 0

会話の例

何人かの人型ピクトグラムを作成して会話をさせてみよう。
一人が質問して説明しながら答え、さらに質問をするなどもいいですよね。
今回は、どの人型ピクトグラムが話しているのかわかりやすくPiC1、PiC2、PiC3と
表示してみました。
どの部分で手足が動かせるのかもわかると思います。

 

 

 

↓クリックしてね

三人の会話のプログラム

三人の会話

🌟 全体の概要

 

このプログラムは、
3人（pic1・pic2・pic3）がメッセージを送受信して会話する様子 を実装しています。

  • 最初に pic1 が “hello” を pic2 と pic3 に送る

  • pic2 と pic3 は “hello” を受け取ると挨拶を返す

  • さらに pic2 は “helloReturn” を pic1 に送り返す

  • pic1 は “hyper pictogramming 知ってる？” と pic3 に質問する

  • pic3 は「知ってるよ」と答え、色も変える

  • そのあと pic3 が、その質問を今度は pic2 に送る
    （pic2 は「知らないよ。今度使ってみるよ」と答える）

という流れです。

🖼️ ① 画面配置（HTMLタグ部分）

<pa background-color="#aeeeee">
<hp id="pic1" x="-200" y="-130" scale="0.3" color="#a9a9a9"></hp>
<hp id="pic2" x="-200" y="300" scale="0.3"></hp>
<hp id="pic3" x="250" y="100" scale="0.3"></hp>
</pa>

✔️ ここでは何をしている？

  • 背景色が 薄い水色 (#aeeeee) のキャンバス

  • 3つのピクトグラムを配置
    　・pic1：左上
    　・pic2：左下
    　・pic3：右

位置（x, y）、大きさ scale、色などを設定しています。

📡 ② 最初のメッセージ送信

pic1.SEND_MESSAGE("hello", [pic2, pic3]);
pic1.SAYW("pic1　こんにちは", 2);

✔️ pic1 が何をする？

  • pic2 と pic3 に “hello” メッセージを送信

  • 画面で「pic1　こんにちは」と吹き出し表示（2秒）

💬 ③ pic2 と pic3 が “hello” を受信したときの動作

pic2 の処理

pic2.RECEIVE_MESSAGE("hello", () => {
pic2.SAYW("pic2　こんにちは", 2);
pic2.SEND_MESSAGE("helloReturn", [pic1]);
});

✔️ pic2 は？

  • “hello” を受信すると「pic2　こんにちは」と表示

  • さらに “helloReturn” を pic1 に送信

pic3 の処理

pic3.RECEIVE_MESSAGE("hello", () => {
pic3.SAYW("pic3　こんにちは", 2);
});

✔️ pic3 は？

  • “hello” を受信すると「pic3　こんにちは」と表示
    （返事を送る処理は無し）

🔄 ④ pic1 が “helloReturn” を受信したら

pic1.RECEIVE_MESSAGE("helloReturn", () => {
pic1.SAYW("pic1　ハイパーピクトグラミングって知ってる？", 2);
pic1.SEND_MESSAGE("doYouKnow", [pic3]);
});

✔️ pic1 は？

  • 「ハイパーピクトグラミング知ってる？」と表示

  • この質問は pic3 のみに送る（※わざと pic2 には聞かない）

❓ ⑤ 「知ってる？」と聞かれたときの動作

pic2 の返事

pic2.RECEIVE_MESSAGE("doYouKnow", () => {
pic2.SAYW("pic2　知らないよ", 2);
pic2.SAYW("pic2　今度使ってみるよ", 2);
});

✔️ pic2 は？

  • 「知らないよ」「今度使ってみるよ」と2つ返事

pic3 の返事

pic3.RECEIVE_MESSAGE("doYouKnow", () => {
pic3.R("LUA", 90, 1);
pic3.R("LUA", 3600, 2);
pic3.SAYW("pic3　知ってるよ　複数人同時に動かしたり　いろんな色がつかえるよ", 2);
pic3.CL("#0000ff");pic3.SEND_MESSAGE(“doYouKnow”, [pic2]);
});

✔️ pic3 の特殊な反応

  • R(“LUA”, 角度, 速度)
    　→ 回転したりアニメーションする命令

  • 3600度回す（10回転）などアニメ的動作

  • 「知ってるよ。複数人同時に動かせたり色が使えるよ」と説明

  • 色を 青 (#0000ff) に変更

  • さらに 同じ質問を pic2 に送る

🔁 この結果どうなる？

  1. pic1→pic3に「知ってる？」と質問

  2. pic3 が詳しく説明して青くなる

  3. そのあと pic2 に「知ってる？」と転送

  4. pic2 が
    　「知らないよ」「今度使ってみるよ」と返事

こんなコミュニケーションの流れになります。

🧩 全体まとめ

このプログラムは以下を学べる例になっています：

  • SEND_MESSAGE で複数ピクトグラムに通知

  • RECEIVE_MESSAGE でイベント（メッセージ受信）を処理

  • ピクトグラム同士の会話・情報伝達

  • アニメーション（R）や色変更（CL）

特に
「pic3 が質問を受け → アニメーションし → 色を変えて → 質問を転送」
という部分が、ハイパーピクトグラミングの特徴をよく示しています。

ブログ作成者　Reiko　Sugiyama

28 10月 2024

線織面

by | posted in: 開発者ブログ | 0
ピクタグラミングで線織面を作成してみました。
定規で作成するのもいいですが、ピクタグラミングの線の機能を使ってもきれいに描けます。

 

プログラム　線織面1

 

 

作成者　Reiko Sugiyama