星星的运动
一、实验内容：
按照章节要求使用p5.js实现星星随机向画布边界运动的效果：
- 星星近大远小；（20分）
- 能拖出尾迹；（30分）
- 速度、星星数量等可由参数控制；（20分）（HTML页面交互传递参数20分，代码中变量控制10分）
- 使用类来实现；（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) } }
四、实验结果：
编辑 
编辑
二维图像实现三维效果，小球从远处生成向屏幕外移动并消失，通过设置speed参数调节星星速度。
从网页中输入参数，input得到输入星星数量。
与鼠标进行交互，鼠标往左速度变慢，往右速度变快。
Star类中的x、y、z赋予不同的随机数值，使Star对象可以在画布上随机的出现。
draw函数中通过循环依次调用每个Star的update与show函数。
