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 20:04:55 +08:00
parent dcb636442f
commit 5b3f0723b3
8 changed files with 196 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
demo_noise.js Normal file
View File

@ -0,0 +1,82 @@
let x,
y,
time = 0,
size = 10,
path = [];
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);
pixelDensity(1);
colorMode(HSB);
cursor(CROSS);
frameRate(60);
x = width / 2;
y = height / 2;
noiseDetail(2, 0.5);
}
function draw() {
一维柏林噪声();
// 二维柏林噪声();
}
function 二维柏林噪声() {
background(0);
noStroke();
time += deltaTime / 1000;
for (let j = 0; j < height; j += size) {
for (let i = 0; i < width; i += size) {
const r = map(noise(i / 100 + time, j / 100), 0, 1, 0, 10);
circle(i, j, r);
}
}
drawGrid();
textInfo("二维柏林噪声", "2022/12/12");
}
function 一维柏林噪声() {
background(0);
drawGrid();
time += deltaTime / 1000;
y = map(noise(time), 0, 1, 0, width);
h = map(y, 0, height, 0, 255);
path.push(h);
path = path.slice(-height);
push();
noFill();
stroke(255);
strokeWeight(2);
beginShape();
path.forEach((h, i) => vertex(i, h));
endShape();
strokeWeight(8);
path.forEach((h, i) => {
stroke(h, 255, 255, 1);
point(i, height / 2);
});
noStroke();
fill(h, 255, 255, 1);
circle(x, y, 16);
pop();
textInfo("一维柏林噪声", "2022/12/12");
}
function drawGrid() {
push();
stroke(0, 0, 255, 0.1);
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();
}

50
demo_particle.js Normal file
View File

@ -0,0 +1,50 @@
let particles = [];
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);
frameRate(60);
noStroke();
noCursor();
}
function draw() {
torch();
}
/**
* 火把
*/
function torch() {
background(0);
const x = mouseIsPressed ? mouseX : 300;
const y = mouseIsPressed ? mouseY : 500;
// 添加新粒子
for (let i = 0; i < 5; i++) {
const p = new Particle(x, y);
p.velocity.x = random(-1, 1) * 30;
p.velocity.y = random(-5, -1) * 50;
particles.push(p);
}
// 绘制火把
fill("lightgray");
rect(x - 5, y - 10, 10, 80);
fill("gray");
rect(x - 7, y - 10, 14, 20);
// 更新并绘制所有粒子
push();
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.applyForce(createVector(0, -100));
p.update();
if (p.finished) {
particles.splice(i, 1);
} else {
const alpha = map(p.duration, 0, p.life, 255, 0);
const size = map(p.duration, 0, p.life, 8, 32);
fill(255, alpha);
circle(p.position.x, p.position.y, size);
}
}
pop();
}

0
vehicle_demo.js → demo_vehicle.js
View File

5
index.html
View File

@ -21,8 +21,9 @@
</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="particle.js"></script> -->
<!-- <script src="particle_demo.js"></script> -->
<script src="demo_noise.js"></script>
</head>
<body>

79
particle.js
View File

@ -1,73 +1,38 @@
class Particle {
constructor(x, y) {
this.mass = 1;
this.position = createVector(x, y);
this.velocity = createVector(0, 0);
this.gravity = createVector(0, 10); // G = 9.81
this.hue = 0;
this.saturation = 0;
this.brightness = 100;
this.alpha = 1;
this.size = 2;
this.lifetime = 0;
this.endtime = 5;
this.acceleration = createVector(0, 0);
this.duration = 0;
this.life = 1;
this.mass = 1;
}
lifeover() {
return this.lifetime >= this.endtime;
get heading() {
return this.velocity.heading();
}
update(force) {
if (this.lifeover()) return;
// 计算加速度
const acceleration = createVector(0, 0);
acceleration.add(this.gravity);
if (force) acceleration.add(force.div(this.mass));
// 计算时间差
const duration = deltaTime / 1000;
this.lifetime += duration;
// 计算速度差及位移
const deltaVelocity = acceleration.mult(duration);
const averageVelocity = deltaVelocity.copy().div(2).add(this.velocity);
const movement = averageVelocity.mult(duration);
// 更新速度及位置
this.velocity.add(deltaVelocity);
this.position.add(movement);
get finished() {
return this.duration >= this.life;
}
show() {
if (this.lifeover()) return;
noStroke();
fill(this.hue, this.saturation, this.brightness, this.alpha);
circle(this.position.x, this.position.y, this.size);
}
}
class Particles {
constructor(x, y, n) {
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;
applyForce(force) {
this.acceleration.add(force.div(this.mass));
}
update() {
this.particles.forEach((p, i) => {
if (p.lifeover()) {
this.particles.splice(i, 1);
} else {
p.update();
}
});
}
show() {
this.particles.forEach((p) => {
p.show();
});
// 重力加速度
this.acceleration.add(this.gravity); // G = 9.81
// 计算时间差
const duration = deltaTime / 1000; // 秒
this.duration += duration;
// 计算速度差及位移
const deltaVelocity = this.acceleration.mult(duration);
const averageVelocity = deltaVelocity.copy().div(2).add(this.velocity);
const displacement = averageVelocity.mult(duration);
// 更新速度及位置
this.velocity.add(deltaVelocity);
this.position.add(displacement);
}
}

30
particle_demo.js
View File

@ -1,30 +0,0 @@
let particles = [];
function setup() {
cursor(CROSS);
colorMode(HSB);
createCanvas(700, 500);
}
function draw() {
background("rgba(0,0,0,0.05)");
particles.forEach((ps, i) => {
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);
}

21
sketch-template.js
View File

@ -1,27 +1,34 @@
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);
pixelDensity(1);
colorMode(HSB);
cursor(CROSS);
frameRate(60);
}
function draw() {
background(64);
background(0);
drawGrid();
textInfo();
}
function drawGrid() {
push();
stroke(0, 64);
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() {
function textInfo(title, date, name = "赵海洋爸爸") {
push();
noStroke();
fill(0);
text("作品：太阳公公", 30, height - 70);
text("作者：赵海洋爸爸", 30, height - 50);
text("日期：2022/12/11", 30, height - 30);
fill(255);
text(`作品：${title}`, 30, height - 70);
text(`作者：${name}`, 30, height - 50);
text(`日期：${date}`, 30, height - 30);
pop();
}

45
sketch.js
View File

@ -1,29 +1,34 @@
function setup() {
createCanvas(400, 400);
stroke("#FFFF00");
strokeWeight(8);
createCanvas(600, 600);
angleMode(DEGREES);
pixelDensity(1);
colorMode(HSB);
cursor(CROSS);
frameRate(60);
noCursor();
}
function draw() {
background("skyblue");
// 移动原点坐标
background(0);
drawGrid();
textInfo();
}
function drawGrid() {
push();
translate(mouseX, mouseY);
const a = 1 + (frameCount % 30);
// 画太阳
fill("#FFCC00");
circle(0, 0, 100);
noFill();
arc(-20, 0, 20, 20, -135, -45);
arc(20, 0, 20, 20, -135, -45);
arc(0, 10, 40, 40, 45, 135);
// 画阳光
for (let i = 0, n = 36; i < n; i++) {
line(0, -60 - a * 10, 0, -80 - a * 10);
rotate(360 / n);
}
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();
}