HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 代码来源于https://x.com/yuruyurau -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Point Animation</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取 canvas 元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
const width = 1200;
const height = 1200;
canvas.width = width;
canvas.height = height;
// 初始化变量
let t = 0;
// 定义点绘制函数
function point(x, y) {
ctx.beginPath();
ctx.arc(x, y, 1, 0, Math.PI * 2);
ctx.stroke();
}
// 定义主函数
function draw() {
// 清除画布
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);
// 设置线条颜色
ctx.strokeStyle = '#606060';
// 增加时间变量
t += Math.PI / 240;
// 绘制点
for (let i = 0; i < 10000; i++) {
const x = i;
const y = i / 235;
// 计算 k 和 e
const k = (4 + Math.sin(y * 2 - t) * 3) * Math.cos(x / 29);
const e = y / 8 - 13;
// 计算 d
const d = Math.sqrt(k * k + e * e);
// 计算 q 和 c
const q = 3 * Math.sin(k * 2) + 0.3 / k + Math.sin(y / 25) * k * (9 + 4 * Math.sin(e * 9 - d * 3 + t * 2));
const c = d - t;
// 计算点的坐标
const px = (q + 30 * Math.cos(c))*3 +600;
const py = (q * Math.sin(c) + d * 39 - 220)*3;
// 绘制点
point(px, py);
}
// 请求下一帧动画
requestAnimationFrame(draw);
}
// 开始动画
draw();
</script>
</body>
</html>
发表回复