差分

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

--- lecture:インタラクションデザイン演習実習i:2022 [2022/04/13 10:29] – baba
+++ lecture:インタラクションデザイン演習実習i:2022 [2022/05/11 10:18] (現在) – [論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム] baba
@@ 行 1: / 行 1: @@
-====== 2021年度インタラクションデザイン演習実習Ⅰ ======
+====== 2022年度インタラクションデザイン演習実習Ⅰ ======
   * [[https://tetsuakibaba.jp/tmu/InteractionDesign2020/?fbclid=IwAR08gAL8Yfs4yZHTsKW9wUdjrR2ohKn0eapW55zTPBl3gsUvwLFeXSLE92U|2020年度の授業成果公開ページ]]
@@ 行 16: / 行 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つの値（身長体重）と入力データ（マウスポインタ座標）の距離を計算してラベルづけを行うサンプル ====
@@ 行 99: / 行 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>
 ==== データ数を増やしてみる ====
@@ 行 201: / 行 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>
 ====== 論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム ======
@@ 行 220: / 行 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のページを参考にしながら進めます。
 なお，複数のカメラデバイスが存在しており，任意のカメラだけをオープンしたい場合は以下のページを参照してください．