update
This commit is contained in:
parent
dcb636442f
commit
5b3f0723b3
82
demo_noise.js
Normal file
82
demo_noise.js
Normal 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
50
demo_particle.js
Normal 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();
|
||||||
|
}
|
||||||
@ -21,8 +21,9 @@
|
|||||||
</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="particle.js"></script>
|
<!-- <script src="particle.js"></script> -->
|
||||||
<script src="particle_demo.js"></script>
|
<!-- <script src="particle_demo.js"></script> -->
|
||||||
|
<script src="demo_noise.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
79
particle.js
79
particle.js
@ -1,73 +1,38 @@
|
|||||||
class Particle {
|
class Particle {
|
||||||
constructor(x, y) {
|
constructor(x, y) {
|
||||||
this.mass = 1;
|
|
||||||
this.position = createVector(x, y);
|
this.position = createVector(x, y);
|
||||||
this.velocity = createVector(0, 0);
|
this.velocity = createVector(0, 0);
|
||||||
this.gravity = createVector(0, 10); // G = 9.81
|
this.gravity = createVector(0, 10); // G = 9.81
|
||||||
this.hue = 0;
|
this.acceleration = createVector(0, 0);
|
||||||
this.saturation = 0;
|
this.duration = 0;
|
||||||
this.brightness = 100;
|
this.life = 1;
|
||||||
this.alpha = 1;
|
this.mass = 1;
|
||||||
this.size = 2;
|
|
||||||
this.lifetime = 0;
|
|
||||||
this.endtime = 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
lifeover() {
|
get heading() {
|
||||||
return this.lifetime >= this.endtime;
|
return this.velocity.heading();
|
||||||
}
|
}
|
||||||
|
|
||||||
update(force) {
|
get finished() {
|
||||||
if (this.lifeover()) return;
|
return this.duration >= this.life;
|
||||||
// 计算加速度
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
show() {
|
applyForce(force) {
|
||||||
if (this.lifeover()) return;
|
this.acceleration.add(force.div(this.mass));
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
this.particles.forEach((p, i) => {
|
// 重力加速度
|
||||||
if (p.lifeover()) {
|
this.acceleration.add(this.gravity); // G = 9.81
|
||||||
this.particles.splice(i, 1);
|
// 计算时间差
|
||||||
} else {
|
const duration = deltaTime / 1000; // 秒
|
||||||
p.update();
|
this.duration += duration;
|
||||||
}
|
// 计算速度差及位移
|
||||||
});
|
const deltaVelocity = this.acceleration.mult(duration);
|
||||||
}
|
const averageVelocity = deltaVelocity.copy().div(2).add(this.velocity);
|
||||||
show() {
|
const displacement = averageVelocity.mult(duration);
|
||||||
this.particles.forEach((p) => {
|
// 更新速度及位置
|
||||||
p.show();
|
this.velocity.add(deltaVelocity);
|
||||||
});
|
this.position.add(displacement);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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);
|
|
||||||
}
|
|
||||||
@ -1,27 +1,34 @@
|
|||||||
function setup() {
|
function setup() {
|
||||||
createCanvas(600, 600);
|
createCanvas(600, 600);
|
||||||
angleMode(DEGREES);
|
angleMode(DEGREES);
|
||||||
|
pixelDensity(1);
|
||||||
|
colorMode(HSB);
|
||||||
cursor(CROSS);
|
cursor(CROSS);
|
||||||
frameRate(60);
|
frameRate(60);
|
||||||
}
|
}
|
||||||
|
|
||||||
function draw() {
|
function draw() {
|
||||||
background(64);
|
background(0);
|
||||||
|
|
||||||
|
drawGrid();
|
||||||
|
textInfo();
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawGrid() {
|
function drawGrid() {
|
||||||
push();
|
push();
|
||||||
stroke(0, 64);
|
stroke(255, 64);
|
||||||
strokeWeight(1);
|
strokeWeight(1);
|
||||||
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
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);
|
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
||||||
pop();
|
pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
function textInfo() {
|
function textInfo(title, date, name = "赵海洋爸爸") {
|
||||||
|
push();
|
||||||
noStroke();
|
noStroke();
|
||||||
fill(0);
|
fill(255);
|
||||||
text("作品：太阳公公", 30, height - 70);
|
text(`作品：${title}`, 30, height - 70);
|
||||||
text("作者：赵海洋爸爸", 30, height - 50);
|
text(`作者：${name}`, 30, height - 50);
|
||||||
text("日期：2022/12/11", 30, height - 30);
|
text(`日期：${date}`, 30, height - 30);
|
||||||
|
pop();
|
||||||
}
|
}
|
||||||
|
|||||||
45
sketch.js
45
sketch.js
@ -1,29 +1,34 @@
|
|||||||
function setup() {
|
function setup() {
|
||||||
createCanvas(400, 400);
|
createCanvas(600, 600);
|
||||||
stroke("#FFFF00");
|
|
||||||
strokeWeight(8);
|
|
||||||
angleMode(DEGREES);
|
angleMode(DEGREES);
|
||||||
|
pixelDensity(1);
|
||||||
|
colorMode(HSB);
|
||||||
|
cursor(CROSS);
|
||||||
frameRate(60);
|
frameRate(60);
|
||||||
noCursor();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function draw() {
|
function draw() {
|
||||||
background("skyblue");
|
background(0);
|
||||||
// 移动原点坐标
|
|
||||||
push();
|
drawGrid();
|
||||||
translate(mouseX, mouseY);
|
textInfo();
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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();
|
pop();
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user