lecture:インタラクションデザイン演習実習i:2023

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		 前のリビジョン
lecture:インタラクションデザイン演習実習i:2023 [2023/05/10 00:17] – 作成 babalecture:インタラクションデザイン演習実習i:2023 [2023/05/10 10:32] (現在) – [論文読解２：手軽な指文字学習支援のためのブラウザゲーム：ゆびもじタイピング] baba
行 1: 行 1:
-====== 2022年度インタラクションデザイン演習実習Ⅰ ====== +====== 2023年度インタラクションデザイン演習実習Ⅰ ======
-  * [[https://tetsuakibaba.jp/tmu/InteractionDesign2020/?fbclid=IwAR08gAL8Yfs4yZHTsKW9wUdjrR2ohKn0eapW55zTPBl3gsUvwLFeXSLE92U|2020年度の授業成果公開ページ]] +
 <WRAP center round important 60%> <WRAP center round important 60%>
-このページは東京都立大学にて開講している、2022年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。+このページは東京都立大学にて開講している、2023年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。
 </WRAP> </WRAP>
  
- ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．演習では主にp5.jsとArduinoを利用して行きます．授業は講義形式はオンラインで、ハードウェアを扱う場合は対面で、企業共同実習は対面で開催します。配信リンクはkibacoのお知らせ欄を参照してください。 + ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．
  
 ====== 論文読解１：The smart floor： a mechanism for natural user identification and tracking ====== ====== 論文読解１：The smart floor： a mechanism for natural user identification and tracking ======
行 18: 行 15:
 * Nearest Neighbor参考ページ：[[http://tetsuakibaba.jp/workshop/PatternRecognition4InteractionDesign/main.html|インタラクションデザインの為のパターン認識入門]] * 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 +  * {{ :lecture:インタラクションデザイン演習実習i:aac2023_02.pdf |}} 
-int x2 = 160; +  * https://ipsj.ixsq.nii.ac.jp/ej/index.php?active_action=repository_view_main_item_detail&page_id=13&block_id=8&item_id=225341&item_no=1
-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」を提 案する.笑顔促進のために，ユーザが日常的に行う作業時に笑顔形成を促し，フィードバックを与えたり， ソーシャルネットワークサービスなどと連携させることで，より積極的に笑顔形成を支援し，感情状態の向 上を目指す.さらに試作したシステムを実際の日常生活で利用してもらい評価実験を行った.その実験結果 を示し，今後の展望を述べる.+>>聴覚障がい者のコミュニケーションツールには，単語を手の形や位置，動きで表現する手話と，日 本語かなを手の形や動きに対応させた指文字がある.指文字は手話表現にない固有名詞や名前を表現する ときに使われ，手話初心者にとって手話を覚えていなくても指文字を覚えれば単語を綴ることができる. したがって，指文字をスムーズに綴れることは，手話初心者にとって聴覚障がい者との円滑なコミュニ ケーションへの第一歩と言える.手話の学習方法としては対面で講師から学ぶ方法が主であるが，これは 学習者にとって時間的・金銭的コストがかかる.一方で，学習者が単独で手話を学ぶには，本や DVD を 使った方法があるが，これらは指文字を一字ずつ覚えることはできても，実際に指文字を使うときのよう な単語を綴りながらの指文字練習は紙面やコンテンツ数の制約により，限界があった.そこで本研究では 学習者に単語を提示し，学習者がその単語を指文字で綴ることで指文字学習定着および技能向上を目的と するタイピングゲームを制作する.このゲームはブラウザゲームとして実装・公開することによって，イ ンターネット環境と Web カメラの搭載された PC のみで学習者の手軽な指文字学習を可能にする.
  
-この論文ではユーザの笑顔形成を促すシステムを提案していますが、笑顔を認識できることで可能となるシステムサービスの一例をプロトタイピングから示し、実際に被験者実験（アンケート調査、インタビュー）を行っています。デバイス周りの実装はこの授業では扱いませんが、笑顔を検出するシステムを実際に制作してみたいと思います。 
  
-まず、この回では p5.jsを利用して実装を進めて行きます。DOM（html上のオブジェクトを利用すること）は使用しないので、基本的にはProcessingと同じような文法になりますが、まずは下記リンクを参照して、Processingとp5.jsを比較します。 +===== Hand Mario =====
- +
-{{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のコードをベースにして，表情認識でマリオを操作してみます． この授業用の特別教材を準備しました．笑顔認識ができるようになったので，表情を認識させることができるようになりました．先の論文では冷蔵庫の開閉にインタラクションをデザインしていましたが，これをゲーム操作インタフェースとして応用してみます．スーパーマリオブラザーズを模したp5jsのコードをベースにして，表情認識でマリオを操作してみます．
   * https://www.nintendo.co.jp/networkservice_guideline/ja/index.html   * https://www.nintendo.co.jp/networkservice_guideline/ja/index.html
行 325: 行 32:
   * レース用の雛形（タイマーの下にフレームカウントがついています）：https://editor.p5js.org/tetsuakibaba/sketches/VsRdt5pDr   * レース用の雛形（タイマーの下にフレームカウントがついています）：https://editor.p5js.org/tetsuakibaba/sketches/VsRdt5pDr
  
-====== 論文読解3：Effects of Objective Feedback of Facial Expression Recognition during Video Support Chat ====== +====== 論文読解3： 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ====== 
-  * https://dl.acm.org/doi/10.1145/3152832.3152848 +  * https://cir.nii.ac.jp/crid/1390575661587795840 
- +  * 論文データ：{{ :lecture:インタラクションデザイン演習実習i:11_13.pdf |}} 
-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. +  * Covid-19によって，多くの教育機関がオンライン授業への対応を余儀なくされた．対面授業とオンライン授業の比較は多くの研究がなされる一方で，オンライン授業では様々なデジタルツールの活用がなされる等，多様な取り組み方法が継続的に実践・検討されている．本稿では，著者が2020年度から開発を開始した音声リアクション・コメント読み上げ共有システムCommentableに対し，学習者による匿名の音声干渉（本稿では特に音声による学生と教員間のインタラクションを指す）機能を利用することで，一部授業では音声なしよりも音声付き投稿が多用されたことや，投稿ログとアンケート結果から授業への参画度向上が示されたことを報告する．一方で，音声干渉機能は200人規模の授業には不向きであるほか，小規模，中規模授業であっても教師および学習者同士が協調し本機能を活用する必要があることがアンケート結果から示された．
- +
-この論文は論文読解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 Challenge======
 ここではまずは実際にNeuralNetを自分でコーディングし，その振る舞いを理解した後に楽しいサンプルを触っていきます． ここではまずは実際にNeuralNetを自分でコーディングし，その振る舞いを理解した後に楽しいサンプルを触っていきます．
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/lecture/インタラクションデザイン演習実習i/2023.1683645461.txt.gz
  • 最終更新: 2023/05/10 00:17
  • by baba