[ピクトグラミング] 学校(主に中学,高校)でお使いいただけるピクトグラミングの授業用テキストを全面的に更新しました.

学校(主に中学,高校)でお使いいただけるピクトグラミングの授業用テキストを全面的に更新しました.

主に中学および高校での50分×6回分の授業利用を想定したテキストです(2019年12月1日更新).

三つのフェーズを限られた時間でスムーズに移行できるように設計されています.

 

フェーズ1 : ピクトグラミングで,並列実行,繰返し,条件分岐等のプログラミングの基本概念を学習します.

フェーズ2 : 人型ピクトグラムの部位の動きの履歴で線画を描画します.フェーズ1の人間の動作をうまく利用し,自然な形式でフェーズ1からの移行を実現します.

フェーズ3: フェーズ1,2で学習した内容をもとに,デザイン志向のピクトグラムを作成します.

 

図:ページの見本

 

詳しくは,こちらのページをアクセスください.

授業用テキスト(ピクトグラミング,ピクソン)

[ピクトグラミング] (重要)ピクトグラム表示パネル上のマウス操作による処理及び,改行入力時の実行をデフォルトで有効から無効にしました.

ピクトグラミングの機能に,

(1) 人型ピクトグラムはピクトグラム表示パネル上でピクトグラムの体の部位を直接ドラッグすることででも操作できる.

(2) 人型ピクトグラムディスプレイパネル上で,始点を人型ピクトグラムの体の部分以外の点にして,終点までドラックすると,線分が描ける.

あり,(1),(2)の操作に対応する命令の文字列が,自動的に「プログラムコード 記述領域」に入力されるというのがあります.

これは直感的な操作でコンテンツが作成でき非常に良いのですが,本アプリケーションはプログラミングの諸概念を学ぶ目的でも広く使われおり,その目的で利用する際には,マウス操作でプログラミングできてしまうことが学ぶ阻害要因となり得ていました.そこで,ピクトグラム表示パネル上のマウス操作禁止ををデフォルトで有効としました.これまで通り,マウス操作を可能にしたければ,マウス操作禁止のチェックボックスをオフにしてください.

ピクトグラミングは,初学者がプログラミングの諸概念を学ぶ目的で設計されています.そのため1行入力する度に実行する対話型の実行制御となっていました.ピクトグラミングは,誤ったコードを書いてしまって実行した際に,人型ピクトグラムが思わぬ動きをして笑ってしまうというのが特徴の一つになっています.1行入力する度に実行せずに,実行ボタンを押したときだけ実行させた方が,笑いを喚起できることが,実際の授業実践での評価分析からわかってきました.そこで,再生ボタンを押下時のみ実行するをデフォルトで有効としました.これまで通り,1行入力やプログラムコード入力支援ボタンの押下による命令入力のたびに実行を可能にしたければ,エンターキー非再生アイコンの右側のチェックボックスをオフにしてください.

 

また,最初に見ていただく「使い方」のページも大幅に更新しました.

使い方

今後ともピクトグラミングをよろしくお願いします.

 

[ピクトグラミング] IE(Internet Explorer)でも他のブラウザと同じ操作でプログラムのダウンロード,生成画像およびアニメーションのダウンロードができるようになりました.

posted in: 更新情報, 開発者ブログ | 0

IE(Internet Explorer)でも他のブラウザと同じ操作でプログラムのダウンロード,生成画像およびアニメーションのダウンロードができるようになりました.これまで,多くの先生方からIE(Internet Explorer)の場合も,同じ操作でできるようにならないかという要望をいただいておりました.大変お待たせいたしました.

 

ちなみにそれぞれの操作は以下の通りです.

[プログラムコードのダウンロード]

(1)  作品名をテキストフィールドに入力します.

(2)プログラムコードダウンロードボタンを押すと,作品名.txtの名前でプログラムコードが保存されます.

[ショット画像のダウンロード]

(1)ショット画像ダウンロードボタンを押すと,作品名.pngの名前でショット画像が保存されます.

[アニメーションのダウンロード]

(1)アニメーションダウンロードボタンの右側にあるチェックボタンをオンにします.

(2)一度最初から最後まで実行します.ゆっくり実行されますが,内部的にはアニメーション画像が動的に生成されています.

(3)アニメーションダウンロードボタンを押すと,作品名.gifの名前でアニメーション画像が保存されます.

 

 

 

 

 

[ピクトグラミング] 情報処理学会 情報教育シンポジウム SSS2019において,題目”Picthon(ピクソン)-Pictogrammingを用いたPython言語の学習環境の提案–”で発表し,優秀発表賞を受賞しました.

情報処理学会 情報教育シンポジウム SSS2019において,題目”Picthon(ピクソン)-Pictogrammingを用いたPython言語の学習環境の提案–”で発表し,優秀発表賞を受賞しました.
Pictogrammingはコマンドに独自の記法を採用していますが,Python言語を使ってPictogrammingを利用できるように拡張しました.

Pythonは動的型付け,マルチパラダイムなどの特徴を有するインタプリタ型のプログラミング言語で,機械学習,データサイエンス,行列演算など,科学技術関連を中心に幅広い分野に関するライブラリが用意されており,近年,最も利用されているプログラミング言語の一つです.

Picthonは,Pictogrammingと同様にWeb公開する予定でいます.

論文はこちらからダウンロードできます.

表彰状をいただきました.タイトルのPictogrammingがPictgrammingと誤っているのはご愛嬌でしょうか.

[ピクトグラミング] 左手,右手,左足,右足の部位指定の追加

ピクトグラミングでは,体の色々な部位にペンを持たせて動きの履歴を描画する機能があります.しかしこれまで,手及び足の部分で描画する際には,その部位に相当する名称がなかったので,「前腕」あるいは,「下腿」を記述して指定していました.「前腕」や「下腿」など人型ピクトグラムの構成部品全体の名称と,「肩」「肘」など,構成部品の節点の名称での指定は,R,RW命令で自然でしたが,PEN命令ではやや不自然でした.

 

 

 

 

そこで,手足の部位指定を追加しました.

英語表記 英語 日本語 にほんご
LH LeftHand
lefthand
左手 ひだりて
RH RightHand
righthand
右手 みぎて
LF LeftFoot
leftfoot
左足 ひだりあし
RF RightFoot
rightfoot
右足 みぎあし

 

 

例えば,左腕を回転して円を描くプログラムは以下のようになります.

 

透明
ペン 持つ 左手
回転 左肩 360 1

もちろん「左手」ではなく,これまで通り「左上腕」でも描くことができます.

 

 

 

[ピクトグラミング]座標グラフィックス機能の拡張

ピクトグラミングでは,視点の異なる3通りの図形描画方式をサポートしています.図に例を示します.それぞれ,(a)ヒューマングラフィックス,(b)タートルグラフィックス,(c)座標グラフィックスと呼称しています.

 

前回は,(b)タートルグラフィックスの機能を拡張しましたが,今回,(c)座標グラフィックスの機能を拡張しました.

 

変更点は,

1. 線分の描画に時間の概念を取り入れた.

2. 回転,移動と同じく,「待ち」命令を取り入れた.

です.拡張した,座標グラフィックス関係の命令様式と処理内容は以下の表のとおりです.

これによりL命令は,第5引数に時間を指定できるようになりました.また,後ろにWをつけたLW命令を新たに追加しました.Wが付くか付かないかの挙動は,R,RW命令やM,MW命令と同様の対応関係になっています.

 

 

命令の様式 処理
L arg1 arg2 arg3 arg4 [arg5] 座標(arg1,arg2)から座標(arg3,arg4)までarg5秒かけて線分を描く.arg5が 省略された時は,arg5 に0が入力されているものとして取り扱う.
LW arg1 arg2 arg3 arg4 [arg5] 座標(arg1,arg2)から座標(arg3,arg4)までarg5秒かけて線分を描く.移動が終了するまで次の命令は実行されない.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う.

 

また各言語の表記は以下の通りです.

 

英語表記 英語 日本語 にほんご
L Line
line
せん
LW LineWait
linewait
線待ち せんまち

 

例えば,以下のような線画のアニメーションを,人型ピクトグラムを動作させることなく描画できます.

 

SC 0.5
PENW 30
PEN ROUND

L 0 -200 -200 0 1
LW 0 -200 200 0 1
L -200 0 -200 150 1
LW 200 0 200 150 1
L -200 150 200 150

 

 

[ピクトグラミング] タートルグラフィックス機能の拡張

ピクトグラミングでは,視点の異なる3通りの図形描画方式をサポートしています.図に例を示します.それぞれ,(a)ヒューマングラフィックス,(b)タートルグラフィックス,(c)座標グラフィックスと呼称しています.

 

今回,(b)のタートルグラフィックスの機能を拡張しました.

 

変更点は,

1. 移動や進行方向の変化に時間の概念を取り入れた.

2. 回転,移動と同じく,「待ち」命令を取り入れた.

です.拡張した,タートルグラフィックス関係の命令様式と処理内容は以下の表のとおりです.

これによりFD,BK,RT,LT命令は,第2引数に時間を指定できるようになりました.また,後ろにWをつけたFDW,BKW,RTW,LTW命令を新たに追加しました.Wが付くか付かないかの挙動は,R,RW命令やM,MW命令と同様の対応関係になっています.

 

命令の様式 処理
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
左回り待ち ひだりまわりまち

 

例えば最も一般的な,正方形を描画する命令は,以下です.これはこれまでもサポートしていました.

 

SK
SC 0.2
PEN DOWN
REPEAT 4
FD 100
RT 90
END

 

一方これに,FDとRTの第2引数に1を入力すると円になります.これは,「1秒間かけて,100等速で進みつつ,90度等加速度で回転する」を同時に4回繰り返すからです.

SK
SC 0.2
PEN DOWN
REPEAT 4
FD 100 1
RT 90 1
END

 

一方FDWとRTWにすると正方形になります.これは,「1秒間かけて,100等速で進み,そのあと1秒かけて90度等加速度で回転する.」を4回繰り返すからです.

SK
SC 0.2
PEN DOWN
REPEAT 4
FDW 100 1
RTW 90 1
END

 

(a) ヒューマングラフィックと同様,命令の組み合わせ方で様々な(b)タートルグラフィックスが描画できます.例えば,次のような命令を実行すると(図)に示すピクトグラムが作成できます.

SK
SC 0.2
PEN DOWN
FD 2000 4
REPEAT 2
RTW 360 1
LTW 360 1
RT 90
END

 

[ピクトグラミング] スタンプ(人型ピクトグラムの複製)機能の追加

以前から要望の高かった複製機能を追加しました.これにより複数の人型ピクトグラムを含むピクトグラムがより簡単に作成できるようになります.また,ピクトグラムを主要構成素とする様々なインフォグラフィックスの作成が期待できます.

ST命令で命令が実行される時点での人型ピクトグラムを描画できます.様式と処理内容は以下のとおりです.

命令の様式 処理
ST 命令が実行される時点での人型ピクトグラムを描画する.

 

各言語の表記は以下の通りです.

英語表記 英語 日本語 にほんご
ST Stamp スタンプ すたんぷ

 

例えば,次のような命令を実行すると(図)に示すピクトグラムが作成できます.

SC 0.3
MW -250 0
RW LUA -20
RW RUA 20
REPEAT 8
ST
MW 60 0
END

(図) World Peace

 

命令が実行される時点でのピクトグラムの状態がスタンプされますので,様々な姿勢の人型ピクトグラムを混在させることができます.プログラムを少し追記した場合の実行は以下の図になります.

SC 0.3
MW -250 -220
R LUA -360 3.2
R RUA 360 3.2
REPEAT 4
REPEAT 8
ST
MW 62.5 0 0.1
END
MW -500 150 0
END
SC 0

[ピクトグラミング] 安全に関するピクトグラムデザイン機能の拡張

安全に関するピクトグラムを作成する場合,これまでは,安全モード(S)が用意されていました.安全モードは,背景色は白色,人型ピクトグラム及び図形描画は緑色で表示されます.これは非常口サインを意識した配色でした.一方実際には,緑色背景に人型ピクトグラム及び図形描画が白色で表示される安全標識,と赤色背景に人型ピクトグラム及び図形描画が白色で表示される火気安全標識が主です.

そこで以下のように,安全に関する命令SG及びSRを追加しました.後方互換性のため,S命令の仕様は変更せず,新たにSG及びSR命令を定義しています.

命令の様式 処理
S 安全モード(Safety mode)以外で実行すると安全モードに変更する。 安全モードで再度命令すると通常モードに変更する。安全モード中に描画 した線画の色は人型ピクトグラムと同じ緑色となる。
SG 安全緑モード(Safety Green mode)以外で実行すると安全緑モードに変更する。 安全緑モードで再度命令すると通常モードに変更する。安全緑モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。
SR 安全赤モード(Safety Red mode)以外で実行すると安全赤モードに変更する。 安全赤モードで再度命令すると通常モードに変更する。安全赤モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。

 

英語表記 英語 日本語 にほんご
S Safety 安全 あんぜん
SG SafetyGreen 安全緑 あんぜんみどり
SR SafetyRed 安全赤 あんぜんあか

 

SG及びSR命令を使うことで,以下のようなピクトグラム(左 SG命令,右 SR命令)が作成できます.

 

 

 

 

[ピクトグラミング] 条件分岐命令の仕様を一部変えてみました.

posted in: 開発者ブログ | 0

ピクトグラミングでは,条件分岐命令をサポートしていますが,一般的な構造化プログラミング言語と同様の形式で,変数,(必要に応じて)関数,条件式の理解が必要であるため,比較的初学者には敷居が高いです.

例えば,ピクトグラミングの日本語命令で,50%の確率で手を振るようなプログラムを記述すると以下のようになります.

回転待ち 左肩 ー120 1
もし 「乱数(1,6) >= 4」  
回転待ち 左肘 ー90 0.3
回転待ち 左肘 90 0.3
終わり

IF(もし), ELSEIF(他でもし)の引数に条件式を記述した場合はこれまで通りですが,実数値を直接記述したときは,その確率で実行する様に仕様を変更しました.

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

 

例えば,上のプログラムは以下のように書き換えることができます.

回転待ち 左肩 ー120 1
もし 0.5
回転待ち 左肘 ー90 0.3
回転待ち 左肘 90 0.3
終わり

 

例えば下のプログラムは,左肘,右肘,右膝のいずれかをそれぞれ,40%, 42% ( (1-0.4)*0.7)) ,18%( (1-0.4)*(1-0.7)) の確率で動かします.

回転 左肩 ー120 1
回転待ち 右肩 ー120 1 
もし 0.4
回転待ち 左肘 ー90 0.3
回転待ち 左肘 90 0.3
他でもし 0.7 
回転待ち 右肘 ー90 0.3 
回転待ち 右肘 90 0.3 
他 
回転待ち 右膝 ー90 0.3 
回転待ち 右膝 90 0.3 
終わり