Starfield flythrough in JavaScript



< html > < body style =' background - color : black '> < canvas id =" myCanvas " width =" 800 " height =" 800 "></ canvas > < script > 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 >

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 coordinatesvx and vy - velocity of the star in the x and y axisIn 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!Check out these programming tutorials: