pengxiao
ddbb79b9f6
单容器 Docker 架构的国土空间规划课程智能问答系统，集成 FastAPI 后端与 Next.js 前端。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
129 lines
3.9 KiB
HTML
129 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>p5.js 互动图形 Demo</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.min.js"></script>
|
|
<style>
|
|
body { margin: 0; overflow: hidden; background: #000; }
|
|
canvas { display: block; }
|
|
#info {
|
|
position: fixed; bottom: 20px; left: 50%;
|
|
transform: translateX(-50%);
|
|
color: rgba(255,255,255,0.6);
|
|
font-family: system-ui, sans-serif;
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="info">移动鼠标生成图形 | 点击产生爆炸 | 按空格清空画布</div>
|
|
<script>
|
|
let shapes = [];
|
|
let hueOffset = 0;
|
|
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight);
|
|
colorMode(HSB, 360, 100, 100, 100);
|
|
rectMode(CENTER);
|
|
}
|
|
|
|
function draw() {
|
|
background(0, 0, 0, 5);
|
|
|
|
for (let i = shapes.length - 1; i >= 0; i--) {
|
|
let s = shapes[i];
|
|
s.angle += s.rotSpeed;
|
|
s.size += s.growSpeed;
|
|
s.alpha -= s.fadeSpeed;
|
|
|
|
if (s.alpha <= 0) {
|
|
shapes.splice(i, 1);
|
|
continue;
|
|
}
|
|
|
|
push();
|
|
translate(s.x, s.y);
|
|
rotate(s.angle);
|
|
noStroke();
|
|
fill(s.hue, s.sat, s.bright, s.alpha);
|
|
|
|
if (s.type === 0) {
|
|
ellipse(0, 0, s.size, s.size);
|
|
} else if (s.type === 1) {
|
|
triangle(
|
|
0, -s.size / 2,
|
|
-s.size / 2, s.size / 2,
|
|
s.size / 2, s.size / 2
|
|
);
|
|
} else {
|
|
rect(0, 0, s.size, s.size);
|
|
}
|
|
pop();
|
|
}
|
|
|
|
hueOffset = (hueOffset + 0.5) % 360;
|
|
}
|
|
|
|
function mouseMoved() {
|
|
let hue = (hueOffset + random(-20, 20) + 360) % 360;
|
|
shapes.push({
|
|
x: mouseX + random(-15, 15),
|
|
y: mouseY + random(-15, 15),
|
|
size: random(10, 30),
|
|
angle: random(TWO_PI),
|
|
rotSpeed: random(-0.05, 0.05),
|
|
growSpeed: random(0.3, 1.2),
|
|
fadeSpeed: random(0.8, 2.0),
|
|
alpha: 80,
|
|
hue: hue,
|
|
sat: random(60, 90),
|
|
bright: random(70, 100),
|
|
type: floor(random(3))
|
|
});
|
|
|
|
if (shapes.length > 500) {
|
|
shapes.splice(0, 50);
|
|
}
|
|
}
|
|
|
|
function mousePressed() {
|
|
let count = floor(random(15, 25));
|
|
for (let i = 0; i < count; i++) {
|
|
let angle = random(TWO_PI);
|
|
let dist = random(20, 120);
|
|
let hue = (hueOffset + random(-40, 40) + 360) % 360;
|
|
shapes.push({
|
|
x: mouseX + cos(angle) * dist,
|
|
y: mouseY + sin(angle) * dist,
|
|
size: random(8, 25),
|
|
angle: angle,
|
|
rotSpeed: random(-0.08, 0.08),
|
|
growSpeed: random(0.5, 2.0),
|
|
fadeSpeed: random(1.0, 2.5),
|
|
alpha: 90,
|
|
hue: hue,
|
|
sat: random(70, 100),
|
|
bright: random(80, 100),
|
|
type: floor(random(3))
|
|
});
|
|
}
|
|
}
|
|
|
|
function keyPressed() {
|
|
if (key === ' ') {
|
|
shapes = [];
|
|
background(0);
|
|
}
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|