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.

[ピクトグラミング] 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.

 

[ピクトグラミング] お面命令と仮面命令を追加しました.

posted in: 開発者ブログ | 0

ピクトグラミングに「お面」命令と「仮面」命令を追加しました.命令セットは以下の通りです.MSはMaskの略,PSはPersonaの略です.
人型ピクトグラムは,表情を作ることができません.ですので,お面を装着することにより感情を表出するようにしました.また人型ピクトグラムに投影する人間は,人型ピクトグラムを異なり多様な感情を表出可能ですが,今回は仮面を装着することで限定的ですが感情を出力できるようになっています.

命令の様式 処理
MS arg1
人型ピクトグラムにお面を装着する.装着するお面の種類はarg1で指定される.

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

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

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

 

英語と日本語,「にほんご」の命令の対応は以下の通りです.

 

英語表記 英語 日本語 にほんご
MS Mask お面 おめん
PS Persona 仮面 かめん
ANGER Anger 怒り いかり
DISGUST Disgust 嫌悪 けんお
FEAR Fear 恐れ おそれ
HAPPINESS Happiness 喜び よろこび
SADNESS Sadness 悲しみ かなしみ
SURPRISE Surprise 驚き おどろき

 

こんな感じのピクトグラムも作成できます.以前にアップした「歩きスマホ禁止!」も一つの表現ですが,周囲の人々がどう感じているかいう情報を含めたピクトグラムというのも新しいピクトグラム表現の一つとして考えられますね.

これは,学生の発案による卒業研究成果に関する実装を取り入れたものです.研究成果は2019年3月に学会発表される予定です.