差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
lecture:インタラクションデザイン演習実習i:2024 [2024/04/30 23:58] – [スケッチ練習] baba | lecture:インタラクションデザイン演習実習i:2024 [2024/05/29 08:51] (現在) – [MediaPipe] baba | ||
---|---|---|---|
行 22: | 行 22: | ||
{{ : | {{ : | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <html lang=" | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | <script src=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | |||
+ | var points = []; | ||
+ | // Your p5.js code goes here | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | const numCoordinates = 200; | ||
+ | points = generateRandomCoordinates(numCoordinates); | ||
+ | |||
+ | // drawingContextを利用して線に影をつける | ||
+ | drawingContext.shadowOffsetX = 5; | ||
+ | drawingContext.shadowOffsetY = 5; | ||
+ | drawingContext.shadowBlur = 2; | ||
+ | drawingContext.shadowColor = ' | ||
+ | } | ||
+ | |||
+ | function generateRandomCoordinates(numCoordinates) { | ||
+ | const coordinates = []; | ||
+ | const min = 0; // 最小値 | ||
+ | const max = 400; // 最大値 | ||
+ | |||
+ | for (let i = 0; i < numCoordinates; | ||
+ | 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, | ||
+ | points[i].y = constrain(points[i].y, | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
行 32: | 行 102: | ||
>宮崎 優子 馬場 哲晃 | >宮崎 優子 馬場 哲晃 | ||
>概要 | >概要 | ||
- | >> | + | >> |
+ | ===== MediaPipe ===== | ||
+ | この回では、上記論文を読んだうえで類似機能を提供可能なMediaPipeを利用してみます。MediaPipeはGoogleが提供する主にビジョン系、組み込み系をメインとした深層学習インタラクティブアプリケーションを開発可能にするライブラリ、もしくはプラットフォームのことを指します。 | ||
+ | * Google AI Edget -> MediaPiepe: https:// | ||
+ | * MediaPipe Studio: https:// | ||
+ | ===== Teachable Machine ===== | ||
+ | 画像データセット等を手軽に作成する際、Teachable Machineが便利です。 | ||
+ | * Teachable Machine: https:// | ||
====== 論文読解3: 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ====== | ====== 論文読解3: 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ====== | ||
* https:// | * https:// | ||
行 56: | 行 133: | ||
授業では1つ目の動画を実際にたどりながらニューラルネットの基本原則を理解します。 | 授業では1つ目の動画を実際にたどりながらニューラルネットの基本原則を理解します。 | ||
- | ===== Teachable Machine ===== | ||
- | 実際に自分でニューラルネットを設計して実装していくのもよいですが、すでにGoogleによって超すごいフレームワークが提供されています。その名はTeachable Machineです。まずは以下の動画で実際になにを行うかをみて、自分でもやってみます。先で述べたml5.jsライブラリを利用して、training自体を簡単にできるようにまとめたものだと思ってください。 | ||
- | * Teachable Machine: https:// | ||
- | * Image Classification: | ||
- | * 雛形:https:// | ||
- | * Snake Game: https:// | ||
- | * Sound Classification: | ||
===== Reference ===== | ===== Reference ===== |