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-11 23:34:40 +08:00
parent 011d61f4e6
commit dcb636442f
7 changed files with 94 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
4.太阳公公.js
View File

@ -1,8 +1,6 @@
function setup() { function setup() {
createCanvas(400, 400); createCanvas(400, 400);
angleMode(DEGREES); angleMode(DEGREES);
stroke("#FFFF00");
strokeWeight(8);
frameRate(60); frameRate(60);
noCursor(); noCursor();
} }
@ -10,8 +8,11 @@ function setup() {
function draw() { function draw() {
background("skyblue"); background("skyblue");
// 移动原点坐标 // 移动原点坐标
push();
translate(mouseX, mouseY); translate(mouseX, mouseY);
// 画阳光 // 画阳光
stroke("#FFFF00");
strokeWeight(8);
let distance = 1 + (frameCount % 30); let distance = 1 + (frameCount % 30);
for (let i = 0, n = 36; i < n; i++) { for (let i = 0, n = 36; i < n; i++) {
line(0, -50 - distance * 10, 0, -100 - distance * 10); line(0, -50 - distance * 10, 0, -100 - distance * 10);
@ -24,4 +25,11 @@ function draw() {
arc(-20, 0, 20, 20, -135, -45); arc(-20, 0, 20, 20, -135, -45);
arc(20, 0, 20, 20, -135, -45); arc(20, 0, 20, 20, -135, -45);
arc(0, 10, 40, 40, 45, 135); arc(0, 10, 40, 40, 45, 135);
pop();
noStroke();
fill(0);
text("作品：太阳公公", 30, height - 70);
text("作者：赵海洋爸爸", 30, height - 50);
text("日期：2022/12/11", 30, height - 30);
} }

3
index.html
View File

@ -21,7 +21,8 @@
</style> </style>
<script src="p5/p5.min.js"></script> <script src="p5/p5.min.js"></script>
<script src="p5/addons/p5.sound.min.js"></script> <script src="p5/addons/p5.sound.min.js"></script>
<script src="4.太阳公公.js"></script> <script src="particle.js"></script>
<script src="particle_demo.js"></script>
</head> </head>
<body> <body>

46
particle.js
View File

@ -8,12 +8,17 @@ class Particle {
this.saturation = 0; this.saturation = 0;
this.brightness = 100; this.brightness = 100;
this.alpha = 1; this.alpha = 1;
this.size = 8; this.size = 2;
this.lifetime = 0; this.lifetime = 0;
this.endtime = 5;
} }
move(force) { lifeover() {
if (this.position.y > 600) return; return this.lifetime >= this.endtime;
}
update(force) {
if (this.lifeover()) return;
// 计算加速度 // 计算加速度
const acceleration = createVector(0, 0); const acceleration = createVector(0, 0);
acceleration.add(this.gravity); acceleration.add(this.gravity);
@ -28,15 +33,10 @@ class Particle {
// 更新速度及位置 // 更新速度及位置
this.velocity.add(deltaVelocity); this.velocity.add(deltaVelocity);
this.position.add(movement); this.position.add(movement);
const report = {
time: this.lifetime.toFixed(3),
height: (height - this.position.y).toFixed(3),
velocity: this.velocity.mag().toFixed(3),
};
print(report);
} }
show() { show() {
if (this.lifeover()) return;
noStroke(); noStroke();
fill(this.hue, this.saturation, this.brightness, this.alpha); fill(this.hue, this.saturation, this.brightness, this.alpha);
circle(this.position.x, this.position.y, this.size); circle(this.position.x, this.position.y, this.size);
@ -44,6 +44,30 @@ class Particle {
} }
class Particles { class Particles {
constructor() {} constructor(x, y, n) {
show() {} this.particles = [];
for (let i = 0; i < n; i++) {
const p = new Particle(x, y);
this.particles.push(p);
}
}
lifeover() {
return this.particles.length === 0;
}
update() {
this.particles.forEach((p, i) => {
if (p.lifeover()) {
this.particles.splice(i, 1);
} else {
p.update();
}
});
}
show() {
this.particles.forEach((p) => {
p.show();
});
}
} }

28
particle_demo.js
View File

@ -1,14 +1,30 @@
let particle; let particles = [];
function setup() { function setup() {
cursor(CROSS); cursor(CROSS);
colorMode(HSB); colorMode(HSB);
createCanvas(600, 600); createCanvas(700, 500);
particle = new Particle(width / 2, height / 2);
} }
function draw() { function draw() {
background(64); background("rgba(0,0,0,0.05)");
particle.move(); particles.forEach((ps, i) => {
particle.show(); if (ps.lifeover()) {
particles.splice(i, 1);
} else {
ps.update();
ps.show();
}
});
}
function mouseClicked() {
let ps = new Particles(mouseX, mouseY, 100);
let hue = random(0, 360);
ps.particles.forEach((p) => {
p.hue = hue;
p.saturation = 50;
p.velocity = p5.Vector.random2D().mult(random(0, 30));
});
particles.push(ps);
} }

8
sketch-template.js
View File

@ -17,3 +17,11 @@ function drawGrid() {
for (let y = 0; y < height; y += 10) line(0, y, width, y); for (let y = 0; y < height; y += 10) line(0, y, width, y);
pop(); pop();
} }
function textInfo() {
noStroke();
fill(0);
text("作品：太阳公公", 30, height - 70);
text("作者：赵海洋爸爸", 30, height - 50);
text("日期：2022/12/11", 30, height - 30);
}

15
vehicle.js
View File

@ -104,6 +104,21 @@ class Vehicle {
this.position.add(this.velocity); this.position.add(this.velocity);
this.acceleration.set(0, 0); this.acceleration.set(0, 0);
this.path.push(this.position.copy()); this.path.push(this.position.copy());
// this.acceleration.limit(this.maxAcceleration);
// // 计算时间差
// const duration = deltaTime / 1000;
// // 计算速度及位移
// const deltaVelocity = this.acceleration.mult(duration);
// const averageVelocity = deltaVelocity.copy().div(2).add(this.velocity);
// const movement = averageVelocity.mult(duration);
// // 更新速度及位置
// this.velocity.add(deltaVelocity);
// this.velocity.limit(this.maxVelocity);
// if (this.velocity.mag() > 0) this.heading = this.velocity.heading();
// this.position.add(movement);
// this.acceleration.set(0, 0);
// this.path.push(this.position.copy());
} }
turn() { turn() {

4
vehicle_demo.js
View File

@ -13,11 +13,11 @@ function setup() {
} }
function draw() { function draw() {
// 追逐鼠标(); 追逐鼠标();
// 逃避鼠标(); // 逃避鼠标();
// 小车追逐(); // 小车追逐();
// 小车巡游(); // 小车巡游();
小车巡线(); // 小车巡线();
// 道路追逐(); // 道路追逐();
} }