121 lines
4.4 KiB
HTML
121 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
<title>火把</title>
|
|
<script src="/p5/p5.min.js"></script>
|
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
|
<script src="/lib/utils.js"></script>
|
|
<script src="/lib/particle.js"></script>
|
|
<script>
|
|
let particles = [];
|
|
let img;
|
|
|
|
function setup() {
|
|
createCanvas(600, 600);
|
|
angleMode(DEGREES);
|
|
imageMode(CENTER);
|
|
frameRate(60);
|
|
noStroke();
|
|
noCursor();
|
|
img = loadImage("/img/transparencyfade.png");
|
|
}
|
|
|
|
function draw() {
|
|
火把();
|
|
// 落珠();
|
|
}
|
|
|
|
function 火把() {
|
|
clear();
|
|
background(0);
|
|
drawGrid();
|
|
const x = mouseIsPressed ? mouseX : 300;
|
|
const y = mouseIsPressed ? mouseY : 500;
|
|
// 添加新粒子
|
|
for (let i = 0; i < 1; i++) {
|
|
const p = new Particle(x, y);
|
|
p.velocity = p5.Vector.random2D().mult(random(10, 50));
|
|
p.life = 0.5;
|
|
particles.push(p);
|
|
}
|
|
// 绘制火把
|
|
fill("lightgray");
|
|
rect(x - 5, y, 10, 80);
|
|
fill("gray");
|
|
rect(x - 7, y, 14, 20);
|
|
// 更新并绘制所有粒子
|
|
push();
|
|
tint(255, 128, 64, 100);
|
|
image(img, x, y, 512, 512);
|
|
for (let i = particles.length - 1; i >= 0; i--) {
|
|
const p = particles[i];
|
|
noiseDetail(2, 0.5);
|
|
let windForce = map(
|
|
noise(frameCount / 100),
|
|
0,
|
|
1,
|
|
-1000,
|
|
1000
|
|
);
|
|
p.applyForce(createVector(windForce, 0));
|
|
p.applyForce(createVector(0, -1500));
|
|
p.move();
|
|
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, 32, 64);
|
|
tint(alpha, alpha / 3, alpha / 6, alpha);
|
|
blendMode(ADD);
|
|
image(img, p.position.x, p.position.y, size, size);
|
|
// fill(255, 128, 64, alpha);
|
|
// circle(p.position.x, p.position.y, size, size);
|
|
}
|
|
}
|
|
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");
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|