You might have played around with JavaScript animations or small physics experiments before, but in this series we are going to take things a step further. We will build a simplified roller coaster simulation directly in the browser.

My goal here isn’t to build some engineering-grade physics engine. I just want to recreate the kind of coaster physics we all know from things like NoLimits Roller Coaster or other coasters in games. Nothing overly scientific, just the kind of system that behaves the way we intuitively expect. In the end, the physics model will end up pretty close to what NoLimits Roller Coaster does anyway, just without all the heavy engineering baggage.

We will use technologies that are easy to access and quick to experiment with. Throughout the series, we will rely on TypeScript, React and THREE.js. This combination gives us a clean developer experience and allows us to turn mathematical concepts into visual, interactive 3D scenes with very little overhead.

The idea behind this series is simple. Instead of reading theory first, we will learn by building something fun. Each chapter focuses on a single concept. By the end, you will understand how a small coaster car can move along a track, how the track itself is defined, and how everything is drawn in the browser.

Setting up the project

Before we start, I’ll assume you already have Node.js installed. If not, go ahead and download it first.

Also, a quick heads-up: if some of the scripts or tools I’m covering here don’t work on Windows, I’m sorry. There are ways to get a similar environment on Windows, for example, using WSL, but I’m not a Windows user, so I can’t really help there. I’m focusing on Linux and macOS, where the toolchains are very similar.

We’ll keep things simple. You can set up your stack, however, you like, but for this series I’ll just use Create React App with TypeScript and won’t bother with any extra tooling. The goal here is to explain the concepts, not to demonstrate how to engineer a perfectly structured project. That’s a whole different topic.

If you want to overengineer it, go for it. But for now, something as basic as this is completely fine:

npx create-react-app roller-coaster-simulation --template typescript

Next, install a few useful dependencies. This is all we need for now. If I end up using another package later in the series and forgot to list it here, feel free to install it when you get to that part:

npm i leva three lodash @react-three/drei @react-three/fiber @types/three @types/lodash

Important note: In every article, I’ll show example code and link to the corresponding GitHub files. These files live inside my website’s blog repository, which contains a large shared script collection for all articles. This means the structure in the repo will differ from the snippets shown in the articles. For example, my physics.ts file contains multiple evaluation functions used across different posts, since we build things step by step from article to article. All iterations end up in the same file. So don’t worry if the repo looks more consolidated or structured differently than the examples shown here.

Another important note: The example code in the articles will contain components that I don’t explicitly show or explain in the text. If you run into something unfamiliar, please check the GitHub repository and follow the imports to see how those components are implemented. Most of them are small helpers for things like drawing lines, rendering arrows, setting up scenes, and other utilities that would only distract from the main topic in the article itself.

Motion Dynamics

At the end of the day, simulating a roller coaster comes down to one simple question:

How much distance should the coaster travel in each simulation step?

To keep things simple, let’s assume our simulation updates roughly every 16 ms, which is what you would get at about 60 FPS. So the question becomes:

How far does the coaster need to travel within these 16 ms?

To answer this, we follow a very straightforward chain of logic:

  • To know the distance to travel, we first need the velocity
  • To know the velocity, we first need the acceleration

So everything begins with acceleration. Acceleration changes the velocity, velocity determines the distance to travel, and the distance to travel tells us where the coaster ends up in the next 16 ms.

This gives us a simple structure:

Acceleration → Velocity → Distance

Once we understand the acceleration acting on the coaster, the rest follows naturally.

In the next chapter, we will take the first real step of the simulation and answer the core question: How do we determine the acceleration of the coaster?