Source code for javascript simulation of www.traffic-simulation.de
This simulation uses JavaScript/html5.
The master html file, for example onramp.html, starts the actual simulation by the canvas tag:
<canvas id="canvas_onramp" width="800" height="600">some text for old browsers </canvas>
What to do with this canvas is specified in the init() procedure of onramp.js which starts the simulation and is assocoated with this canvas by the first command of the init procedure,
canvas = document.getElementById("canvas_onramp");
(for ring.html, the init procedure of ring.js would be associated with the canvas of that file, and so on). At the end of the initialization, init() starts the actual simulation thread by the command
return setInterval(main_loop, 1000/fps);
In future versions, an additional control file canvasresize.js will implement a responsive design.
The javascript code uses pseudo objects in appropriately named files, particularly
the top-level simulation code for the corresponding scenario called in ring.html, onramp.html etc. Initializes the road network elements needed for the corresponding scenario (e.g. mainroad and onramp for the onramp scenario), starts/stops the simulation, controls the simulation updates in each time step depending on the scenario, draws everything, and implements the user controls defined in ring_gui.js, onramp_gui.js etc.
Defines the user control. Each simulation scenario (such as ring, onramp, roadworks) has both a top-level simulation javascript file <scenario>.js, and an associated gui <scenario>_gui.js (and of course an html file <scenario>.html).
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, to interact with/get information of neighboring road network elements.
It also provides methods to draw this network element and the vehicles on it. These drawing methods depend on the road geometry functions traj_x and traj_y to be provided by the calling pseudoclasses <scenario>.js
each vehicle has (i) properties such as length, width, type, (ii) dynamic variables such as position and speed, and (iii) instances of the acceleration/lane changing methods from models.js.
a collection of pseudo-classes for the longitudinal models (presently, the IDM), and lane-changing decision models (presently, MOBIL).
Helper-class providing some speed and type-dependent color maps to draw the vehicles.
external open library to implement sliders. Has some drawbacks (no docu of how to change sliders programmatically, initialize them to arbitrary values). In future versions, I plan to replace them with generic html5 sliders (range element).
callback (implementation) of the buttons for the different scenarios on the <scenario>.html simulation pages
The drawing is essentially based on images:
-
The background is just a jpeg 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] M. Treiber, A. Hennecke, and D. Helbing. Congested traffic states in empirical observations and microscopic simulations. Physical review E 62 1805-1824 (2000). Link, Preprint
[2] M. Treiber and A. Kesting. Traffic Flow Dynamics, Data, Models and Simulation. Springer 2013. Link
[3] A. Kesting, M. Treiber, and D. Helbing. General lane-changing model MOBIL for car-following models. Transportation Research Record, 86-94 (2007). Paper
[4] A. Kesting, M. Treiber, and D. Helbing. Enhanced intelligent driver model to access the impact of driving strategies on traffic capacity. Philosophical Transactions of the Royal Society A, 4585-4605 (2010). Preprint
[5] M. Treiber, and A. Kesting. An open-source microscopic traffic simulator. IEEE Intelligent Transportation Systems Magazine, 6-13 (2010). Preprint