Model Tests

Do an interactive visualization of a magnetic field of a line conductor. Include a 3d visualization as well as 2d graphs for Bx, By, Bz. Make it interactive in a way that the user can change the shape of the wire by clicking and dragging. Result should be a static html file.

Do an interactive visualization of a magnetic field of a line conductor. Include a 3d visualization as well as 2d graphs for Bx, By, Bz. Make it interactive in a way that the user can change the shape of the wire by clicking and dragging. Result should be a static html file.

Make a fluid simulation with the following functions: drag fluid by clicking and pressing in the simulation field, sliders for particle density, viscosity, gravity, some more if they make sense. On a phone there should be touch control and the fluid should react to gravity by reading out the phones sensor data via a web api.

Make a fluid simulation with the following functions: drag fluid by clicking and pressing in the simulation field, sliders for particle density, viscosity, gravity, some more if they make sense. On a phone there should be touch control and the fluid should react to gravity by reading out the phones sensor data via a web api.

Build a self-contained HTML file (inline CSS + JavaScript, no external dependencies except optionally a CDN for a charting library) that simulates traffic flow and emergent “phantom jams” on a simple road network.

Road layout: at least one closed-loop circular/oval track, rendered as an SVG or canvas path — a ring is ideal because it lets density stay constant and jams can be observed cycling indefinitely. Optionally a second layout (straight multi-lane highway with wraparound, or a figure-eight) selectable via a dropdown.

Cars as individual agents, each with position (arc-length), velocity, maxSpeed (slight per-car variation, e.g. drawn from a normal distribution), preferredGap, acceleration/deceleration capability, optional reactionTime, and a braking flag for manually triggered slowdowns. Use a car-following model — the Intelligent Driver Model is a good, well-documented choice (gives realistic jam formation from small perturbations); a Nagel–Schreckenberg cellular automaton is fine if you want something lighter.

Controls: car density, desired/max speed, following distance, aggressiveness of braking/acceleration, simulation speed, optionally road length and number of lanes.

Interactive jam trigger: clicking a car forces it into a hard braking event. This should propagate backward through following cars via the car-following model itself — no special-cased “wave” logic, that’s the point. Highlight the clicked car and colour-code cars by speed so the jam wave is visible as it propagates backward against the direction of travel.

Visualization: top-down view of the track, cars coloured by speed; optionally a space-time diagram (x = position, y = time, scrolling), the classic way to see jam waves; live stats for average speed, throughput/flow, and number of jammed cars.

Behaviour: play/pause and reset, live slider updates, smooth requestAnimationFrame, and organized code (separate update/render loop, a Car class, a Road abstraction) so it’s easy to extend.

Goal: demonstrate how, even with no accidents or bottlenecks, a single localized braking event on a sufficiently dense road can spontaneously propagate into a self-sustaining traffic jam — a well-known real-world phenomenon.

Create a single, self-contained HTML file (inline CSS and JavaScript, no external dependencies except optionally loading a CDN script if absolutely needed) that visualizes 2D fluid dynamics using a real-time Navier–Stokes solver, following the “Stable Fluids” approach popularized by Jos Stam (semi-Lagrangian advection + Jacobi iteration for diffusion/pressure projection).

Core simulation: a grid-based Eulerian solver (e.g. 128×128 or adjustable resolution) with a velocity field (vx, vy) and a density/dye field for visualization; steps add forces → diffuse → project (make divergence-free) → advect → project again; fixed timestep with requestAnimationFrame. Render the density field to a <canvas> using a colour gradient (e.g. dark blue → cyan → white) so flow patterns are clearly visible, optionally with a velocity vector/streamline overlay.

Interactivity: mouse/touch drag injects velocity (from drag direction/speed) and dye at the cursor, simulating stirring. Movable/draggable circular or rectangular obstacles the user can place, drag and remove — they must block flow (zero velocity boundary condition on solid cells) and deflect the fluid realistically. A “continuous flow” mode: a toggleable inlet (e.g. left edge or a configurable point) that continuously injects fluid with constant velocity/density, simulating a steady stream/wind tunnel.

Controls (sliders with live labels): viscosity, diffusion rate, time step/simulation speed, force/injection strength, grid resolution (if feasible without breaking performance — otherwise fix it and note that), fade/dissipation rate of the dye. Toggle buttons: pause/resume, reset, clear obstacles, show/hide velocity vectors, enable/disable the continuous inlet.

UI/UX: clean, minimal control panel floating over or beside the canvas; canvas fills most of the viewport and is responsive to window resizing; brief on-screen instructions (e.g. “Drag to stir the fluid. Click to place an obstacle. Drag obstacles to move them.”).

Performance: efficient enough for interactive framerates (30–60fps) at the default resolution using typed arrays (Float32Array), with the solver code (advection, diffusion, projection) clearly commented so the physics logic is easy to follow.

Deliverable: one complete .html file, ready to open directly in a browser, with no build step and no external file dependencies beyond the file itself.