伊藤一成: 複数のプログラミング言語で記述可能なピクトグラムコンテンツ作成環境の提案と実装, 情報処理学会論文誌TCE, Vol.7, No.3, pp.1-11 (2021年10月)に関して,通常情報学広場からの無償ダウンロードは公開後2年経過後です.今回,情報処理学会の論文公開規定に基づき,ピクトグラミングサイトから無償でダウンロードできるようにしました.
伊藤一成: 複数のプログラミング言語で記述可能なピクトグラムコンテンツ作成環境の提案と実装, 情報処理学会論文誌TCE, Vol.7, No.3, pp.1-11 (2021年10月)に関して,通常情報学広場からの無償ダウンロードは公開後2年経過後です.今回,情報処理学会の論文公開規定に基づき,ピクトグラミングサイトから無償でダウンロードできるようにしました.
ピクトグラミングの学習用テキストを更新しました。一つ前のバージョン20210909に対して、「5章 ピクトスイミング」「6章 物体移動」の2章を追加しました。また8章を変更しました。
ピクトグラミングの学習用テキストのページからダウンロードできます。こちらのページも更新いたしました。
引き続きピクトグラミングシリーズをよろしくお願いします。
Block Pictogramming (English PC Version) now supports video motion sensor function.
There are several icons with radio button. Checked the right most radio button, which is right to video icon.
Then, camera video is overlaid in the pictogram display area.
The block list of the event category is as follows:
The block of the event category acts until the execution of surround block “When run button pressed” is completed. Hence, it is good way to put an “wait n seconds” block within it.
The following three types of event blocks for the video motion sensor are available.
Execute when the brightness (0 to 255) of a specific part of the body changes by 30 or more.
Executes when the brightness or the red component or the green component or the blue component (0 to 255) of specific part of the body changes above a certain level or changes to above a certain level or changes to below a certain level.
Executes when the brightness or the red component or the green component or the blue component (0 to 255) of specific coordinates changes above a certain level or changes to above a certain level or changes to below a certain level.
Event detection and occurrence timing is every 0.5 seconds.
Below is a program that makes human pictogram happy when you touch his/her left hand.
ブロックピクトグラミング(日本語PC版)にビデオモーションセンサーの機能を実装しました
画面右上にチェック☑を入れて操作するアイコンがあると思います。一番右のビデオのアイコンの右にあるにチェック☑をオンにしましょう。
するとカメラの映像がピクトグラム表示領域にオーバレイされます.
イベントカテゴリのブロック一覧は以下の通りです.
イベントカテゴリのブロックは「実行ボタンが押されたとき」のコ型ブロック内の実行が終了するまで有効なので,実行ボタンが押されたときに「n秒まつ」のブロックを入れておくと良いと思います.この点ご注意ください.
ビデオモーションセンサーのブロックは以下の3通りを用意しています.ある特定の座標の色情報の変化が特定の条件を満たすとそのコ型ブロックの内部のプログラムが実行されます.色情報の取得及びプログラムの実行タイミングは0.5秒おきになっています.
体の特定の場所の明るさの値が30以上変化したときに実行されるブロック.明るさ(明度)の値は,0(暗い)から255(明るい)の間の整数値をとります.最新の値を取得した際,一つ前(0.5秒前)に取得した値より30以上変化しているときに実行されます.
体の特定の場所の明るさor赤色成分or緑色成分or青色成分(0から255)が一定以上変化or一定以上に変化or一定以下に変化したときに実行されるブロック.特定の座標の色情報は,RGBカラーモデルに基づいて保持されています.RGBカラーモデルでは,それぞれの座標に対して,「赤色成分」「緑色成分」「青色成分」に分割し,それぞれの色成分も明るさと同様に0から255の値をとります.このブロックは,指定した体の特定の場所の座標の明るさあるいは指定した色成分の最新の値を取得した際,一つ前(0.5秒前)に取得した値との比較して条件を満たしたときに実行されます.
特定の座標の明るさor赤色成分or緑色成分or青色成分(0から255)が一定以上変化or一定以上に変化or一定以下に変化したときに実行されるブロック 一つ上のブロックでは,体の特定の場所の座標の値を変化の検知の対象にしていますが,こちらは,指定された特定の座標を対象としています.
イベントの検知及び発生タイミングは0.5秒おきになっています.
下は,人型ピクトグラムの左手を触ってあげると喜ぶプログラムです.
とりあえずの実装なので,ご容赦ください.Tentativeバージョンとして,今後改良をしていきます.
ちなみにイベントカテゴリには,キーイベントのブロックも実装してますので,ちょっとしたミニゲームなどを作成することもできます.
ビデオ機能のない,一つ前のブロックピクトグラミング(日本語PC版旧版)旧版を使いたい方はこちらからアクセスください.
ピクトグラミングシリーズには,タートルグラフィックスの機能があります.
ピクトググラミングシリーズ独自の特徴として
1. 移動や進行方向の変化に時間の概念を取り入れ可能
2. 人型ピクトグラム回転,移動命令と同じく,「待ち」命令を取り入れている.
があります.
ブロックピクトグラミングを例にあげます.タートルグラフィックス関係のブロック(命令)は以下のとおりです.
ピクトグラミングでは,以下の通りです.第2引数に時間を指定できるようになっています.また,後ろにWをつけたFDW,BKW,RTW,LTW命令もあり.Wが付くか付かないかの挙動は,R,RW命令やM,MW命令と同様の対応関係になっています.Picthon(ピクトグラミングPython版)やJavaScpict(ピクトグラミングJavaScript版)でも同様になります.
命令の様式 | 処理 |
---|---|
FD arg1 [arg2] | 人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
BK arg1 [arg2] | 人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
RT arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
LT arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
FDW arg1 [arg2] | 人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める.移動が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
BKW arg1 [arg2] | 人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める.移動が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
RTW arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する.回転が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
LTW arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する.回転が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
また各言語の表記は以下の通りです.
英語表記 | 英語 | 日本語 | にほんご |
---|---|---|---|
FD | Forward fd |
前進 | ぜんしん |
BK | Backward bk |
後進 | こうしん |
RT | RightTurn rt |
右回り | みぎまわり |
LT | LeftTurn lt |
左回り | ひだりまわり |
FDW | ForwardWait fdw |
前進待ち | ぜんしんまち |
BKW | BackwardWait bkw |
後進待ち | こうしんまち |
RTW | RightTurnWait rtw |
右回り待ち | みぎまわりまち |
LTW | LeftTurnWait ltw |
左回り待ち | ひだりまわりまち |
今回,以下の変更を行いました.
1. タートル描画に関する命令を使った場合,自動的に大きさ0.1, 線の太さ1, 体に対する描画がonになる.
2. 描画中は人型ピクトグラムが進行方向を向く.
1.は,ピクトグラム作成が主題ですので,大きさや線の太さはデフォルトにしています.よってタートル描画をする際,大きさや線の太さを変更する命令を記述することが最初に必要でしたが,これを省略し,描画に集中できるようにしました.
また,ピクトグラミングシリーズは正面からの視点でした.タートルグラフィックスでは上からの視点が望ましいです.2.は,プールや海の上で泳いでいるのを上からの視点で表示しているイメージを想像してもらうために進行方向を向くようにしました.人型ピクトグラムは顔や衣服などがないので,このような泳ぎメタファの導入によって正面視点と上から視点の両方の切り替えが可能となりました.
ブロックピクトグラミングを使った例を示します.
まずは正五角形です.
”待ち”のあるなしと時間をうまく組み合わせることにより様々な図形を描画できます.
今回の変更はピクトグラミングシリーズ全てが対象です.ピクトグラミングのPython言語版Picthonの例です.同じくWと時間をうまく組み合わせることにより様々な図形を描画できます.
for _ in range(4): pic.FD(200 * math.pi * 1/4, 2) pic.RTW(90, 1) pic.LTW(90, 1) pic.RT(90)
ブロックピクトグラミングのブロックカテゴリ名も,「タートル」から「泳ぎ」(英語版 Swimming)に変更いたします.
またタートルグラフィックスの機能に関する名称に関しましても,ピクトグラミングシリーズでは以後,説明で参照する場合を除き,この機能に関しては「ピクトスイミング」という名称を使っていきたいと考えております.これまでも,「私は人型なのになぜ”タートル”なのか」と人型ピクトグラムから常に言われておりました.やっと肩の荷が降りました.このアイデアは,すっとこさまよりいただきました.ありがとうございました.
ピクトグラミングで、タートルにしたときに、ピクトさんも描画方向に向けて回転して欲しいなぁ…。
— すっとこ (@suttokodokkoy) September 30, 2021
そんな(浮いている、泳いでいる)イメージでした。やっぱり、オリジナルの「タートル」も上からの視点でしたし。
— すっとこ (@suttokodokkoy) September 30, 2021
ピクトグラミングを更新しました.PC・タブレット版,スマートフォン版両方です.
追加した機能は
1. 反転表示
2. 線画オブジェクトのグループ化と移動
です.
いずれもすでに先行してブロックピクトグラミングには反映していましたが,ピクトグラミングにも反映させました.
ピクトグラムというとサイン用途で使われるものが有名ですが,コミュニケーション用途で用いるピクトグラムのデザイン指針を定めたJIST0103(コミュニケーション支援用絵記号デザイン原則)およびISO19027(Design principles for communication support board using pictorial symbols)では,サイン用途の配色と反転した,黒背景に白のピクトグラムが推奨されています.そのため「RV」(Reverse)の命令を追加しました.
命令の様式 | 処理 |
---|---|
RV | 反転モード(Reverse mode)に変更する。 |
英語表記 | 英語 | 日本語 | にほんご |
---|---|---|---|
RV | Reverse | 反転 | はんてん |
ピクトグラミングシリーズでは,人型ピクトグラム以外のオブジェクトは基本図形(線分または円)の集合で描きます.従来からフレーム単位の描画(Processingで採用されているような描いて全て消すの繰返し)をすればオブジェクトを移動させる(ように見える)ことはできました.しかしより簡便で理解しやすい方法を実装しました.
一つ以上の基本図形から構成されるオブジェクトを定義できる命令,定義されたオブジェクトを等速直線移動する命令を追加しました..
命令の様式 | 処理 |
---|---|
DO arg1 | 対応するEND命令までに含まれるL命令,O命令の組み合わせで描かれる線画をarg1という名称で定義する. |
MO arg1 arg2 arg3 arg4 | arg4 秒かけてx軸正方向に arg2 ピクセル, y軸正方向にarg3 ピクセルだけarg1という名称で定義された線画を等速直線移動する. |
MOW arg1 arg2 arg3 arg4 | arg4 秒かけてx軸正方向に arg2 ピクセル, y軸正方向にarg3 ピクセルだけarg1という名称で定義された線画を等速直線移動する.直線移動が終了するまで次の命令は実行されない. |
英語表記 | 英語 | 日本語 | にほんご |
---|---|---|---|
DO | DefineObject defineobject |
物定義 | ものていぎ |
MO | MoveObject moveobject |
物移動 | ものいどう |
MOW | MoveObjectWait moveobjectwait |
物移動待ち | ものいどうまち |
ブロックピクトグラミングと,同じ実行結果になるピクトグラミング(日本語版)のプログラムを下に例を示します.「物体を定義するためDO(物定義)命令を使って「りんご」というラベルを設定して定義しています.内部には,円と線分を描く二つの命令があります.これが構成要素となります.平行移動する命令(MO 物移動,MOW 物移動待ち)があり,これにより「りんご」が等速で落下します.オブジェクトの作成を通じて,複数の命令をまとめラベリングする手続き化の処理に慣れ親しんでもらいます
反転 回転待ち 右肩 69 回転待ち 右肘 41 物移動 りんご 0 320 0.5 物定義 りんご 円 211 -50 42 42 0 線 211 -55 211 -85 終わり
アプリケーション下側の命令入力支援領域のボタンも更新しました.
作品集のページの「やり投げ」もこの機能を使ったバージョンに更新しました.引き続きピクトグラミングシリーズをよろしくお願いします.
関数や手続きの中で自分自身を呼び出す処理を再帰呼出しといいます.
プログラミングを学習する際,この再帰の概念でつまづく人も少なくありません.
懸垂を10回するプログラムを例に再帰について考えてみたいと思います.
図 (1)
図 (2)
これを再帰を使わずにブロックピクトグラミング(ピクトグラミングブロック版)で作成した例です.回数を引数指定して懸垂をする関数(実際は手続き)「懸垂」,図(1)の状態にする手続き「初期状態」と,図(1)→図(2)→図(1)の状態変化をアニメーションで表現する手続き「1回曲げ伸ばし」が定義されておりこちらは折りたたんで表示してあります.人型ピクトグラムとは異なる視点である第三者視点だと,繰返しを使った表現が思いつくでしょう.
次に再帰を使って,記述してみます.こちらは関数(実際には手続き)「懸垂」の中で「懸垂」を呼び出しています.皆さん1回懸垂をしては,あと何回だ!がんばろう!と繰り返し念じた経験はないでしょうか?もちろん懸垂以外の,腕立て伏せ,トラック一周,漢字の書き取り…..など繰り返す処理であれば同じことが言えます.これは,実際に懸垂をする人型ピクトグラムになりきって考えた視点と考えられるでしょう.
再帰の考え方を教えるのにご苦労されている先生方多いと思います.ハノイの塔だったり,再帰図形だったりと色々工夫されたりしますが,一度こういうのからスタートするのはいかがでしょうか?いかなる人も反復的な身体動作に関する身体知は有していると思います.
画面は3つの部分から構成されます.上側は,ピクトグラムを表示する「人型ピクトグラム表示領域」,中央は,プログラムを記述する「プログラムコード入力領域」,下側はプログラムの入力を支援する「プログラムコード入力支援ボタン」です。
プログラムコード記述領域にプログラムを入力することで,人型ピクトグラムのポーズを変えたり動かしたりすることができます。また,「プログラムコード入力支援ボタン」を押すとその命令文を「プログラムコード記述領域」に追加できます.JavaScpictでは,JavaScript言語でプログラミングできます.
JavaScpictでは利用の目的に合わせて4つの機能をオンオフできます.
画像(名称) | 説明 |
---|---|
(座標系表示) | 画像の右に表示されているチェックボックスをオンにすると,座標系が表示されます.座標はXY座標系(X方向とY方向の値,両方を組み合わせて位置を表現する)です.横方向がX座標で左端の-320から右端の320まで,縦方向がY座標で上端の-320から下端の320までをとります.つまり,中心が(0,0),左上が(-320,-320),右上が(320,-320),左上が(-320,-320),右上が(320,-320),つまりX軸正方向が右,Y軸正方向が下となります.数学の座標軸とY軸だけ逆方向なので注意して下さい. |
(ドラッグ不可)*標準でオン | 画像の右に表示されているチェックボックスをオフにすると,人型ピクトグラムは「ピクトグラム表示パネル」上でピクトグラムの体の部位を直接ドラッグすることででも操作することができます。また,ピクトグラム表示領域上で,始点を人型ピクトグラムの体の部分以外の点にして,終点までドラックすると,線分が描けます. |
ピクトグラミングでは再生・停止などのコントロールは,コントロールボタンから制御します.
画像(名称) | 説明 |
---|---|
(初めから再生) | はじめから再生する. |
(一旦停止) | 停止します. |
(停止位置から再生) | 停止している状態から再生します. |
(すべてクリア) | プログラムコード入力領域に記述されているプログラムをすべて消去します.消去前に確認のダイアログボックスが表示されます. |
まずは,1時間で学ぶジャバスクピクトからはじめてみましょう.
作成したコンテンツのダウンロードは2通りあります。
[1. ショット画像のダウンロード]
(1)画像ダウンロードボタンを押すと,作品名.png の名前でショット画像が保存されます.
[2. アニメーションのダウンロード](1)動画ダウンロードボタンの右側にあるチェックボタンをオンにします.
(2)一度最初から最後まで実行します.ゆっくり実行されますが,内部的にはアニメーション画像が動的に生成されています.
(3)動画ダウンロードボタンを押すと,作品名.gif の名前でアニメーション画像が保存されます.
画面右上のプログラムコード記述領域に命令を入力し定義します.入力文字列は動作や状態を変化させるための「命令」コードと,引数列を空白で区切る以下の方式です.
pic.命令(引数1, 引数2 ....);
命令セット一覧 人型ピクトグラムの動きの変化を表現できる「ピクトアニメーション」,移動の経路が線で引かれることで図形を描く「ピクトグラフィックス」の2種類の命令から構成されています.また両方に共通して使用される変数定義,繰返し,条件分岐等の命令が用意されています.
命令の様式 | 処理 |
---|---|
pic.R(arg1, arg2, arg3, arg4); | arg4 秒後にarg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する.arg4 が 省略された時は,arg4 に0が,arg3,arg4 の両方が省略された時はいずれも0が入力されているものとして取り扱う. |
pic.RW(arg1, arg2, arg3); | arg1で指定される体の部位を反時計回りにarg2度だけarg3秒かけて支点を中心に等速回転する.回転が終了するまで次の命令は実行されない.arg3が省略された時は,arg3に0が入力されているものとして取り扱う. |
pic.M(arg1, arg2, arg3, arg4); | arg4秒後にarg3秒かけてx軸正方向に arg1ピクセル, y軸正方向にarg2ピクセルだけ全体を等速直線移動する.arg4が省略された時は,arg4に0が,arg3, arg4の両方が省略された時はいずれも0が入力されているものとして取り扱う. |
pic.MW(arg1, arg2, arg3); | arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけ全体を等速直線移動する.直線移動が終了するまで次の命令は実行されない.arg3が省略された時は,arg3に0が入力されているものとして取り扱う. |
pic.FR (); | 人型ピクトグラムを正面向きにする.(初期状態) |
pic.SD (); | 人型ピクトグラムを側面向きにする. |
pic.C (); | 人型ピクトグラムの状態を初期状態にする. |
pic.SC(arg1); | 人型ピクトグラムの拡大率を標準(初期状態)のarg1倍にする. |
pic.SP(arg1); | 文字列 arg1 を発話する. |
pic.MS(arg1); |
人型ピクトグラムにお面を装着する.装着するお面の種類はarg1で指定される.
arg1 がANGERの場合,怒りのお面 |
pic.PS(arg1); |
人に仮面を装着する.装着する仮面の種類はarg1で指定される.
arg1 がANGERの場合,怒りの仮面 |
pic.SAY(arg1, arg2, arg3); | arg3 秒後にarg1で指定される値をarg2秒だけ吹き出しで表示する.arg3 が 省略された時は,arg3 に0が,arg2,arg3 の両方が省略された時はいずれも0が入力されているものとして取り扱う. |
pic.SAYW(arg1, arg2); | arg1で指定される値をarg2秒だけ吹き出しで表示する.吹き出しの表示が終了するまで次の命令は実行されない. |
命令の様式 | 処理 |
---|---|
pic.FD(arg1, [arg2]); |
人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.BK(arg1, [arg2]); |
人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.RT(arg1, [arg2]); |
人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.LT(arg1, [arg2]); |
人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.FDW(arg1, [arg2]); |
人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める.移動が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.BKW(arg1, [arg2]); |
人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める.移動が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.RTW(arg1, [arg2]); |
人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する.回転が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.LTW(arg1, [arg2]); |
人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する.回転が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.PEN(arg1, [arg2]); |
arg1 がUPの場合,ペンを上げる.DOWN の場合,ペンを下げる.arg1がUPまたはDOWNの時は,ペンの上げ下げをする体の部位の名称をR,RW命令と同様の表記でarg2に指定できる.arg1がFILLの時は,R,RW命令と同様の表記で指定されたarg2の体の部位の座標を含む閉じた線画の内部を塗りつぶすことができる.arg2が省略された場合は BODYが記述されているものとみなされる.
ペンの両端について,arg1がSQUAREの場合,線の両端の形状は四角,arg1がROUNDの場合線,両端の形状を丸を付加する.arg1がBUTTの場合は両端に形状を付加しない.ペンの種類について,arg1 が NORMALの場合は実線を,ERASEの場合は線を消す,XORの場合はすでに描かれていた部分は消し,そうでない部分は描く(反転). 初期状態はペンが上がっている状態で,線の両端の形状は四角(SQUARE),ペンの種類はノーマル(NORMAL). |
pic.PENW(arg1); | ペンの太さ(幅)を arg1 にする.初期状態は15. |
pic.L(arg1, arg2, arg3, arg4, [arg5]); | 座標(arg1,arg2)から座標(arg3,arg4)までarg5秒かけて線分を描く.arg5が 省略された時は,arg5 に0が入力されているものとして取り扱う. |
pic.LW(arg1, arg2, arg3, arg4, [arg5]); | 座標(arg1,arg2)から座標(arg3,arg4)までarg5秒かけて線分を描く.移動が終了するまで次の命令は実行されない.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う. |
pic.O(arg1, arg2, arg3, arg4, [arg5]); | 中心座標(arg1,arg2),幅 arg3, 高さ arg4,中心座標を中心に反時計回りに arg5 度回転した楕円を描く.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う. |
pic.T(arg1, arg2, [arg3, [arg4]]); | 引数の数が2つの場合,文字列arg1を文字の大きさarg2で人型ピクトグラムの現在位置に描く.
引数の数が3つまたは4つの場合,座標(arg2,arg3),文字の大きさ arg4で文字列 arg1 を描く.arg4 が 省略された時は,arg4に80が入力されているものとして取り扱う |
pic.CS(); | ペンによって描画された図形を消去する. |
命令の様式 | 処理 |
---|---|
arg1 = exp2 | 変数 arg1 に exp2 を代入する. |
if (exp1) { } | もし 式 exp1 が真ならば対応する命令群を実⾏する. |
else if (exp2) { } | もし対応する先述の if または elif の条件が全て満た されなくて,かつ条件式 exp2 が真ならば対応する命 令群を実⾏する. |
else { } | もし対応する先述の if または elif の条件が全て満た されない場合,対応する命令群を実⾏する. |
for (let i = 0; i < arg1; i++) { } | 対応する命令群をarg1回繰返す. |
pic.W(arg1); | arg1秒何もせずに待つ.待ちが終了するまで次の命令は実行されない. |
pic.S(); | 安全モード(Safety mode)に変更する。 安全モード中に描画 した線画の色は人型ピクトグラムと同じ緑色となる。 |
pic.SG(); | 安全緑モード(Safety Green mode)以外で実行すると安全緑モードに変更する。 安全緑モードで再度命令すると通常モードに変更する。安全緑モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
pic.SR(); | 安全赤モード(Safety Red mode)以外で実行すると安全赤モードに変更する。 安全赤モードで再度命令すると通常モードに変更する。安全赤モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
pic.P(); | 禁止モード (Prohibit mode) 禁止モードに変更する。 |
pic.I(); | 指示モード(Instruction mode)に変更 する。指示モード中 に描画した線画の色は人型ピクトグラムと同じ白色となる。 |
pic.A(); | 注意モード(Attention mode)に変更する。 |
pic.SK(); | スケルトンモード(Skelton mode)スケルトンモードに変更する。 |
pic.N(); | 通常モード(Normal mode)に変更する。 |
pic.ST(); | 命令が実行される時点での人型ピクトグラムを描画する. |
ピクトグラミングでは,ピクトグラム表示領域上における様々なスマホ操作により,対応した命令を自動的にプログラムを記述する領域に追加できます.
タップする場所 | スマホ操作 | 処理 |
---|---|---|
人型ピクトグラム | 体の部位をドラッグ | 人型ピクトグラムの対応する部位を回転 |
体部分をドラッグ(1本指) | 人型ピクトグラムの平行移動 | |
体部分をドラッグ(2本指) | 人型ピクトグラムの回転 | |
人型ピクトグラミング以外 | 長押し | 人型ピクトグラムの向いている方向の変更(正面と側面) |
動画プレーヤー
R命令やPEN命令では引数で部位を指定します.「前腕」や「下腿」など人型ピクトグラムの構成部品全体の名称での指定と,「肩」「肘」など,構成部品の節点の名称での指定とがあります.
英語 | 日本語 |
---|---|
BODY Body |
体 |
LUA LeftUpperArm |
左上腕 |
LLA LeftLowerArm |
左前腕 |
RUA RightUpperArm |
右上腕 |
RLA RightLowerArm |
右前腕 |
LUL LeftUpperLeg |
左大腿 |
LLL LeftLowerLeg |
左下腿 |
RUL RightUpperLeg |
右大腿 |
RLL RightLowerLeg |
右下腿 |
英語 | 日本語 |
---|---|
BODY Body |
体 |
LS LeftShoulder |
左肩 |
LE LeftElbow |
左肘 |
LH LeftHand |
左手 |
RS RightShoulder |
右肩 |
RE RightElbow |
右肘 |
RH RightHand |
右手 |
LC LeftCrotch |
左股 |
LK LeftKnee |
左膝 |
LF LeftFoot |
左足 |
RC RightCrotch |
右股 |
RK RightKnee |
右膝 |
RF RightFoot |
右足 |
パーツ | 部位 |
---|---|
画面は三つの部分から構成されます.左上は,ピクトグラムを表示する「人型ピクトグラム表示領域」,右上は,プログラムを記述する「プログラムコード入力領域」,下側はプログラムの入力を支援する「プログラムコード入力支援ボタン」です。
プログラムコード記述領域にプログラムを入力することで,人型ピクトグラムのポーズを変えたり動かしたりすることができます。また,「プログラムコード入力支援ボタン」を押すとその命令文を「プログラムコード記述領域」に追加できます.ピクトグラミングでは,Python言語でプログラミングできます.
Picthonでは利用の目的に合わせて2つの機能をオンオフできます.
画像(名称) | 説明 |
---|---|
(座標系表示) | 画像の右に表示されているチェックボックスをオンにすると,座標系が表示されます.座標はXY座標系(X方向とY方向の値,両方を組み合わせて位置を表現する)です.横方向がX座標で左端の-320から右端の320まで,縦方向がY座標で上端の-320から下端の320までをとります.つまり,中心が(0,0),左上が(-320,-320),右上が(320,-320),左上が(-320,-320),右上が(320,-320),つまりX軸正方向が右,Y軸正方向が下となります.数学の座標軸とY軸だけ逆方向なので注意して下さい. |
(ドラッグ不可)*標準でオン | 画像の右に表示されているチェックボックスをオフにすると,人型ピクトグラムは「ピクトグラム表示パネル」上でピクトグラムの体の部位を直接ドラッグすることででも操作することができます。また,ピクトグラム表示領域上で,始点を人型ピクトグラムの体の部分以外の点にして,終点までドラックすると,線分が描けます. |
ピクトグラミングでは再生・停止などのコントロールは,コントロールボタンから制御します.
画像(名称) | 説明 |
---|---|
(初めから再生) | はじめから再生する. |
(一旦停止) | 停止します. |
(停止位置から再生) | 停止している状態から再生します. |
(すべてクリア) | プログラムコード入力領域に記述されているプログラムをすべて消去します.消去前に確認のダイアログボックスが表示されます. |
まずは,1時間で学ぶピクソンからはじめてみましょう.
作成したコンテンツのダウンロードは2通りあります。
[1. ショット画像のダウンロード]
(1)画像ダウンロードボタンを押すと,作品名.png の名前でショット画像が保存されます.
[2. アニメーションのダウンロード](1)動画ダウンロードボタンの右側にあるチェックボタンをオンにします.
(2)一度最初から最後まで実行します.ゆっくり実行されますが,内部的にはアニメーション画像が動的に生成されています.
(3)動画ダウンロードボタンを押すと,作品名.gif の名前でアニメーション画像が保存されます.
命令セット一覧
画面右上のプログラムコード記述領域に命令を入力し定義します.入力文字列は動作や状態を変化させるための「命令」コードと,引数列を空白で区切る以下の方式です.
pic.命令(引数1, 引数2 ....)
命令セット一覧 人型ピクトグラムの動きの変化を表現できる「ピクトアニメーション」,移動の経路が線で引かれることで図形を描く「ピクトグラフィックス」の2種類の命令から構成されています.また両方に共通して使用される変数定義,繰返し,条件分岐等の命令が用意されています.
命令の様式 | 処理 |
---|---|
pic.R(arg1, arg2, arg3, arg4) | arg4 秒後にarg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する.arg4 が 省略された時は,arg4 に0が,arg3,arg4 の両方が省略された時はいずれも0が入力されているものとして取り扱う. |
pic.RW(arg1, arg2, arg3) | arg1で指定される体の部位を反時計回りにarg2度だけarg3秒かけて支点を中心に等速回転する.回転が終了するまで次の命令は実行されない.arg3が省略された時は,arg3に0が入力されているものとして取り扱う. |
pic.M(arg1, arg2, arg3, arg4) | arg4秒後にarg3秒かけてx軸正方向に arg1ピクセル, y軸正方向にarg2ピクセルだけ全体を等速直線移動する.arg4が省略された時は,arg4に0が,arg3, arg4の両方が省略された時はいずれも0が入力されているものとして取り扱う. |
pic.MW(arg1, arg2, arg3) | arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけ全体を等速直線移動する.直線移動が終了するまで次の命令は実行されない.arg3が省略された時は,arg3に0が入力されているものとして取り扱う. |
pic.FR () | 人型ピクトグラムを正面向きにする.(初期状態) |
pic.SD () | 人型ピクトグラムを側面向きにする. |
pic.C () | 人型ピクトグラムの状態を初期状態にする. |
pic.SC(arg1) | 人型ピクトグラムの拡大率を標準(初期状態)のarg1倍にする. |
pic.SP(arg1) | 文字列 arg1 を発話する. |
pic.MS(arg1) |
人型ピクトグラムにお面を装着する.装着するお面の種類はarg1で指定される.
arg1 がANGERの場合,怒りのお面 |
pic.PS(arg1) |
人に仮面を装着する.装着する仮面の種類はarg1で指定される.
arg1 がANGERの場合,怒りの仮面 |
pic.SAY(arg1, arg2, arg3) | arg3 秒後にarg1で指定される値をarg2秒だけ吹き出しで表示する.arg3 が 省略された時は,arg3 に0が,arg2,arg3 の両方が省略された時はいずれも0が入力されているものとして取り扱う. |
pic.SAYW(arg1, arg2) | arg1で指定される値をarg2秒だけ吹き出しで表示する.吹き出しの表示が終了するまで次の命令は実行されない. |
命令の様式 | 処理 |
---|---|
pic.FD(arg1, [arg2]) |
人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.BK(arg1, [arg2]) |
人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.RT(arg1, [arg2]) |
人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.LT(arg1, [arg2]) |
人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.FDW(arg1, [arg2]) |
人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める.移動が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.BKW(arg1, [arg2]) |
人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める.移動が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.RTW(arg1, [arg2]) |
人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する.回転が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.LTW(arg1, [arg2]) |
人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する.回転が終了するまで次の命令は実行されない.arg2 が 省略された時は,arg2 に0が入力されているものとして取り扱う. |
pic.PEN(arg1, [arg2]) |
arg1 がUPの場合,ペンを上げる.DOWN の場合,ペンを下げる.arg1がUPまたはDOWNの時は,ペンの上げ下げをする体の部位の名称をR,RW命令と同様の表記でarg2に指定できる.arg1がFILLの時は,R,RW命令と同様の表記で指定されたarg2の体の部位の座標を含む閉じた線画の内部を塗りつぶすことができる.arg2が省略された場合は BODYが記述されているものとみなされる.
ペンの両端について,arg1がSQUAREの場合,線の両端の形状は四角,arg1がROUNDの場合線,両端の形状を丸を付加する.arg1がBUTTの場合は両端に形状を付加しない.ペンの種類について,arg1 が NORMALの場合は実線を,ERASEの場合は線を消す,XORの場合はすでに描かれていた部分は消し,そうでない部分は描く(反転). 初期状態はペンが上がっている状態で,線の両端の形状は四角(SQUARE),ペンの種類はノーマル(NORMAL). |
pic.PENW(arg1) | ペンの太さ(幅)を arg1 にする.初期状態は15. |
pic.L(arg1, arg2, arg3, arg4, [arg5]) | 座標(arg1,arg2)から座標(arg3,arg4)までarg5秒かけて線分を描く.arg5が 省略された時は,arg5 に0が入力されているものとして取り扱う. |
pic.LW(arg1, arg2, arg3, arg4, [arg5]) | 座標(arg1,arg2)から座標(arg3,arg4)までarg5秒かけて線分を描く.移動が終了するまで次の命令は実行されない.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う. |
pic.O(arg1, arg2, arg3, arg4, [arg5]) | 中心座標(arg1,arg2),幅 arg3, 高さ arg4,中心座標を中心に反時計回りに arg5 度回転した楕円を描く.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う. |
pic.T(arg1, arg2, [arg3, [arg4]]) | 引数の数が2つの場合,文字列arg1を文字の大きさarg2で人型ピクトグラムの現在位置に描く.
引数の数が3つまたは4つの場合,座標(arg2,arg3),文字の大きさ arg4で文字列 arg1 を描く.arg4 が 省略された時は,arg4に80が入力されているものとして取り扱う |
pic.CS() | ペンによって描画された図形を消去する. |
命令の様式 | 処理 |
---|---|
arg1 = exp2 | 変数 arg1 に exp2 を代入する. |
if exp1: | もし 式 exp1 が真ならば対応する命令群を実⾏する. |
elif exp2: | もし対応する先述の if または elif の条件が全て満た されなくて,かつ条件式 exp2 が真ならば対応する命 令群を実⾏する. |
else: | もし対応する先述の if または elif の条件が全て満た されない場合,対応する命令群を実⾏する. |
for _ in range(arg1) | 対応する命令群をarg1回繰返す. |
pic.W(arg1) | arg1秒何もせずに待つ.待ちが終了するまで次の命令は実行されない. |
pic.S() | 安全モード(Safety mode)に変更する。 安全モード中に描画 した線画の色は人型ピクトグラムと同じ緑色となる。 |
pic.SG() | 安全緑モード(Safety Green mode)以外で実行すると安全緑モードに変更する。 安全緑モードで再度命令すると通常モードに変更する。安全緑モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
pic.SR() | 安全赤モード(Safety Red mode)以外で実行すると安全赤モードに変更する。 安全赤モードで再度命令すると通常モードに変更する。安全赤モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
pic.P() | 禁止モード (Prohibit mode) 禁止モードに変更する。 |
pic.I() | 指示モード(Instruction mode)に変更 する。指示モード中 に描画した線画の色は人型ピクトグラムと同じ白色となる。 |
pic.A() | 注意モード(Attention mode)に変更する。 |
pic.SK() | スケルトンモード(Skelton mode)スケルトンモードに変更する。 |
pic.N() | 通常モード(Normal mode)に変更する。 |
pic.ST() | 命令が実行される時点での人型ピクトグラムを描画する. |
ピクトグラミングでは,ピクトグラム表示領域上における様々なスマホ操作により,対応した命令を自動的にプログラムを記述する領域に追加できます.
タップする場所 | スマホ操作 | 処理 |
---|---|---|
人型ピクトグラム | 体の部位をドラッグ | 人型ピクトグラムの対応する部位を回転 |
体部分をドラッグ(1本指) | 人型ピクトグラムの平行移動 | |
体部分をドラッグ(2本指) | 人型ピクトグラムの回転 | |
人型ピクトグラミング以外 | 長押し | 人型ピクトグラムの向いている方向の変更(正面と側面) |
R命令やPEN命令では引数で部位を指定します.「前腕」や「下腿」など人型ピクトグラムの構成部品全体の名称での指定と,「肩」「肘」など,構成部品の節点の名称での指定とがあります.
英語 | 日本語 | |
---|---|---|
BODY Body |
体 | |
LUA LeftUpperArm |
左上腕 | |
LLA LeftLowerArm |
左前腕 | |
RUA RightUpperArm |
右上腕 | |
RLA RightLowerArm |
右前腕 | |
LUL LeftUpperLeg |
左大腿 | |
LLL LeftLowerLeg |
左下腿 | |
RUL RightUpperLeg |
右大腿 | |
RLL RightLowerLeg |
右下腿 |
英語 | 日本語 | |
---|---|---|
BODY Body |
体 | |
LS LeftShoulder |
左肩 | |
LE LeftElbow |
左肘 | |
LH LeftHand |
左手 | |
RS RightShoulder |
右肩 | |
RE RightElbow |
右肘 | |
RH RightHand |
右手 | |
LC LeftCrotch |
左股 | |
LK LeftKnee |
左膝 | |
LF LeftFoot |
左足 | |
RC RightCrotch |
右股 | |
RK RightKnee |
右膝 | |
RF RightFoot |
右足 |
パーツ | 部位 |
---|---|