lecture:インタラクションデザイン演習実習i:2022 [Design Workshop]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 2022年度インタラクションデザイン演習実習Ⅰ ======
  * [[https://tetsuakibaba.jp/tmu/InteractionDesign2020/?fbclid=IwAR08gAL8Yfs4yZHTsKW9wUdjrR2ohKn0eapW55zTPBl3gsUvwLFeXSLE92U|2020年度の授業成果公開ページ]]

<WRAP center round important 60%>
このページは東京都立大学にて開講している、2022年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。
</WRAP>

 ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．演習では主にp5.jsとArduinoを利用して行きます．授業は講義形式はオンラインで、ハードウェアを扱う場合は対面で、企業共同実習は対面で開催します。配信リンクはkibacoのお知らせ欄を参照してください。


====== 論文読解１：The smart floor： a mechanism for natural user identification and tracking ======

[[http://www.cc.gatech.edu/fce/pubs/floor-short.pdf|Short Paper]]
>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参考ページ：[[http://tetsuakibaba.jp/workshop/PatternRecognition4InteractionDesign/main.html|インタラクションデザインの為のパターン認識入門]]

==== 2つの値（身長体重）と入力データ（マウスポインタ座標）の距離を計算してラベルづけを行うサンプル ====
<WRAP group>
<WRAP half column>
Processing
<code c++ simple_kNN.pde>
// (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);
  }
}
</code>
  
</WRAP>

<WRAP half column>
python
<code py simple_kNN.pyde>
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)
</code>        
</WRAP>
</WRAP>

<file js p5js.js>
var x1 = 165;
var y1 = 68;

var x2 = 160;
var y2 = 47;

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(220);
  fill(0,0,255);
  circle(x1,y1, 10);
  
  fill(255,0,0);
  circle(x2,y2,10);

  fill(0,255,0);
  circle(mouseX, mouseY, 10);
  
  fill(0);
  text(`(${mouseX},${mouseY})`, mouseX, mouseY);
  
var l1 = sqrt( (x1-mouseX)*(x1-mouseX)+(y1-mouseY)*(y1-mouseY) )
    var 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)
    }
}
</file>

==== データ数を増やしてみる ====
<WRAP group>
<WRAP half column>
Processing
<code c kNN.pde>
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);
}

</code>
</WRAP>

<WRAP half column>
Processing Python
<code py kNN.pyde>
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])
         
</code>
</WRAP>
</WRAP>

<file js p5js.js>
var data = [
  { gender: "M", height: 164, weight: 60},
  { gender: "M", height: 178, weight: 80},
  { gender: "M", height: 168, weight: 69},
  { gender: "M", height: 170, weight: 58},
  { gender: "M", height: 165, weight: 68},
  { gender: "F", height: 160, weight: 47},
  { gender: "F", height: 155, weight: 45},
  { gender: "F", height: 164, weight: 60},
  { gender: "F", height: 170, weight: 62},
  { gender: "F", height: 148, weight: 40}
];

function setup(){
  createCanvas(200,200);
}

function draw(){
  background(255);
  
  for(d of data){
    if( d.gender == 'M'){
      fill(0,0,255);
    }
    else if( d.gender == 'F'){
      fill(255,0,0);
    }
    circle(d.height, d.weight, 10);
  }
  
  fill(0,255,0);
  circle(mouseX, mouseY, 10);
  fill(0);
  text(`(${mouseX},${mouseY})`, mouseX, mouseY);
  
  for( d of data){    
    d.distance = dist(mouseX, mouseY, d.height, d.weight);
  }
  
  //data.sort((a,b) => a.distance - b.distance);
  data.sort(function(a,b)  {
    if( a.distance -b.distance < 0){
      return -1;
    }
    else{
      return 1;
    }
  });
  console.log(data);
}
</file>

====== 論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム ======

[[https://www.wiss.org/WISS2011Proceedings/PDF/17.pdf|WISS2011 Paper]]
>辻田 眸、暦本 純一（東京大学）
>概要
>>高齢化など様々な要因で，独居生活を選択あるいは余儀なくされている人は少なくない.孤 独な生活により感情状態が悪化し，うつ病や心の病にかかるなど深刻な問題である.一方，心理学者ウィリ アム・ジェイムズの言説で，「人は幸福であるが故に笑うのではなく，笑うが故に幸福である」という考え方 がある.これは笑顔形成が感情状態を向上させる可能性を示唆している.そこで本論文では，日常生活のな かで積極的に笑顔をつくることを促進し，感情状態の向上を支援するシステム「HappinessCounter」を提 案する.笑顔促進のために，ユーザが日常的に行う作業時に笑顔形成を促し，フィードバックを与えたり， ソーシャルネットワークサービスなどと連携させることで，より積極的に笑顔形成を支援し，感情状態の向 上を目指す.さらに試作したシステムを実際の日常生活で利用してもらい評価実験を行った.その実験結果 を示し，今後の展望を述べる.

この論文ではユーザの笑顔形成を促すシステムを提案していますが、笑顔を認識できることで可能となるシステムサービスの一例をプロトタイピングから示し、実際に被験者実験（アンケート調査、インタビュー）を行っています。デバイス周りの実装はこの授業では扱いませんが、笑顔を検出するシステムを実際に制作してみたいと思います。

まず、この回では p5.jsを利用して実装を進めて行きます。DOM（html上のオブジェクトを利用すること）は使用しないので、基本的にはProcessingと同じような文法になりますが、まずは下記リンクを参照して、Processingとp5.jsを比較します。

{{indexmenu>:processing:p5js#1|js#indextheme}}


続いて、次のサンプルを利用してまずは手っ取り早く、FaceTrackerしてみます。以降はブラウザを必ずChromeにて実行してください．
  * https://editor.p5js.org/tetsuakibaba/sketches/EQiqK-GgI

上記サンプルの元になっているのが，[[https://github.com/auduno/clmtrackr]] です．こちらのサンプルでは単純なfacetrackerの他にマスク，
サブスティチューション，表情認識等のデモを確認することができます．<del>まずは各頂点情報を参照して，顔の各パーツを扱えるようにプログラムを工夫していきます．すでにexampleでは口の横の長さで笑顔度を計算する記述も含まれているので，うまく利用してみましょう．</del>これまではclmtrackrを利用して授業を進めてきましたが、googleが提供するfacemeshが精度、速度ともに上回っているのでそちらを使うことにします。

まずは [[https://github.com/TetsuakiBaba/p5_facemesh]]からひな形をダウンロードしてください。以後はVSCodeを利用していきますので、VSCodeの環境準備も合わせて行います。環境準備については [[p5js:01.開発環境|p5.jsの開発環境]]のVSCodeのページを参考にしながら進めます。

なお，複数のカメラデバイスが存在しており，任意のカメラだけをオープンしたい場合は以下のページを参照してください．
  * [[p5js:tips:複数カメラの読込|複数カメラの読込]]

授業を通じて，笑顔を認識するアルゴリズムからコーディングまで実装します．
===== Facial Mario =====
この授業用の特別教材を準備しました．笑顔認識ができるようになったので，表情を認識させることができるようになりました．先の論文では冷蔵庫の開閉にインタラクションをデザインしていましたが，これをゲーム操作インタフェースとして応用してみます．スーパーマリオブラザーズを模したp5jsのコードをベースにして，表情認識でマリオを操作してみます．
  * https://www.nintendo.co.jp/networkservice_guideline/ja/index.html
  * https://tetsuakibaba.jp/ws/doku.php?id=p5js:xx.faceapi
  * https://editor.p5js.org/tetsuakibaba/sketches/NfnWBTMGs
  * レース用の雛形（タイマーの下にフレームカウントがついています）：https://editor.p5js.org/tetsuakibaba/sketches/VsRdt5pDr

====== 論文読解3：Effects of Objective Feedback of Facial Expression Recognition during Video Support Chat ======
  * https://dl.acm.org/doi/10.1145/3152832.3152848

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.lifehacker.jp/2014/08/140829self_awareness.html|この記事]]を、もし興味をもったら[[https://www.amazon.co.jp/セルフ・アウェアネス-ハーバード・ビジネス・レビュー-EIシリーズ-ハーバード・ビジネス・レビュー編集部/dp/4478107963]]も読んでみるとよいでしょう。とはいえこの論文で議論しているのは広義なセルフアウェアネスではなく、顔表出感情に特化したセルフアウェアネス支援システムといった方が的確でしょう。

今回はすでにFaceTrackerを利用して表情認識ができるようになっているので、チャットシステムを自分たちでまずつくるところから始めたいと思います。p5jsには様々なチュートリアルが用意されていますが、まずは [[https://thecodingtrain.com/Tutorials/12-websockets/]]を参考に進めていきます。p5jsとnode.jsというものを利用して、ネットワーク間の通信を実現します。以下のページを参照して，簡単なチャットシステムを外部サーバ上にデプロイするところまでをやってみましょう．

  * [[p5js:10.node.jsでsimplechat|node.jsでsimpleなチャットシステムをつくる]]

====== NeuralNet Challenge======
ここではまずは実際にNeuralNetを自分でコーディングし，その振る舞いを理解した後に楽しいサンプルを触っていきます．

  * 【お薦め】ニューロンを位置からコーディングして、一つのニューロンからなるパーセプトロンを自分で実装してみるDaniel
    * https://www.youtube.com/watch?v=ntKn5TPHHAk&list=PLRqwX-V7Uu6aCibgK1PTWWu9by6XFdCfh&index=3&t=0s

===== ml5.js =====
機械学習をjsで利用可能なライブラリml5に関してDanielがいくつかの動画を挙げてくれています。
  * 【例】ビデオ画像を10x10のサイズに小さくして、実際に画像識別を実装するDaniel
    * https://www.youtube.com/watch?v=UaKab6h9Z0I
  * [[https://thecodingtrain.com/learning/ml5/index.html|ML5 Beginners Guide: The Coding Train]]（Danielによるml5jsの実践動画集）

授業では１つ目の動画を実際にたどりながらニューラルネットの基本原則を理解します。

===== Teachable Machine =====
実際に自分でニューラルネットを設計して実装していくのもよいですが、すでにGoogleによって超すごいフレームワークが提供されています。その名はTeachable Machineです。まずは以下の動画で実際になにを行うかをみて、自分でもやってみます。先で述べたml5.jsライブラリを利用して、training自体を簡単にできるようにまとめたものだと思ってください。
  * Teachable Machine: https://teachablemachine.withgoogle.com
  * Image Classification: https://www.youtube.com/watch?v=kwcillcWOg0
    * 雛形：https://editor.p5js.org/tetsuakibaba/sketches/8GGwXeKxf
  * Snake Game: https://www.youtube.com/watch?v=UPgxnGC8oBU&list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y&index=13
  * Sound Classification: https://www.youtube.com/watch?v=TOrVsLklltM

===== Reference =====
Deep Learningに興味をもって基本的なことや背景などをもう少し知りたい人には下記の書籍をオススメします
  * [[https://www.amazon.co.jp/機械学習と深層学習-《C言語によるシミュレーション》-小高知宏-ebook/dp/B01MY06QN1/ref=sr_1_3?__mk_ja_JP=カタカナ&dchild=1&keywords=機械学習と深層学習&qid=1594168723&sr=8-3|機械学習と深層学習（c言語によるシミュレーション）]]
  * [[https://www.amazon.co.jp/機械学習と深層学習-Pythonによるシミュレーション-小高-知宏/dp/4274222268/ref=sr_1_1?__mk_ja_JP=カタカナ&dchild=1&keywords=機械学習と深層学習&qid=1594168723&sr=8-1|機械学習と深層学習（pythonによるシミュレーション）]]
  * [[https://www.amazon.co.jp/ゼロから作るDeep-Learning-―Pythonで学ぶディープラーニングの理論と実装-斎藤-康毅/dp/4873117585/ref=sr_1_1?__mk_ja_JP=カタカナ&crid=31BG8KRUJBMU8&dchild=1&keywords=ゼロから作るdeep+learning&qid=1594168847&sprefix=ゼロから作る%2Caps%2C251&sr=8-1|ゼロから作るDeep Learning]]
  * [[https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y|Beginners Guide to Machine Learning in JavaScript by Daniel Shiffman]]

===== jsを少し詳しく学ぼう =====
この回では、jsを利用して最終課題をコーディングしていく際、もう少しプログラミングそのものに焦点を充てて学習をしておいたほうが良いかと思います。基本的なjsの文法をさらったのち、実用的なプログラミングで役立つ機能を学習します。
  * [[p5js:08.jsの文法基礎|JavaScriptの基礎]]