Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Fully Twodimensional Mixed Traffic Simulation

Source code for the interactive Javascript simulation at

This simulation is intended to demonstrate fully two-dimensional but directed traffic flow and to visually test 2d flow models. Further information of what can be done with this simulation is provided in, here, I will concentrate on the implementation.

Presently, I have implemented the "Mixed Traffic flow Model" (MTM) described in detail in Reference 1, also available here.

To my knowledge, this is the first fully operational 2d model for traffic flow. Notice that, while similar from a formal; mathematics point of view, the dynamics of the MTM is markedly different from that of the Social Force Model for pedestrians proposed by Dirk Helbing and Peter Molnar. The reason is that, unlike the case for pedestrians, high speeds and inertial effects and the high damage in case of crashes lead to a fundamentally different driving behaviour compared to walking. Partcularly, for forced single-file traffic (narrow road), it reverts to well-known car-following models such as the Intelligent Driver Model, or variants thereof.

Running the Simulation

This simulation uses JavaScript together with html5.

The master html file index.html, starts the actual simulation by the canvas tag:

<canvas id="canvas_mixed"...> ...  </canvas>

What to do with this canvas is specified in the init() procedure of sim-straight.js which starts the simulation and is assocoated with this canvas by the first command of the init procedure,

 canvas = document.getElementById("canvas_mixed");

At the end of the initialization, init() starts the actual simulation thread by the command

return setInterval(main_loop, 1000/fps);

The initial canvas dimensions are overridden depending on the actual browser's viewport size by additional controls in canvasresize.js implementing a responsive design.

Programm Files and Structure

The javascript code is organized in a main file sim-straight.js controlling the whole simulation, into pseudo objects in appropriately named files, and into files providing helper functions as follows:


Callbacks for all the interactive elements (mouseover, sliders, buttons) including a possibility to load own initial configurations in form of external files. See for more details.


represents a road network element (road link) and organizes the vehicles on it. Contains an array of vehicles and methods to get the neighboring vehicles for a given vehicle, to update all vehicles for one time step, and to interact with the other vehicles and the road boundaries.

In contrast to the js code at, the road of the mixed-traffic simulation is not intended to be part (link) of a network, for reasons of simplicity. Furthermore, the road surface is fully twodimensional instead of consisting of several onedimensional lanes.

road.js also provides methods to draw the road and the vehicles and obstacles on it, and optionally vehicle IDs and the actual acceleration vectors for each vehicle. These drawing methods depend on the road geometry functions axis_x and axis_y defining the road axis in physical x-y coordinates as a parametric function of the logical longitudinal position u. This function is provided in the calling class sim-straight.js


each vehicle has (i) properties such as length, width, and type, (ii) dynamic variables such as the longitudinal and lateral position (u,v) in logical coordinates, the velocity (speedLong, speedLat) and acceleration vectors, and (iii) instances of the acceleration models/methods from models.js.

Notice that the vehicle type obstacle plays a much more dominant role compared to since it can be used to arbitrarily vary the shape of the road boundaries, e.g., narrowings at the left or right, walls crossing the road with a small passage (corresponding to the "exit a room through a door" scenarios of pedestrian simulations), and more. See for more details.


a collection of pseudo-classes for the underlying longitudinal car-following models, presently, the IDM and the ACC model (see Ref[2] for details) as well as the MTM (Ref [1]) generalizing the longitudinal models to a fully twodimensional dynamics.


Helper pseudo-class for drawing the insert boxplots and scatterplots (speed-density and flow-density data).


Helper functions providing some speed and type-dependent color maps to draw the vehicles.


Helper function for drawing the arrows representing the acceleration vectors if the GUI element Display Forces is on.

Numerical Integration

Like the Social-Force Model, the MTM is a time-continuous acceleration-based particle model, i.e., the formal dynamics is like that of Newtonian particles of unit mass. Mathematically, we obtain coupled ordinary differential equations (ODEs). While, generally, Runge-Kutta of forth order (RK4) is used for approximatively numerically solving such a system of ODEs, we use the ballistic update instead, i.e., taking into consideration the accelerations for the positional update (second order) but keeping the acceleration constant during this step (first-order Euler update for the velocities). Although this ballistic update method is first order as a whole, it turned out to be more efficient than RK4 (and also than the simple Euler update scheme). The reason is that the right-hand sides of the ODEs are generally not smooth (sufficiently often differentiable with respect to the state variables) effectively reducing also RK4 to first order. Details can be found in Reference 5.

The pseudo-code for the ballistic update over a fixed time interval dt is as follows:


where accVector(t) is calculated by the MTM.

Notice that we implement parallel update. One complete update step consists of (i) executing the user-driven callbacks, (ii) simultaneously updating all accelerations on a given road by the MTM, (iii) updating all velocities and positions by the ballistic method.


The drawing is essentially based on images:

  • The background is just a jpeg or png image.

  • Each road network element is composed of typically 50-100 small road segments. Each road segment (a small png file) represents typically 10m-20m of the road length with all the lanes. By transforming this image (translation, rotation,scaling) and drawing it multiple times, realistically looking roads can be drawn.

  • The vehicles are drawn first as b/w. images (again translated, rotated, and scaled accordingly) to which an (appropriately transformed) semi-transparent rectangle is added to display the color-coding of the speeds.


[1] Venkatesan Kanagaraj and Martin Treiber (2018), Self-Driven Particle Model for Mixed Traffic and Other Disordered Flows Physica A: Statistical Mechanics and its Applications 509, 1-11 Paper link arXiv e-print: 1805.05076

[2] M. Treiber and A. Kesting (2013), Traffic Flow Dynamics, Data, Models and Simulation. Springer. Link

[3] M. Treiber, A. Hennecke, and D. Helbing (2000), Congested traffic states in empirical observations and microscopic simulations. Physical review E 62 1805-1824. Paper link arXiv e-print

[4] A. Kesting, M. Treiber, and D. Helbing (2010), Enhanced intelligent driver model to access the impact of driving strategies on traffic capacity. Philosophical Transactions of the Royal Society A, 4585-4605. arXiv e-print

[5] M. Treiber and V. Kanagaraj (2018), Comparing Numerical Integration Schemes for Time-Continuous Car-Following Models Physica A: Statistical Mechanics and its Applications 419C, 183-195 DOI 10.1016/j.physa.2014.09.061 (2015). arXiv e-print


No description, website, or topics provided.






No releases published


No packages published