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 Series] Pictogramming updated mouse operations and corresponding processing on the pictogram display area.

Pictogramming updated mouse operations and corresponding processing on the pictogram display area. Following table shows the list of  mouse operation.  The corresponding commands can be added to the program display area automatically by various mouse operations on the pictogram display area.

Mouse position of starting Mouse operation Processing on pictogram display area
In the human pictogram display area

(Expect for the drawing point of human pictogram)

Left click and drag Rotate correspond part of human pictogram
Right click and drag Translate
Outside the human pictogram display area Left click and drag Draw line
Right click and drag Draw Oval
Any Hold down Change direction( front and side) of human pictogram
A drawing point of human pictogram Click Hold and release the pen at a drawing point

 

Following is a demonstration video.

 

[ピクトグラミングシリーズ] 座標指定によるグラフィックス描画方式に対しての「円」描画命令の追加,および円をマウス操作のみでも描画できるようにしました.対応する円命令も自動的にプログラムに挿入されます.#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(日本語版英語版いずれも), 自然言語ピクトグラミング全てが対応されています.

 

 

 

 

 

[ブロックピクトグラミング] ブロックピクトグラミングにキーイベントを追加しました.

もともとピクトグラミングはキーイベントをサポートしています.サンプルはこちらです.

今回,ブロックピクトグラミング(標準版IE対応版のいずれも)にキーイベントのサポートを追加しました.

サンプル画面です.上下左右のキーでピクトグラムを動かし,スペースキーを押すと右腕でその場で円を書きます.このサンプルプログラムはこちらです.

 

注意点として,プログラム入力テキストエリア(画面右側)がフォーカスされている場合,キーイベントは発生しませんので,実行開始ボタンを押して実行させ,フォーカスを変更させるか,人型ピクトグラム表示フィールドをクリックしてフォーカスを変更してください.

また,ピクトグラミングでは,一つ以上実行中あるいは実行開始前の命令がある状態をプログラム実行中とみなします.イベントはプログラム実行中しか駆動しませんので,メインプログラムの最後に(1000秒待つ)とかいうブロックを追加して,実行開始からしばらくの間実行中の状態にする必要があります.

工夫次第で簡単なゲームの作成も可能だと思います.