河合塾主催 2019年3月17日 千種校 親子でプログラミング体験!「ピクトグラムを動かそう!」開催のお知らせ (2月20日申込み開始) #ピクトグラミング #ピクトグラム #プログラミング

学校法人河合塾の主催で 2019年3月17日  親子でプログラミング体験!「ピクトグラムを動かそう!」が名古屋で開催されます.時間は11:00から13:00までの2時間で,場所は河合塾千種校(千種駅からすぐ)です.対象は新小学5年生,新小学6年生とその保護者の方先着25組50名です.講師はピクトグラミング開発者の伊藤一成です.河合塾のスタッフの方々がサポートしてくれます.参加費は無料です.

こちらのURIから2019年2月20日より参加申し込みできます.奮ってご参加ください.

https://www.kawai-juku.ac.jp/event/list/all-grades-tki/dtl0000009951

2019年度春季講習入会金全額免除,2019年度小学グリーンコース入塾金半額免除の参加特典もあります.今後他の都市でも開催予定です.

 

 

[ピクトグラミング] BPM(Beats Per Minute)命令を追加しました.

posted in: 開発者ブログ | 0

ピクトグラミングにBPM(Beats Per Minute)命令を追加しました.

 

命令の様式 処理
BPM arg1
BPM(Beats Per Minute)をarg1にセットする.初期値は60.

これにより,これまでR,RW,M,MWをはじめとした秒数に当たる引数を拍数とみなすこともできるようになりました.以下に例を示します.

RW LUA 90 1
BPM 120
RW LUA 90 1
BPM 30
RW LUA 90 1

同じRW LUA 90 1の命令でもテンポが異なるために動作速度が変わります.
命令名は英語ではBPMですが,テンポてんぽはくでもOKです.

回転待ち 左肩 90 1
テンポ 120
回転待ち 左肩 90 1
拍 30
回転待ち 左肩 90 1

 

リズム学習やリズム表現活動へのピクトグラミングの活用も進めていきます.

Lesson 7 人型ピクトグラム,アーティストになる

posted in: 開発者ブログ | 0

今回はこれまで学んだ内容を踏まえ自由に作品を作ってみましょう。 Lesson2 以降で使った人型ピクトグラムの体自身をその場で動かす命令である「ピクトアニメーション命令」と Lesson6 で使った人型ピクトグラムの動きの履歴で線画を描く「ピクトグラフィックス命令」がありました。この両者をうまく組み合わせると色々な作品を作ることができます.

 

次はレッスン8です.

Lesson 8 人型ピクトグラム,デザイナーになる

Lesson 5 意思決定する人型ピクトグラム

posted in: 開発者ブログ | 0

意思決定する人型ピクトグラム

条件式を書いてみよう

条件式とは、式の中でも条件を表す式のことを言います。例えば「もし変数の値KAKUDOが50より大きかったら実行する」というような表現を命令で表します。そのためには、IF命令を使います。

IF命令の様式と処理は以下の通りです.END命令とセットで用います.

命令の様式 処理
IF exp1 もし 条件式exp1が真ならば対応するENDまでの命令を実行する.
END 条件文,または繰返し,または定義の終了.

 

比較演算子

IF命令の引数には比較演算子を使った式を記述します。比較演算子には以下のものがあります。

比較演算子の様式 評価
A > B
A が B より大きい
A >= B A が B より大きいか等しい
A < B
A が B より小さい
A <= B A が B より小さいか等しい
A == B
A が B が等しい
A != B A と B が等しくない

 

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

RW LUA -140 1 // 左手を挙げる
IF [RAND(1, 6) >= 4] // もし 1~6 までの乱数が 4 以上なら
// 左手を振る
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 拍子の踊りをするプログラムを示します。何拍目かによって動きの変わります。

SET :HAKU 0
REPEAT 16
IF [:HAKU % 8 == 3] // HAKU を 8 で割った余りが 3 なら
RW LUL 90 0.2 // 左脚を上げ下げする
RW LUL -90 0.2
ELSEIF [:HAKU % 2 == 0] // その他の場合で HAKU が偶数なら
RW RUA 90 0.2 // 右腕を上げ下げする
RW RUA -90 0.2
ELSE // その他の場合は
RW LUA 90 0.2 // 左腕を上げ下げする
RW LUA -90 0.2
END
SET :HAKU [:HAKU+1]
END

プログラムの最後の行で HAKU が 1 増えます。 REPEAT 命令で、もう一度 一番上の行から実行されます。そのときには HAKU が変わっています。 ですから 実行される箇所が変わります。

算術式を書いてみよう

式とは、値、変数、演算子の組み合わせのことを言います。値と変数はこれまでに出てきました。例えば、

SET :DX 1

は変数 DX に値 1 を格納するという意味でした。演算子とは演算を表す記号のことをいいます。 例えば下にあるような+-*/% などです。特に計算のために用いる演算子なので算術演算子と呼ばれています。

算術演算子の様式 評価
A + B
A と Bをたす
A – B A から B をひく
A * B
A と B をかける
A / B A を B で割る
A % B
A をBで割ったあまり

 

繰り返しますが、式とは、値、変数、演算子の組み合わせです。 式の例を示します。

:DY + 0.05

 

引数に式を使うとき

[ ] という記号が出てきました。先に関数のところで使いましたが、[ から ] までの間が一つの引数であるという意味です。 引数の区切りは空白でしたが、式を書くと式の中に空白が入ることがあり、どこからどこまでが一つの引数かわからなくなるからです。よってピクトグラミングでは、式を表現するのに [ ] で囲っています。

命令の引数には式を記述することができます DX + 0.05DY に代入するというのは、

 

SET :DY [:DY + 0.05]

 

左上腕に対して KAKUDO の2倍の角度を(KAISU+1)の2倍の秒かけて回転するというのは、

 

R LUA [:KAKUDO * 2] [ (:KAISU + 1) * 2]

 

と書けます。

これまでに学んだ、変数、繰返しを使い, 条件式と関数を引数に使うことで,人型ピクトグラムが左右にジャンプを繰り返すプログラムを示してみます。

 

SC 0.3
SET :DX 1
SET :DY 0
REPEAT 1000
MW :DX :DY 0.02
SET :DY [:DY + 0.05]
IF [Y() > 200]
SET :DY [-1 * :DY]
END
IF [ABS(X()) > 300]
SET :DX [-1 * :DX]
END
END

 

挑戦状

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

 

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

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

 

チャレンジ2 ダンサー

30 拍からなるダンスをします。1 拍は 0.6 秒とします。最初は 1 拍目、最後は 30 拍目です。
(1) 3 の倍数でもあり、5 の倍数であるとき、つまり 15 の倍数の時は、最初の 0.3 秒で左腕を -120 度、 右腕を 120 度それぞれ同時に回転し、その後 0.3 秒で左腕を 120 度、右腕を -120 度それぞれ同時に 回転します。
(2) 15 の倍数ではなく、3 の倍数の拍目の時は、最初の 0.3 秒で左腕を -120 度回転し、 その後 0.3 秒で左腕を 120 度回転します。
(3) 15 の倍数ではなく、5 の倍数の拍目の時は、最初の 0.3 秒で右腕を 120 度回転し、 その後 0.3 秒で右腕を 120 度回転します。
(4) 3 の倍数でもなく、かつ 5 の倍数でもないときは、最初の 0.3 秒で左足を -10 度回転し、 その後 0.3 秒で左足を 10 度回転します。

チャレンジ3 ダンサー

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

 

次はレッスン6です.

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

 

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

Lesson 8 人型ピクトグラム,デザイナーになる

posted in: 開発者ブログ | 0

社会や身の回りに役立つピクトグラム

これまで,自由な発想で様々な作品を作成してきたと思います.今回は,社会や身の回りに役立つピクトグラムというのを作成してみましょう.下のピクトグラムは,いずれも安全図記号で指定されている図例です.さらに禁止,注意,指示,安全の4項目に関するピクトグラムデザインのガイドラインも策定されています.通常,世の中に広く普及しているピクトグラムは作成ガイドラインに則ってデザインされています.ピクトグラムで大切な事は誰にでも正しく伝わるという事なのです.ピクトグラミングでは通常のモードに加え,禁止(Prohibit),注意(Attention),指示(Instruction),安全(Safety, Safety Green, Safety Red) のピクトグラムを作るための6つのモードを備えています.

 

それぞれのモードには,単一の命令で変更することができます.

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

 

安全色を使った単純なピクトグラムを作ってみました。

SG

SC 0.8

R LUA -140 1

R RUA 140 1

 

たまにはこのピクト君のように、両腕を伸ばして体を伸ばし、体や心の安心に努めたいですね。2行目のSC 0.8はピクトグラムの大きさを標準の0.8倍にするという意味です。

 

動くピクトグラム

さて、世の中に溢れるピクトグラムはポスターなど紙媒体上で提示されているので基本は画像(静止画)です。一方最近では、デジタルサイネージ(電子掲示板)の発達により、街中でもアニメーションのピクトグラムを提示させることができるように技術的にはなっています。またスマートフォンなどは位置情報や無線によって、状況に応じて画面上に何らかの表示をすることができるようになっているので、静止画や動画のピクトグラムを表示させて、注意喚起や情報提供をすることができるでしょう。

ピクトグラミングは,静止画だけではなく動画(アニメーション)のピクトグラムを作成することができます。ぜひ、単なる静止画のピクトグラムではなく、オリジナルのアニメーションピクトグラムを作成してみましょう。

 

作品例

ピクトグラミングで作成したピクトグラムの例です.

        

 

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

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

posted in: 開発者ブログ | 0

ピクトグラミングでは3通りの方法で線画を描くことができます.まずは,体の部位を使って描く方法です.

 

1.体の部位を使って描く

PEN命令の様式と処理は以下の通りです.また描画する線の太さを変えるPENW命令もあります.

命令の様式 処理
PEN arg1 [arg2] arg1 がHOLDまたは,UPの場合,ペンを上げる.RELEASEまたは,DOWN の場合,ペンを下げる.arg1がHOLDまたはRELEASEまたはUPまたはDOWNの時に限り,ペンの上げ下げをする体の部位の名称をR,RW命令と同様の表記でarg2に指定できる.arg2が省略された場合は BODYが記述されているものと見なされる.ペンの両端について,arg1がSQUAREの場合,線の両端の形状は四角,arg1がROUNDの場合線,両端の形状を丸を付加する.arg1がBUTTの場合は両端に形状を付加しない.ペンの種類について,arg1 が NORMALの場合は実線を,ERASEの場合は線を消す,XORの場合はすでに描かれていた部分は消し,そうでない部分は描く(反転).

初期状態はペンが上がっている状態で,線の両端の形状は四角(SQUARE),ペンの種類はノーマル(NORMAL).

PENW arg1 ペンの太さ(幅)を arg1 にする.初期状態は15.

 

ペンを持つことができる体の位置は以下の9箇所です

サンプルを示します.

SK
PEN HOLD LH
REPEAT 4
RW LUA 90
END

で左手を使って四角形を描くことができます.

ちなみに1行目のSK命令は,人型ピクトグラムの体を透明にする命令です.描画の様子がわかりやすくなります.

命令の様式 処理
SK スケルトンモード(Skelton mode)以外で実行するとスケルトンモードに変更する。スケルトンモードで再度命令すると通常モードに変更する。

 

例えば,

SK
PEN HOLD LH
R LUA 360 1

で左手を使って円を描くことができます.

その他様々な工夫で色々な図形が描画できます.

これまで,R arg1 arg2 0  と RW arg1 arg2 0 は同じ命令でした.M arg1 arg2 0MW arg1 arg2 0 も同じです.しかし,R arg1 arg2RW arg1 arg2M arg1 arg2MW arg1 arg2 は,描画を伴う場合に以下のように異なる挙動となります.

時間0のR命令,M命令は,元の位置と,R命令,M命令からなる複数の命令の動きを全て実行したあとの位置を両端とする線分を描画します.

時間0のRW命令,MW命令は,元の位置とその命令を実行したあとの位置を両端とする線分を描画します.

 

この違いを例に示します.

SK
PENW 10
PEN HOLD LH
RW LUA 45
RW LUA 45

は下のようになります.左腕の初期位置から,左上腕を反時計回りに45度回転した位置まで線分を描きます.さらに左上腕を反時計回りに45度回転した位置まで別の線分を描きます.

SK
PENW 10
PEN HOLD LH
R LUA 45
R LUA 45

は下のようになります.左腕の初期位置から,左上腕を反時計回りに90(=45+45)度回転した位置まで線分を描きます.

よって

SK
PENW 10
PEN HOLD LH
REPEAT 8
RW LUA 45
END

は下のような正8角形を描きますが.

SK
PENW 10
PEN HOLD LH
REPEAT 8
R LUA 45
END

は何も描きません.なぜなら左腕の初期位置と,初期位置から左上腕を反時計回りに360(=45*8)度回転した位置は同じだからです.

同様に,

SK
PENW 3
PEN HOLD LH
M 100 0
M 0 100

は下のようになりますが,

 

SK
PENW 3
PEN DOWN LLA
MW 100 0
MW 0 100

は下のようになります.

 

 

2. 歩いて描く

次は歩いて描く方法です.人型ピクトグラムの体の部位を動かすのではなく、人型ピクトグラム自体を動かしましょう。みなさんもその場で体を動かすこともあれば、歩行して移動することもありますよね。歩行の履歴を使って色々な図形を描いてみましょう。

では早速、人型ピクトグラムを歩行させてみましょう。人型ピクトグラムが少し大きすぎるので、人型ピクトグラムの大きさを変えてみましょう。

 

SC 0.1
PEN HOLD

 

1行目の命令、これは人型ピクトグラムの大きさを 0.1 倍にするという意味です。

 

命令の様式 処理
SC arg1 人型ピクトグラムの拡大率をarg1にする.(初期状態は1)

 

動かすのに使う命令は以下の4つです。

命令の様式 処理
FD arg1 人型ピクトグラムを進行方向に距離 arg1 だけ進める.
BK arg1 人型ピクトグラムを進行方向と逆向きに距離 arg1 だけ進める.
RT arg1 人型ピクトグラムの進行方向を時計回り方向に角度 arg1 だけ回転する.
LT arg1 人型ピクトグラムの進行方向を反時計回り方向に角度 arg1 だけ回転する.

 

ちなみに最初の進行方向は上向きになっています。

SC 0.1
PEN HOLD
FD 100

SC 0.1
PEN HOLD
FD 100
RT 90
FD 100

というふうに描けます.

ではこの調子で続けて正方形を書いてみてください.

さらに右に曲がる角度と繰り返す回数を色々変えると様々な形を描くことができます。

 

 

3. 第3者視点で描く

最後は,あなたの視点で描く方法です.座標を直接指定して線が描きます.線分の両端の座標を指定して描くL,LW命令,楕円を描くO命令というのが用意されています,仕様は以下の通りです.

 

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

 

 

 

ピクトグラミングの座標系は次のようになっています.

 

例えば,次のようなエレベータピクトグラムは

以下のプログラムで記述できます.

PENW 10
L -200 -280 200 -280
L -200 280 200 280
L -200 -280 -200 280
L 200 -280 200 280
L 0 -320 0 -280
L 0 280 0 320

 

 

 

 

いずれの方法で描いた図形も,これまでに描いた図形を消す場合は、CS(Clear Screen)命令を使います。

命令の様式 処理
CS ペンによって描画された図形を消去する.

 

ピクトグラミングは視点の異なる3通りの方法で様々な図形を描けるのが特徴です.描画したい図形の性質に応じて適切な方法を使ってみてください.

 

次はレッスン7です.

Lesson 7 人型ピクトグラム,アーティストになる

Lesson 4 考える人型ピクトグラム

posted in: 開発者ブログ | 0

人型ピクトグラムに考えてもらおう。

 

これまでは、あなたが人型ピクトグラムに命令をしてきました。しかし、人型ピクトグラムも考えることができます。今回は人型ピクトグラムに考えさせるための方法を知りましょう。まずはそのための準備!人型ピクトグラムの位置を知りましょう。

 

ピクトグラミングの座標

中心が(0,0)でこれは人型ピクトグラムの初期位置です。

右上が( 320, -320)、

左上が(-320, -320)、

左下が(-320, 320)、

右下が( 320, 320)、

つまり

x軸正方向が右、

y軸正方向が下となります。

 

 

 

人型ピクトグラムはM命令またはMW命令を用いて体全体を平行移動することができます。

命令の様式 処理
M arg1 arg2 arg3 arg4 arg4秒後にarg3秒かけてx軸正方向に arg1ピクセル, y軸正方向にarg2ピクセルだけ全体を等速直線移動する.arg4が省略された時は,arg4に0が,arg3, arg4の両方が省略された時はいずれも0が入力されているものとして取り扱う.
MW arg1 arg2 arg3 arg3 秒かけてx軸正方向に arg1 ピクセル, y軸正方向にarg2 ピクセルだけ全体を等速直線移動する.直線移動が終了するまで次の命令は実行されない.arg3が省略された時は,arg3に0が入力されているものとして取り扱う.

 

人型ピクトグラムの画面上に、座標系を表示させることができます。

右上にある「座標系の表示」アイコンの右のチェックボックスをクリックすると有効になります。

例:人型ピクトグラムの位置を動かす

M命令の使用例です。

M -240 0

M 480 0 1

 

 

 

 

 

 

人型ピクトグラムに考えさせる方法

人型ピクトグラムは考える事ができます。ここでは人型ピクトグラムに考えさせる方法があります。その書き方を学びます。まずは、ランダムな数字を考えてもらう方法です。

 

ランダムな数を思い浮かばせる

人型ピクトグラムに命令するときに、今までは引数に数値を入力していました。その数値を人型ピクトグラムに考えてもらいます。それには関数を使います。関数の説明は、少し後にしますので、まずは具体的な例を見てみましょう。

 

関数の表記 機能 戻り値

RAND( min , max )

整数 min 以上
整数 max 以下のランダムな値を返す。

整数 min 以上
整数 max 以下のランダムな値。

 

ここではランダムな値を取得できる関数を使ってみます。

関数を使うときはその両側を[ ]で閉じます。

 

例:脚を回す人型ピクトグラム (関数の使い方)

 

REPEAT 50
RW LUL [RAND(-90, 90)] 0.2
END

「関数」は、与えられた文字や数字の組(引数の組)に対して定められた処理を行って結果(戻り値)を返す機能のことを言います。例えば「-90(度)以上90(度)以下の角度の1つ決めてください」という処理に対して「37」を結果として返すということです。対して、これまで学んできた「命令」は戻り値はありません。これが命令と関数の違いです。ピクトグラミングではいくつかの関数が定義されています。書き方も命令と少し異なります。ここではランダムな値を取得できる関数を使ってみます。

 

引数に関数を使って人型ピクトグラムを動かす

人型ピクトグラムに乱数を使って命令します。

 

例:ぶるぶる震えるピクさん (関数の使い方:引数に関数)

SC 0.3
REPEAT 1000
MW [RAND(-10,10)] [RAND(-10,10)] 0.02
END

 

例:ロボットダンス(関数の使い方:引数に関数)

REPEAT 50
R LUA [RAND(-90, 90)] 0.2 // 左腕を動かす
RW RUA [RAND(-90, 90)] 0.2
END

 

 

 

使用できる関数一覧

 

 

関数の表記 機能 戻り値

RAND( min , max )

整数 min 以上
整数 max 以下のランダムな値を返す。

整数 min 以上
整数 max 以下のランダムな値。

 

 

 

挑戦状

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

 

チャレンジ1 パタパタさせよう

 

次のプログラムを作ってみましょう。

 

(1) 次に示す(2)を50回繰り返してください。

(2) 0.1秒かけて-90度から+90度のいずれかの角度,左腕と右腕を同時に(その同じ角度だけ)動かしてください。ただし(2)でうごかす-90度から+90度のいずれかの角度は50回の繰返しで毎回ランダムで選ばれるようにしてください。

 

チャレンジ2     オリジナルピクトグラムをつくろう

自由に作品を作ってみてください。

ただし関数を使うこと。

 

レッスン5は2通りあります.簡単なバージョンは上のリンクをたどってください.

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

次のリンクは条件式を設定するのでやや難しくなってます.

Lesson 5 意思決定する人型ピクトグラム

 

 

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

 

 

 

 

 

 

Lesson 3 ピクトグラムアニメーション

posted in: 開発者ブログ | 0

ピクトグラムアニメーション

 

ピクトグラムアニメーションを作ろう

 

アニメーションさせてみよう

下に示す(1)~(2)の2つのプログラムを入力して、実行してみましょう。

そして、その2つの違いを観察しましょう

(1) RW LUA -140 0

(2) RW LUA -140 1

ちなみにプログラムを実行するには、再生ボタンを押します。

 

(1) は Lesson2でやりましたね。左手を上げている人型ピクトグラムになります。

(2) は 左手を上げている人型ピクトグラムになりますが、少し様子が違います。

徐々に手が上がりました。これはアニメーションです。

1秒間かけて左上腕を関節点を中心に反時計回りに-140度、

つまり時計周りに140度回転するという意味です。

 

RW命令の様式と処理は以下のとおりでした.つまりarg3の値を0以外の正の数にすることでアニメーションになります。

命令の様式 処理
RW arg1 arg2 arg3 arg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する.回転が終了するまで次の命令は実行されない.arg3が省略された時は0が入力されているものとして取り扱う.

 

 

タイミングを考えたアニメーション

では次に以下の2行からなるプログラムを記述して実行します。

RW LUA -140 1

RW RUA 140 1

 

 

1秒かけて、左腕を上げてから、さらに1秒かけて右腕をあげるのがわかります。

 

では、1秒間かけて左腕と右腕を同時に上げるようにするにはどうすれば良いでしょう。そのためにR(Rotate 回転)命令というのがあります。

先ほどのプログラムの一行目の命令名RW(回転待ち Rotate Wait)のところをR(回転 Rotate)に変えて実行してみてください。つまり以下の通りです。

 

R LUA -140 1

RW RUA 140 1

 

 

R命令の仕様を下に示します。ポイントは「次の命令も同時に実行される。」という点です。

 

命令の様式 処理
R arg1 arg2 arg3 arg1で指定される体の部位を反時計回りにarg2度だけarg3秒かけて支点を中心に等速回転する.次の命令も同時に実行される.arg3が省略された時は,arg3に0が入力されているものとして取り扱う.

 

同じ部位のアニメーション命令が 同時に実行される場合の注意

R命令は、「次の命令も同時に実行される。」されます。そのため、R命令では両腕が同時に上がりました。

R命令は、「次の命令も同時に実行される。」ということを注意しなければいけません。

 

例:手をあげる…?

R LUA -140 1

RW LUA -140 1

 

この命令を実行しても人型ピクトグラムは何も反応しません。

これは、左上腕(LUA)を140度1秒間で回転するのと

左上腕(LUA)を-140度1秒間で回転する命令が同時に

実行されるため、実際には両方が相殺されるからです。

 

例:手をあげる(3つの命令を同時に)

40(度)手をあげる命令を3つ実行します。

R RUA 40 1

R RUA 40 1

R RUA 40 1

この命令を実行するとどうなるでしょう?これは R LUA 120 1 と同一になります。

R命令とRW命令をうまく組み合わせることで人型ピクトグラムの様々なアニメーションが可能となります。

 

実行中のアニメーションを制御するボタン

ここまでの説明でアニメーションを作れるようになったので、実行中のアニメーションを制御する5つのボタンを改めて紹介します。

実行    早送り実行   一旦停止  再スタート   クリア

 

実行… プログラムを最初から実行します.

早送り実行… プログラムを最初から早送りで実行します.

一旦停止… プログラムの実行を一旦停止します.このボタンを押した瞬間の状態でピクトグラムは停止します.

再スタート…一旦停止した状態から再び実行します.

クリア…プログラムを消去します.

 

オリジナルアニメーションピクトグラムができたら【アニメーション画像の保存の方法】

レッスン1では、画像の保存方法、レッスン2では、プログラムの保存と読込みの方法を学びました。

レッスン3の今回は、アニメーション画像として保存する方法を学びましょう。

(1)  作品を表す名称を作品名としてテキストフィールドに入力します。この例では「走る人」です.

 

(2) 画面真ん中上部にあるビデオアイコンの右下のチェックをオンにして、一度実行します。するとピクトグラムが通常よりゆっくり動くはずです。これは実行しながら同時にアニメーション画像を作成しています。全ての動作が完了したら、アニメーション動画が完成しています。その後に、ビデオアイコンをクリックすると保存のダイアログボックスが出ますので,指定したフォルダに、デフォルトでは、「作品名.gif」のファイル名(この例では,「走る人.gif」)で保存されます。

 

 

とりあえず、世の中にあるようなピクトグラムを作りたい方へ

これ以降は、プログラミングの諸概念を学んでいく内容になっています。とりあえず、アニメーションを含むピクトグラムを作りたい方は、最終のレッスン8「人型ピクトグラム、デザイナーになる」へ進んでください。

 

Lesson 8 人型ピクトグラム,デザイナーになる

 

 

 

 

 

 

 

 

繰り返し

 

例:手をあげる

R LUA -140 1

と入力して改行キーを押すと左手があがります。

 

例:手を振る

手を振ってみましょう。友達と別れる時を想像してみてください。

RW LUA -140 1
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3

 

3回左前腕(LLA)を左右に振ることができました。では手を振ることを10回や50回にするにはどうしますか。同じ命令をたくさん記述することで実現できますが、プログラムがとても長くなってしまいますし、プログラムを見て何回振っているのかをすぐ確認することも難しくなります。そこで繰返しの処理を書く方法を学んでみましょう。「○○回やって」ということと同じです。使う命令は以下の2つです。

 

命令の様式 処理
REPEAT arg1 対応するENDまでの命令をarg1回繰返す.
END 条件文,または繰返し,または定義の終了.

 

 

例:手を振る(繰返しを使って)

上の「手を振る」の例を、REPEATを使って書き直します。

 

RW LUA -140 1
REPEAT 3 // 手を振るのを 3 回繰返す
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
END

 

さらに、前回学んだ変数の定義と組み合わせると、手を振る角度や回数を

変数で設定できるようになり、より柔軟なプログラムを書くことができます。

 

例:手を振る(変数を使って)

RW LUA -140 1
SET :ANGLE 60 // 曲げる前腕の角度
SET :NUM 3 // 手を振る回数
REPEAT :NUM
RW LLA -:ANGLE 0.3
RW LLA :ANGLE 0.3
END

 

挑戦状

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

さあ、人型ピクトグラムからの挑戦状に挑戦してみましょう。

 

チャレンジ1

次のようなアニメーションを作成してください

0秒目から1秒かけて 両腕を 上げる。

1秒目から1秒かけて 左腕を 下ろす。

2秒目から1秒かけて 右腕を 下ろす。

参考画像

 

チャレンジ2

次のようなアニメーションを作成してください。

ただし REPEAT 命令を用いること。

1 秒かけて左手を曲げて、続けて1秒かけて再び左手を伸ばす

ということを 10 回 繰り返す。

参考画像

 

チャレンジ3

繰返しを使った自由作品を作成してみましょう。

 

次はレッスン4です.

Lesson 4 考える人型ピクトグラム

 

 

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

Lesson 2 人型ピクトグラムに命令してみよう

posted in: 開発者ブログ | 0

人型ピクトグラムに命令してみよう

 

新登場!「プログラム入力テキストエリア」

Lesson1では「表示パネル」だけを使いました。今回からは、右上の「プログラムコード入力領域」を使います。

 

ピクトグラムに命令しよう

 

プログラム入力テキストエリアに文字を表示させる

まず、ピクトグラムの左腕をドラックして回転してしましょう。すると、「プログラム入力テキストエリア」に以下のように表示されます。

 

RW LUA 123 0

 

最初に命令の名前であるRWが記載されています。RWは回転(Rotate)の意味です。つぎの LUA というのは、体の部位を示しており、 この場合、左上腕( LUA : Left Upper Arm )の意味です。3 つ目の 123 は 123 度反時計回り に回転するという意味です。この値は、ドラッグして回転した角度によって変わりますね。4つ目の 0 は 0秒 で回転するという意味です。

 

Lesson1でいろいろな姿勢のピクトグラムを作りました。同様にピクトグラムを少しだけ動かしてみましょう。すると、プログラム入力テキストエリアに命令が追加されていきます。

 

下の例では、体全体(BODY)を反時計回りに7度 回転させています。それに続けて2行目で、左上腕(LUL:Left Upper Leg)を反時計回りに-33度、つまり時計回りに33度回転させています。

 

RW BODY 7 0
RW LUL -33 0
RW RLL -57 0

このように腕を回す や 体を回す のように指示することを命令といい、命令の集合を プログラムと呼びます。つまりあなたが画面上のピクトグラムに対して命令する訳です。

 

ピクさんはテキストでも命令できる

これまでピクトグラムを直接ドラックして動かしていましたが、プログラム入力テキストエリアに命令を打ち込んだ場合も同様に動かすことができます。その命令について教えます。説明では命令や体の部位は全て大文字で書いていますが、大文字でも小文字でも構いません。よってRW LUA 90 0でもrw lua 90 0でもOKです。

 

命令の様式

命令には様式があります。さっきまで使っていた RW という命令は、ある様式に従っています。その様式は、

 

RW arg1 arg2 arg3 arg4

 

です。始めのRWは回転を意味する命令の種類です。RWの次は引数(ひきすう)を指定します。引数とは、外部から与えられる数や文字のことを言います。あなたが人型ピクトグラムに命令をするとき、「回転(R)して。」だけでは、人型ピクトグラムは「どこを(左腕なの?右脚なの?)」や「どれだけ回転するの」と聞き返すと思います。つまり曖昧(あいまい)なく命令を実行するために与える数字や文字が必要です。その数字や文字を引数といいます。そこで arg1には体の部位を示す文字列を指定します。部位と文字列の表を参考にしてください。

 

部位の文字列 説明
BODY
LUA 左上腕
LLA 左前腕
RUA 右上腕
RLA 右前腕
LUL 左大腿
LLL 左下腿
RUL 右大腿
RLL 右下腿

 

次の arg2 では回転する角度を示します。反時計回りが正の値になります。よって負の値を使って時計回りの角度も表現できます。arg3は回転に要する秒数ですが,これは次のレッスンで説明します.

 

正式には命令の様式と処理は以下のようになっています.

命令の様式 処理
RW arg1 arg2 arg3 arg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する.回転が終了するまで次の命令は実行されない.arg3が省略された時は0が入力されているものとして取り扱う.

 

オリジナルピクトグラムができたら【プログラムの保存と読込みの方法】

プログラムの保存

レッスン1では、画像として保存する方法を学びました。レッスン2では、プログラムを作成しましたので、プログラムの保存方法を学びたいと思います。

(1)  作品を表す名称を作品名としてテキストフィールドに入力します。この例では「走る人」です。これは画像を保存する場合と同じです。

 

(2) テキストフィールドの右にある下向き矢印のあるアイコンを押します。すると保存のダイアログボックスが出ますので,指定したフォルダに,デフォルトでは,「作品名.txt」のファイル名(この例では,「走る人.txt」)で保存されます.

プログラムの読込み

画面の上の方の真ん中あたりにある上向き矢印のあるアイコンを押します。すると読み込みのダイアログボックスが出ますので,読み込みたいプログラムのファイルを読み込んでください.

 

挑戦状

2回目の挑戦状です。

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

さあ、ピクさんからの挑戦状に挑戦してみましょう。

 

チャレンジ1 同じ姿勢を作ろう

画像と同じ姿勢のピクさんを作りましょう。

ただし命令はキーボードで入力すること。

 

チャレンジ2 オリジナルピクさんを作ろう

自由に作品を作ってみてください。

 

では,次は動くピクトグラムを作成してみます.レッスン3に行ってみましょう.

Lesson 3 ピクトグラムアニメーション

 

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

Lesson 1 オリジナルピクトグラムを作ろう

posted in: 開発者ブログ | 0

オリジナルピクトグラムを作ろう

 

ピクトグラミングのサイトを開く

オリジナルのピクトグラムを作ってみましょう。ピクトグラミングで作ることができます。「ピクトグラミング」は,ピクトグラムの作成を通じて,プログラミングの諸概念や情報デザインについて学習できる統合型アプリケーションです.「ピクトグラミング」は,「ブロックピクトグラミング」「Picthon(ピクソン)」,「JavaScpict(ジャバスクピクト)」の派生アプリケーションもあります.授業利用にもぜひお役立てください.誰でも自由に利用できます.

まずは,こちらのURLにアクセスしてください.

 

https://www.pictogramming.org/

 

 

 

とりあえずマウス操作だけで,人型ピクトグラムにホーズをとってもらおう!

 

以下では,擬似言語のテキストで記述できる「ピクトグラミング」で作成する前提で解説します.トップページ(https://pictogramming.org/)のピクトグラミングを「はじめる」のボタンを押してください.

 

 

 

Scratchなどに代表される「命令が書かれたビジュアルブロック」を使ってピクトグラムを作成する「ピクトッチ」を使う場合は,ピクトッチを「はじめる」ボタンを押してください.こちらの方は初心者向けです.

 

 

 

では始めましょう.擬似言語で記述できる「ピクトグラミング」で作成する前提で解説します.

 

レッスン1では画面の左上のピクトグラム表示領域だけを使います。

 

 

はじめに,今回はプログラムを書いてではなく,マウスを使ってピクトグラムを作成しますので,標準でオンになっている「ドラッグ不可」の状態を解除します.下の画像にあるチェックボックスをオフにしてください.

 

 

人型ピクトグラムを触ってみる

表示されている人型ピクトグラムは、腕や脚など計 9 種の部位で出来ています。腕や脚など をマウスでドラッグして触ってみてください。可動する体の部位以外は透明になり,ドラッグすると関節を中心に回転します.回転する角度はリアルタイムに表示されます.また人型ピクトグラムの体を右ドラッグ(右ボタンを押してドラッグ)すると体全体が平行移動します.

しばらく触ってみましょう。次の図のように色々なポーズを取ることができます.

ピクトグラムを横向きにする方法

正面からでなく横から見た側面方向のピクトグラムを作ることができます。正面方向と側面方向は、ピクトグラム以外の白い領域のどこかにマウスカーソルを合わせてマウスボタンを長押しすると正面と側面が交互に変わります。

線を引く方法

ピクトグラムの無い部分をクリックして,ドラッグすると線分が描けます.ドラッグの間,始点と終点の座標が表示されます.

 

 

今作っているピクトグラムを最初からやり直す方法

最初から作り直したくなったときは、右下にある「全てクリア」ボタンを押しましょう。ただし、それまで作ったピクトグラムのポーズは消えてしまいます。プログラムの保存の仕方は次のレッスン2で紹介します。

 

 

 

オリジナルピクトグラムができたら【画像の保存の方法】

ピクトグラムができたら、画像として保存してみましょう。

(1)  作品を表す名称を作品名としてテキストフィールドに入力します。この例では「走る人」です.

 

(2) 画面真ん中上部にあるIMGと書かれたアイコンを押します。すると保存のダイアログボックスが出ますので,指定したフォルダに,デフォルトでは,「作品名.png」のファイル名(この例では,「走る人.png」)で保存されます.

 

「あなた自身が考えるオリジナルピクトグラムを作りましょう。

ぜひたくさん作ってみてください。」

 

では,次はマウスで姿勢を作るのではなく,命令を文字列で入力することでピクトグラムを作成してみます.レッスン2に行ってみましょう.

 

Lesson 2 人型ピクトグラムに命令してみよう

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