75 lines
3.0 KiB
HTML
75 lines
3.0 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>深渊爬虫</title>
|
||
<!-- 引入 p5.js 库 -->
|
||
<script src="https://wantsong.life/p5-demo/p5.js"></script>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
background-color: #000000; /* 页面背景色 */
|
||
}
|
||
/* p5.js 会创建一个 canvas 元素 */
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<script>
|
||
// 用户提供的 JavaScript 代码
|
||
// 这些变量将在全局作用域中定义或使用
|
||
var t;
|
||
var w; // 用于存储画布宽度
|
||
var a; // 点绘制函数
|
||
// 'draw' 将成为 p5.js 使用的全局绘制函数
|
||
|
||
// 定义函数 'a'
|
||
// 此函数依赖全局变量 't'。
|
||
// p5.js 函数如 mag, sin, cos, point 在全局模式下可直接使用。
|
||
a = (x, y, d = mag(k = (4 + sin(y * 2 - t) * 3) * cos(x / 29), e = y / 8 - 13)) =>
|
||
point(
|
||
(q = 3 * sin(k * 2) + 0.3 / k + sin(y / 25) * k * (9 + 4 * sin(e * 9 - d * 3 + t * 2))) + 30 * cos(c = d - t) + 200,
|
||
q * sin(c) + d * 39 - 220
|
||
);
|
||
|
||
// 初始化 't' 并定义 'draw' 函数
|
||
// 原始代码: t=0,draw=$=>{...}
|
||
// 这会首先将 t 设置为 0，然后定义 draw 函数。
|
||
|
||
t = 0; // 初始化时间变量
|
||
|
||
draw = $ => { // '$' 是一个参数占位符，此处未使用。p5.js 会调用此函数。
|
||
// 原始逻辑: t || createCanvas(w = 400, w);
|
||
// 这会在 t 为 0 (即第一帧) 时创建画布。
|
||
// w 被赋值为 400 并成为全局变量。
|
||
// 在后续帧中，t 不为 0，因此 createCanvas 不会再次执行，w 保留其值。
|
||
if (t === 0) { // 或者直接使用 t || createCanvas(...)
|
||
createCanvas(w = 400, w);
|
||
}
|
||
|
||
background(9); // 设置背景色 (深灰)
|
||
|
||
// stroke(w, 96); w 的值是 400。
|
||
// p5.js中 stroke(gray, alpha)，gray 的范围是 0-255。
|
||
// 超出范围的值会被限制到255。所以这里等效于 stroke(255, 96) (白色，带透明度)。
|
||
stroke(w, 96);
|
||
|
||
// 原始的 for 循环结构: for(t+=PI/240,i=1e4;i--;)a(i,i/235)
|
||
// for 循环的初始化部分 (t+=PI/240, let i=1e4) 在每次调用 draw 时执行一次。
|
||
// t 在循环开始前更新。
|
||
// 循环迭代 1e4 次。
|
||
let i_loop; // 循环变量
|
||
for (t += PI / 240, i_loop = 1e4; i_loop--; ) {
|
||
a(i_loop, i_loop / 235); // 调用函数 a 绘制点
|
||
}
|
||
};
|
||
|
||
// p5.js 会自动查找并执行全局的 setup() 和 draw() 函数。
|
||
// 此处我们只定义了 draw()，并且在 draw() 内部处理了 canvas 的创建。
|
||
</script>
|
||
</body>
|
||
</html> |