差分
このページの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: | ||
>概要 | >概要 | ||
>> | >> | ||
+ | |||
+ | ===== スケッチ練習 ===== | ||
+ | 下の動画を参照して、同じことを実現するプログラムをスケッチせよ。 | ||
+ | |||