人型ピクサーフィング 使い方

画面構成

領域Aは隣接行列の値,及び減衰係数を設定する「ネットワークグラフ設定領域」,領域BはPageRankの計算式を表示する「行列式表示領域」,領域Cは人型ピクトグラムをノードとするネットワークグラフをアニメーション表示する「ネットワークグラフ表示領域」である.この3領域から構成される.

領域A「ネットワークグラフ設定領域」

領域A「ネットワークグラフ設定領域」では,ノード数を選択する「ノード数選択ボックス」,隣接行列を入力する「隣接行列入力ボタン群」,隣接行列入力ボタン群をランダムに自動入力する「ランダム入力ボタン」,減衰係数を入力する「減衰係数入力ボックス」,各ノードのPageRankの値を1ステップ更新し,対応するアニメーションを再生する「進むボタン」,PageRankの値を更新し続けるアニメーションを再生,及び一旦停止する「再生制御ボタン」で構成している.

 

「ノード数選択ボックス」は,ノード数を3から6までの値からなるプルダウンメニューから選択する.選択すると,「隣接行列入力ボタン群」の行数,及び列数が選択した値になる.なお初期状態では,「ノード数選択ボックス」,及び「隣接行列入力ボタン群」の行数,列数は3である.「隣接行列入力ボタン群」の各ボタンのラベルは初期状態では0であり,ボタンを押下するとラベルが0の場合は1に,1の場合は0に変化する.ただし,対角成分の一つに相当するボタンは押下しても値は0から変化しない.「ランダム入力ボタン」を用いると,「接続行列入力ボタン群」のボタンをランダムで自動的に押下する.「減衰係数入力ボックス」には減衰係数が格納されており,初期状態では0.85が設定されている.行列の入力を完了したうえで,「進むボタン」または「再生制御ボタン」を押下すると,ページランクの計算,及びアニメーションが開始する.

 

領域B「行列式表示領域」

領域B「行列式表示領域」では,PageRankの計算では,左辺に計算結果,右辺に計算式が表示される.イテレーションが進むごとにページランクの計算結果,及び一つ前のページランクの更新値を表示する.

行列式の要素をマウスオーバーすると,マウスオーバーした要素とキャンバスの要素をマークする.下図は,行列式をマウスオーバーした例である.行列式左辺のPageRankの値をマウスオーバすると,キャンバス上の対応するノードをハイライトする.行列式右辺における遷移確立行列の特定の値をマウスオーバーすると,下図のように,その値と減衰係数,対応する行列の要素,及びひとつ前のステップのPageRankの値をハイライトすると同時に,キャンバス上の対応するリンクの色を変更し,行列式における各リンクを辿って伝播する数値と数式表現の対応がわかりやすいようにする.

領域C「ネットワーク グラフ表示領域」

領域C「ネットワークグラフ表示領域」では,リンクを矢印,ノードとユーザの移動を人型ピクトグラムで表現している.ユーザの移動は,リンク上の移動を黒色,テレポーテーションを灰色で示している.ノードピクトグラム上の数値はそのノードのPageRankの値を示しており,ステップの更新とともに変化する.リンク上を移動する黒色で示した人型ピクトグラムは,隣接行列においてリンクで繋がれたノード上を移動する数量を人型ピクトグラムの大きさで表している.

キャンバス上の要素に対してマウスオーバーすると,領域B「行列式表示領域」の対応する部分をハイライトする.ノードピクトグラムをマウスオーバーすると,行列式におけるそのノードのPageRankの値をマークし,リンクをマウスオーバーすると,リンクを辿って移動する数量の算出に使用される値群,つまり減衰係数,対応する遷移確率行列の値,対応する1/N行列の値,及びひとつ前のステップのPageRankの値をハイライトする.

領域A「ネットワークグラフ設定領域」にある,「隣接行列入力ボタン群」の直接入力,または「ランダム入力ボタン」によって「隣接行列入力ボタン群」の値が変えたとき,キャンバスにノードとリンクを描画し,ステップの値を0にする.再生中にノード数や隣接行列の入力値が変わると再生を自動で停止し,変更後のノードとリンクを描画する.

 

参考文献

高橋伶奈,伊藤一成:ランダムサーファーモデルの学習アプリケーション「人型ピクサーフィング」の実装と評価,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024)

2024-02-08 ランダムサーファーモデルの学習アプリケーション 「人型ピクサーフィング」を公開しました.

posted in: 開発者ブログ | 0

日頃からピクトグラミングシリーズをご愛顧いただき,まことにありがとうございます.

 

ランダムサーファーモデルの学習アプリケーション 「人型ピクサーフィング」を公開しました.高橋玲奈が中心に開発しています.

Web情報検索における代表的なアルゴリズムの一つであるPageRankアルゴリズムについて視覚的に表示し,さらにアプリケーションの利用を通じて行列やベクトルなどの線形代数の基礎を学べるのが特徴です.

ピクトグラミングサイトの「関連アプリケーション」の項目の中からアクセスできます.

URLはこちらです. https://pictogramming.org/apps/humanpicsurfing/

 

参考文献

高橋伶奈,伊藤一成:ランダムサーファーモデルの学習アプリケーション「人型ピクサーフィング」の実装と評価,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024)

[ピクトグラミングシリーズ] 2023-08-31 Python風の記法で書かれたビジュアルブロックでプログラミングできる「PICTO (Pseudocode for Informatics of the Common Test Optimizer)」を公開しました.

Python風の記法で書かれたビジュアルブロックを組み合わせてプログラミングできる「PICTO (Pseudocode for Informatics of the Common Test Optimizer)」を公開しました.

できる処理はピクトグラミングやピクトッチと同様です.人型ピクトグラムとの対話を通じたさりげない体験を通じて,Python風の記法に慣れ親しむことができます.高等学校情報科の実習に最適です.そのうち人型ピクトグラムが,Python風の記法で書かれたプログラムが含まれるテストに関するアドバイス等を語り始めるかもしれません.ピクトグラミングのトップページよりアクセスください.

 

 

サンプルプログラムを直接読み込むこともできます.

 

 

 

 

 

 

 

[ピクトグラミングシリーズ] 2023-04-03 ピクトグラミングシリーズをアップデートしました.

ピクトグラミングシリーズPC版(ピクトグラミング,ピクトッチ,ピクソン,ジャバスクピクト,ピクビー)をアップデートしました.

追加した機能の中から本日は2つだけ紹介します.

 

一つ目は,URLへのコードの埋め込み機能です.

例えば,

ピクトッチで円を描くプログラム

のようにURLにコードや作品タイトルを含めることができます.

また,画面上部のアイコンをクリックすると,クリップボードにコードとタイトルの情報を含んだURLをコピーします.コピーしたURLを使うと上で示したように,直接特定のコードを表示させた状態でアプリケーションを使うことができます.

 

二つ目は,泳ぎ(タートルグラフィック)の画面を,実際に泳いでいるような出力に変更しました.先ほど例示した ピクトッチで円を描くプログラム を実行すると次のような出力になります.

 

他にも色々機能追加しているのですが,それは後々解説していきます.

また,個別のアプリケーションに関しては,

1.ピクトグラミングをIE非対応にし,エディタに他のシリーズと同じCodeMirrorを使うようにしました.

2.ピクトッチのカメラサポートを中止しました.

 

以上です.今後ともピクトグラミングシリーズをよろしくお願いします.

2023-01-26 ピクトグラミングシリーズ第5弾 Picby(ピクビー:Ruby言語版)を公開しました.

Pictogramming(ピクトグラミング),Pictoch(ピクトッチ),Picthon(ピクソン),JavaScpict(ジャバスクピクト)に続くピクトグラミングシリーズ第5弾としてPicby(ピクビー)を公開しました.

 

 

Ruby言語でプログラミングできます.できる処理はピクトグラミングと同様です.他のピクトグラミングシリーズのアプリケーションと同様に全てクライアント側で処理するため安心してお使いいただけます.

 

*「ピクトグラミング」は,ピクトグラムの作成を通じて,プログラミングの諸概念や情報デザインについて学習できる統合型アプリケーションです.「ピクトグラミング」には,「Pictoch(ピクトッチ)」「Picthon(ピクソン)」,「JavaScpict(ジャバスクピクト)」, 「Picby(ピクビー)」の派生アプリケーションもあり,これらをまとめてピクトグラミングシリーズと呼んでいます.授業利用にもぜひお役立てください.誰でも自由に利用できます.サイトのURLは https://pictogramming.org です.

2022-09-16 [関連アプリケーション]「人型ピクソートグラム」及び「人型ピクトグラフ」を公開いたしました.

アプリケーション「人型ピクソートグラム」及び「人型ピクトグラフ」を公開いたしました.通常は,ピクトグラミングのトップページの「関連アプリケーション」の項からアクセスできます.

 

この記事中の「はじめる」ボタンからでもアプリケーションにアクセスできます.

人型ピクソートグラム

 

  

人型ピクソートグラム… シーソーのメタファを用いてソートアルゴリズムについて学習できます.手動操作に加え,代表的なソートアルゴリズムの手順を自動再生することで,視覚的に理解できる機能もあります.伊藤一成研究室所属の渡辺大智さん(学部3年)が開発しています.部品イラストは伊藤一成研究室所属の御家雄一さんが作成しました.

人型ピクトグラフ

 

  

人型ピクトグラフ… 人型ピクトグラムを構成素とする統計図表(ピクトグラフ)を作成できます.算数科・数学科・情報科におけるデータ表現,データ活用の授業を中心にお役立てください.伊藤一成研究室所属の高橋伶奈さん(学部3年)が開発しています.

 

 

(参考文献)

  • 渡辺大智,御家雄一,伊藤一成:人型ピクトグラムを用いたソートアルゴリズムを学ぶアプリケーション「人型ピクソートグラム」の実装,2022年度情報処理学会関西支部支部大会, (2022.09.18)
  • 高橋伶奈,御家雄一,伊藤一成:人型ピクトグラムを構成素とするピクトグラフ生成アプリケーション「Human Pictograph」の実装,2022年度情報処理学会関西支部支部大会, (2022.09.18)

 

2022-08-17 ピクソン及びジャバスクピクトの学習用テキストの内容を更新しました.

ピクソン(Python版)及びジャバスクピクト(JavaScript版)の学習用テキストの内容を更新しました.

更新内容は,2022-08-10の記事で説明しました,

「ピクトグラミングシリーズのピクソン(Python版),ジャバスクピクト(JavaScript版)に線画オブジェクトのグループ化と移動 の機能を追加しました」
の内容を追加し,章だてを再構成しました.

2021-08-10 ピクトグラミングシリーズのピクソン(Python版),ジャバスクピクト(JavaScript版)に線画オブジェクトのグループ化と移動 の機能を追加しました.

ピクトグラミングシリーズのピクソン(Python版)ジャバスクピクト(JavaScript版)に線画オブジェクトのグループ化と移動 の機能を追加しました.

ピクトグラミング及びピクトッチ(ビジュアルブロック版)には既に,実装していた機能です.

 

ピクトグラミングシリーズでは,人型ピクトグラム以外のオブジェクトは基本図形(線分または円)の集合で描きます.従来からフレーム単位の描画(Processingで採用されているような描いて全て消すの繰返し)をすればオブジェクトを移動させる(ように見える)ことはできました.しかしより簡便で理解しやすい方法を実装しています.

一つ以上の基本図形から構成されるオブジェクトを定義できる命令,定義されたオブジェクトを等速直線移動する命令です.

例えば,リンゴを落としてみます.

 

ピクトッチ(ビジュアルブロック版)のプログラムを下に例を示します.

 

ピクソン, ジャバスクピクトではオブジェクトの定義を関数定義で行います.

ピクソンを使った,上のリンゴを落とすアニメーションのプログラムのサンプルは次のとおりです.ピクトッチのプログラムと対比してみていただくと良いと思います.

 

def apple():
    pic.O(211, -50, 42, 42, 0)
    pic.L(211, -55, 211, -85)

pic.RV()
pic.RW("RS", 69, 0)
pic.RW("RE", 41, 0)
pic.MO(apple, 0, 320,0.5)

 

MO(Move Object),MOW(Move Object Wait)という命令(メソッド)があり,それぞれ次のとおりです.関数自体を第一引数にします.ちなみに全体の命令セットはピクソンの使い方のページで参照できます.

命令の様式 処理
pic.MO(func, arg1, arg2, arg3) arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけfuncという名称で定義された関数で構成される線画を等速直線移動する.
pic.MOW(func, arg1, arg2, arg3) arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけfuncという名称で定義された関数で構成される線画を等速直線移動する.直線移動が終了するまで次の命令は実行されない.

 

ジャバスクピクトの上のリンゴを落とすアニメーションのプログラムのサンプルは次のとおりです.

function apple(){
  pic.O(211, -50, 42, 42, 0);
  pic.L(211, -55, 211, -85);
}

pic.RV();
pic.RW("RS", 69, 0);
pic.RW("RE", 41, 0);
pic.MO(apple, 0, 320,0.5);

 

MO,MOW命令(メソッド)の書式はピクソンと同様です.関数自体を第一引数にします.ちなみに全体の命令セットはジャバスクピクトの使い方のページで参照できます.

命令の様式 処理
pic.MO(func, arg1, arg2, arg3); arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけfuncという名称で定義された関数で構成される線画を等速直線移動する.
pic.MOW(func, arg1, arg2, arg3); arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけfuncという名称で定義された関数で構成される線画を等速直線移動する.直線移動が終了するまで次の命令は実行されない.

 

 

ちなみにピクトグラミング日本語版の場合,以下のようになります.

反転
回転待ち 右肩 69
回転待ち 右肘 41
物移動 りんご 0 320 0.5

物定義 りんご
円 211 -50 42 42 0
線 211 -55 211 -85
終わり

 

人型ピクトグラムの動きと同様,線画オブジェクトに関してもMO命令とMOWをうまく組み合わせると複数のオブジェクトを表示させたり,複雑な動きをさせることができます.こちらを参考ください

 

近日中に学習用テキストなども更新いたします.

 

[ピクトッチ] 2022-06-04 バグ修正

いつもピクトッチをお使いいただきありがとうございます.

「繰返しブロック」に非常に大きい繰返し回数が設定された場合,そのブロックが「実行ボタンが押されたとき」の内部に配置されていなくても実行されてしまうバグを修正しました.具体的には以下のような例です.

よろしくお願いします.