JavaScript Animated Starfield (HTML Canvas Using an Animation Loop)

In this JavaScript tutorial, I show you how to create an animated starfield using plain vanilla JavaScript inside an HTML file. We create an animation loop using the inbuilt function requestAnimationFrame(). We set up the stars to be of random sizes and speeds, as well as having a random direction upon reload. You can download the tutorial code below. Here are the steps shown in the video:

0:00 Introduction and file setup 0:28 HTML setup 0:48 Constants 1:48 Canvas and context 2:31 Animation loop 4:03 CSS and styling 4:35 Setting up the stars array 8:14 Drawing the stars 9:26 Moving the stars 10:20 Cycle the stars on screen 12:00 Randomise star speed

Best Sellers in Computers ▶ https://amzn.to/3gaJ3yx Best Sellers in Software ▶ https://amzn.to/2YDnxw5 Best Sellers in Video Games ▶ https://amzn.to/2YGDoua

DOWNLOAD THE TUTORIAL CODE https://drive.google.com/file/d/16HwiBwLd1vmz_H0uFUSWzGYFKJ_2D_Lz/view?usp=sharing

SOCIAL MEDIA https://www.facebook.com/MountfordStudios/ https://twitter.com/MtFordStudios

MICROPHONE Rode NT-USB ▶ https://amzn.to/3ampQWZ

IMAGES https://pixabay.com/

OUTRO MUSIC Prelude No. 5 by Chris Zabriskie is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://chriszabriskie.com/preludes/ Artist: http://chriszabriskie.com/

SOFTWARE USED TO PRODUCE THIS VIDEO Audacity, https://www.audacityteam.org/ HandBrake, https://handbrake.fr/ Inkscape, https://inkscape.org/ OBS Studio, https://obsproject.com/ Shotcut, https://shotcut.org/ Visual Studio Code, https://code.visualstudio.com/

#javascript #javascripttutorial #javascriptcourse ... https://www.youtube.com/watch?v=py-Qls7Jd3I