このページは東京都立大学にて開講している、2021年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。
ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．演習では主にProcessingとp5.jsを利用して行きます．授業は基本対面形式で行いますが、同時にzoomにてオンライン配信されます。配信リンクはkibacoのお知らせ欄を参照してください。
Robert J. Orr and Gregory D. Abowd. 2000. The smart floor a mechanism for natural user identification and tracking. In CHI '00 Extended Abstracts on Human Factors in Computing Systems (CHI EA '00). ACM, New York, NY, USA, 275-276. DOI=10.1145/633292.633453 http://doi.acm.org/10.1145/633292.633453
２ページの英文ショートペーパーです．ロードセルを利用したシンプルなユーザ識別装置に関する報告です．識別にはユークリッド距離を 利用しています．なお，ウェブで検索をするとフルペーパーも見つかるので，詳細はそっちで確認することをおすすめします．ユーザが歩いた際における圧力や時間，力の分散などを特徴量として学習済みの特徴量をf，入力データをf'（ダッシュ）とした場合，次のような計算で距離を求めると，様々な学習済みデータとどの程度入力データがことなるのかを計算できるようになります． 本講義でのもっとも基本的で重要な考え方なので，しっかり理解しましょう．
* Nearest Neighbor参考ページ：インタラクションデザインの為のパターン認識入門
Processing
// (x1, y1) -> male
int x1 = 165;
int y1 = 68;
// (x2, y2) -> female
int x2 = 160;
int y2 = 47;
void setup()
{
size(200,200);
}
void draw()
{
background(255);
fill(0,0,255);
ellipse(x1,y1, 10,10);
fill(255,0,0);
ellipse(x2,y2, 10,10);
fill(0,255,0);
ellipse(mouseX,mouseY, 10,10);
text("("+str(mouseX)+","+str(mouseY)+")", mouseX, mouseY);
float l1 = sqrt( (x1-mouseX)*(x1-mouseX)+(y1-mouseY)*(y1-mouseY) );
float l2 = sqrt( (x2-mouseX)*(x2-mouseX)+(y2-mouseY)*(y2-mouseY) );
if( l1 < l2 ){
line(mouseX,mouseY, x1,y1);
}
if( l2 < l1 ){
line(mouseX,mouseY, x2,y2);
}
}
python
x1 = 165
y1 = 68
x2 = 160
y2 = 47
def setup():
size(200,200)
def draw():
background(255)
fill(0,0,255)
ellipse(x1,y1,10,10)
fill(255,0,0)
ellipse(x2,y2,10,10)
fill(0,255,0)
ellipse(mouseX,mouseY,10,10)
text("("+str(mouseX)+","+str(mouseY)+")", mouseX, mouseY)
l1 = sqrt( (x1-mouseX)*(x1-mouseX)+(y1-mouseY)*(y1-mouseY) )
l2 = sqrt( (x2-mouseX)*(x2-mouseX)+(y2-mouseY)*(y2-mouseY) )
if l1 < l2:
line(mouseX,mouseY,x1,y1)
if l2 < l1:
line(mouseX,mouseY,x2,y2)
Processing
int data[][] = {
{'M', 164, 60},
{'M', 178, 80},
{'M', 168, 69},
{'M', 170, 58},
{'M', 165, 68},
{'F', 160, 47},
{'F', 155, 45},
{'F', 164, 60},
{'F', 170, 62},
{'F', 148, 40}
};
void setup() {
size(200, 200);
}
void draw()
{
background(255);
for ( int i = 0; i < 10; i++ ) {
if ( data[i][0] == 'M' ) {
fill(0, 0, 255);
} else if ( data[i][0] == 'F' ) {
fill(255, 0, 0);
}
ellipse(data[i][1], data[i][2], 10, 10);
}
float distance[] = new float[10];
for( int i = 0; i < 10; i++ ){
distance[i] = sqrt( (mouseX-data[i][1])*(mouseX-data[i][1])+(mouseY-data[i][2])*(mouseY-data[i][2]));
}
float min = 1000.0;
int id_min = 0;
for( int i = 0; i < 10; i++ ){
if( min > distance[i] ){
min = distance[i];
id_min = i;
}
}
line(mouseX, mouseY, data[id_min][1], data[id_min][2]);
fill(0, 255, 0);
ellipse(mouseX, mouseY, 10, 10);
text("("+str(mouseX)+","+str(mouseY)+")", mouseX, mouseY);
}
Processing Python
data = [
['M', 164, 60, 0],
['M', 178, 80, 0],
['M', 168, 69, 0],
['M', 170, 58, 0],
['M', 165, 68, 0],
['F', 160, 47, 0],
['F', 155, 45, 0],
['F', 164, 60, 0],
['F', 170, 62, 0],
['F', 148, 40, 0]
]
def setup():
size(200,200)
def draw():
background(255)
for each_data in data:
if each_data[0] == 'M':
fill(0,0,255)
elif each_data[0] == 'F':
fill(255,0,0)
ellipse(each_data[1], each_data[2], 10, 10)
fill(0,255,0)
ellipse(mouseX, mouseY, 10,10)
text("("+str(mouseX)+","+str(mouseY)+")", mouseX, mouseY)
for each_data in data:
each_data[3] = dist(mouseX, mouseY, each_data[1], each_data[2]) #sqrt( (mouseX-each_data[1])*(mouseX-each_data[1])+(mouseY-each_data[2])*(mouseY-each_data[2]))
sorted_data = sorted(data, key=lambda x : x[3])
line(mouseX, mouseY, sorted_data[0][1], sorted_data[0][2])
辻田 眸、暦本 純一（東京大学）
概要高齢化など様々な要因で，独居生活を選択あるいは余儀なくされている人は少なくない.孤 独な生活により感情状態が悪化し，うつ病や心の病にかかるなど深刻な問題である.一方，心理学者ウィリ アム・ジェイムズの言説で，「人は幸福であるが故に笑うのではなく，笑うが故に幸福である」という考え方 がある.これは笑顔形成が感情状態を向上させる可能性を示唆している.そこで本論文では，日常生活のな かで積極的に笑顔をつくることを促進し，感情状態の向上を支援するシステム「HappinessCounter」を提 案する.笑顔促進のために，ユーザが日常的に行う作業時に笑顔形成を促し，フィードバックを与えたり， ソーシャルネットワークサービスなどと連携させることで，より積極的に笑顔形成を支援し，感情状態の向 上を目指す.さらに試作したシステムを実際の日常生活で利用してもらい評価実験を行った.その実験結果 を示し，今後の展望を述べる.
この論文ではユーザの笑顔形成を促すシステムを提案していますが、笑顔を認識できることで可能となるシステムサービスの一例をプロトタイピングから示し、実際に被験者実験（アンケート調査、インタビュー）を行っています。デバイス周りの実装はこの授業では扱いませんが、笑顔を検出するシステムを実際に制作してみたいと思います。
まず、この回では p5.jsを利用して実装を進めて行きます。DOM（html上のオブジェクトを利用すること）は使用しないので、基本的にはProcessingと同じような文法になりますが、まずは下記リンクを参照して、Processingとp5.jsを比較します。
続いて、次のサンプルを利用してまずは手っ取り早く、FaceTrackerしてみます。以降はブラウザを必ずChromeにて実行してください．
上記サンプルの元になっているのが，https://github.com/auduno/clmtrackr です．こちらのサンプルでは単純なfacetrackerの他にマスク， サブスティチューション，表情認識等のデモを確認することができます．まずは各頂点情報を参照して，顔の各パーツを扱えるようにプログラムを工夫していきます．すでにexampleでは口の横の長さで笑顔度を計算する記述も含まれているので，うまく利用してみましょう．
なお，複数のカメラデバイスが存在しており，任意のカメラだけをオープンしたい場合は以下のページを参照してください．
授業を通じて，笑顔を認識するアルゴリズムからコーディングまで実装します．
この授業用の特別教材を準備しました．笑顔認識ができるようになったので，表情を認識させることができるようになりました．先の論文では冷蔵庫の開閉にインタラクションをデザインしていましたが，これをゲーム操作インタフェースとして応用してみます．スーパーマリオブラザーズを模したp5jsのコードをベースにして，表情認識でマリオを操作してみます．
Jianming Wu, Toshiyuki Hagiya, Yujin Tang, Keiichiro Hoashi（KDDI Research, Inc.）
This paper examines the effects of objective feedback of facial expression recognition on the operators of a video support chat system. We have built a facial expression feedback (FEF) system, which recognizes the users’ facial expressions, and displays a visual summary of the recognition results to the user, in order to raise self- awareness of his/her expressions during video communication. We evaluated our system in a supposed simulation of a call center, in which operators provide assistance to customers about how to use their smartphones. Experimental results have verified that our approach is useful to help operators improve their self-awareness of facial expression in the video support chat.
この論文は論文読解2と同様に表情認識を利用したものです。前者は冷蔵庫の開閉につなげ、今回はコールセンターにおけるセルフアウェアネス利用に関して議論をしています。セルフアウェアネスに関してはまずはこの記事を、もし興味をもったらhttps://www.amazon.co.jp/セルフ・アウェアネス-ハーバード・ビジネス・レビュー-EIシリーズ-ハーバード・ビジネス・レビュー編集部/dp/4478107963も読んでみるとよいでしょう。とはいえこの論文で議論しているのは広義なセルフアウェアネスではなく、顔表出感情に特化したセルフアウェアネス支援システムといった方が的確でしょう。
今回はすでにFaceTrackerを利用して表情認識ができるようになっているので、チャットシステムを自分たちでまずつくるところから始めたいと思います。p5jsには様々なチュートリアルが用意されていますが、まずは https://thecodingtrain.com/Tutorials/12-websockets/を参考に進めていきます。p5jsとnode.jsというものを利用して、ネットワーク間の通信を実現します。以下のページを参照して，簡単なチャットシステムを外部サーバ上にデプロイするところまでをやってみましょう．
ここではまずは実際にNeuralNetを自分でコーディングし，その振る舞いを理解した後に楽しいサンプルを触っていきます．
機械学習をjsで利用可能なライブラリml5に関してDanielがいくつかの動画を挙げてくれています。
授業では１つ目の動画を実際にたどりながらニューラルネットの基本原則を理解します。
実際に自分でニューラルネットを設計して実装していくのもよいですが、すでにGoogleによって超すごいフレームワークが提供されています。その名はTeachable Machineです。まずは以下の動画で実際になにを行うかをみて、自分でもやってみます。先で述べたml5.jsライブラリを利用して、training自体を簡単にできるようにまとめたものだと思ってください。
Deep Learningに興味をもって基本的なことや背景などをもう少し知りたい人には下記の書籍をオススメします
この回では、jsを利用して最終課題をコーディングしていく際、もう少しプログラミングそのものに焦点を充てて学習をしておいたほうが良いかと思います。基本的なjsの文法をさらったのち、実用的なプログラミングで役立つ機能を学習します。