差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン | |||
lecture:インタラクションデザイン演習実習i:2024 [2024/05/01 00:01] – [スケッチ練習] baba | lecture:インタラクションデザイン演習実習i:2024 [2024/05/01 11:32] (現在) – [スケッチ練習] 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, | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||