差分

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

--- lecture:インタラクションデザイン演習実習i:2022 [2022/04/13 10:27] – 作成 baba
+++ lecture:インタラクションデザイン演習実習i:2022 [2022/05/11 10:18] (現在) – [論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム] baba
@@ 行 1: / 行 1: @@
-====== 2021年度インタラクションデザイン演習実習Ⅰ ======
+====== 2022年度インタラクションデザイン演習実習Ⅰ ======
   * [[https://tetsuakibaba.jp/tmu/InteractionDesign2020/?fbclid=IwAR08gAL8Yfs4yZHTsKW9wUdjrR2ohKn0eapW55zTPBl3gsUvwLFeXSLE92U|2020年度の授業成果公開ページ]]
 <WRAP center round important 60%>
-このページは東京都立大学にて開講している、2021年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。
+このページは東京都立大学にて開講している、2022年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。
 </WRAP>
- ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．演習では主にProcessingとp5.jsを利用して行きます．授業は基本対面形式で行いますが、同時にzoomにてオンライン配信されます。配信リンクはkibacoのお知らせ欄を参照してください。
+ ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．演習では主にp5.jsとArduinoを利用して行きます．授業は講義形式はオンラインで、ハードウェアを扱う場合は対面で、企業共同実習は対面で開催します。配信リンクはkibacoのお知らせ欄を参照してください。
-  * **初回授業開始前までにすべきこと**
-    * アート学科公式ガイドの確認
-      * [[http://industrial-art.sd.tmu.ac.jp/wiki/doku.php?id=public:zoomを利用した授業:入門|Zoomを利用した授業入門]]
-      * [[http://industrial-art.sd.tmu.ac.jp/wiki/doku.php?id=public:zoomを利用した授業:演習系授業への準備|PC演習系授業]]
-      * [[http://industrial-art.sd.tmu.ac.jp/wiki/doku.php?id=public:zoomを利用した授業:インターネット回線で注意すること|インターネット回線で注意すること]]
-      * [[https://industrial-art.sd.tmu.ac.jp/wiki/doku.php?id=掲示板:学内wifi接続|学内wifi接続]]
-    *  ソフトウェア（Processing）の準備
-      * [[lecture:design_with_prototyping:processing編:01.開発環境|開発環境]]ページを参照して、Processingが手元のコンピュータで利用できるように準備をしておいてください。
@@ 行 26: / 行 16: @@
 ２ページの英文ショートペーパーです．ロードセルを利用したシンプルなユーザ識別装置に関する報告です．識別にはユークリッド距離を 利用しています．なお，ウェブで検索をするとフルペーパーも見つかるので，詳細はそっちで確認することをおすすめします．ユーザが歩いた際における圧力や時間，力の分散などを特徴量として学習済みの特徴量をf，入力データをf'（ダッシュ）とした場合，次のような計算で距離を求めると，様々な学習済みデータとどの程度入力データがことなるのかを計算できるようになります． 本講義でのもっとも基本的で重要な考え方なので，しっかり理解しましょう．
-* Nearest Neighbor参考ページ：[[http://tetsuakibaba.jp/index.php?page=workshop/PatternRecognition4InteractionDesign/main.html|インタラクションデザインの為のパターン認識入門]]
+* Nearest Neighbor参考ページ：[[http://tetsuakibaba.jp/workshop/PatternRecognition4InteractionDesign/main.html|インタラクションデザインの為のパターン認識入門]]
 ==== 2つの値（身長体重）と入力データ（マウスポインタ座標）の距離を計算してラベルづけを行うサンプル ====
@@ 行 109: / 行 99: @@
 </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>
 ==== データ数を増やしてみる ====
@@ 行 211: / 行 238: @@
 </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>
 ====== 論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム ======
@@ 行 230: / 行 310: @@
 上記サンプルの元になっているのが，[[https://github.com/auduno/clmtrackr]] です．こちらのサンプルでは単純なfacetrackerの他にマスク，
-サブスティチューション，表情認識等のデモを確認することができます．まずは各頂点情報を参照して，顔の各パーツを扱えるようにプログラムを工夫していきます．すでにexampleでは口の横の長さで笑顔度を計算する記述も含まれているので，うまく利用してみましょう．
+サブスティチューション，表情認識等のデモを確認することができます．<del>まずは各頂点情報を参照して，顔の各パーツを扱えるようにプログラムを工夫していきます．すでにexampleでは口の横の長さで笑顔度を計算する記述も含まれているので，うまく利用してみましょう．</del>これまではclmtrackrを利用して授業を進めてきましたが、googleが提供するfacemeshが精度、速度ともに上回っているのでそちらを使うことにします。
+まずは [[https://github.com/TetsuakiBaba/p5_facemesh]]からひな形をダウンロードしてください。以後はVSCodeを利用していきますので、VSCodeの環境準備も合わせて行います。環境準備については [[p5js:01.開発環境|p5.jsの開発環境]]のVSCodeのページを参考にしながら進めます。
 なお，複数のカメラデバイスが存在しており，任意のカメラだけをオープンしたい場合は以下のページを参照してください．