Starfield flythrough in JavaScript

Here's how to create the starfield above in only 21 lines of pure JavaScript:

The main program only initiates the variables and the animation; all the action is in the 'animate' function. SetInterval was tempting because it would require one line of code less (requestAnimationFrame has two be used twice), but it's not best practice.

We'll create an array of stars. Instead of creating all the stars from the start, we'll continue creating them in the animation loop (there is a 50% chance a new star will be created in a given frame) until we reach 300 stars. That way the center of the screen is gradually filled with stars, instead of having all the stars initially in the center, which would not look realistic.

Each star is an object with four properties:

x and y - the coordinates
vx and vy - velocity of the star in the x and y axis

In each animation frame, we will clear the entire canvas, move the stars and redraw them. We have to add 400 to both the X and the Y coordinate to make sure the stars start in the middle of the Canvas.

If any of the stars go outside of the canvas, we'll put them back in the center. We assign the color based on the values of x and y to each of the RGB components, which results in grayscale colors, brighter as the stars get closer. The diameter of the star depends on the y value and (to make it appear more random) on the index of the star. I left the calculation of 2*Math.PI (ca. 6.28 radians - full circle), but to make the runtime faster, you can hard code the result.

Here is the code with some more explanations. Enjoy the trip!

<html>

function animate() {

if (stars.length<300&&Math.random()<.5){ // if fewer than 300 stars, a 50% chance of creating a new one

let star={x:0,y:0,vx:-5+Math.random()*10,vy:-5+Math.random()*10} // create a new star in the middle with random velocity

stars.push(star); // add the star to the array

}

context.clearRect(0, 0, canvas.width, canvas.height); // clear the frame

for(let n=0;n<stars.length;n++){ // for each star

stars[n].x=stars[n].x+stars[n].vx; // add the velocity to the current position

stars[n].y=stars[n].y+stars[n].vy; // in both axles

if(stars[n].x>400||stars[n].x<-400){ // if the star is out of bounds

stars[n].x=0; // put it back in the center

stars[n].y=0;

}

color=Math.floor((Math.abs(stars[n].x)+Math.abs(stars[n].y))/5);

context.fillStyle = 'rgb('+color+','+color+','+color+')'; // use the color value for the R, G and B component

context.beginPath();

context.arc(400+stars[n].x, 400+stars[n].y, Math.abs(stars[n].y/100+n/200), 0, 2 * Math.PI); // draw a circle

context.fill();

}

window.requestAnimationFrame(animate); // request another animation frame

}

let canvas = document.getElementById('myCanvas');

let context = canvas.getContext('2d');

let stars=[]; // the array of stars

window.requestAnimationFrame(animate); // initialize the animation

</script>

</body>

</html>

Check out these programming tutorials:

Domino effect in Blender Python

Wrecking ball effect in Blender Python

3d fractal in Blender Python

Fractals in Excel

Oldschool fire effect in 20 lines of JavaScript

Animated fractal in 32 lines of JavaScript

Tutorial - interactive, animated sprites in JavaScript

Your first program in JavaScript: you need 5 minutes and a notepad