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

How to use Let's Encrypt certificates with Keycloak

󰃭 2023-01-04 | #java #keycloak #letsencrypt #linux #tips #tutorials

Keycloak provides user federation, strong authentication, user management, fine-grained authorization, and more. Here is a guide to enable HTTPS access to your Keycloak server using a free Let’s Encrypt SSL certificate. The beauty of Let’s Encrypt is its ease of use and the fact that it’s free! This guide assumes you have already installed Keycloak at /opt/keycloak/ using the official guide for bare metal installs, and now you want to enable HTTPS access.

Continue reading 


Starry Sky in HTML5 Canvas - Part 1

󰃭 2019-04-13 | #canvas #javascript #programming-projects #tutorials

In my spare time I often enjoy creating visualizations using HTML5 canvas. I’m planning to do a little presentation about this so I thought a good way to get started was to create a blog post explaining how to do a simple one. This tutorial will teach you how to create something like the image below from scratch! IMPORTANT – you can try out the result of this part of the tutorial by visiting this CodeSandbox.

Continue reading 