![\"Play](\"https://patkerr.co.uk/2d-vehicles/motion-lab-screenshot.jpg\")
A project history · 1996–2026
\nOne weekend in late August 1996, I wrote a 2D physics simulation which later became\nthe basis of the vehicle system in the eventually popular game "Grand Theft Auto" aka\n"GTA".
\nIt began as a little wireframe demo written in GFA BASIC on my Atari ST home computer\n(and was later ported to C for use in the actual game).
\nI have\nrecreated*\nit here in JavaScript for its 30th anniversary in a slightly prettier, "remastered"\nform, for anyone who is interested in seeing or playing it.
\n\n
The 1996 idea, recreated in Motion Lab.
\nInstructions
\nYou can play the recreation above, with touch controls if you are on mobile.
\nIn addition to the default "Car" mode (1), you can also select the technically simpler\nSpaceship aka "Ship" (2) and "Brick" (3) modes, either via the mode selector in Settings\nor by pressing the corresponding numbers on your keyboard.
\nCollision barriers around the sides of the playfield can be toggled by clicking or\npressing "B", and "G" toggles vertical gravity (which only really makes sense in the\nShip and Brick modes).
\nCamera controls are provided by "Z" and "X": "Z" toggles what is called the camera's\n"dead zone", which changes how far the vehicle can move before the camera follows it;\n"X" toggles a speed-related zoom feature which pulls the camera back a bit when you are\ngoing faster (just like in GTA).
\n*(in an entirely non-copyright and non-trademark infringing way, of course)
\n*[VOLUNTARY DISCLAIMER: This work is wholly independent of, and in no way affiliated\nwith, the "Grand Theft Auto" franchise and its publisher "Take-Two", or the developer\nentity known as "Rockstar Games". I am more than happy to make this abundantly clear.\nDelighted, even.]*
\nHow it works
\nThe prototype combined a general-purpose 2D rigid body with a deliberately simple\nmodel of a car.
\nThe original simulation started with something like the "Brick", and I then added some\nenhancements to make the "Ship" (which is deliberately reminiscent of the classic game\n"Thrust" from 1986), before finally adding the elements which were required to make it\nfeel a bit more like a "Car".
\nAt the core of the system is a simple classical 2D rigid body dynamics simulation.\nFrom what I can tell, this approach was not yet common in games at the time (with some\nnotable exceptions), and most game vehicles were done using basic high-school ‘point\nphysics’ (F = ma), with any rotational component being handled by various wonky\n"hacks". Using proper rigid-body physics (including torques) handles rotation more\ncoherently.
\nOn top of that core, I then added a "novel" vehicle simulation layer, based on a\nsimple, approximate, and technically incorrect model of how tyres behave. It was\nbasically a semi-educated guess on my part and, although I knew it wasn't really\nphysically accurate, it nevertheless seemed to be "good enough" for my purposes at the\ntime.
\nThese diagrams describe the current JavaScript recreation. The browser interface\nsupplies the controls, the simulation advances in fixed time steps, and the Canvas\nrenderer draws the resulting state. Keeping those jobs separate makes it easier to\nfollow where a button press becomes a force, and where that force becomes movement.\nSelect any diagram to open it at full size.
\n![\"Motion](\"https://patkerr.co.uk/motion-lab/docs/architecture.svg\")
The overall flow, from the page and controls to simulation and drawing.
\nA vehicle combines a rigid body with a shell that describes its display shape and\ncollision geometry, and a dynamics object that supplies its behaviour. The Brick\naccepts forces from a pointer drag; the Ship adds thrust at an attachment point; the\nCar adds engine force and steering, with resistance applied at four tyre positions.\nSwitching mode replaces the shell and behaviour while preserving the body's position\nand motion.
\n![\"Vehicle](\"https://patkerr.co.uk/motion-lab/docs/vehicle-architecture.svg\")
How the vehicle coordinator combines shape, behaviour and body state.
\nThe rigid body tracks position and velocity alongside angle and angular velocity. A\nforce through its centre changes its motion; a force applied away from the centre can\nalso turn it. The simulation adds up the forces and torque, updates velocity, then\nadvances position and angle. A point on a rotating body has its own velocity,\ncombining the body's movement with the motion around its centre.
\nBarriers use that same point velocity. When a shape crosses an edge, the simulation\nmoves it back inside and applies a contact impulse if it is moving into the barrier.\nAn off-centre impact can therefore change both its velocity and its spin. This is a\nsimple barrier solver, with frictionless edges, rather than a general collision\nsystem.
\n![\"Rigid-body](\"https://patkerr.co.uk/motion-lab/docs/physics.svg\")
The shared physics core and the steps used to resolve barrier contacts.
\nFor each tyre, the Car measures the velocity at its position and resolves it into two\ncomponents: along the wheel's heading and sideways across it. It applies a small\nresistance to rolling and a much stronger resistance to sideways motion. Steering\nchanges the front wheels' headings, so their forces also turn the body. The handbrake\nincreases rear rolling resistance and reduces rear sideways grip.
\nThose resistance forces are proportional to velocity, without a force cap. That is a\nconvenient damping model rather than a realistic account of tyre friction, slip or\navailable grip. It produces the useful feeling of wheels resisting sideways movement\nwith very little machinery. The Ship and Brick use the same physics core with\ndifferent ways of applying forces.
\n![\"The](\"https://patkerr.co.uk/motion-lab/docs/dynamics.svg\")
The force models, including wheel velocity components and handbrake behaviour.
\nThe Vehicle coordinator asks the selected dynamics object to apply its forces, then\nadvances the rigid body. It also converts the shell's local points into world\npositions for drawing and finds the surface point facing each barrier. When a flat\nface touches a barrier, it uses the midpoint of the contacting points, avoiding the\nartificial spin that choosing a single corner would introduce.
\n![\"Vehicle](\"https://patkerr.co.uk/motion-lab/docs/vehicles.svg\")
A closer look at mode installation, simulation updates and contact geometry.
","headings":[{"level":1,"text":"2D Vehicles","id":"2d-vehicles"},{"level":2,"text":"A small idea with two layers.","id":"a-small-idea-with-two-layers"},{"level":3,"text":"From input to motion","id":"from-input-to-motion"},{"level":3,"text":"One body, three behaviours","id":"one-body-three-behaviours"},{"level":3,"text":"Forces can move and turn the body","id":"forces-can-move-and-turn-the-body"},{"level":3,"text":"The deliberately approximate tyres","id":"the-deliberately-approximate-tyres"},{"level":3,"text":"Putting the pieces together","id":"putting-the-pieces-together"}]}}