99 lines
3.5 KiB
HTML
99 lines
3.5 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 x, y;
|
|
let 粒子贴图;
|
|
let isDragging = false;
|
|
let particles = [];
|
|
|
|
function setup() {
|
|
createCanvas(600, 600);
|
|
imageMode(CENTER);
|
|
frameRate(60);
|
|
noStroke();
|
|
cursor(HAND);
|
|
x = width / 2;
|
|
y = height - 100;
|
|
粒子贴图 = loadImage("/img/transparencyfade.png");
|
|
}
|
|
|
|
function draw() {
|
|
clear();
|
|
background(0);
|
|
drawGrid(32);
|
|
|
|
if (
|
|
mouseIsPressed &&
|
|
!isDragging &&
|
|
isMouseIn(x - 5, y, 10, 80)
|
|
) {
|
|
isDragging = true;
|
|
} else if (!mouseIsPressed) {
|
|
isDragging = false;
|
|
}
|
|
|
|
if (isDragging) (x += movedX), (y += movedY);
|
|
// 添加新粒子
|
|
for (let i = 0; i < 2; 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();
|
|
blendMode(ADD);
|
|
tint(255, 128, 64, 64);
|
|
image(粒子贴图, x, y - 20, 512, 512);
|
|
for (let i = particles.length - 1; i >= 0; i--) {
|
|
const p = particles[i];
|
|
let wind = map(noise(frameCount / 60), 0, 1, -1000, 1000);
|
|
p.applyForce(createVector(wind, 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);
|
|
image(粒子贴图, 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 isMouseIn(x, y, w, h) {
|
|
let mx = mouseX - x;
|
|
let my = mouseY - y;
|
|
return mx > 0 && mx < x + w && my > 0 && my < y + h;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|