Small spring demo creates canvas draw some big text on it and use the shape of the text to build a spring structure throw in a few extra things spiders and allow the mouse cursor or touchpad to shake the springs up document body style height 350px document body style width 400px const canvas document createElement canvas document body appendChild canvas canvas id canvas1 canvas width window innerWidth canvas height window innerHeight const ctx canvas getContext 2d let particleArray let adjustX 0 let adjustY 0 get mouse mouse position let mouse x null y null radius 150 window addEventListener mousemove move window addEventListener touchmove move false window addEventListener touchstart move false window addEventListener touchend move false function move event if event type touchstart event type touchmove event type touchend event type touchcancel var evt typeof e originalEvent undefined e e originalEvent var touch evt touches 0 evt changedTouches 0 event x touch pageX event y touch pageY mouse x event x canvas clientLeft 2 mouse y event y canvas clientTop 2 ctx font bold 18px Verdana ctx fillText NOTE 0 20 const data ctx getImageData 0 0 canvas width canvas height const sprite new Image sprite src https xbdev net retro code games images spiders png class Particle constructor x y this x x 200 this y y 100 this size 3 this baseX this x this baseY this y this density Math random 30 1 this random Math random this spriteSize Math random 50 50 this frameX Math floor Math random 3 this frameY Math floor Math random 8 this angle Math random 2 draw if this random 0 05 ctx fillStyle black ctx beginPath ctx arc this x this y this size 0 Math PI 2 ctx closePath ctx fill else ctx save ctx translate this x this y ctx rotate this angle ctx drawImage sprite this frameX 213 3 this frameY 213 3 213 3 213 3 0 this spriteSize 2 0 this spriteSize 2 this spriteSize this spriteSize ctx restore update check mouse position particle position collision detection let dx mouse x this x let dy mouse y this y let distance Math sqrt dx dx dy dy let forceDirectionX dx distance let forceDirectionY dy distance distance past which the force is zero var maxDistance mouse radius convert 0 maxDistance range into a 1 0 Close is near 1 far is near 0 for example 250 0 75 100 0 9 10 0 99 var force maxDistance distance maxDistance if we went below zero set it to zero if force 0 force 0 let directionX forceDirectionX force this density let directionY forceDirectionY force this density if distance mouse radius this size this x directionX this y directionY else if this x this baseX let dx this x this baseX this x dx 10 if this y this baseY let dy this y this baseY this y dy 10 End Particle class function init particleArray for var y 0 y2 data height y y2 y for var x 0 x2 data width x x2 x if data data y 4 data width x 4 3 128 let positionX x adjustX let positionY y adjustY let positionX x let positionY y particleArray push new Particle positionX 15 positionY 15 end init function animate ctx fillStyle rgba 0 255 0 0 5 ctx fillRect 0 0 innerWidth innerHeight ctx clearRect 0 0 innerWidth innerHeight ctx clearRect 0 0 clientWidth clientHeight connect for let i 0 i particleArray length i particleArray i update particleArray i draw requestAnimationFrame animate end animate function connect let opacityValue 1 for let a 0 a particleArray length a for let b a b particleArray length b let distance particleArray a x particleArray b x particleArray a x particleArray b x particleArray a y particleArray b y particleArray a y particleArray b y if distance 2600 opacityValue 1 distance 2600 let dx mouse x particleArray a x let dy mouse y particleArray a y let mouseDistance Math sqrt dx dx dy dy if mouseDistance mouse radius 2 ctx strokeStyle rgba 0 0 0 opacityValue else if mouseDistance mouse radius 50 ctx strokeStyle rgba 0 0 90 opacityValue else if mouseDistance mouse radius 20 ctx strokeStyle rgba 0 0 50 opacityValue else ctx strokeStyle rgba 0 0 0 opacityValue ctx lineWidth 1 ctx beginPath ctx moveTo particleArray a x particleArray a y ctx lineTo particleArray b x particleArray b y ctx stroke end connect window onload function canvas width window innerWidth canvas height window innerHeight init animate console log ready
0 99 var force maxDistance distance maxDistance if we went below zero set it to zero if force 0 force 0 let directionX forceDirectionX force this density let directionY forceDirectionY force this density if distance mouse radius this size this x directionX this y directionY else if this x this baseX let dx this x this baseX this x dx 10 if this y this baseY let dy this y this baseY this y dy 10 End Particle class function init particleArray for var y 0 y2 data height y y2 y for var x 0 x2 data width x x2 x if data data y 4 data width x 4 3 128 let positionX x adjustX let positionY y adjustY let positionX x let positionY y particleArray push new Particle positionX 15 positionY 15 end init function animate ctx fillStyle rgba 0 255 0 0 5 ctx fillRect 0 0 innerWidth innerHeight ctx clearRect 0 0 innerWidth innerHeight ctx clearRect 0 0 clientWidth clientHeight connect for let i 0 i particleArray length i particleArray i update particleArray i draw requestAnimationFrame animate end animate function connect let opacityValue 1 for let a 0 a particleArray length a for let b a b particleArray length b let distance particleArray a x particleArray b x particleArray a x particleArray b x particleArray a y particleArray b y particleArray a y particleArray b y if distance 2600 opacityValue 1 distance 2600 let dx mouse x particleArray a x let dy mouse y particleArray a y let mouseDistance Math sqrt dx dx dy dy if mouseDistance mouse radius 2 ctx strokeStyle rgba 0 0 0 opacityValue else if mouseDistance mouse radius 50 ctx strokeStyle rgba 0 0 90 opacityValue else if mouseDistance mouse radius 20 ctx strokeStyle rgba 0 0 50 opacityValue else ctx strokeStyle rgba 0 0 0 opacityValue ctx lineWidth 1 ctx beginPath ctx moveTo particleArray a x particleArray a y ctx lineTo particleArray b x particleArray b y ctx stroke end connect window onload function canvas width window innerWidth canvas height window innerHeight init animate console log ready