Fluid simulation · qwen3-coder-flash
Create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid.
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Real-time Fluid Simulation</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 100vh; display: flex; flex-direction: column; } #canvas-container { position: relative; flex: 1; width: 100%; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #info { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 14px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 10; } #title { position: absolute; top: 20px; left: 0; width: 100%; text-align: center; color: white; font-size: 28px; font-weight: bold; text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); letter-spacing: 2px; z-index: 10; } #instructions { position: absolute; top: 60px; left: 0; width: 100%; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 16px; z-index: 10; } </style> </head> <body> <div id="title">FLUID DYE SIMULATION</div> <div id="instructions">Drag your mouse to push swirling colored dye through the fluid</div> <div id="canvas-container"> <canvas id="fluidCanvas"></canvas> <canvas id="dyeCanvas"></canvas> </div> <div id="info">Real-time fluid dynamics simulation | Move mouse to interact</div> <script> // Main simulation parameters const params = { resolution: 64, viscosity: 0.02, diffusion: 0.0001, dyeDiffusion: 0.0003, mouseRadius: 20, mouseForce: 10, dt: 0.016 }; // Canvas setup const container = document.getElementById('canvas-container'); const fluidCanvas = document.getElementById('fluidCanvas'); const dyeCanvas = document.getElementById('dyeCanvas'); const fluidCtx = fluidCanvas.getContext('2d'); const dyeCtx = dyeCanvas.getContext('2d'); // Set canvas sizes function resizeCanvases() { const rect = container.getBoundingClientRect(); fluidCanvas.width = rect.width; fluidCanvas.height = rect.height; dyeCanvas.width = rect.width; dyeCanvas.height = rect.height; } window.addEventListener('resize', resizeCanvases); resizeCanvases(); // Fluid simulation class class FluidSimulation { constructor(width, height, resolution) { this.width = width; this.height = height; this.resolution = resolution; // Velocity fields this.velocities = { current: this.createArray(), next: this.createArray() }; // Density fields this.densities = { current: this.createArray(), next: this.createArray() }; // Previous mouse position this.prevMouseX = 0; this.prevMouseY = 0; // Mouse state this.isMouseDown = false; this.mouseX = 0; this.mouseY = 0; } createArray() { return new Array(this.resolution * this.resolution).fill(0); } // Get array index from coordinates getIndex(x, y) { return Math.max(0, Math.min(this.resolution - 1, x)) + Math.max(0, Math.min(this.resolution - 1, y)) * this.resolution; } // Add density at position addDensity(x, y, amount) { const i = this.getIndex(Math.floor(x), Math.floor(y)); this.densities.current[i] += amount; } // Add velocity at position addVelocity(x, y, amountX, amountY) { const i = this.getIndex(Math.floor(x), Math.floor(y)); this.velocities.current[i * 2] += amountX; this.velocities.current[i * 2 + 1] += amountY; } // Diffuse field diffuse(field, nextField, diff, dt) { const a = dt * diff * (this.resolution - 2) * (this.resolution - 2); const c = 1 + 4 * a; for (let k = 0; k < 20; k++) { for (let j = 1; j < this.resolution - 1; j++) { for (let i = 1; i < this.resolution - 1; i++) { const idx = this.getIndex(i, j); nextField[idx] = (field[idx] + a * ( nextField[this.getIndex(i - 1, j)] + nextField[this.getIndex(i + 1, j)] + nextField[this.getIndex(i, j - 1)] + nextField[this.getIndex(i, j + 1)] )) / c; } } } [field, nextField] = [nextField, field]; } // Project velocity field project(veloc, p, div) { const h = 1.0 / this.resolution; for (let j = 1; j < this.resolution - 1; j++) { for (let i = 1; i < this.resolution - 1; i++) { const idx = this.getIndex(i, j); div[idx] = -0.5 * h * ( veloc[this.getIndex(i + 1, j)] - veloc[this.getIndex(i - 1, j)] + veloc[this.getIndex(i, j + 1)] - veloc[this.getIndex(i, j - 1)] ); p[idx] = 0; } } for (let k = 0; k < 20; k++) { for (let j = 1; j < this.resolution - 1; j++) { for (let i = 1; i < this.resolution - 1; i++) { const idx = this.getIndex(i, j); p[idx] = (div[idx] + p[this.getIndex(i - 1, j)] + p[this.getIndex(i + 1, j)] + p[this.getIndex(i, j - 1)] + p[this.getIndex(i, j + 1)]) / 4; } } } for (let j = 1; j < this.resolution - 1; j++) { for (let i = 1; i < this.resolution - 1; i++) { const idx = this.getIndex(i, j); veloc[this.getIndex(i, j) + 1] -= 0.5 * (p[this.getIndex(i + 1, j)] - p[this.getIndex(i - 1, j)]) / h; veloc[this.getIndex(i, j) + 2] -= 0.5 * (p[this.getIndex(i, j + 1)] - p[this.getIndex(i, j - 1)]) / h; } } } // Advect field advect(field, nextField, veloc, dt) { const dt0 = dt * (this.resolution - 2); for (let j = 1; j < this.resolution - 1; j++) { for (let i = 1; i < this.resolution - 1; i++) { let x = i - dt0 * veloc[this.getIndex(i, j)]; let y = j - dt0 * veloc[this.getIndex(i, j) + 1]; if (x < 0.5) x = 0.5; if (x > this.resolution - 1.5) x = this.resolution - 1.5; const i0 = Math.floor(x); const i1 = i0 + 1; if (y < 0.5) y = 0.5; if (y > this.resolution - 1.5) y = this.resolution - 1.5; const j0 = Math.floor(y); const j1 = j0 + 1; const s1 = x - i0; const s0 = 1 - s1; const t1 = y - j0; const t0 = 1 - t1; const idx = this.getIndex(i, j); nextField[idx] = s0 * (t0 * field[this.getIndex(i0, j0)] + t1 * field[this.getIndex(i0, j1)]) + s1 * (t0 * field[this.getIndex(i1, j0)] + t1 * field[this.getIndex(i1, j1)]); } } } // Step simulation step() { // Add mouse interaction if (this.isMouseDown) { const dx = this.mouseX - this.prevMouseX; const dy = this.mouseY - this.prevMouseY; const cellSize = this.resolution / Math.min(this.width, this.height); const mouseXCell = this.mouseX * cellSize; const mouseYCell = this.mouseY * cellSize; // Add dye for (let i = -params.mouseRadius; i <= params.mouseRadius; i++) { for (let j = -params.mouseRadius; j <= params.mouseRadius; j++) { if (i*i + j*j <= params.mouseRadius*params.mouseRadius) { this.addDensity( mouseXCell + i, mouseYCell + j, 100 ); // Add velocity in direction of mouse movement this.addVelocity( mouseXCell + i, mouseYCell + j, dx * 5, dy * 5 ); } } } } // Update previous mouse position this.prevMouseX = this.mouseX; this.prevMouseY = this.mouseY; // Diffuse and advect densities this.diffuse(this.densities.current, this.densities.next, params.dyeDiffusion, params.dt); this.advect(this.densities.next, this.densities.current, this.velocities.current, params.dt); // Diffuse and advect velocities this.diffuse(this.velocities.current, this.velocities.next, params.viscosity, params.dt); this.project(this.velocities.next, this.velocities.current, this.densities.current); this.advect(this.velocities.current, this.velocities.next, this.velocities.current, params.dt); this.project(this.velocities.next, this.velocities.current, this.densities.current); [this.velocities.current, this.velocities.next] = [this.velocities.next, this.velocities.current]; [this.densities.current, this.densities.next] = [this.densities.next, this.densities.current]; } // Render simulation render(ctx) { const cellWidth = this.width / this.resolution; const cellHeight = this.height / this.resolution; ctx.clearRect(0, 0, this.width, this.height); // Draw density field with color gradient for (let j = 0; j < this.resolution; j++) { for (let i = 0; i < this.resolution; i++) { const idx = this.getIndex(i, j); const density = this.densities.current[idx]; if (density > 0.1) { // Create colorful effect based on density const intensity = Math.min(1, density / 100); const hue = (j * 10 + i * 5) % 360; ctx.fillStyle = `hsla(${hue}, 100%, ${50 + intensity * 30}%, ${intensity * 0.8})`; ctx.fillRect( i * cellWidth, j * cellHeight, cellWidth, cellHeight ); } } } } } // Initialize simulation const fluidSim = new FluidSimulation(fluidCanvas.width, fluidCanvas.height, params.resolution); // Mouse event handlers function handleMouseMove(e) { const rect = fluidCanvas.getBoundingClientRect(); fluidSim.mouseX = (e.clientX - rect.left) / rect.width * params.resolution; fluidSim.mouseY = (e.clientY - rect.top) / rect.height * params.resolution; } function handleMouseDown(e) { fluidSim.isMouseDown = true; handleMouseMove(e); } function handleMouseUp() { fluidSim.isMouseDown = false; } // Attach event listeners fluidCanvas.addEventListener('mousemove', handleMouseMove); fluidCanvas.addEventListener('mousedown', handleMouseDown); fluidCanvas.addEventListener('mouseup', handleMouseUp); fluidCanvas.addEventListener('mouseleave', handleMouseUp); // Touch support fluidCanvas.addEventListener('touchmove', (e) => { e.preventDefault(); const rect = fluidCanvas.getBoundingClientRect(); const touch = e.touches[0]; fluidSim.mouseX = (touch.clientX - rect.left) / rect.width * params.resolution; fluidSim.mouseY = (touch.clientY - rect.top) / rect.height * params.resolution; }); fluidCanvas.addEventListener('touchstart', (e) => { e.preventDefault(); fluidSim.isMouseDown = true; const rect = fluidCanvas.getBoundingClientRect(); const touch = e.touches[0]; fluidSim.mouseX = (touch.clientX - rect.left) / rect.width * params.resolution; fluidSim.mouseY = (touch.clientY - rect.top) / rect.height * params.resolution; }); fluidCanvas.addEventListener('touchend', () => { fluidSim.isMouseDown = false; }); // Animation loop function animate() { fluidSim.step(); fluidSim.render(fluidCtx); requestAnimationFrame(animate); } // Start animation animate(); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.