lecture:インタラクションデザイン演習実習i:2024

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
lecture:インタラクションデザイン演習実習i:2024 [2024/05/01 00:01] – [スケッチ練習] babalecture:インタラクションデザイン演習実習i:2024 [2024/05/01 11:32] (現在) – [スケッチ練習] baba
行 22: 行 22:
  
 {{ :lecture:インタラクションデザイン演習実習i:out.mp4 |}} {{ :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>
 +
 +
  
  
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/lecture/インタラクションデザイン演習実習i/2024.txt
  • 最終更新: 2024/05/01 11:32
  • by baba