这次分别对 ChatGPT、Claude 以及最近刚用上的 Cursor 程序（我忘了是哪个引擎（ API ）回答的了），提出如下指示：
请你帮我做一个动态网页，用CSS、JS等生成，不需要用到服务器。
这是一个用于冥想呼吸的网页，它的色调和动作要柔和、缓慢，帮助人们宁静。
画面充满整个网页浏览器，上面有许许多多的柔和的线条（或许是分形图形）会不断随着时间缓慢变化，表现流动、韵律。背景色底色也会不断缓慢且随机地变化。
ChatGPT 的回答是：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冥想呼吸网页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #000;
font-family: Arial, sans-serif;
}
canvas {
display: block;
position: absolute;
width: 100vw;
height: 100vh;
}
/* 添加渐变背景颜色动画 */
@keyframes backgroundChange {
0% { background-color: #000; }
25% { background-color: #1a1a2e; }
50% { background-color: #16213e; }
75% { background-color: #0f3460; }
100% { background-color: #000; }
}
body {
animation: backgroundChange 20s infinite;
}
</style>
</head>
<body>
<canvas id="fractalCanvas"></canvas>
<script>
const canvas = document.getElementById('fractalCanvas');
const ctx = canvas.getContext('2d');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
// 创建分形线条动画
let time = 0;
function drawFractal() {
ctx.clearRect(0, 0, width, height);
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.beginPath();
const lines = 200; // 控制线条数量
for (let i = 0; i < lines; i++) {
const angle = Math.PI * 2 * i / lines + time * 0.001;
const x = width / 2 + Math.sin(angle) * (width / 2.5);
const y = height / 2 + Math.cos(angle) * (height / 2.5);
const dx = width / 2 + Math.sin(angle + time * 0.002) * (width / 3.5);
const dy = height / 2 + Math.cos(angle + time * 0.002) * (height / 3.5);
ctx.moveTo(x, y);
ctx.lineTo(dx, dy);
}
ctx.stroke();
time += 1; // 控制速度
}
// 动画循环
function animate() {
drawFractal();
requestAnimationFrame(animate);
}
animate();
// 监听窗口变化
window.addEventListener('resize', () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
});
</script>
</body>
</html>
说实话让我想到了《新世纪福音战士》中的某个环形的使徒。
Claude 的回答是：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冥想呼吸</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width, height;
function resizeCanvas() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
let hue = 0;
let time = 0;
function drawFractal(x, y, size, angle, depth) {
if (depth <= 0) return;
const x1 = x + Math.cos(angle) * size;
const y1 = y + Math.sin(angle) * size;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x1, y1);
ctx.stroke();
drawFractal(x1, y1, size * 0.7, angle - 0.5 + Math.sin(time * 0.01) * 0.2, depth - 1);
drawFractal(x1, y1, size * 0.7, angle + 0.5 + Math.sin(time * 0.01) * 0.2, depth - 1);
}
function animate() {
time++;
hue = (hue + 0.1) % 360;
ctx.fillStyle = `hsl(${hue}, 50%, 90%)`;
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = `hsla(${(hue + 180) % 360}, 70%, 50%, 0.5)`;
ctx.lineWidth = 2;
drawFractal(width / 2, height, height / 3, -Math.PI / 2, 9);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
这个倒真的是分形图了吧。
再来，Cursor 的回答是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冥想呼吸</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
let hue = 0;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function drawWave(yOffset, amplitude, frequency, phase) {
ctx.beginPath();
for (let x = 0; x < canvas.width; x += 5) {
const y = yOffset + Math.sin((x * frequency + phase) / 100) * amplitude;
ctx.lineTo(x, y);
}
ctx.stroke();
}
function drawCircle(x, y, radius, startAngle, endAngle) {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
}
function animate() {
time++;
hue = (hue + 0.1) % 360;
ctx.fillStyle = `hsl(${hue}, 50%, 90%)`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = `hsla(${(hue + 180) % 360}, 70%, 50%, 0.5)`;
ctx.lineWidth = 2;
// Draw multiple waves
for (let i = 0; i < 5; i++) {
drawWave(
canvas.height * (i + 1) / 6,
30 + Math.sin(time * 0.02) * 10,
0.5 + i * 0.1,
time * 0.02 + i
);
}
// Draw concentric circles
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
for (let i = 0; i < 5; i++) {
const radius = (100 + i * 50) + Math.sin(time * 0.02 + i) * 20;
drawCircle(centerX, centerY, radius, 0, Math.PI * 2);
}
// Draw moving circles
for (let i = 0; i < 3; i++) {
const x = centerX + Math.cos(time * 0.02 + i * Math.PI * 2 / 3) * 100;
const y = centerY + Math.sin(time * 0.02 + i * Math.PI * 2 / 3) * 100;
drawCircle(x, y, 30 + Math.sin(time * 0.05 + i) * 10, 0, Math.PI * 2);
}
requestAnimationFrame(animate);
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
animate();
</script>
</body>
</html>
三个小圈转来转去，有些时候可以看成是一张小脸。
可以将代码保存为文本文件，并将文件后缀名命名为 html ，以此作为本地静态网页查看。
各位看过后喜欢哪个？
