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

Comments are closed.