zhao/p5js
zhao/p5js
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
赵鑫 2022-12-12 23:04:46 +08:00
parent 5b3f0723b3
commit 0af49dd0a0
3 changed files with 111 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
demo_particle.js
View File

@ -9,14 +9,13 @@ function setup() {
}
function draw() {
torch();
火把();
// 落珠();
}
/**
* 火把
*/
function torch() {
function 火把() {
background(0);
drawGrid();
const x = mouseIsPressed ? mouseX : 300;
const y = mouseIsPressed ? mouseY : 500;
// 添加新粒子
@ -24,6 +23,7 @@ function torch() {
const p = new Particle(x, y);
p.velocity.x = random(-1, 1) * 30;
p.velocity.y = random(-5, -1) * 50;
p.life = 1;
particles.push(p);
}
// 绘制火把
@ -35,8 +35,12 @@ function torch() {
push();
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
noiseDetail(2, 0.5);
let windForce = map(noise(frameCount / 1000), 0, 1, -500, 500);
// let windForce = map(mouseX, 0, width,-1000,1000)
p.applyForce(createVector(windForce, 0));
p.applyForce(createVector(0, -100));
p.update();
p.move();
if (p.finished) {
particles.splice(i, 1);
} else {
@ -47,4 +51,56 @@ function torch() {
}
}
pop();
textInfo("火把", "2022/12/11");
}
function 落珠() {
background(0);
drawGrid();
const x = mouseIsPressed ? mouseX : 300;
const y = mouseIsPressed ? mouseY : 50;
// 添加新粒子
if (particles.length < 1) {
for (let i = 0; i < 1; i++) {
const p = new Particle(x, y);
p.velocity.x = random(-50, 50);
p.life = 5;
particles.push(p);
}
}
push();
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.applyForce(createVector(0, 100));
p.move(true);
if (p.finished) {
particles.splice(i, 1);
} else {
const alpha = map(p.duration, 0, p.life, 255, 0);
stroke(255, alpha);
fill(128, alpha);
circle(p.position.x, p.position.y, 4);
}
}
pop();
textInfo("落珠", "2022/12/12");
}
function drawGrid() {
push();
stroke(255, 64);
strokeWeight(1);
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
for (let y = 0; y < height; y += 10) line(0, y, width, y);
pop();
}
function textInfo(title, date, name = "赵海洋爸爸") {
push();
noStroke();
fill(255);
text(`作品：${title}`, 30, height - 70);
text(`作者：${name}`, 30, height - 50);
text(`日期：${date}`, 30, height - 30);
pop();
}

5
index.html
View File

@ -21,9 +21,8 @@
</style>
<script src="p5/p5.min.js"></script>
<script src="p5/addons/p5.sound.min.js"></script>
<!-- <script src="particle.js"></script> -->
<!-- <script src="particle_demo.js"></script> -->
<script src="demo_noise.js"></script>
<script src="particle.js"></script>
<script src="demo_particle.js"></script>
</head>
<body>

51
particle.js
View File

@ -5,23 +5,66 @@ class Particle {
this.gravity = createVector(0, 10); // G = 9.81
this.acceleration = createVector(0, 0);
this.duration = 0;
this.life = 1;
this.life = -1;
this.mass = 1;
}
get heading() {
get 高度() {
return height - this.position.y;
}
get 势能() {
return this.mass * this.gravity.y * this.高度;
}
get 速率() {
return this.velocity.mag();
}
get 动能() {
return 0.5 * this.mass * this.速率 ** 2;
}
get 机械能() {
return this.势能 + this.动能;
}
get 运动方向() {
return this.velocity.heading();
}
get finished() {
return this.duration >= this.life;
return this.life > 0 && this.duration >= this.life;
}
applyForce(force) {
this.acceleration.add(force.div(this.mass));
}
update() {
// 未完成
bounce(rate) {
if (this.position.x <= 0) {
this.position.x = 0;
this.velocity.x *= -1;
if (rate > 0) this.velocity.mult(rate);
} else if (this.position.x > width) {
this.position.x = width;
this.velocity.x *= -1;
if (rate > 0) this.velocity.mult(rate);
}
if (this.position.y <= 0) {
this.position.y = 0;
this.velocity.y *= -1;
if (rate > 0) this.velocity.mult(rate);
} else if (this.position.y >= height) {
this.position.y = height;
this.velocity.y *= -1;
if (rate > 0) this.velocity.mult(rate);
}
}
// 反弹算法未完成
move(bounce = false) {
// 重力加速度
this.acceleration.add(this.gravity); // G = 9.81
// 计算时间差