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

 

 

 

 

 

11 7月 2024

虹

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

ピクタグラミングのカラーの機能を使って虹を作成しました。

 

プログラム　虹2

 

 

作成者　Reiko Sugiyama

21 6月 2024

ピクタグラミングでピクトグラムを作ってみよう

by | posted in: 開発者ブログ | 0
ピクタグラミングでピクトグラムを作成しました。

 

 

 

プログラム　２人乗り禁止

 

２人乗り禁止の作成例はピクタグラミングのコード記述支援ボタンをどのように使ったらよいか、とても参考になります。

 

 

アプリケーションのURLはこちらです。

https://pictogramming.org/apps/pictagramming/

 

また使い方ページもアップデートいたしました。

具体的なアップデートにつきましては、こちらをご参照ください。

 

使い方ページ

 

 

13 6月 2024

ピクタグラミングで一筆書き

by | posted in: 開発者ブログ | 0
ピクタグラミングを使って一筆書きを作成しました。

 

プログラム　一筆書き

 

 

 

アプリケーションのURLはこちらです。

https://pictogramming.org/apps/pictagramming/

 

また使い方ページもアップデートいたしました。

具体的なアップデートにつきましては、こちらをご参照ください。

 

使い方ページ