10 SHARES Share Tweet

You’re watching a science fiction TV show or movie, and the hero needs to make a quick escape. Luckily, they can travel faster than light with “Warp drive” or “Hyperdrive”. Stars blaze past the viewport and turn blue as the space ship goes faster and faster.

How can we make this effect? Well, variables can be used to store the position, speed, brightness, and size of each of the moving ‘warp stars’. Specifically, this sketch uses arrays of size 500, and position is actually stored in two arrays: an “angle”, which represents the angle rotating around the center, and the “dist” or distance from the center. This is similar to the concept of polar coordinates in mathematics. A restartStar function sets the stars position to a random location on the screen, and it is re-run when stars move off the screen. Each frame, we draw the warp stars, move them, and increase the speed a little (to give a sense of parallax acceleration as they move closer to the edge of our canvas). Finally, some map functions are used to set the color to blue as they move faster, and another map function uses sin() sets the warp speed to a number between 0 and 10. Just to give further realism, a fixed set of ‘static’ non-moving stars is drawn by setting randomSeed(0) so that their positions are random but unchanging from frame to frame. The full code is as follows:

It is designed to also work even if you change the numbers in the size() function to fit your screen: