JavaScpict ジャバスクピクト (ピクトグラミング JavaScript版) 使い方

 

画面の説明

画面は三つの部分から構成されます.左上は,ピクトグラムを表示する「人型ピクトグラム表示領域」,右上は,プログラムを記述する「プログラムコード入力領域」,下側はプログラムの入力を支援する「プログラムコード入力支援ボタン」です。

プログラムコード記述領域にプログラムを入力することで,人型ピクトグラムのポーズを変えたり動かしたりすることができます。また,「プログラムコード入力支援ボタン」を押すとその命令文を「プログラムコード記述領域」に追加できます.ピクトグラミングでは,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時間で学ぶジャバスクピクトからはじめてみましょう.

1時間で学ぶジャバスクピクト(ピクトグラミング JavaScript版)

 

作成コンテンツのダウンロード

 

作成したコンテンツのダウンロードは3通りあります。

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

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

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

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

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

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

(1)動画ダウンロードボタンの右側にあるチェックボタンをオンにします.

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

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

 

命令セット一覧

 

画面右上のプログラムコード記述領域に命令を入力し定義します.入力文字列は動作や状態を変化させるための「命令」コードと,引数列を空白で区切る以下の方式です.

pic.命令(引数1, 引数2 ....);

命令セット一覧 人型ピクトグラムの動きの変化を表現できる「ピクトアニメーション」,移動の経路が線で引かれることで図形を描く「ピクトグラフィックス」の2種類の命令から構成されています.また両方に共通して使用される変数定義,繰返し,条件分岐等の命令が用意されています.

ピクトアニメーション命令一覧

命令の様式 処理
pic.R(arg1, arg2, arg3, arg4); arg4 秒後にarg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する.arg4 が 省略された時は,arg4 に0が,arg3arg4 の両方が省略された時はいずれも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”の場合,怒りのお面
arg1 が”DISGUST”の場合,嫌悪のお面
arg1 が”FEAR”の場合,恐れのお面
arg1 が”HAPPINESS”の場合,喜びのお面
arg1 が”SADNESS”の場合,悲しみのお面
arg1 が”SURPRISE”の場合,驚きのお面
がそれぞれ装着される.
またarg1に”NONE”を指定すると装着しているお面を外すことができる.

pic.PS(arg1);
人に仮面を装着する.装着する仮面の種類はarg1で指定される.

arg1 が”ANGER”の場合,怒りの仮面
arg1 が”DISGUST”の場合,嫌悪の仮面
arg1 が”FEAR”の場合,恐れの仮面
arg1 が”HAPPINESS”の場合,喜びの仮面
arg1 が”SADNESS”の場合,悲しみの仮面
arg1 が”SURPRISE”の場合,驚きの仮面
がそれぞれ装着される.
またarg1に”NONE”を指定すると装着している仮面を外すことができる.

pic.SAY(arg1, arg2, arg3); arg3 秒後にarg1で指定される値をarg2秒だけ吹き出しで表示するarg3 が 省略された時は,arg3 に0が,arg2arg3 の両方が省略された時はいずれも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]); 座標(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(); 命令が実行される時点での人型ピクトグラムを描画する.

 

ピクトグラム表示領域でのマウス操作と処理の対応

ピクトグラミングでは,ピクトグラム表示領域上における様々なマウス操作により,対応した命令を自動的にプログラムを記述する領域に追加できます.

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

体の部位と表記の対応

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
右足

 

パーツ 部位