Animated particle constellations

< html > < body bgcolor = black > < canvas id =" myCanvas " width =" 800 " height =" 600 "></ canvas > < script > function line ( particle , particle2) { context . beginPath (); context . moveTo ( particle . x , particle . y ); context . lineTo (particle2. x , particle2. y ); context . stroke (); } function animate () { context . clearRect ( 0 , 0 , canvas . width , canvas . height ); for ( let i = 0 ; i < maxParticles ; i ++) { let particle = particles [ i ]; context . fillRect ( particle . x - particleSize / 2 , particle . y - particleSize / 2 , particleSize , particleSize ); for ( let j = 0 ; j < maxParticles ; j ++) { if ( i != j ) { let particle2 = particles [ j ]; let distanceX = Math . abs ( particle . x - particle2. x ); let distanceY = Math . abs ( particle . y - particle2. y ); if ( distanceX < threshold && distanceY < threshold ) { context . lineWidth = (( threshold * 2 ) - ( distanceX + distanceY )) / 50 ; let color = 200 - Math . floor ( distanceX + distanceY ); context . strokeStyle = ' rgb (' + color + ',' + color + ',' + color + ')'; line ( particle , particle2); } } } particle . x = particle . x + particle . vx ; particle . y = particle . y + particle . vy ; if ( particle . x > canvas . width - particleSize || particle . x < particleSize ) particle . vx = - particle . vx ; if ( particle . y > canvas . height - particleSize || particle . y < particleSize ) particle . vy = - particle . vy ; } window . requestAnimationFrame ( animate ); } let canvas = document . getElementById (' myCanvas '); let context = canvas . getContext ('2d'); let particles = []; let particleSize = 4 ; let maxParticles = 40 ; let threshold = 100 ; for ( let i = 0 ; i < maxParticles ; i ++) { let particle = { x : Math . random () * canvas . width , y : Math . random () * canvas . height , vx : Math . random (), vy : Math . random () } particles . push ( particle ); } context . fillStyle = ' white '; animate (); </ script > </ body > </ html >

Ok, stop staring at those darn dots and start coding!I saw animations similar to the one above on several websites and liked the simplicity of the concept, so let's recreate it - it will only take 42 lines of code.At a high level, here's the recipe:- a couple dozens of random particles are bouncing off of the edges of the Canvas- calculate the distance between each pair of particles- if the distance is lower than a pre-set threshold, draw a line between themHere's the full code and a more detailed explanation is below.[1-4] HTML setup[6-11] a function that draws a line between two particles[13-39] the main animation function:[14] clear the previous frame[15-37] for each particle:[18-27] check with every other particle[19] make sure you're not checking a particle with itself[21-22] calculate approximate distance between particles (a sum of differences in the X and Y axles). You could use the actual distance [sqrt(distanceX^2+distanceY^2)], but that just slows things down and is not really visible.[23] if the distance is lower than the threshold...[24] ...the width...[25-26] ...and the color of the line (shade of gray with equal values of the Red, Green and Blue components) depend on the distance. Interestingly, Math.floor is only necessary for iOS - other platforms can handle float.[31-32] The particle moves in both dimensions[34-36] Bounce off of the edges[41-46] Set up the Canvas and parameters.[47-54] Initialize the particles with random coordinates and speeds.[57] Action!Experiment with different parameters, for example maxParticles = 100 and threshold = 40 gives you this:Check out these programming tutorials: