差分

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

--- lecture:インタラクションデザイン演習実習i:2022 [2022/04/27 09:24] – [2つの値（身長体重）と入力データ（マウスポインタ座標）の距離を計算してラベルづけを行うサンプル] baba
+++ lecture:インタラクションデザイン演習実習i:2022 [2022/05/11 10:18] (現在) – [論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム] baba
@@ 行 238: / 行 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>
 ====== 論文読解２：笑顔は人を幸せにするのか？笑顔促進支援システム ======
@@ 行 257: / 行 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のページを参考にしながら進めます。
 なお，複数のカメラデバイスが存在しており，任意のカメラだけをオープンしたい場合は以下のページを参照してください．