差分

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

--- lecture:インタラクションデザイン演習実習i:2024 [2024/04/21 17:25] – baba
+++ lecture:インタラクションデザイン演習実習i:2024 [2024/05/29 08:51] (現在) – [MediaPipe] baba
@@ 行 14: / 行 14: @@
 * Nearest Neighbor参考ページ：[[http://tetsuakibaba.jp/workshop/PatternRecognition4InteractionDesign/main.html|インタラクションデザインの為のパターン認識入門]]
+===== スケッチ練習 =====
+以下の動画を再現するスケッチを記述せよ。
+<WRAP center round tip 60%>
+ヒント：200個のランダム座標、drawingContextを利用して影は自動で描画している。NN法で学習したユークリッド距離計算を用いて一定の近さにいるオブジェクトに対して線を描画している。
+</WRAP>
+{{ :lecture:インタラクションデザイン演習実習i:out.mp4 |}}
+<code>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
+    <title>p5.js Sample</title>
+</head>
+<body>
+    <script>
+        var points = [];
+        // Your p5.js code goes here
+        function setup() {
+            createCanvas(400, 400);
+            const numCoordinates = 200;
+            points = generateRandomCoordinates(numCoordinates);
+            // drawingContextを利用して線に影をつける
+            drawingContext.shadowOffsetX = 5;
+            drawingContext.shadowOffsetY = 5;
+            drawingContext.shadowBlur = 2;
+            drawingContext.shadowColor = 'rgba(0, 0, 0, 0.5)';
+        }
+        function generateRandomCoordinates(numCoordinates) {
+            const coordinates = [];
+            const min = 0; // 最小値
+            const max = 400; // 最大値
+            for (let i = 0; i < numCoordinates; i++) {
+                const x = Math.floor(Math.random() * (max - min) + min);
+                const y = Math.floor(Math.random() * (max - min) + min);
+                coordinates.push({ x, y });
+            }
+            return coordinates;
+        }
+        function draw() {
+            background(255);
+            // それぞれのpointsを線で結ぶ
+            for (let i = 0; i < points.length - 1; i++) {
+                const p1 = points[i];
+                const p2 = points[i + 1];
+                // 先の細さを設定
+                strokeWeight(1);
+                stroke(100);
+                line(p1.x, p1.y, p2.x, p2.y);
+                points[i].x += random(-1, 1);
+                points[i].y += random(-1, 1);
+                // points[i]の座標を制限する
+                points[i].x = constrain(points[i].x, 0, 400);
+                points[i].y = constrain(points[i].y, 0, 400);
+            }
+        }
+    </script>
+</body>
+</html>
+</code>
 ====== 論文読解２：手軽な指文字学習支援のためのブラウザゲーム：ゆびもじタイピング ======
@@ 行 22: / 行 102: @@
 >宮崎 優子 馬場 哲晃
 >概要
->>聴覚障がい者のコミュニケーションツールには，単語を手の形や位置，動きで表現する手話と，日 本語かなを手の形や動きに対応させた指文字がある.指文字は手話表現にない固有名詞や名前を表現する ときに使われ，手話初心者にとって手話を覚えていなくても指文字を覚えれば単語を綴ることができる. したがって，指文字をスムーズに綴れることは，手話初心者にとって聴覚障がい者との円滑なコミュニ ケーションへの第一歩と言える.手話の学習方法としては対面で講師から学ぶ方法が主であるが，これは 学習者にとって時間的・金銭的コストがかかる.一方で，学習者が単独で手話を学ぶには，本や DVD を 使った方法があるが，これらは指文字を一字ずつ覚えることはできても，実際に指文字を使うときのよう な単語を綴りながらの指文字練習は紙面やコンテンツ数の制約により，限界があった.そこで本研究では 学習者に単語を提示し，学習者がその単語を指文字で綴ることで指文字学習定着および技能向上を目的と するタイピングゲームを制作する.このゲームはブラウザゲームとして実装・公開することによって，イ ンターネット環境と Web カメラの搭載された PC のみで学習者の手軽な指文字学習を可能にする.
+>>聴覚障がい者のコミュニケーションツールには，単語を手の形や位置，動きで表現する手話と，日本語かなを手の形や動きに対応させた指文字がある.指文字は手話表現にない固有名詞や名前を表現する ときに使われ，手話初心者にとって手話を覚えていなくても指文字を覚えれば単語を綴ることができる. したがって，指文字をスムーズに綴れることは，手話初心者にとって聴覚障がい者との円滑なコミュニ ケーションへの第一歩と言える.手話の学習方法としては対面で講師から学ぶ方法が主であるが，これは 学習者にとって時間的・金銭的コストがかかる.一方で，学習者が単独で手話を学ぶには，本や DVD を 使った方法があるが，これらは指文字を一字ずつ覚えることはできても，実際に指文字を使うときのよう な単語を綴りながらの指文字練習は紙面やコンテンツ数の制約により，限界があった.そこで本研究では 学習者に単語を提示し，学習者がその単語を指文字で綴ることで指文字学習定着および技能向上を目的と するタイピングゲームを制作する.このゲームはブラウザゲームとして実装・公開することによって，イ ンターネット環境と Web カメラの搭載された PC のみで学習者の手軽な指文字学習を可能にする.
+===== MediaPipe =====
+この回では、上記論文を読んだうえで類似機能を提供可能なMediaPipeを利用してみます。MediaPipeはGoogleが提供する主にビジョン系、組み込み系をメインとした深層学習インタラクティブアプリケーションを開発可能にするライブラリ、もしくはプラットフォームのことを指します。
+  * Google AI Edget -> MediaPiepe: https://ai.google.dev/edge?hl=ja
+  * MediaPipe Studio: https://mediapipe-studio.webapps.google.com/home
+===== Teachable Machine =====
+画像データセット等を手軽に作成する際、Teachable Machineが便利です。
+  * Teachable Machine: https://teachablemachine.withgoogle.com
 ====== 論文読解3： 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ======
   * https://cir.nii.ac.jp/crid/1390575661587795840
@@ 行 46: / 行 133: @@
 授業では１つ目の動画を実際にたどりながらニューラルネットの基本原則を理解します。
-===== 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 =====