差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
lecture:インタラクションデザイン演習実習i:2024 [2024/04/21 17:25] – baba | lecture:インタラクションデザイン演習実習i:2024 [2024/05/01 11:32] (現在) – [スケッチ練習] baba | ||
---|---|---|---|
行 14: | 行 14: | ||
* Nearest Neighbor参考ページ:[[http:// | * Nearest Neighbor参考ページ:[[http:// | ||
+ | |||
+ | ===== スケッチ練習 ===== | ||
+ | 以下の動画を再現するスケッチを記述せよ。 | ||
+ | <WRAP center round tip 60%> | ||
+ | ヒント:200個のランダム座標、drawingContextを利用して影は自動で描画している。NN法で学習したユークリッド距離計算を用いて一定の近さにいるオブジェクトに対して線を描画している。 | ||
+ | </ | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <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, | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
====== 論文読解2:手軽な指文字学習支援のためのブラウザゲーム:ゆびもじタイピング ====== | ====== 論文読解2:手軽な指文字学習支援のためのブラウザゲーム:ゆびもじタイピング ====== | ||
行 23: | 行 103: | ||
>概要 | >概要 | ||
>> | >> | ||
+ | |||
+ | ===== スケッチ練習 ===== | ||
+ | 下の動画を参照して、同じことを実現するプログラムをスケッチせよ。 | ||
- | ===== Hand Mario ===== | ||
- | この授業用の特別教材を準備しました.笑顔認識ができるようになったので,表情を認識させることができるようになりました.先の論文では冷蔵庫の開閉にインタラクションをデザインしていましたが,これをゲーム操作インタフェースとして応用してみます.スーパーマリオブラザーズを模したp5jsのコードをベースにして,表情認識でマリオを操作してみます. | ||
- | * https:// | ||
- | * https:// | ||
- | * https:// | ||
- | * レース用の雛形(タイマーの下にフレームカウントがついています):https:// | ||
====== 論文読解3: 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ====== | ====== 論文読解3: 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ====== | ||
行 37: | 行 114: | ||
* 著者:馬場哲晃 | * 著者:馬場哲晃 | ||
* Covid-19によって,多くの教育機関がオンライン授業への対応を余儀なくされた.対面授業とオンライン授業の比較は多くの研究がなされる一方で,オンライン授業では様々なデジタルツールの活用がなされる等,多様な取り組み方法が継続的に実践・検討されている.本稿では,著者が2020年度から開発を開始した音声リアクション・コメント読み上げ共有システムCommentableに対し,学習者による匿名の音声干渉(本稿では特に音声による学生と教員間のインタラクションを指す)機能を利用することで,一部授業では音声なしよりも音声付き投稿が多用されたことや,投稿ログとアンケート結果から授業への参画度向上が示されたことを報告する.一方で,音声干渉機能は200人規模の授業には不向きであるほか,小規模,中規模授業であっても教師および学習者同士が協調し本機能を活用する必要があることがアンケート結果から示された. | * Covid-19によって,多くの教育機関がオンライン授業への対応を余儀なくされた.対面授業とオンライン授業の比較は多くの研究がなされる一方で,オンライン授業では様々なデジタルツールの活用がなされる等,多様な取り組み方法が継続的に実践・検討されている.本稿では,著者が2020年度から開発を開始した音声リアクション・コメント読み上げ共有システムCommentableに対し,学習者による匿名の音声干渉(本稿では特に音声による学生と教員間のインタラクションを指す)機能を利用することで,一部授業では音声なしよりも音声付き投稿が多用されたことや,投稿ログとアンケート結果から授業への参画度向上が示されたことを報告する.一方で,音声干渉機能は200人規模の授業には不向きであるほか,小規模,中規模授業であっても教師および学習者同士が協調し本機能を活用する必要があることがアンケート結果から示された. | ||
+ | |||
+ | |||
====== NeuralNet Challenge====== | ====== NeuralNet Challenge====== | ||
ここではまずは実際にNeuralNetを自分でコーディングし,その振る舞いを理解した後に楽しいサンプルを触っていきます. | ここではまずは実際にNeuralNetを自分でコーディングし,その振る舞いを理解した後に楽しいサンプルを触っていきます. |