🦾 Tab 1 — Robot Arm Visualises forward and inverse kinematics for a 3-DOF robotic arm. IK is solved in real time using the CCD (Cyclic Coordinate Descent) algorithm. Drag the white circle target and the arm follows; link lengths and IK iteration count are adjustable via sliders. Includes Auto Demo mode (circular trajectory) and Draw Path mode (trace a custom path with the mouse). 🧭 Tab 2 — Path Planning Animates three pathfinding algorithms — A*, RRT, and Dijkstra — on an interactive grid. Click the canvas to toggle obstacles, and hit Random Maze to generate a randomised layout. Explored cells are highlighted in blue and the final path in green, both updating in real time. 👁 Tab 3 — Computer Vision Processes four moving objects through five vision pipeline modes: RGB (raw), Grayscale (luminance conversion), Edge (Sobel edge detection), Depth (false-colour depth estimation map), and Detect (bounding boxes with confidence scores). Drag any object to see the detection respond live. 🧠 Tab 4 — Neural Control Three control system demos in one tab. PID Balance: an inverted pendulum with tunable Kp, Ki, and Kd gains. RL CartPole: a reinforcement learning agent balancing a pole, with the policy network visualised in real time. Biped Walker: a two-legged gait driven by a Central Pattern Generator (CPG). Click the canvas to move the PID setpoint. 🌐 Tab 5 — Swarm Boids-based swarm robotics simulation. Three steering forces — Separation, Alignment, and Cohesion — are independently tunable via sliders. Four behaviour modes: Flock (free flocking), Forage (click to place food targets), Formation (robots self-organise into a ring), and Explore (random exploration). Obstacle avoidance is built in throughout.

01 · Resonant Inductive Coupling — The same principle used in wireless chargers today. Adjusting the transmitter/receiver coil frequency sliders shows the lamp lighting up brightly and coupling efficiency approaching 100% only when the frequencies match exactly. If the frequencies drift apart, efficiency drops off sharply. 02 · Tesla Coil — Shows the resonant transformer structure running from the primary coil (base) to the secondary coil to the toroid. Raising the Input power slider changes the number and length of the sparks (discharge arcs) coming off the toroid in real time. 03 · Wardenclyffe Tower (a vision for worldwide wireless power) — A conceptual diagram simplifying the Earth as a circle, showing waves spreading out from the tower and lighting up each receiving station as they arrive. It also notes the historical fact that this was never actually completed (J.P. Morgan withdrew funding in 1904; the tower was demolished in 1917). 04 · Timeline — Summarizes key events from Tesla's 1891 patent for the Tesla coil to the tower's demolition in 1917.

🧱 Tab 1 — Anatomy Breaks a real prompt down into six colour-coded blocks. Click any block to open a detailed explanation in the right panel covering the component's purpose, how to write it, common mistakes, and actionable tips. 🎭 Role (purple) — persona definition 📋 Context (blue) — background information 🎯 Task (green) — the core instruction 📐 Format (yellow) — output structure 📸 Examples (orange) — few-shot samples 🚧 Constraints (red) — what to exclude Six quality score bars are shown at the bottom — Clarity, Specificity, Context depth, and more. The six technique cards below the blocks link directly to Tab 3 when clicked. ⚖️ Tab 2 — Before / After Places a weak prompt and a fully engineered prompt side by side for the same request. Four real-world scenarios included: 📧 Sales email writing 💻 Code review 📊 Data analysis ✍️ Creative writing Each pair shows actual AI response examples alongside quality tags (❌ Vague / ✅ Role defined, etc.). 🎯 Tab 3 — Techniques Eight techniques explained using a left-side navigation and right-side detail panel layout: Chain of Thought · Few-Shot · Role Prompting · Output Formatting · Self-Consistency · Tree of Thought · Iterative Refinement · Constraint Prompting Each technique includes a concept explanation, a side-by-side prompt comparison (❌ without the technique / ✅ with it), and four practical tips. 🛠️ Tab 4 — Playground Build your own prompt using four text inputs (Role · Context · Task · Format) and four technique toggles (Chain of Thought · Role Prompting · Few-Shot · Structured Output). Clicking ⚡ Build & Analyse produces: A fully assembled prompt preview with each component highlighted in its own colour A quality score (0–100) plus estimated token and word count A component checklist (✓ / ✗) showing what is present and what is missing Specific improvement suggestions — add a role, prompt too short or too long, consider CoT, and so on

🏗️ Architecture Presets (5 layouts) XOR — 2→4→1. The simplest non-linear classification example. Classifier — 4→6→6→3. Iris dataset-style multi-class classification. Deep — 3→5→5→5→5→2. A deep network for observing vanishing gradient behaviour. Autoencoder — 6→3→3→6. Bottleneck structure for dimensionality reduction. CNN-like — 6→8→8→4. Wide hidden layers resembling a convolutional network. 📐 Layer Editor — Use the Input / Hidden layers / Nodes per layer / Output sliders to build any custom architecture on the fly. ⚡ 6 Activation Functions — ReLU · Sigmoid · Tanh · Leaky ReLU · ELU · Softmax. Switching between them instantly updates the mini function plot in the top-left corner and the description in the right panel. 🎬 3 Modes Training — SGD simulation. Blue circular particles (forward pass) and red triangular particles (backpropagation) flow simultaneously while Loss, Accuracy, and Epoch update in real time. Forward pass — Only the forward-pass particles flow through the network. Backprop — Only the backward gradient particles flow toward the input. 🎨 Node colour meaning 🟢 Green — High activation (> 0.7) 🔵 Cyan — Mid-range activation 🔴 Red — Negative activation ⭕ Dashed circle × — Node deactivated by Dropout 🖱 Interactive Hover a node → tooltip showing its activation and bias values Hover a connection → weight value displayed at the midpoint Click an input node → randomises its activation and propagates the new values forward 📊 Right panel Live statistics: Epoch · Loss · Accuracy · Parameters Dual-line chart: Loss (red) and Accuracy (green) over training time Weight distribution histogram with a rainbow colour gradient Four-step Forward Pass walkthrough and activation function concept guide

A ten-concept drone explorer, dark-themed throughout! ✈️ Flight Mechanics — Four forces (Lift, Weight, Thrust, Drag) drawn as live vectors. Throttle slider controls altitude state (Ascending / Hovering / Descending), and the wind slider adds crosswind compensation arrows showing how the FC counters drift. Motor RPM gauge updates in real time. 🎮 Maneuvers — Roll, Pitch, and Yaw demonstrated side by side with clickable tiles. The main drone animates the selected axis, while the Motor Mix panel shows which motors spin faster or slower to achieve each maneuver. RC stick mapping diagram included. ⚡ Motors & Propellers — Top-down quadrotor view showing CW/CCW spin directions with animated blur. A Thrust vs RPM² curve plots current operating point. Propeller efficiency metrics (mN/W), counter-rotation torque cancellation explanation, and a full thrust/power breakdown panel. 🏖️ Beach Filming — Golden-hour coastal scene with animated waves, foam, parasols, and people on a sandy beach. Drone flies overhead with a camera FOV cone showing coverage width. Altitude slider changes the shot type automatically (Reveal → Orbit → Top-Down). Cinematic shot guide and camera tech specs (5.1K / 3-axis gimbal / ND filters). 📦 Delivery Drone — Full 4-phase delivery cycle animated over a city skyline: Takeoff → En Route → Descent → Delivery, with payload box hanging below and a ground drop confirmation. Phase timeline at the bottom, industry leader badges (Amazon, Wing, Zipline). 🗺️ Surveying & Mapping — Drone lawnmower grid-scan with blue overlay showing photographed area, overlap zones in green, and a photo counter. GSD, altitude, accuracy, and the full 7-step photogrammetry pipeline (SfM → point cloud → mesh → orthomosaic) displayed with status indicators. 🚨 Search & Rescue — Night forest scene with thermal heat signatures showing survivors as orange blobs. Drone spirals outward on an expanding search pattern; when it passes within detection range, a survivor is marked FOUND ✓ in green. FLIR specs and why thermal works through vegetation explained. 🌾 Agriculture — Three clickable modes: Crop Spraying (blue particle stream), NDVI Scan (coloured health map per field block), and Precision Seeding. Lawnmower flight path over a farm field, with stats comparing drone vs traditional tractor: 30–50% less chemical, 10× faster, one operator. 🏁 FPV Racing — Full FPV HUD with crosshair, speed readout, gate counter, and battery voltage. Drone autonomously threads five numbered gates around a track with motion blur and glow effects. Scanline overlay gives an authentic goggle feel. 5-inch race drone spec sheet included. 🎯 Military & Recon — Three modes (ISR Surveillance, Strike Simulation, Electronic Warfare) on a radar-sweep map view. MQ-9 Reaper flying wing silhouette with sensor ball. ISR shows coverage radius with target markers; strike shows trajectory arc; EW shows expanding jamming waveform. Full Reaper spec sheet (27hr endurance, 15,000m ceiling, 20m wingspan).

A nine-concept gear mechanics explorer! ⚙️ Spur Gears — The most fundamental gear type. A real-time animation shows two gears meshing and spinning in opposite directions. The contact point (red dot), pitch circles (dashed lines), and rotation arrows update instantly as you adjust the gear ratio and speed sliders. 🌀 Helical Gears — Angled teeth engage gradually for smoother, quieter operation. Drag the helix angle slider to change the spiral angle and watch the axial thrust arrows respond. A Spur vs Helical comparison table covers noise, load capacity, efficiency, and axial thrust side by side. 🔺 Bevel Gears — Redirect power through a 90° corner. Two gears mesh at a right angle in a perspective-style view. A diagram explains how the automotive differential works and why the inner and outer wheels rotate at different speeds when cornering. 🐛 Worm Gears — A worm screw drives a worm wheel. The Starts slider switches between 1 and 4 thread starts, instantly updating gear ratio, efficiency, and self-locking status. A single start = self-locking — the principle behind elevator hoists. 🪐 Planetary Gears — Gear ratio changes depending on which element (sun, ring, or carrier) is held fixed. Click the three mode buttons at the bottom to experience the logic behind automatic transmission gear selection. 📐 Rack & Pinion — Pinion rotation → rack linear travel. Alongside a car steering mechanism sketch, the linear velocity formula v = ω × R is explained with real-world examples: CNC machine axes, camera sliders, and cog railways. 📊 Gear Ratio — Raise the ratio slider: speed ↓, torque ↑. Lower it: speed ↑, torque ↓. Both are shown live through vectors and a speed-vs-torque crossover chart that visualises conservation of energy. 🔗 Compound Train — Three reduction stages spin simultaneously (4:1 × 4:1 × 4:1 = 64:1). Colour-coded shafts make it immediately clear how each stage's ratio multiplies into the total, achieving extreme reduction in a compact space.

A nine-concept fluid mechanics explorer! 💧 Fluid Properties — Click any of the five fluids (air, water, engine oil, honey, blood) to see viscosity and density change in real time, with the particle motion inside the container responding accordingly. Pressure arrows show how hydrostatic pressure increases with depth. 📊 Pascal's Law — Press the PUSH button to transmit a small piston force to a much larger piston, lifting the car. The formula F₂ = F₁ × (A₂/A₁) is computed live. This is the principle behind car brakes, hydraulic lifts, and excavators. 🌀 Bernoulli's Principle — As the pipe narrows in the middle, airspeed rises and pressure drops — visualised through pressure gauges and particle colour. P + ½ρv² = constant. 🔄 Continuity Equation — A₁v₁ = A₂v₂. Drag the pipe cross-section slider and watch flow velocity automatically increase at the narrow section. Particle colour shifts from blue (slow) to red (fast). 〰️ Laminar vs Turbulent — Slide the Reynolds Number to switch between laminar flow (Re < 2300, smooth parallel blue streams), the transitional zone, and turbulent flow (Re > 4000, chaotic red mixing). In laminar mode, the parabolic velocity profile is drawn across the pipe. 🚗 Drag & Lift — Streamlines above and below the airfoil are drawn in real time (blue = high pressure, red = low pressure), and the lift and drag force vectors update as you adjust angle of attack and speed. Includes a drag coefficient comparison by shape (flat plate 1.17 → airfoil 0.012). 🔩 Pipe Flow — Calculates frictional head loss using the Darcy-Weisbach equation (h_L = f·L/D·v²/2g). Diameter, length, and velocity sliders instantly update Reynolds number, friction factor f, and total head loss. ⚙️ Pumps & Turbines — Four machine types: centrifugal pump (spinning impeller), axial turbine (hydropower), Pelton wheel (impulse turbine), and a pump-system curve graph (showing the operating point). RPM slider adjusts rotational speed. 🌍 Real World — Four detailed case studies with equations and animations: aircraft wing (2.7 MN of lift), ship hull (Archimedes buoyancy), blood circulation (non-Newtonian, pulsatile flow), and wind turbines (Betz limit: 59.3% maximum extractable power).

⚖️ Four Forces — Arrows show all four forces acting on the aircraft: Lift (up), Weight (down), Thrust (forward), and Drag (backward). Adjust the Thrust and Weight sliders to see the status switch between Climbing, Level flight, and Descending in real time. 💨 Bernoulli's Principle — Visualizes how airspeed increases and pressure drops as the pipe narrows in the middle. Pressure gauges and flow particles make the "Speed↑ = Pressure↓" relationship immediately intuitive. 🔺 Wing Cross-Section (Airfoil) — The convex upper surface makes air flow faster (green) while air beneath moves slower (blue). That pressure difference is what generates lift. 📐 Angle of Attack — Adjust the wing tilt slider and watch a real-time graph show how lift changes with angle. A stall warning appears when the angle exceeds 15°. ⚠️ Stall — When the angle of attack exceeds 16°, airflow separates from the wing and lift drops sharply. The stall is visualized with a turbulent flow animation showing the detachment in real time. 🛫 Takeoff Simulation — Advance the throttle to build speed. The moment it exceeds 80 km/h, lift overtakes weight and the aircraft actually lifts off. The instrument panel shows speed, altitude, lift, thrust, and flight status live. 🌀 Coandă Effect — Air clings to and follows the curved surface of a cylinder. The same principle applies to the convex upper surface of a wing: air bends downward along the surface, and by Newton's third law the wing is pushed upward.