Lesson 5 意思決定する人型ピクトグラム (条件式を使わない簡単版)

posted in: 開発者ブログ | 0

意思決定する人型ピクトグラム (条件式を使わない簡単版)

実行ごとに異なる処理を書いてみよう

日常生活において,人は条件によって異なった意思決定をします.

例えば,「もし,明日晴れならばピクニックに行こう」「もし,財布の中に5000円以上あるなら買おう」などです.つまり条件によって実行する命令を変えたいときです.その場合は,IF命令を使います.

 

IF命令の様式と処理は以下の通りです.END命令とセットで用います.実際には,exp1は実数値以外にも,条件式と呼ばれる式でもいいのですが,今回は条件式は省きます.

命令の様式 処理
IF exp1 その実数値の確率で対応するELSEIFまたはELSEまたは ENDまでの命令を実行する.
END 条件文,または繰返し,または定義の終了.

 

例として,以下のコードを実行すると左手を挙げた後、1/2 の確率で手を振ります。

RW LUA -140 1 // 左手を挙げる
IF 0.5 // 50%の確率で
// 左手を振る
RW LLA -60 0.3
RW LLA 60 0.3
END

IF命令は,複数の条件を列挙したり,条件を満たさないときの処理を同時に記述できます.新たに
ELSEIF命令,ELSE命令を紹介します.

命令の様式 処理
IF exp1 もし 条件式exp1が真ならば対応するENDまでの命令を実行する.
ELSEIF exp2
もし対応する先述のIFまたはELSEIFの条件が全て満たされなくて,かつexp2の実数値の確率で対応するELSEIFまたはELSEまたはENDの直前までの命令を実行する.
ELSE
もし対応する先述のIFまたはELSEIFの条件が全て満たされない場合,対応するENDまでの命令を実行する.
END 条件文,または繰返し,または定義の終了.

 

例として,人型ピクトグラムが16 拍子の踊りをするプログラムを示します。各拍それぞれで,50%の確率で「左脚を上げ下げ」15%=(1-0.5)×0.3の確率で「右腕を上げ下げ」,35%=(1-0.5)×(1-0.3)の確率で「左腕を上げ下げ」します.

REPEAT 16
  IF 0.5 
    RW LUL 90 0.2 // 左脚を上げ下げする
    RW LUL -90 0.2
  ELSEIF 0.3
    RW RUA 90 0.2 // 右腕を上げ下げする
    RW RUA -90 0.2
  ELSE // その他の場合は
    RW LUA 90 0.2 // 左腕を上げ下げする
    RW LUA -90 0.2
  END
END

 

挑戦状

5回目の挑戦状です。挑戦状は、あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジに取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。

 

チャレンジ1 腕を上げ下げさせよう

次の (a) から (c) の条件を満たすプログラムを作成してみよう。
(a) 5 分の 4 の確率で 1 秒かけて左腕を 120 度時計回りに回転する。
(b) 10 分の 3 の確率で 1 秒かけて右腕を 120 度反時計回りに回転する。
(c) (a) の動作と (b) の動作は同時に行われる。 左腕を上げる行為と、右腕を上げる行為はそれぞれ別々に判断される。

 

チャレンジ2 ダンサー

30 拍からなるダンスをします。1 拍は 0.6 秒とします。最初は 1 拍目、最後は 30 拍目です。各拍それぞれで,次に示す(1)から(4)のいずれの動作するか決定します.各動作の選択される確率は,(1)は0.4の確率,(2)は0.3の確率,(3)は0.2の確率,(4)は0.1の確率です..
(1) 最初の 0.3 秒で左腕を -120 度、 右腕を 120 度それぞれ同時に回転し、その後 0.3 秒で左腕を 120 度、右腕を -120 度それぞれ同時に 回転します。
(2) 最初の 0.3 秒で左腕を -120 度回転し、 その後 0.3 秒で左腕を 120 度回転します。
(3) 最初の 0.3 秒で右腕を 120 度回転し、 その後 0.3 秒で右腕を 120 度回転します。
(4) 最初の 0.3 秒で左足を -10 度回転し、 その後 0.3 秒で左足を 10 度回転します。

チャレンジ3 オリジナルダンサー

条件分岐(IF)と繰り返しを使ったオリジナル作品を作ってみよう。

 

次はレッスン6 です.

Lesson 6 人型ピクトグラム画家になる

 

 

本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.

[ピクトグラミングシリーズ] 座標指定によるグラフィックス描画方式に対しての「円」描画命令の追加,および円をマウス操作のみでも描画できるようにしました.対応する円命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,次に示す3通りの描画方式をサポートしており,(a)「人型ピクトグラムの体の部位の移動の履歴で描画」する方式,「(b)人型ピクトグラム自身の移動の履歴で描画」する方式(タートルグラフィックスに相当)では円を描くことができましたが,一般的なプログラミング言語で採用されている「(c)座標を指定して描画」では円を描く機能はあえて実装していませんでした.今回これを実装いたしました.標準のピクトグラミングPicthonJavaScpict, Block Pictogramming(日本語版英語版いずれも)が対応されています.以下標準のピクトグラミングを例に説明しますが,他についても同様です.

追加された命令の様式は以下の通りです.

命令の様式 処理
O arg1 arg2 arg3 arg4 [arg5] 中心座標(arg1,arg2),幅 arg3, 高さ arg4,中心座標を中心に反時計回りに arg5 度回転した楕円を描く.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う.

 

標準のピクトグラミングにおける各言語での命令表記は以下になります.

英語表記 英語 日本語 にほんご
O Oval えん

 

さらに円の描画も,ピクトグラム表示領域に対するマウスドラッグ操作でできるようにしました.下の表にあるように,人型ピクトグラムが表示されている以外の場所を,右クリックでドラッグすると,ドラッグ開始時の座標を中心点とする楕円を描くことができます.またマウスで操作した場合においても,対応する「円描画命令」が自動的にプログラムに挿入されます.

 

ドラッグ開始時のマウスの座標 ドラッグ開始時におけるマウス操作 操作
人型ピクトグラムの表示領域内 左クリック 人型ピクトグラムの対応する部位を回転
右クリック 人型ピクトグラムの平行移動
人型ピクトグラムの表示領域外 左クリック 線分の描画
右クリック 楕円の描画
長押し 人型ピクトグラムの向いている方向の変更(正面と側面)

 

このマウス操作による「円の描画」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.

 

 

以下のようなピクトグラムもマウス操作だけで作成できるようになりました.

注: 2020/03/16現在 このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.

注: 2020/03/16 「このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.」について解決しました.

 

 

[ピクソン] ピクソン(ピクトグラミングPython版)のプログラム記述領域にコードエディタを採用しました.

これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.JavaScpictに続けて,ピクトグラミングのPython版である,Picthonに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.

 

[ジャバスクピクト] ジャバスクピクト(ピクトグラミングJavaScript版)のプログラム記述領域にコードエディタを採用しました.

これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.手始めにピクトグラミングのJavaScript版である,JavaScpictに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.

[ピクトグラミングシリーズ] 体の各部位(9箇所)に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.対応する命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,体,左右のひじ,手,ひざ,あしの9箇所にペンを独立に持つことができます.ペンを持つとその部分の移動の履歴が描画されます.

各部位に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.表示されている人型ピクトグラムの対応する位置にマウスカーソルを持っていくとピンクの十字が現れますので,そこでマウスをクリックするとペンの持つ・放すが切り替わります.ペンを持っている場合は,対応する位置に赤い十字が表示されます.またマウスで操作した場合においても,対応する「ペンを持つ・放す命令」が自動的にプログラムに挿入されます.

このクリック操作による「ペンの持つ/放す」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.

人型ピクトグラム表示領域に対する機能追加なので,標準のピクトグラミングPicthonJavaScpict, Block Pictogramming(日本語版英語版いずれも), 自然言語ピクトグラミング全てが対応されています.

 

 

 

 

 

[ピクトグラミングシリーズ] 線の太さの初期値を1から15にしました.https://pictogramming.org/ #プログラミング #ピクトグラム

ピクトグラミングでは,様々な方法で線が描けますが,その線の太さの初期状態の値を1から15に変えました.

 

線の太さを変えるには,線の太さを変える命令を入力する必要があります.この命令の存在に気づかないと,初期状態(太さ1)のままピクトグラムを作成してしまい,以下のようなピクトグラムになってしまいます.ピクトグラミングでは,プログラミングの視点からすると,複雑な線画を単純な命令列でプログラムできるのが特徴となっており,その場合,太さを1にしておいたほうが望ましいので,これまでデフォルトを1としていました.一方ピクトグラムを作るという視点からすると,細い線は視認性が悪く,ピクトグラムデザインの点からもよくありません.そこで今回デフォルトの線の太さを15としました.

 

 

よって,これからは,以下のようなピクトグラムが,線の太さの設定を変えずに作ることができます(つまりはマウス操作だけでもできます.).ピクトグラミングシリーズは共通のコンポーネントを使っているので,全てのシリーズ(標準のピクトグラミング,ピクソン,ジャバスクピクト, ブロックピクトグラミング)で変更されます.

ただし,小学校向けコンテンツ中の算数(第5学年)B 図形(1)正多角形に特化した二つのバージョンは,図形(正多角形)を描くことが目的となっているので,線の太さは1のまま(正確には最初に線の太さを1にする命令を裏で実行している)にしています.

[ピクトグラミング] 小学校向けコンテンツのカテゴリを追加しました.第2弾として「音楽 A 表現」に特化したバージョンを公開しました.

このたび,ピクトグラミングサイトに,小学校向けコンテンツのカテゴリを追加しました.

第2弾として「音楽  A 表現」に特化したバージョンを公開しました.各種機能ボタンも極力排除し非常にシンプルな画面構成となっています.

 

3.音楽 A 表現

入力されたリズムに応じて人型ピクトグラムが手を叩きます.ブロックはわずか4種類です.こちらからアクセスできます.IE(インターネットエクスプローラ)でも動作します.

 

公開したコンテンツは,2019年度青山学院大学社会情報学部伊藤研究室の卒業研究の内容をカスタマイズしたものとなっています.

  • 樫村 茉美 , 御家雄一, 伊藤一成:‹人型ピクトグラムに関するコンテンツ生成環境「ピクトグラミング」を用いたリズム理解,第11回データ工学と情報マネジメントに関するフォーラムDEIM2019, (2019.03)
  • 樫村茉美 , 石井幹大, 伊藤一成:‹人型ピクトグラムに関するコンテンツ生成環境「ピクトグラミング」を用いたリズム理解手法の提案とその評価,第12回データ工学と情報マネジメントに関するフォーラム DEIM2020, (2020.03)

小学校の先生方からのご意見ご要望等いただけますと非常に嬉しいです.また今後別の様々な教科に至る単元につきましても小学校の先生方と協力して,ピクトグラミングならではのコンテンツを順次公開していきます.

[ピクトグラミング] 小学校向けコンテンツのカテゴリを追加しました.第1弾として「算数(第5学年)B 図形(1)正多角形」に特化した2バージョンを(外角,中心角・内角)公開しました.

このたび,ピクトグラミングサイトに,小学校向けコンテンツのカテゴリを追加しました.

第1弾として「算数(第5学年)B 図形(1)正多角形」に特化した2バージョンを(外角,中心角)公開しました.各種機能ボタンも極力排除し非常にシンプルな画面構成となっています.

 

1.算数(第5学年)B 図形(1)正多角形 その1

いわゆるタートルです.外角を基に多角形を描きます.ブロックはわずか4種類です.こちらからアクセスできます.IE(インターネットエクスプローラ)でも動作します.

2.算数(第5学年)B 図形(1)正多角形 その2

右腕を回すことで,多角形を描画します.人型ピクトグラムならではの描画方式です.中心角,内角を基に多角形を描きます.ブロックはわずか4種類です.こちらからアクセスできます.IE(インターネットエクスプローラ)でも動作します.

小学校の先生方からのご意見ご要望等いただけますと非常に嬉しいです.また今後別の様々な教科に至る単元につきましても小学校の先生方と協力して,ピクトグラミングならではのコンテンツを順次公開していきます.

[ピクトグラミングシリーズ共通] 人型ピクトグラム表示領域でのマウスオーバー時,マウス操作による人型ピクトグラム変形・平行移動時,マウス操作による線分描画時に角度,座標等の情報を表示するようにしました.

人型ピクトグラム表示領域でのマウスオーバー時,マウス操作による人型ピクトグラム変形・平行移動時,マウス操作による線分描画時に角度,座標等の情報をリアルタイムに表示するようにしました.

表示されるのは,マウスによる操作が有効の設定になっている場合に限ります.

人型ピクトグラムを表示する領域の機能追加ですので,ピクトグラミングシリーズ全て(ピクトグラミング,モバイルピクトグラミング,Picthon,JavaScpict, Block Pictogramming)に対して適用されています.

引き続きピクトグラミングシリーズご愛顧のほどよろしくお願いします.

[ピクトグラミング] チラシを作りました.

ピクトグラミングは,第82回情報処理学会 全国大会 中高生情報学研究コンテスト(2020年3月7日(土)開催)の個人スポンサーになっています.スポンサーの特典としてチラシを置いてもらえるということで,これを機にチラシを作りました.

(上: おもて面 下: うら面)

 

チラシのpdfファイルも公開しますので,お知り合いの方々への広報等で配布等頂ければ幸いです.