アゴを横にずらすしぐさが意味すること

顎を横にずらすしぐさは適応行動と呼ばれる、ストレスを和らげたいときに現れる行動の一つであると考えられる。仕草の直後に発せられる言葉にストレスを感じている可能性が高く、嘘を見抜くための目印にすることができるかもしれない。

　人間の感情は表情に出るというのは周知の事実です。ポールエクマン博士という感情と表情に関する先駆的な研究を行ったアメリカの心理学者がいます。

博士の研究で"普遍的"とみなされたのは「怒り、嫌悪、恐怖、喜び、悲しみ、驚き」の6つの感情と表情とのつながりでした。

 私はHuluの「Lie to me」というドラマで表情分析学という分野があることを知って以来、人の表情がどんな感情を持っているのかについて興味を持ってきました。

今回は顎を横にずらす仕草とそれがどんなことを意味するのかについて書きます。

SMAPの謝罪会見で気になった表情

　実は1年ほど前のＳＭＡＰ解散騒動の際に見かけた表情の中で、ずっと気になっていた表情がありました。下の動画の2:23に出てくる木村拓哉氏の表情を見てください。

一瞬だけ顎を横にずらすという仕草が出てきます。

謝罪会見を持ちだしたのは、私がSMAP解散や木村氏についてどうこう言いたいからではなく、単に表情・しぐさを分析することが目的です。

顎を横にずらすという仕草

「自分たちは..(顎を横にずらす)...何があっても前を見て、ただ前を見て進みたいと思っています」

この放送をリアルタイムで見ていた時から、なんで一瞬あんな仕草をしたんだろうと気になっていました。しかし、顎を横にずらす仕草の意味を検索しても、顎関節症の記事しか出てこず...

どうしても気になったので、試しに英語で検索してみたところ、参考となりそうな記事が見つかりました。下の記事です

参考記事の内容

元FBIの対スパイ捜査官のジョー・ナバーロ氏の経験が記事に書いてあります。

I first observed this behavior in 1975, while working as a police officer. While interviewing an individual accused of shoplifting I noticed he shifted his jaw to the side when I asked the question, “Have you been arrested previously for shoplifting?” After some consideration he answered, “No.” Something struck me about that jaw behavior that prompted me to ask a follow-up question, “That’s not accurate is it?” The man did the behavior again, shifting his jaw to the side, but this time he smiled. And with that, he said, “Yes, I have been arrested before.”

要約すると、

万引きの事情聴取の時、今までに万引きで捕まったことがあるかと尋ねた際、容疑者は顎を横にずらし少し思案した後「捕まったことはない」と答えたが、さらに追及してみるとそれは嘘だった。

と書いてあります。

なぜこのような仕草をするのかという疑問について、次のように書いてありました。

Why do we do this peculiar behavior? I think in part it helps to relieve stress. I know that when I do it the nerves in my jaw are stimulated (you can try this and see how it feels). When we stimulate nerves, (what I call pacifying behaviors and others call adaptive behaviors) even artificially, this helps to calm and soothe us. This is why we wring our hands and stroke our hair or massage our necks and temples when we are stressed. These external stimuli help us to calm ourselves. Which also explains why people under stress often increase their gum chewing. 

要約すると、

適応行動とよばれるこの独特な行動は、顎の神経が刺激されることで部分的にストレスを和らげる効果があるようだ。ストレスを受けた時、髪をなでたり、ガムを噛んで落ち着くのと同様だと考えられる。

ということでした。

なぜ木村拓哉氏はあの仕草をしたのか

元FBI捜査官の記事からわかることは【顎をずらす仕草】＝【ストレスからの逃避】です。とりわけ仕草の直後に述べられたことに注意しなくてはならないことも分かります。

以上のことから、木村拓哉氏がなぜあのタイミングで顎を横にずらしたのかということについて、

 『何があっても解散しない』とコメントすることにためらい・抵抗の気持ちがあったから

 だと解釈しました。

もし、あなたが話している相手が顎を横にずらした後なにかを言った際には、本当にそう思っているのか？それは真実なのか？もう少し詳しく話を聞いた方がいいですよ！

この珍しい仕草はまだまだデータが少なく、元FBI捜査官がそういっているからという根拠しかありません。この仕草に関するデータをついて見つけ次第、追記していこうと思います。専門家の方からのコメントもお待ちしています。

よかったら❤️くださいhttps://t.co/pOpGyaXdU4

— ikepon (@ikepon_com) 2017年2月28日

processing.jsで流れに従う自律エージェントを作る-プログラミングはYouTubeで学ぶ-

今回は簡単に人工知能（ＡＩ）っぽいものが作れてしまう自律エージェントというシステム作りました。

小さな自律式ロボがちょろちょろ動き回るのは見ていて可愛いものがあります。

 自律エージェントのベースとなる考え方も、私たちの何気ない意思決定行動の原理と近いため難しくないです。

ぜひ、制作物と自律エージェントの概念だけでも見ていってください。

制作物ー流れを読む自律ロボー

英語ではFlowField Followingというプログラムです。日本語すると難しく聞こえてしまいますね。ロボたちを見ていると誰についていくわけでもないのに、帯のような流れができることが分かります。

重くなったら</>を押して再生を止めてください。

線を消してみると、より不思議に見えますよ！（スマホでは操作できません）

本当は流場も変更できたのですが、コードの共有サイトがその操作を扱えませんでしたorz

自律エージェントのポイント

自律エージェントの定義は次の3つです。

• ・限られた環境しか認識できないこと
• ・環境を調査し、自らのルールに基づき次の行動を決めること
• ・リーダーや全体のまとめ役がいないこと

具体的にタクシーに当てはめて考えると、次のようになるでしょう。

• ・運転手は自分の視界に入るものしか認識できない
• ・客をのせて目的地にいくときには、自分の経験に基づいて通るルートを決める
• ・配車オペレータがいない、カーナビを使わない

この3つのルールをプログラムに翻訳して、自律ロボをつくっていきます。

自律ロボのプログラムを読み解く

今回のプログラムの柱となるクラスが2つあります。

• FlowFieldクラス --- 場の流れを作る
• Vehicleクラス --- 自律ロボの設計図

その中でも、Vehicleクラスのfollow()が重要な部分です。

今の運動状態から、目指す場所に行きたいときにどんな力をくわえてやればよいか？ということがPVector.sub()のところで求めることができます。

  void follow(FlowField flow){

    //現在地の場の流れをlookup()で受け取り、そのベクトルがdesireになる

    PVector desired = flow.lookup(location);

    //各ロボには最高速度がランダムに設定されている。

    desired.mult(maxspeed);

    //必要なベクトル = 行きたい方向のベクトル - 今の速度ベクトル

    PVector steer = PVector.sub(desired, velocity);

    //各ロボにはくわえることができる力が決められている

    steer.limit(maxforce);

    applyForce(steer);

  }

前述の自律エージェントに対応させると環境は場の流れ。ロボの認知は現在地の場の流れに限られており、次の行動決定も場の流れと、自分の最高速度、最高加速力の範囲で行います。リーダー存在しません。

自律エージェントの教材

チャンネル登録者数20万人を超えるチャンネル【The Coding Train】のThe Nature of Codeの第6章が今回の教材です。6.1章に自律エージェントの基礎、6.4章にflowfieldの説明が出てきます。見本となるコードはThe-Nature-of-Code-Examples/chp06_agents · GitHubにあります。

ひとことコメント

簡単なルールで複雑な動きをシミュレーションできるのが、自律エージェントの面白いところだと思います。次も、自律エージェントを使ってなにか作ろうと思います！

関連記事

p5.jsできれいな花火をつくる-プログラミングはYouTubeで学ぶ-

今回のモチーフは花火です！

季節はまだ春にもならない2/21ですが...

前に、javascriptで花火を30分で作る方法みたいなのを見たことがあって作ってみたかったんですよね。季節外れではありますが、結構かわいい花火が作れるので、是非参考にしてみてください。

今回の完成品

重くなったら</>を押して再生を止めてください。

ずっと見てられる(・ω・`)　今年は花火見に行きたいですね。

もう少し工夫を凝らして、ハート型とかアサガオ型とか作ってみたいけど、どうすればいいんだろう？？

花火のポイント

①花火はベクトルの等加速度運動をつかって表現しています。

マイナスの速度ベクトルを持ったVyベクトルが0またはプラスとなった時に爆発するようになっています。

②あとは花火にlifespanを付け、lifespan<0となった花火は配列から削除することで、役目を終えた花火がいつまでも残り続けないようにしました。これで、時間が経つにつれて処理速度が落ちてくるのを防ぎました。

③花火がチラチラ瞬く効果もつけています。1draw毎に35%の確率でパーティクルが描画されるようにすることで表現しています。

今回の教材

www.youtube.comチャンネル登録者数20万人をこえるチャンネルThe Coding Trainのコーディングチャレンジ第27回が教材です。動画の後半に出てくるprocessing.js版は3Dバージョンの花火を作っています。そちらもおすすめです。

まとめ

花火を作ってみる人は、ぜひハート型の花火に挑戦してみてください！

関連記事

Node.js+Socket.io+p5.jsで双方向通信ペイントをつくる-プログラミングはYouTube動画で学ぶ-

今回はNode.jsとSocket.ioを使ってサーバーとクライアントの双方向通信を可能にしたペイントを作ります。WindowsでNode.jsを始めてやったのですが右も左も分からない状況で、エラーが出ずに動くようになるまで大変でした。参考にした記事も載せておくのでWindowsの方は参考にしてみてください。

完成品するとこんな感じに

今回の教材

チャンネル登録者数20万人を超えるThe Coding Trainの第12シリーズ「Web Sockets and p5.js Tutorial」です。メインは12.2の後半から12.4までで、前半はNode.js+Socket.ioのインストール方法などについて触れています。動画ではMacを使っているようです。

Node.jsを動かすまでにやったこと

Windows の Node.js 開発環境構築 最小手順 - Qiita

この記事に書いてあることを全部実行しました。そうすると「npm install」でのエラーが出なくなりました。

さて、作業フォルダを新しくつくったら、次はpackage.jsonを作ります。package.jsonでプロジェクトの内容や依存性が分かります。

余談：コマンドプロンプトはフォルダ内で「Shift + 右クリック」から開けます。

package.jsonを記述する

ここは教材の動画のように「npm init」で作成すると簡単です。結果はこのようになります。

後からdependenciesの場所にExpressとsocket.ioについて追記します。すると作業フォルダ内でコマンドプロンプトを開き、「npm install」をするだけで勝手にフォルダ内に「node_modules」が作成され、依存関係にあるパッケージがインストールされます。これでSocket.ioとExpressの準備もできました。

フォルダの構造

<作業フォルダ>

  |---- package.json

  |---- server.js

  |----< node_modules >

  |----< public >

           |---- index.html

           |---- sketch.js

           |----< libraries >

                    |---- p5.js

                    |---- p5.dom.js

                    |---- p5.sound.js

最終的にはこんな感じになります。

サーバー側の記述（server.js）

いちおう日本語でコメントを付けてみました。サーバーはクライアントから受け取ったdataを全員に送信しています。

ソケットの部分が今回のポイントです。分かりやすい例えがあったので紹介します。

現実世界の例とSocket.IOの比較

管理人	Socket.IOサーバ
建屋	Socket.IOモジュールまたはSockets
部屋	Socket
人	クライアントまたは接続Id
入室	Connect
会話	Emit
特定の人	Socket(Id)
部屋の全員	Socket.Broadcast
館内放送	Sockets.Emit
話題	On, Emitのイベント名

引用：Socket.IOでリアルタイム双方向通信(その１)

クライアント側（index.html）

index.htmlにはクライアント用のSocket.ioのJSファイルを参照するように<script>を記述するだけで完了です。p5.jsのライブラリはこちらからダウンロードできます。

p5.jsでペイントプログラムを書く（sketch.js）

マウスがドラッグされたときに、色がついた円を描画するプログラムです。同時にソケットを通じて、マウスの座標と色の情報をもつオブジェクトをサーバーに送信することで、サーバーがブロードキャストしてくれます。また、サーバーから受け取った座標と色をもとに円の描画もしています。

以上ができたら、コマンドプロンプトで「node server.js」と入力し、いくつかのブラウザから「localhost:3000」にアクセスしてみましょう。

こんなんが描けました。

まとめ

やってみたらSocketの使い方は案外理解しやすかったです。他のプログラムにも簡単に応用できそうですね！

関連記事

p5.js/processing.jsでプログラミングを始めるために必要なもの

p5.jsとprocessing.jsをつかったプログラミングに興味を持たれた方のために、p5/processingの始め方を紹介します。つまずいてしまうことが多いところなので、分からなかったら質問してください。

最も簡単な方法

OpenProcessingに直書き

OpenProcessingとはprocessingで書かれたプログラムを共有するWebサービスのことです。この方法だと何も用意する必要はないので、一番手っ取り早い方法です。スマホやタブレットからでも可能です。

　最初にOpenProcessingにアカウントを作成(Join)し、コードを書く際には「+Create a sketch」を押すことで新しいプログラムを作ることができます。p5.jsとprocessing.jsの切り替えはSettings > Modeで行うことができます（下の画像を参照）。作った後で作品（スケッチ）を公開するのもコピペでできるので楽です。

利点：アカウント作成後すぐに始められる。欠点：ブラウザが落ちたら保存していないコードが消える。

　私はブラウザが固まって動かなくなった場合のことを考えて、コードを記述するのはエディタを使った方がいいと思います。だって一生懸命かいたコードが消えた時のショックを考えたらね....

PC版：基本の始め方（実行はオフラインでも可能）

OPだけでするのも悪くはありませんが、PCでp5/processingを始める標準的なやり方を紹介します。

必要なものは以下

• エディタ
• ライブラリ
• ブラウザとデベロッパーツール

1. エディタ

好きなものを使っていただいて構いません。最悪テキストでも。私はAtomにp5.js用の補助ツールを入れて書きやすくしています。ここは本筋ではないので次に行きます。

2. ライブラリをダウンロード

　p5.jsを実行するのに必要なライブラリをダウンロードします。p5.js completeを選べば間違いないです。その中で重要なのは次の３つのファイルです。

• p5.js
• p5.dom.js
• p5.sound.js

minとついているものがあれば、それは空白や改行を消して圧縮してあるものです。普通に使うのであれば上記の3つを使えばよいとおもいます。

この3つのファイルは「libraries」というフォルダに入れておきます。

「index.html」「自分が作った.jsファイル」「libraries」はこのように配置します。

「index.html」はheadタグの中にlibrariesにある3つのファイルを参照するように記述してあります。もちろん自分が書いた〇〇.jsも参照するのを忘れずに。

processing.jsの場合

　今までの話はp5.jsを使うときのやり方の事でした。processing.jsを使う場合、私はライブラリはダウンロードせずに、書いたコードはOP上で実行しています。というのもprocessing.jsの場合、HTMLファイルの方に

 <canvas data-processing-sources="processing.pde"></canvas>

というめんどくさいことを書かないといけないからです。説明を省略するため、ライブラリをつかった実行の仕方はQiitaを参考にしてください。processing.jsのライブラリはコチラからダウンロードできます。

3. Chromeブラウザのデベロッパーツール

index.htmlを右クリックすると、プログラムから開く>Google Chrome、という風に開くブラウザが選択できます。

Chromeで「ctrl + shift + i」を押すとデベロッパーツールが出てきます。console.log()で様々なことが観察できるのでぜひ使ってみてください。

ライブラリをダウンロードする手間を省く（CDN）

CDN（コンテンツデリバリーネットワーク）という仕組みを使うことで、ライブラリをダウンロードする手間を省くことができます。具体的にはhtmlファイルのscriptタグを以下のように書き換えることで実現できます。

srcの部分が「https://~」という風に書き変わっています。自分の用意したlibrariesフォルダを参照するのではなく、どこかのサーバーにおいてあるp5のファイルを用いる方法です。

• p5.jsのCDNはコチラから
• processing.jsのCDNはコチラから

スマホ・タブレットで始めるには

私は普段PCで作業していますが、アプリ版でも幾つかよいのがあったので紹介していおきます。

iOS(iphoneやiPad・iPod touch)の場合

p5.js用の開発アプリ...p5* (提供者：Shinya Fujino氏)

processing.js用の開発アプリ...Processing iCompiler for iOS (提供者：Frogg GmbH氏)

Androidの場合

p5.js用の開発アプリ...残念ながら見つからず

processing.js用の開発アプリ...APDE-Android Processing IDE- (提供者 CalsignLabs社)

関連記事