Starfield - Graphic effect (Typescript)

Download Typescript (Visual Studio 2019 project) source code (33kb)

This page shows the graphic effect of a moving star field simulation, implemented with Typescript using the Canvas element.

Above my implementation of a starfield graphic effect featuring a hyper jump visualization is shown. It is implemented in Typescript using HTML5 canvas.
Feel free to download the source code at the top of the page to check out how it works.

Implementation notes:

The rendering pipeline is a simple 3D projection engine with the camera located at the origin, "looking down" the positive z-axis (left handed coordinate system). The used projection mechanism is explained in detail in [1]. Have a look at it, the very same is also used here.

Each star is represented by a 3D particle, having a specific position, velocity and acceleration.
At the beginning, the stars are created with a random position and a random z-direction velocity to fly towards the user.
The first part of the hyper space effect is just setting the z-direction velocity to zero and rotate all stars around the center of the screen.
When the second part begins, the rotation is stopped and the currect star position is stored. During this phase, the z-acceleration of a star is stepwise increased and a line from the stored to the current position is drawn to create this "warp effect".
The third phase (slowing down) is actually the second phase just reversed - the acceleration of a star is stepwise decreased.
Once a star is out of side (the z-position value is behind the viewer), it is respawned with new position and velocity values.

A worth mentioning feature is the used scaling of the stars depending on its z-position ("z-scaling"). The nearer the star is to the viewer, the larger its radius gets. The constants used in the calculation of the scaling factor were just manually retrieved by testing.

That's it - have fun!


[1] Simplistic fixed camera to perspective screen transformation


2020/11/28: Initial release.