互动应用开发p5.js——星星的运动

╰+哭是因爲堅強的太久メ 2023-10-01 15:48 7阅读 0赞

## 星星的运动 ##

### 一、实验内容： ###

按照章节要求使用p5.js实现星星随机向画布边界运动的效果：

1.  星星近大远小；（20分）
2.  能拖出尾迹；（30分）
3.  速度、星星数量等可由参数控制；（20分）（HTML页面交互传递参数20分，代码中变量控制10分）
4.  使用类来实现；（30分）

提交工程目录压缩的zip或者rar，以及一个readme.txt简要说明实现思路和重要参数的功能

### 二、实验说明： ###

所有实验是通过 Visual Studio Code引入p5.js包编写，所以首先要去p5.js官网下载相关包，或是在联网状态下把html中引入包的代码改成例如<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>等。

###    三、实验代码： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Star</title>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    
      <style>
        input {
          margin: 8px;
        }
      </style>
    </head>
    
    <body>
      <input type="text" id="inputBox" placeholder="输入星星个数">
      <input type="submit" id="submit">
    
      <input type="text" id="inputBox2" placeholder="输入星星速度">
      <input type="submit" id="submit2">
    
    
      <script src="sketch.js"></script>
    </body>
    
    </html>

// 星星数组
    let stars = [];
    // 速度
    let speed = 1;
    let speed_2=20;
    
    //数量
    let input = document.getElementById("inputBox");
    let submit = document.getElementById("submit");
    
    //速度
    let input_1 = document.getElementById("inputBox2");
    let submit_1 = document.getElementById("submit2");
    
    submit.onmousedown = function (e) {
      
      //e = e || window.e;//兼容浏览器
      
      //console.log(input.value)//日志结果
    
      //星星的数量
      for (let i = 0; i < parseInt(input.value); i++) {
        stars[i] = new star();
      }
    }
    
    submit_1.onmousedown = function (e) {
      speed_2=input.value;
    }
    
    
    function setup() {
      createCanvas(800, 600);
    }
    
    function draw() {
      background(0);
      translate(width / 2, height / 2) //发散中心
    
      speed = map(mouseX, 0, width, 0, speed_2) //鼠标交互
    
      for (let i = 0; i < stars.length; i++) {
        stars[i].update();
        stars[i].show();
      }
    }
    
    function star() {
      this.x = random(-width, width)
      this.y = random(-height, height)
      this.z = random(width)
      this.pz = this.z
    
      this.update = function () {
        this.z -= speed
        if (this.z < 1) {
          this.z = width
          this.x = random(-width, width)
          this.y = random(-height, height)
        }
      }
      this.show = function () {
        fill(255)
        noStroke()
    
        //当前位置
        let sx = map(this.x / this.z, 0, 1, 0, width)
        let sy = map(this.y / this.z, 0, 1, 0, height)
    
        //前一帧位置
        let px = map(this.x / this.pz, 0, 1, 0, width)
        let py = map(this.y / this.pz, 0, 1, 0, height)
    
        let r = map(this.z, 0, width, 10, 0)
    
        ellipse(sx, sy, r, r)
        stroke(255)
        strokeWeight(2)
    
        // 星际
        line(px, py, sx, sy)
      }
    }

### 四、实验结果： ###

![65bcaddb1f7d4cd8bc66fc5272529e64.png][] ![430944e477534268beeda47217239c7b.png][]

二维图像实现三维效果，小球从远处生成向屏幕外移动并消失，通过设置speed参数调节星星速度。  
从网页中输入参数，input得到输入星星数量。  
与鼠标进行交互，鼠标往左速度变慢，往右速度变快。  
Star类中的x、y、z赋予不同的随机数值，使Star对象可以在画布上随机的出现。  
draw函数中通过循环依次调用每个Star的update与show函数。

[65bcaddb1f7d4cd8bc66fc5272529e64.png]: https://img-blog.csdnimg.cn/65bcaddb1f7d4cd8bc66fc5272529e64.png
[430944e477534268beeda47217239c7b.png]: https://img-blog.csdnimg.cn/430944e477534268beeda47217239c7b.png