🎯 Video Tracker — Physics Analysis

Analyze the motion of any object in a video: set up a coordinate system, calibrate the real-world scale, click on the object frame by frame, and instantly see position-vs-time graphs with optional curve fitting.

Browser-based · no install MP4 / WebM / MOV CSV export

Overview

The workflow has four ordered phases. The toolbar mode buttons guide you through them left to right:

📂
Load
Drop or open a video
Origin
Place & tilt the axes
📏
Calibrate
Set px → real distance
🎯
Track
Click the object each frame

Results appear in real time on the right panel: an X(t) graph (red), a Y(t) graph (blue), and a data table. When you are done, export everything as CSV.

1 Load a video

Two ways to open a video file:

Supported formats: MP4 (H.264), WebM, and MOV work in all modern browsers. AVI, MPEG, and WMV need conversion first. Free converters: HandBrake (desktop app) or CloudConvert.com (web).

Set the frame rate (FPS)

The app defaults to 30 fps. If your video was recorded at a different rate (e.g. 60 fps slow-motion, 120 fps high-speed), change the FPS field in the bottom bar before you start tracking so that time values are correct.

Rotate the video (optional)

If the video was recorded in portrait mode, use ↺ 90° or 90° ↻ to rotate it without affecting the analysis.

2 Set up the coordinate origin

After loading a video the app is in ⚙ Origin mode. A white dot with red/blue dashed axes appears on the video.

  1. Drag the white dot to the point you want to be (0, 0) in your coordinate system — for example, the launch point of a projectile or a corner of a table.
  2. Optionally tilt the axes using the Axis° slider (or type an angle) in the top toolbar. This is useful when the surface of motion is not horizontal.
  3. The red dashed line is the X axis; the blue dashed line is the Y axis (pointing up by default).
💡
You can toggle the axes overlay on and off at any time with the Axes button in the top toolbar. The origin is re-centred to the middle of the video whenever you resize the window.

3 Calibrate the scale

Calibration converts pixels to real-world units (metres or centimetres). You need a known length visible in the video — a ruler, a metre stick, the length of a table, etc.

  1. Click 📏 Calibrate in the top toolbar. The status bar changes to "Calibration — click 2 points".
  2. Click the two ends of the known length on the video. Gold markers (labelled 1 and 2) appear, connected by a dashed line showing the pixel distance.
  3. A dialog asks for the real-world distance between those two points. Enter the value and select the unit (m or cm) in the top toolbar, then click Confirm.
  4. The status bar now shows "Scale: X.XX px/m" — calibration is complete.
💡
Pick two calibration points that are as far apart as possible to minimise the relative pixel-placement error.
Calibration is required before you can track. The 🎯 Track button only activates after a successful calibration.

You can toggle the gold calibration markers on/off with the Cal button in the top toolbar.

4 Track the object

Click 🎯 Track to enter tracking mode.

  1. Navigate to the first frame where you want to start using the scrubber or / arrow keys.
  2. Click on the object in the video. A gold dot is placed and the video automatically advances by the number of frames set in the Step field (default: 1 frame).
  3. Click on the object again in the new frame. Repeat until you reach the last frame of interest.
  4. The graphs on the right update after every click.

Step size

The Step field (bottom bar) controls how many frames the video skips after each click. Setting Step = 2 halves the number of clicks needed and effectively samples the motion every 2 frames.

Correcting mistakes

📊
The status bar at the bottom always shows the current frame number, timestamp, cursor position in real-world coordinates, and total point count.

5 Graphs & curve fitting

The right panel shows two live graphs and a data table:

Curve fitting

Each graph has a dropdown to overlay a best-fit curve:

OptionEquationUse when…
No fitExploratory / irregular motion
Linear fitx = a + b·tConstant-velocity motion
Quadratic fitx = c·t² + b·t + aConstant acceleration (free fall, projectile)

Fit coefficients are printed directly on the graph in yellow. For a quadratic Y(t), the a(t²) coefficient equals ½g — compare it with −4.9 m/s² to check your calibration.

Showing / hiding graphs

Use the checkboxes in the graph headers to show or hide individual graphs. When a graph is hidden, its column is also hidden from the data table.

6 Export data (CSV)

  1. Click ⬇ CSV in the top toolbar.
  2. A dialog lets you choose which columns to include: Frame #, Time (s), X position, Y position.
  3. Click Export. The file tracking_data.csv is downloaded immediately.

The CSV is ready to open in Excel, Google Sheets, Python (pandas), Logger Pro, or any data-analysis software.

💡
Column headers include the unit — for example x_m or y_cm — so there is no ambiguity when you open the file later.

Video controls reference

ControlWhat it does
▶ PlayPlay / pause video
■ StopPause and return to trim-start frame
◀◀ (Rewind)Jump to trim-start frame
↻ LoopToggle loop playback between trim points
Scrubber barDrag to any frame; click to jump
◀ In / In fieldSet the trim start to the current frame / type a frame number
Out ▶ / Out fieldSet the trim end to the current frame / type a frame number
Step fieldFrames to advance after each tracked click
↺ 90° / 90° ↻Rotate the video 90° CCW / CW
FPS fieldSet the frame rate used for time calculations

Tips & tricks

Getting accurate results

Typical physics experiments

ExperimentExpected graph shapeBest fit
Projectile (horizontal)X(t): straight lineLinear
Projectile (vertical)Y(t): downward parabolaQuadratic
Free fallY(t): downward parabola; a(t²) ≈ −4.9 m/s²Quadratic
Uniform circular motionX(t) and Y(t): sinusoidalNo fit
Car / constant velocityX(t): straight lineLinear

Keyboard shortcuts

KeyAction
SpacePlay / Pause
Advance one frame (when paused)
Go back one frame (when paused)

Shortcuts are disabled while the cursor is inside a text or number input field.