Starfield visualization in JavaScript

󰃭 2024-08-31

This is a simple, straightforward implementation of a visualization reminiscent of the classic Windows 95 starfield screensaver.

It is also interactive: you can touch the screen or use the accelerometer to influence the direction of the movement.

This is how it works:

  • Create a bunch of particles (100), each in a random position.
  • Every frame, move each particle further away from the center*. The further the particle is from the center, the more visible it will become. This gives the illusion that the particles are moving closer to the viewer, or that the viewer is going further into space.
  • The center is not really the center of the screen, but a variable point which can be influenced by the user by moving their cursor or tilting their device.
  • When the particles go outside of the view, put them near the center again, this keeps the visualization going on in perpetuity.

In this blog post, I want to share the heavily-commented source code to demonstrate how simple it is to create visually appealing animations with a few lines of code and basic math knowledge.

The visualization is embedded in an iframe below, but you can also click here to see it in its own page.

The code is available in this Gist:



More posts like this

Learning a Programming Language

󰃭 2014-02-14 | #javascript #programming-projects #ramblings

I’ve heard that if you’re a good programmer, you should be able to pick up a new language in a few days. And I’ve done this myself, I learned the basics of Go a few months ago. Built some command line programs and a web app with it, all in a few days. Yet, what does it take to really learn a new language? To master it? Sure, there are some concepts that translate well from language to language, but some languages have their own thing going on.

Continue reading 


How to use the Youtube JS API to play music in the background

󰃭 2014-05-23 | #javascript #tutorials #youtube

The Youtube JavaScript API allows you to embed YouTube videos and interact with them programatically. To use it, first you need to embed this script into your page: <script src="http://www.youtube.com/player_api"></script>. If you just want the audio, you can hide the element that contains the video: <div id="player" style="position: absolute; top: -9999px; left: -9999px;"></div> Here we use absolute positioning with negative coordinates because using display: none; will prevent the onReady handler from the Youtube player from triggering on Firefox.

Continue reading 