Ubuntu
317 lines
11 KiB
HTML
317 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>11 - FLOW FIELD | 向量力场</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: #050508;
|
|
overflow: hidden;
|
|
font-family: 'Space Mono', 'Courier New', monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
filter: contrast(1.1) saturate(1.2);
|
|
}
|
|
.info {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
color: #00f5d4;
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
text-shadow: 0 0 20px rgba(0,245,212,0.5);
|
|
}
|
|
.info h1 {
|
|
font-size: 20px;
|
|
margin-bottom: 8px;
|
|
font-family: 'Syncopate', sans-serif;
|
|
letter-spacing: 3px;
|
|
}
|
|
.info p {
|
|
opacity: 0.8;
|
|
font-size: 12px;
|
|
margin: 4px 0;
|
|
}
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
background: rgba(5,5,8,0.9);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
border: 1px solid #1a1a2e;
|
|
backdrop-filter: blur(10px);
|
|
font-family: 'Space Mono', monospace;
|
|
}
|
|
.control-group {
|
|
margin: 12px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.control-group label {
|
|
width: 100px;
|
|
color: #888;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.control-group input[type="range"] {
|
|
width: 150px;
|
|
-webkit-appearance: none;
|
|
background: #1a1a2e;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
.control-group input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #00f5d4;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(0,245,212,0.5);
|
|
}
|
|
.control-group span {
|
|
color: #00f5d4;
|
|
min-width: 40px;
|
|
font-size: 11px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<div class="info">
|
|
<h1>11 - FLOW FIELD</h1>
|
|
<p>Perlin Noise 向量力场</p>
|
|
<p>粒子数: <span id="count">4096</span></p>
|
|
<p>FPS: <span id="fps">0</span></p>
|
|
</div>
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label>噪声缩放</label>
|
|
<input type="range" id="noiseScale" min="0.001" max="0.02" step="0.001" value="0.005">
|
|
<span id="scaleVal">0.005</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>时间流速</label>
|
|
<input type="range" id="timeScale" min="0.1" max="3" step="0.1" value="0.5">
|
|
<span id="timeVal">0.5</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>粒子速度</label>
|
|
<input type="range" id="speed" min="1" max="8" step="0.5" value="4">
|
|
<span id="speedVal">4</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>轨迹长度</label>
|
|
<input type="range" id="trail" min="5" max="30" step="1" value="15">
|
|
<span id="trailVal">15</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
// Perlin Noise Implementation
|
|
const perm = [];
|
|
for (let i = 0; i < 512; i++) perm[i] = Math.floor(Math.random() * 256);
|
|
|
|
function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
|
|
function lerp(t, a, b) { return a + t * (b - a); }
|
|
function grad(hash, x, y) {
|
|
const h = hash & 15;
|
|
const u = h < 8 ? x : y;
|
|
const v = h < 4 ? y : h === 12 || h === 14 ? x : 0;
|
|
return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
|
|
}
|
|
|
|
function noise(x, y) {
|
|
const X = Math.floor(x) & 255;
|
|
const Y = Math.floor(y) & 255;
|
|
x -= Math.floor(x);
|
|
y -= Math.floor(y);
|
|
const u = fade(x);
|
|
const v = fade(y);
|
|
const A = perm[X] + Y, B = perm[X + 1] + Y;
|
|
return lerp(v, lerp(u, grad(perm[A], x, y), grad(perm[B], x - 1, y)),
|
|
lerp(u, grad(perm[A + 1], x, y - 1), grad(perm[B + 1], x - 1, y - 1)));
|
|
}
|
|
|
|
// Particle System
|
|
const PARTICLE_COUNT = 4096;
|
|
const particles = [];
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.vx = 0;
|
|
this.vy = 0;
|
|
this.history = [];
|
|
this.maxHistory = 15;
|
|
this.life = 1;
|
|
this.decay = 0.995;
|
|
}
|
|
|
|
update(noiseScale, timeScale, speed) {
|
|
// Store history for trail
|
|
this.history.push({x: this.x, y: this.y});
|
|
if (this.history.length > this.maxHistory) {
|
|
this.history.shift();
|
|
}
|
|
|
|
// Get flow field angle from noise
|
|
const angle = noise(this.x * noiseScale, this.y * noiseScale + time) * Math.PI * 4;
|
|
|
|
// Update velocity with smooth interpolation
|
|
const targetVx = Math.cos(angle) * speed;
|
|
const targetVy = Math.sin(angle) * speed;
|
|
this.vx += (targetVx - this.vx) * 0.1;
|
|
this.vy += (targetVy - this.vy) * 0.1;
|
|
|
|
// Update position
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
|
|
// Wrap around edges
|
|
if (this.x < 0) { this.x = canvas.width; this.history = []; }
|
|
if (this.x > canvas.width) { this.x = 0; this.history = []; }
|
|
if (this.y < 0) { this.y = canvas.height; this.history = []; }
|
|
if (this.y > canvas.height) { this.y = 0; this.history = []; }
|
|
|
|
this.life *= this.decay;
|
|
if (this.life < 0.1) {
|
|
this.reset();
|
|
}
|
|
}
|
|
|
|
draw(ctx, maxHistory) {
|
|
if (this.history.length < 2) return;
|
|
|
|
// Calculate velocity for color
|
|
const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
|
|
const speedRatio = Math.min(speed / 6, 1);
|
|
|
|
// Color based on velocity: slow=cyan, fast=gold
|
|
const hue = 170 + speedRatio * 50; // 170 (cyan) to 220 (purple)
|
|
const saturation = 80 + speedRatio * 20;
|
|
const lightness = 50 + speedRatio * 20;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.history[0].x, this.history[0].y);
|
|
|
|
for (let i = 1; i < this.history.length; i++) {
|
|
const alpha = (i / this.history.length) * 0.6 * this.life;
|
|
ctx.lineTo(this.history[i].x, this.history[i].y);
|
|
}
|
|
|
|
ctx.strokeStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${0.4 * this.life})`;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.stroke();
|
|
|
|
// Draw particle head with glow
|
|
const gradient = ctx.createRadialGradient(
|
|
this.x, this.y, 0,
|
|
this.x, this.y, 8
|
|
);
|
|
gradient.addColorStop(0, `hsla(${hue}, ${saturation}%, ${lightness + 20}%, ${this.life})`);
|
|
gradient.addColorStop(0.5, `hsla(${hue}, ${saturation}%, ${lightness}%, ${0.5 * this.life})`);
|
|
gradient.addColorStop(1, 'transparent');
|
|
|
|
ctx.fillStyle = gradient;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, 8, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
// Initialize particles
|
|
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
|
|
// UI Controls
|
|
const noiseScaleSlider = document.getElementById('noiseScale');
|
|
const timeScaleSlider = document.getElementById('timeScale');
|
|
const speedSlider = document.getElementById('speed');
|
|
const trailSlider = document.getElementById('trail');
|
|
|
|
noiseScaleSlider.addEventListener('input', (e) => {
|
|
document.getElementById('scaleVal').textContent = e.target.value;
|
|
});
|
|
timeScaleSlider.addEventListener('input', (e) => {
|
|
document.getElementById('timeVal').textContent = e.target.value;
|
|
});
|
|
speedSlider.addEventListener('input', (e) => {
|
|
document.getElementById('speedVal').textContent = e.target.value;
|
|
});
|
|
trailSlider.addEventListener('input', (e) => {
|
|
document.getElementById('trailVal').textContent = e.target.value;
|
|
particles.forEach(p => p.maxHistory = parseInt(e.target.value));
|
|
});
|
|
|
|
// Animation loop
|
|
let time = 0;
|
|
let lastTime = performance.now();
|
|
let frameCount = 0;
|
|
const fpsEl = document.getElementById('fps');
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
|
|
// FPS counter
|
|
const now = performance.now();
|
|
frameCount++;
|
|
if (now - lastTime >= 1000) {
|
|
fpsEl.textContent = frameCount;
|
|
frameCount = 0;
|
|
lastTime = now;
|
|
}
|
|
|
|
// Fade effect for trails
|
|
ctx.fillStyle = 'rgba(5, 5, 8, 0.15)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Additive blending for glow
|
|
ctx.globalCompositeOperation = 'lighter';
|
|
|
|
// Update time
|
|
const timeScale = parseFloat(timeScaleSlider.value);
|
|
time += 0.01 * timeScale;
|
|
|
|
const noiseScale = parseFloat(noiseScaleSlider.value);
|
|
const speed = parseFloat(speedSlider.value);
|
|
|
|
// Update and draw particles
|
|
for (const p of particles) {
|
|
p.update(noiseScale, timeScale, speed);
|
|
p.draw(ctx, p.maxHistory);
|
|
}
|
|
|
|
ctx.globalCompositeOperation = 'source-over';
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html>
|