# Velocity
## Microsim
### Live player
<div class="microsim-player">
<iframe src="https://editor.p5js.org/sciencenibber/full/O50GeFp7y" width="100%" height="620" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="microsim-fallback">
<img src="Microsims/thumbs/Velocity.png" alt="Velocity microsim poster" style="width:100%;border:1px solid #4445;border-radius:6px;">
<p><em>Live microsim (desktop) · <a href="https://editor.p5js.org/sciencenibber/sketches/O50GeFp7y">open sketch in the p5.js editor</a></em></p>
</div>
**Editor URL:** https://editor.p5js.org/sciencenibber/sketches/O50GeFp7y
**Description (100 words):**
A point particle is launched across the canvas with a velocity vector that the reader sets directly through two sliders, vx and vy, with a third slider scaling simulated time. Each frame the position is forward-Euler integrated by v·dt, the trail records the path, and an orange arrow drawn from the particle visualises the live velocity vector while a dashed pair of legs decomposes it into vx and vy components. A bottom-left readout streams position, components, speed |v|, heading, and dt; a bottom-right block carries the defining identity v = dr/dt. Walls bounce elastically — the perfect prompt for "velocity is a signed vector".
```js
// =====================================================================
// Velocity -- Robotics microsim
//
// ARTICLE : Velocity
// PATTERN : Pattern E (Kinematics & dynamics) -- single-point reskin
// ROOM : Robotics
//
// Velocity is the time-derivative of position. This sketch shows a
// single point particle whose velocity vector is set by two sliders
// (vx, vy) plus a global time-scale slider. Each frame the particle's
// position is integrated forward by r_{n+1} = r_n + v * dt; the
// trailing curve traces where it has been; an orange arrow drawn from
// the particle visualises the current velocity vector and a dashed
// pair of legs shows the (vx, vy) decomposition along the canvas axes.
// A bottom-left readout reports live (x, y) position, (vx, vy)
// components, speed |v|, heading theta, and the timestep dt; a
// bottom-right block shows the defining equation v = dr / dt. Walls
// bounce the particle elastically and reflect the corresponding
// velocity component, so the demo never drifts off-canvas during long
// runs -- and the bounce is itself a teaching moment about velocity
// being a vector that can flip sign component-wise.
//
// CONTROLS
// left column : vx slider, vy slider, time-scale slider
// right column : pause/play, reset position, clear trail
//
// PARAMETERS
// vx horizontal velocity component (px / s)
// vy vertical velocity component (px / s)
// timeScale multiplier on dt; 1.0 = real time
// =====================================================================
const ARTICLE = "Velocity";
p5.disableFriendlyErrors = true;
// ---------------------------------------------------------------------
// Robotics palette (per Articles/P5_JS_EDITOR.md, section 7).
// Light background; structure-grey for text; orange for the velocity
// vector (the "motion-bearing accent"); blue for the trail; green for
// the dashed component decomposition.
// ---------------------------------------------------------------------
const BG = 246;
const STRUCT = [80, 90, 110];
const PARTICLE = [40, 60, 100];
const TRAIL = [70, 130, 200];
const VARROW = [220, 110, 60];
const COMP = [80, 180, 120];
// ---------------------------------------------------------------------
// Simulation state. `pos` is particle position in canvas pixels; `vel`
// is its velocity in pixels per simulated second; `trail` keeps the
// last N positions for the path overlay.
// ---------------------------------------------------------------------
let pos;
let vel;
let trail = [];
const TRAIL_MAX = 320;
const RADIUS = 14;
// DOM controls. Sliders sit bottom-left as the Robotics "kinematic
// parameters" column; buttons sit bottom-right as the "mode strip".
let vxSlider, vySlider, scaleSlider;
let pauseBtn, resetBtn, clearBtn;
let paused = false;
function setup() {
createCanvas(windowWidth, windowHeight);
textAlign(LEFT, TOP);
textFont('monospace');
// Start the particle slightly left of centre so the initial velocity
// arrow has room to point right without crossing the HUD.
pos = createVector(width / 2 - 220, height / 2);
vel = createVector(80, 40);
// Sliders: range +/- 200 px/s gives readable motion at scale 1.
vxSlider = createSlider(-200, 200, 80, 1).position(20, height - 110).size(200);
vySlider = createSlider(-200, 200, 40, 1).position(20, height - 80).size(200);
scaleSlider = createSlider(0.1, 3.0, 1.0, 0.1).position(20, height - 50).size(200);
// Buttons.
pauseBtn = createButton('pause / play').position(width - 240, height - 110).size(110);
resetBtn = createButton('reset position').position(width - 120, height - 110).size(110);
clearBtn = createButton('clear trail').position(width - 240, height - 80).size(230);
pauseBtn.mousePressed(() => paused = !paused);
resetBtn.mousePressed(resetParticle);
clearBtn.mousePressed(() => trail = []);
}
function resetParticle() {
pos = createVector(width / 2 - 220, height / 2);
trail = [];
}
function draw() {
background(BG);
// Read all slider values once at the top of draw -- the body of
// the function should read as "given these named numbers, here is
// the motion".
const vx = vxSlider.value();
const vy = vySlider.value();
const timeScale = scaleSlider.value();
// Time stepping. Cap dt so a long pause / tab-switch does not
// catapult the particle on the next frame.
const dt = min(deltaTime / 1000, 0.05);
// Drive the velocity vector from the sliders. Wall bounces below
// mutate vel in place and write back into the sliders so the UI
// stays in sync with simulated state.
vel.set(vx, vy);
if (!paused) {
// Forward Euler integration of dr/dt = v => r_{n+1} = r_n + v dt.
const step = p5.Vector.mult(vel, dt * timeScale);
pos.add(step);
bounceAtWalls();
trail.push(pos.copy());
if (trail.length > TRAIL_MAX) trail.shift();
}
drawTrail();
drawComponents(pos, vel);
drawVelocityArrow(pos, vel);
drawParticle(pos);
drawHud();
drawControlHints();
drawDiagnostics(pos, vel, timeScale, dt);
drawEquation();
}
// ---------------------------------------------------------------------
// Elastic bounce off the four canvas walls. Reflecting the velocity
// component perpendicular to the wall is the entire physics -- and the
// pedagogically useful piece, because it is the exact moment where
// "velocity is a vector" stops being abstract.
// ---------------------------------------------------------------------
function bounceAtWalls() {
let bounced = false;
if (pos.x < RADIUS) { pos.x = RADIUS; vel.x = abs(vel.x); bounced = true; }
if (pos.x > width - RADIUS) { pos.x = width - RADIUS; vel.x = -abs(vel.x); bounced = true; }
if (pos.y < RADIUS) { pos.y = RADIUS; vel.y = abs(vel.y); bounced = true; }
if (pos.y > height - RADIUS) { pos.y = height - RADIUS; vel.y = -abs(vel.y); bounced = true; }
if (bounced) {
vxSlider.value(vel.x);
vySlider.value(vel.y);
}
}
function drawTrail() {
noFill(); stroke(TRAIL[0], TRAIL[1], TRAIL[2], 200); strokeWeight(2);
beginShape();
for (const p of trail) vertex(p.x, p.y);
endShape();
}
function drawParticle(p) {
noStroke(); fill(PARTICLE[0], PARTICLE[1], PARTICLE[2]);
circle(p.x, p.y, RADIUS * 2);
}
// Draw the velocity vector as an arrow rooted at the particle. We
// scale the visible length (px shown == half the px/s magnitude) so
// the arrow stays on-canvas at moderate speeds.
function drawVelocityArrow(p, v) {
const VIS = 0.5;
const tipX = p.x + v.x * VIS;
const tipY = p.y + v.y * VIS;
stroke(VARROW[0], VARROW[1], VARROW[2]); strokeWeight(3);
line(p.x, p.y, tipX, tipY);
// Arrowhead aligned with v.heading().
push();
translate(tipX, tipY);
rotate(v.heading());
noStroke(); fill(VARROW[0], VARROW[1], VARROW[2]);
triangle(0, 0, -12, -6, -12, 6);
pop();
}
// Dashed perpendicular legs visualising v = vx * x_hat + vy * y_hat.
function drawComponents(p, v) {
const VIS = 0.5;
stroke(COMP[0], COMP[1], COMP[2], 200); strokeWeight(1.5);
drawingContext.setLineDash([5, 5]);
// horizontal leg = vx component
line(p.x, p.y, p.x + v.x * VIS, p.y);
// vertical leg = vy component, attached to the end of the horizontal leg
line(p.x + v.x * VIS, p.y, p.x + v.x * VIS, p.y + v.y * VIS);
drawingContext.setLineDash([]);
}
// HUD: title TL, en.wikitube.io URL TL.
function drawHud() {
noStroke(); fill(0, 200); rect(8, 8, 360, 26);
fill(255); textSize(13);
text(ARTICLE + " . en.wikitube.io/wiki/" + ARTICLE, 16, 14);
}
// Control hints: TR.
function drawControlHints() {
noStroke(); fill(0, 180); rect(width - 268, 8, 260, 64);
fill(255); textSize(12);
const x = width - 260;
text("vx, vy horizontal / vertical speed", x, 14);
text("scale time multiplier (1.0 = real)", x, 30);
text("buttons pause / reset / clear trail", x, 46);
}
// Diagnostic readouts: BL (just right of the slider column).
function drawDiagnostics(p, v, timeScale, dt) {
const x = 240;
const y = height - 120;
noStroke(); fill(STRUCT[0], STRUCT[1], STRUCT[2]); textSize(12);
text("pos (x, y) = (" + nf(p.x, 1, 1) + ", " + nf(p.y, 1, 1) + ") px", x, y);
text("v (vx, vy) = (" + nf(v.x, 1, 1) + ", " + nf(v.y, 1, 1) + ") px/s", x, y + 16);
text("|v| = " + nf(v.mag(), 1, 2) + " px/s", x, y + 32);
text("heading = " + nf(degrees(v.heading()), 1, 1) + " deg", x, y + 48);
text("scale, dt = " + nf(timeScale, 1, 2) + ", " + nf(dt * 1000, 1, 2) + " ms", x, y + 64);
text(paused ? "[ paused ]" : "[ running ]", x, y + 84);
}
// Defining equation: BR.
function drawEquation() {
const w = 280, h = 56;
const x = width - w - 8, y = height - h - 8;
noStroke(); fill(0, 180); rect(x, y, w, h);
fill(255); textSize(13);
text("v(t) = dr(t) / dt", x + 12, y + 8);
textSize(11);
text("avg over [t1, t2]: v_bar = dr / dt", x + 12, y + 32);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// Re-position controls so they hug the bottom edge after resize.
if (vxSlider) vxSlider.position(20, height - 110);
if (vySlider) vySlider.position(20, height - 80);
if (scaleSlider) scaleSlider.position(20, height - 50);
if (pauseBtn) pauseBtn.position(width - 240, height - 110);
if (resetBtn) resetBtn.position(width - 120, height - 110);
if (clearBtn) clearBtn.position(width - 240, height - 80);
}
```
## Links (Wikipedia order)
<!-- injected from _registry/childlinks/Velocity.json (2026-07-30T02:09:12Z) -->
`Absement` · `Absolute_value` · `Acceleration` · `Action_(physics)` · `Alexis_Clairaut` · `Analytical_mechanics` · `Angle` · `Angular_acceleration` · `Angular_displacement` · [[Angular_frequency]] · `Angular_momentum` · `Angular_velocity` · `Appell's_equation_of_motion` · `Applied_mechanics` · `Area` · `Arithmetic_mean` · `Atmosphere_of_Earth` · `Augustin-Louis_Cauchy` · `Barometric_formula` · `Bernard_Koopman` · [[Calculus]] · `Carl_Gustav_Jacob_Jacobi` · `Carnegie_Mellon_University` · [[Cartesian_coordinate_system]] · `Celestial_mechanics` · `Centrifugal_force` · `Centripetal_force` · [[Christiaan_Huygens]] · `Circular_motion` · `Classical_field_theory` · `Classical_mechanics` · `Continuum_mechanics` · `Coriolis_force` · `Couple_(mechanics)` · `Cross_product` · `Cross_section_(geometry)` · `D'Alembert's_principle` · [[Damping]] · `Daniel_Bernoulli` · [[Density]] · `Derivative` · `Dimensional_analysis` · `Direction_(geometry)` · `Displacement_(geometry)` · `Distance` · `Doppler_effect` · `Dot_product` · `Drag_(physics)` · `Drag_coefficient` · [[Dynamics_(mechanics)]] · `Edmond_Halley` · `Edward_Routh` · [[Energy]] · `Equations_of_motion` · `Escape_velocity` · `Euclidean_distance` · `Euler's_equations_(rigid_body_dynamics)` · `Euler's_laws_of_motion` · `Fictitious_force` · [[Fluid_dynamics]] · `Foot_per_second` · [[Force]] · `Four-velocity` · `Fourth,_fifth,_and_sixth_derivatives_of_position` · `Frame_of_reference` · `Frequency` · `Friction` · `Galileo_Galilei` · `Gravitational_acceleration` · `Gravitational_constant` · `Gravitational_energy` · `Group_velocity` · `Hamiltonian_mechanics` · `Hamilton–Jacobi_equation` · `Harmonic_mean` · `Harmonic_oscillator` · `Hertz` · `History_of_classical_mechanics` · `Hypervelocity` · `Impulse_(physics)` · `Inertia` · `Inertial_frame_of_reference` · `Integral` · `International_System_of_Units` · `Inverse_second` · [[Isaac_Newton]] · `Jeremiah_Horrocks` · `Jerk_(physics)` · `Johann_Bernoulli` · [[Johannes_Kepler]] · [[John_von_Neumann]] · `Joseph-Louis_Lagrange` · `Joseph_Liouville` · [[Josiah_Willard_Gibbs]] · `Joule` · `Joule-second` · `Kepler's_laws_of_planetary_motion` · `Kilogram` · `Kinematics` · `Kinetic_energy` · `Kinetics_(physics)` · `Koopman–von_Neumann_classical_mechanics` · `Lagrangian_mechanics` · `Leonhard_Euler` · `Linear_motion` · `List_of_equations_in_classical_mechanics` · `List_of_textbooks_on_classical_mechanics_and_quantum_mechanics` · `Lorentz_factor` · `Magnitude_(mathematics)` · `Mass` · `Mass_flow_rate` · `Metre` · `Metre_per_second` · `Metre_per_second_squared` · `Miles_per_hour` · `Minkowski_spacetime` · `Moment_(physics)` · `Moment_of_inertia` · `Momentum` · `Motion` · `Newton's_law_of_universal_gravitation` · [[Newton's_laws_of_motion]] · `Newton-metre` · `Newton_(unit)` · `Non-inertial_reference_frame` · `Norm_(mathematics)` · `Orbit` · `Paul_Émile_Appell` · `Pendulum_(mechanics)` · `Phase_velocity` · `Physical_object` · `Pierre-Simon_Laplace` · `Pierre_Louis_Maupertuis` · `Polar_coordinate_system` · `Potential_energy` · `Power_(physics)` · `Radial_velocity` · `Radian` · `Radian_per_second` · `Rapidity` · `Reactive_centrifugal_force` · `Relative_velocity` · `Rigid_body` · `Rigid_body_dynamics` · `Rotating_reference_frame` · `Rotation_around_a_fixed_axis` · `Rotational_frequency` · `Routhian_mechanics` · `SI_base_unit` · `Scalar_(mathematics)` · `Scalar_(physics)` · `Secant_line` · `Second` · [[Simple_harmonic_motion]] · `Siméon_Denis_Poisson` · `Slope` · `Solid_angle` · `Space` · `Special_relativity` · `Specific_angular_momentum` · `Speed` · `Square_metre` · `Statics` · `Statistical_mechanics` · `Steradian` · `Tangent` · `Tangential_speed` · `Terminal_velocity` · `Time` · `Timeline_of_classical_mechanics` · `Torque` · `Vector_quantity` · `Vibration` · `Virtual_work` · `Watt` · `Weight` · `William_Rowan_Hamilton` · `Work_(physics)`
## From the Real GENERATIVE library
*Velocity — placed from the Real G.E.N.E.R.A.T.I.V.E. course library (Audio room). Source: Wikimedia Commons (via Wikipedia article media). [Details & license](https://commons.wikimedia.org/wiki/File:US_Navy_040501-N-1336S-037_The_U.S._Navy_sponsored_Chevy_Monte_Carlo_NASCAR_leads_a_pack_into_turn_four_at_California_Speedway.jpg).*
> Velocity is the speed in combination with the direction of motion of an object. Velocity is a fundamental concept in kinematics, the branch of classical mechanics that describes the motion of bodies. ([Wikipedia](https://en.wikipedia.org/wiki/Velocity))
<!-- REAL-GENERATIVE-MEDIA:END -->
<!-- LOCAL-MEDIA-PASS:START -->
## From the vault media library
!Velocity thumb.png
*Velocity — from the vault's own media holdings, placed 2026-07-09. MTN / Wikitube.io original · CC BY-SA 4.0.*
<!-- LOCAL-MEDIA-PASS:END -->
> **Room:** [[Robotics]] · **Status:** ✅ shipped
## Overview
Velocity is the rate at which an object's position changes with respect to time, and unlike speed it is a vector quantity — it has both magnitude and direction. In Cartesian coordinates a velocity vector is written **v** = (vₓ, v_y, v_z), and its scalar magnitude |**v**| is the object's *speed*. Mathematically velocity is the time derivative of the position vector, **v**(t) = d**r**(t)/dt, so the instantaneous velocity at any moment is the slope of position-versus-time in each direction. The average velocity over a finite interval, by contrast, is simply displacement divided by elapsed time, **v̄** = Δ**r** / Δt; the two coincide only when motion is uniform.
In robotics velocity is the entry-point to all of kinematics. Joint velocities θ̇ map to end-effector velocities through the manipulator Jacobian, **v** = J(**q**) θ̇, and inverting that map is the heart of resolved-motion-rate control. A mobile-robot body is typically described by a body-frame linear velocity v paired with an angular velocity ω that together steer the platform across the world frame. Velocity also draws the line that distinguishes *kinematics* — what an object's motion looks like — from *dynamics*, which asks what forces produced it. The vector identity v = dr/dt is the seed every later Pattern-E sketch grows from.
## See also
- Room hub: [[Robotics]]
- p5.js Editor conventions: P5 JS EDITOR
- Wiki root: MAIN
---
*Scaffolded by `generative-microsim` from row 0 of the Robotics sheet on 2026-04-30T18:20:42Z.*
<!-- REAL-GENERATIVE-MEDIA:START -->
<!-- CRAFT-LINK:START g12 -->
*Built to the [[WT!P5_js_Microsim_Master_Class|p5.js Master Class]].*
<!-- CRAFT-LINK:END -->
## Wikipedia : Wikitube
**Strict pair:** [Wikipedia](https://en.wikipedia.org/wiki/Velocity) : [Wikitube](https://en.wikitube.io/wiki/Velocity)
## Previous hub tags
Tree parent: [[Dynamical_system]].
Legacy hubs: `GENERATIVE`.
---
*Sources: 1 legacy note. Minted wave 1, 2026-07-30 (v1.6 order).*