Interactive Circuit Visualization
Circuit de Barcelona-Catalunya
Montmeló · 4.657 KM · 16 CURVAS
LIVERY
1047 m
RECTA PRINCIPAL
1:14.637
Michael Schumacher · Ferrari · 2006
Real-Time Circuit Simulation
A system that renders a car moving along a circuit using path interpolation and canvas-based animation.
Context
This project started as a way to represent an F1 circuit in a more visual and interactive way.
Instead of a static image, I wanted something with movement and more depth.
Instead of a static image, I wanted something with movement and more depth.
Problem
A basic animation wasn’t enough. The goal was to make the car follow the track in a smooth and continuous way, without jumps or unnatural movement.
Solution
I built a system based on points representing the center of the track.
Positions are interpolated between segments to create smooth movement.
Positions are interpolated between segments to create smooth movement.
Real-world reference
The car speed is calibrated so that a full lap matches the real track record:
1:14.637 — Michael Schumacher (Ferrari, 2006)
How it works
- Track defined as a set of points
- Total distance calculated across segments
- Movement via distance-based interpolation
- Animation with requestAnimationFrame
- Rendering using Canvas API
Challenges
Achieving fully smooth motion across the track.
Avoiding visible jumps between segments.
Avoiding visible jumps between segments.
What I learned
Better understanding of canvas animations and trajectory-based systems.
Reinforced concepts in geometry and real-time rendering.
Reinforced concepts in geometry and real-time rendering.
Technologies
JavaScriptTypeScriptCanvas APIrequestAnimationFrame