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

posted in: 開発者ブログ | 0

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

 

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

 

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

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

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

(1) R LUA -140 0

(2) R LUA -140 1

(3) R LUA -140 1 2

 

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

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

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

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

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

(3) は プログラムの実行、この場合 しばらくは回転せず、改行キーを押して2秒後から

1秒かけて反時計回りに140度回転しました。

 

R命令の様式と処理は以下のとおりでした.

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

 

 

 

 

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

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

 

1秒間かけて両腕と右脚を同時に上げるアニメーションが再生されます。では、両腕を上げてから右脚を上げるようにするにはどうすれば良いでしょう。そのためにRW(Rotate Wait: 回転待ち)命令というのがあります。

先ほどのプログラムの命令名RのところをRWに変えて実行してみてください。つまり以下の通りです。

 

RW命令の仕様を下に示します。ポイントは「回転が終了するまで次の命令は実行されない。」という点です。

 

命令の様式 処理
RW 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つのボタンを改めて紹介します。

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

 

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

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

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

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

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

 

繰り返し

 

例:手をあげる

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

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

 

 

 

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

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

posted in: 開発者ブログ | 0

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

 

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

Lesson1では「表示パネル」だけを使いました。今回からは、右側の「プログラム入力テキストエリア」を使います。

 

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

 

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

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

 

RW LUA 0 0

 

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

 

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

 

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

 

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

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

 

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

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

 

命令の様式

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

 

R arg1 arg2 arg3 arg4

 

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

 

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

 

部位の名称に慣れるまでは、人型ピクトグラムの部位をクリックすると「プログラム入力テキストエリア」に自動的に

R LUA 0 0

というように表示されますので、これを使っていきましょう。

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

 

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

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

 

変数を使ってみよう

 

お辞儀をさせてみる

突然ですが、お辞儀は3種類あるってご存知ですか?

・朝夕の挨拶やお出迎えの際の会釈

・お客様や目上の人に対して行う敬礼

・お詫びや深い感謝の際には最敬礼

会釈と敬礼と最敬礼では礼の角度が 15 度、30 度、45 度と異なります。

それぞれプログラムを書いて表してみたのが下の 表 です。

 

変数を使った作り方

上のお辞儀のプログラムを順に真似て作ってみたとき、お辞儀の角度を変えるためには、 お辞儀の角度を指定する数値を 3 箇所変える必要があります。そこでお辞儀の角度を 表す変数を定義してみましょう。変数とはその名の通り状態や状況によって「変わる数」です。みなさんもたくさん変数を持っています。年齢とか身長とか体重とかが代表的ですね。

 

変数の定義は、命令 SET を用います。命令 SET は引数が2つで、1つ目の arg1が変数を表現する文字列(識別子)で、2つ目の arg2 が代入する値です。

 

命令の様式 処理
SET arg1 arg2 変数 arg1 に arg2 を代入する.

 

 

SET :KAKUDO 15

「変数:kakudoに15を代入する。」と表現します。すると変数:kakudoを他の命令の引数としても使えるようになります。このプログラムの場合、以後お辞儀の角度を変更したい場合、15の値の部分だけ変更すれば良い訳です。ピクトグラミングでは英語の大文字と小文字は区別されないので、 :kakudo も :Kakudo も :kakUDO も :KAKUDO も同じ変数としてみなされます。

 

 

プログラムにあなたのコメント(メモ)をする

徐々に命令の数が多くなってきました。命令にコメントを書くことができます。 // の後ろの文字列は、無視をします。またコメントを使う時は必ず // の前後にスペースを入れてください。

 

 

挑戦状

2回目の挑戦状です。

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

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

 

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

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

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

 

 

 

チャレンジ2 変数を使ってピクさんのポーズを作ろう

変数 :KAKUDO を定義し、変数 :KAKUDO の値を変えると 以下のような姿勢に変化するピクさんを作成してください。

 

:KAKUDO が30                      :KAKUDO が90                   :KAKUDO が150

 

 

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

自由に作品を作ってみてください。ただし変数を使うこと

 

 

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

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

posted in: 開発者ブログ | 0

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

ピクトグラムの身体のいろいろな部分を動かしてオリジナルポーズを作れるようになろう。

 

やぁ。

トイレマークや、非常口マークのような人を、を動かしたり、歩かせたり、ポーズを作ってみたり、いろいろなことをします。

 

 

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

オリジナルのピクトグラムを作ってみましょう。ピクトグラミングで作ることができます。まずはピクトグラミングのWebサイトにアクセスしましょう。

トップページ

トップページの「はじめる / Start 」ボタンを押すと 下のような画面が出ます。Lesson1では画面の左側だけを使います。

 

 

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

表示されている人型ピクトグラムは、腕や脚など計 9 種の部位で出来ています。腕や脚など をマウスでドラッグして触ってみてください。選択した体の部位が回転します。しばらく触ってみましょう。

 

リセットのやり方

最初から作り直したくなったときは、右下にあるリセットボタンを押しましょう。ただし、それまで作ったピクトグラムのポーズは消えてしまいます。保存してからリセットしましょう。

 

 

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

では、何かテーマを決めてピクさんで表現してみてください。表現できたら、画像保存してみましょう。

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

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

 

 

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

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

 

 

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

[ピクトグラミング] IMCOM(International Conference on Ubiquitous Information Management and Communication) 2019にて,Mobile pictogrammingというタイトルで発表してきました.

posted in: 開発者ブログ | 0

2019年1月4日から6日まで開催された国際会議IMCOM(International Conference on Ubiquitous Information Management and Communication) 2019にて,Mobile pictogrammingというタイトルで発表してきました.

Pictogrammingはスマートフォン版も利用できますが,論文の形でまとめていなかったので,これを機にピクトグラミング自体の紹介も兼ねて発表してきました.

中学生以上ではほぼ全ての生徒,学生がスマートフォンを所持しており,スマートフォン対応であれば授業時間外でも時間制約なく利用できます.単純な図形である人型ピクトグラム一体を題材とし,さらに人型ピクトグラムの部位のドラッグ,命令入力支援ボタン,少ないテキスト入力文字数による命令記述をベースとしているので,スマートフォンのように表示領域が狭いデバイスあっても,視認性や判別性を損なうことなく,学習できる可能性を秘めています.現状,PC版のアプリケーションを元にレイアウト変更した程度ですが,今後,スマートフォンの様々な特性をうまく取り入れた機能を実装し,評価検証を行っていく予定です.

 

 

 

 

 

[ピクトグラミング] 頭(HEAD)の指定,及び頭の回転機能の追加

posted in: 開発者ブログ | 0

人型ピクトグラムの頭の形状は円です.ですので頭を回転しても見た目は変わりません.表記はしていませんでしたが,実は頭だけ回転命令は前から存在していました.

しかし,お面の装着機能を追加したことで,頭が回転するとお面の向きが変わります.そこで,頭だけを回転する命令を記述するための情報を公開します.

部位は HEAD (英語),頭(日本語),あたま(にほんご)です.

ちなみに例を作ってみました.

MS HAPPINESS
RW LUA -49 0
RW LLA 101 0
RW RUA 151 0
RW LUL -26 0
RW HEAD 50 0

 

 

[ピクトグラミング] PEN命令を更新しました.

posted in: 開発者ブログ | 0

ピクトグラミングでは,体の部位を使って線画を書ける機能があります.

これまで,

PEN  UP でペンを上げる(それ以降は描画しない).

PEN  DOWNでペンを下げる(それ以降は描画する).

でした.これはLOGOの命令に準じていました.しかし,ピクトグラミングでは人型のピクトグラムが描画するということで,上げる下げるというのがイメージしにくいという意識を持っていました.そこで,デフォルトを PEN RELEASE でペンを離す,PEN HOLDでペンを持つに変更しました.

日本語では 「ペン 離す」「ペン 放す」でPEN RELEASE,「ペン 持つ」でPEN HOLDになります.

ピクトグラミングでは後方互換性は維持しますので,今まで通り PEN UP, PEN DOWNでも動作します.

[ピクトグラミング] 命令入力支援機能の改良

posted in: 開発者ブログ | 0

ピクトグラミングでは,プロブラム記述領域に独自の言語仕様でテキストで入力していきます.

主要命令をボタン入力で補完するボタン群が画面下部に配置されているので,命令の記述がわからなくてもボタンに記述されている命令例をみたり,マウスオーバーすると人型ピクトグラムが吹き出しでその意味を教えてくれるので,使っていると小一時間もすると慣れてきます.

使っている様子を見るとたまにあるのが,命令の途中に保管した命令が挿入されてしまい,シンタックスエラーになる例です.次にその典型例を示します.|はカーソルです.

命令ボタンを押下して最初に入力した後に,

R LUA 90 1|

回転角度を変更しようとして,

R LUA 120| 1

と変更して,さらに続けて別のボタンを押すとカーソル位置に次のように命令が追加されて実行されてしまうため,シンタックスエラーが発生します.

R LUA 120RW LUA 90 1
|
1

そこで,命令ボタン押下時に追加される命令は必ず行頭から追加されるように修正しました.行頭以外にカーソルがある場合,次の行の先頭に,行頭にカーソルがある場合,その行の命令の前に命令が挿入されます.

よって先ほど例示した

R LUA 120| 1

の状態でRW LUA 90 1ボタンを押下すると,

R LUA 120 1
RW LUA 90 1
|

となります.

また例えば,
|R LUA 120 1

の状態でRW LUA 90 1ボタンを押下すると,

RW LUA 90 1
R LUA 120 1
|

となります.

挿入されたところに挿入するという動作にしてシンタックスエラーが存在することを表示するでも,それは一つのあり方で,これまではそういう方針だったのですが,シンタックスエラーをできるだけ発生しないような仕組みにしていこうと思います.
将来的には,ブロックプログラミング型の言語や,JavaScript,Pythonなどのプログラミング言語での入力もサポートする予定ですが,ピクトグラミングのシンプルな命令セットゆえの長所を生かした環境を作っていきたいと思っています.

[Pictogramming] Command MS(Mask) and PS(Persona) are now supported.

posted in: 開発者ブログ | 0

“MS” command and “PS” command are added to Pictogramming. Command set if as follows.MS stands for “Mask”, PS stands for “Persona”.

Human pictogram could not make facial expressions. So he expresses emotions by wearing the face mask.  And, human beings, who project human pictograms, can express various different emotions. So human beings express limited some kind of emotions by using persona this time.

 

Command Format Process
MS arg1
Wear the face mask to the human pictogram. The type of mask is designated by arg1.

Anger type face mask when arg1 is ANGER.
Disgust type face mask when arg1 is DISGUST.
Fear type face mask when arg1 is FEAR.
Happiness type face mask when arg1 is HAPPINESS.
Sadness type face mask when arg1 is SADNESS.
Surprise type face mask when arg1 is SARPRISE.
is worn respectively.

Also, the human pictogram takes off the face mask if arg1 is NONE.

PS arg1
Wear the persona to the human pictogram. The type of persona is designated by arg1.

Anger type persona when arg1 is ANGER.
Disgust type persona when arg1 is DISGUST.
Fear type persona when arg1 is FEAR.
Happiness type persona when arg1 is HAPPINESS.
Sadness type persona when arg1 is SADNESS.
Surprise type persona when arg1 is SARPRISE.
is worn respectively.

Also, the human pictogram takes off the persona if arg1 is NONE.

 

 

 

You can create such a pictogram like this.  The pictogram represents “Proibition of walking with smartphone”, which is previously shown is one expression.  The pictograms with information on how people in the surroundings feel are considered new type of pictogram expressions.