1+ const canvas = document . getElementById ( "canvas1" ) ;
2+ const ctx = canvas . getContext ( "2d" ) ; // CTX MEANS CONTEXT
3+ ctx . canvas . width = window . innerWidth ;
4+ ctx . canvas . height = window . innerHeight ;
5+ let particleArray ;
6+
7+ // get mouse mouse position ///////////////////////////////
8+ let mouse = {
9+ x : null ,
10+ y : null ,
11+ radius : ( ( canvas . height / 80 ) * ( canvas . width / 80 ) )
12+ }
13+ window . addEventListener ( 'mousemove' ,
14+ function ( event ) {
15+ mouse . x = event . x ;
16+ mouse . y = event . y ;
17+ } ) ;
18+
19+ // create Particle
20+ class Particle {
21+ constructor ( x , y , directionX , directionY , size , color ) {
22+ this . x = x ;
23+ this . y = y ;
24+ this . directionX = directionX ;
25+ this . directionY = directionY ;
26+ this . size = size ;
27+ this . color = color ;
28+ this . speedX = this . directionX ;
29+ this . speedY = this . directionY ;
30+ }
31+ // create method to draw individual particle
32+ draw ( ) {
33+ ctx . beginPath ( ) ;
34+ ctx . arc ( this . x , this . y , this . size , 0 , Math . PI * 2 , false ) ;
35+
36+ ctx . fillStyle = '#01a72b' ;
37+ ctx . fill ( ) ;
38+ }
39+
40+ // check particle position, check mouse position, move the paticle, draw the particle
41+ update ( ) {
42+ // check if particle is still within canvas
43+ if ( this . x > canvas . width || this . x < 0 ) {
44+ this . directionX = - this . directionX ;
45+ this . speedX = this . directionX ;
46+ } if ( this . y + this . size > canvas . height || this . y - this . size < 0 ) {
47+ this . directionY = - this . directionY ;
48+ this . speedY = this . directionY ;
49+ }
50+ // check mouse position/particle position - collision detection
51+ let dx = mouse . x - this . x ;
52+ let dy = mouse . y - this . y ;
53+ let distance = Math . sqrt ( dx * dx + dy * dy ) ;
54+ if ( distance < mouse . radius + this . size ) {
55+ if ( mouse . x < this . x && this . x < canvas . width - this . size * 10 ) {
56+ this . x += 10 ;
57+ }
58+ if ( mouse . x > this . x && this . x > this . size * 10 ) {
59+ this . x -= 10 ;
60+ }
61+ if ( mouse . y < this . y && this . y < canvas . height - this . size * 10 ) {
62+ this . y += 10 ;
63+ }
64+ if ( mouse . y > this . y && this . y > this . size * 10 ) {
65+ this . y -= 10 ;
66+ }
67+ }
68+ // move particle
69+ this . x += this . directionX ;
70+ this . y += this . directionY ;
71+ // call draw method
72+ this . draw ( ) ;
73+ }
74+ }
75+
76+ // check if particles are close enough to draw line between them
77+ function connect ( ) {
78+ let opacityValue = 1 ;
79+ for ( let a = 0 ; a < particleArray . length ; a ++ ) {
80+ for ( let b = a ; b < particleArray . length ; b ++ ) {
81+ let distance = ( ( particleArray [ a ] . x - particleArray [ b ] . x ) * ( particleArray [ a ] . x - particleArray [ b ] . x ) )
82+ + ( ( particleArray [ a ] . y - particleArray [ b ] . y ) * ( particleArray [ a ] . y - particleArray [ b ] . y ) ) ;
83+ if ( distance < ( canvas . width / 7 ) * ( canvas . height / 7 ) )
84+ {
85+ opacityValue = 1 - ( distance / 10000 ) ;
86+ ctx . strokeStyle = 'rgba(1,167,43,' + opacityValue + ')' ;
87+ ctx . beginPath ( ) ;
88+ ctx . lineWidth = 5 ;
89+ ctx . moveTo ( particleArray [ a ] . x , particleArray [ a ] . y ) ;
90+ ctx . lineTo ( particleArray [ b ] . x , particleArray [ b ] . y ) ;
91+ ctx . stroke ( ) ;
92+
93+ }
94+ }
95+ }
96+ }
97+
98+ // create particle array
99+ function init ( ) {
100+ particleArray = [ ] ;
101+ let numberOfParticles = ( canvas . height * canvas . width ) / 9000 ;
102+ for ( let i = 0 ; i < numberOfParticles * 1.3 ; i ++ ) {
103+ let size = ( Math . random ( ) * 20 ) + 1 ;
104+ let x = ( Math . random ( ) * ( ( innerWidth - size * 2 ) - ( size * 2 ) ) + size * 2 ) ;
105+ let y = ( Math . random ( ) * ( ( innerHeight - size * 2 ) - ( size * 2 ) ) + size * 2 ) ;
106+ let directionX = ( Math . random ( ) * 2 ) - 1 ;
107+ let directionY = ( Math . random ( ) * 2 ) - 1 ;
108+
109+ let color = 'gold' ;
110+ particleArray . push ( new Particle ( x , y , directionX , directionY , size , color ) ) ;
111+ }
112+ }
113+
114+ // create animation loop
115+ function animate ( ) {
116+ requestAnimationFrame ( animate ) ;
117+ ctx . clearRect ( 0 , 0 , innerWidth , innerHeight ) ;
118+
119+ for ( let i = 0 ; i < particleArray . length ; i ++ ) {
120+ particleArray [ i ] . update ( ) ;
121+ }
122+ connect ( ) ;
123+ }
124+ init ( ) ;
125+ animate ( ) ;
126+
127+
128+ // RESIZE SETTING - empty and refill particle array every time window changes size + change canvas size
129+ window . addEventListener ( 'resize' ,
130+ function ( ) {
131+ canvas . width = innerWidth ;
132+ canvas . height = innerHeight ;
133+ mouse . radius = ( ( canvas . height / 80 ) * ( canvas . width / 80 ) ) ;
134+ init ( ) ;
135+ }
136+ )
137+ // 2) SET MOUSE POSITION AS UNDEFINED when it leaves canvas//////
138+ window . addEventListener ( 'mouseout' ,
139+ function ( ) {
140+ mouse . x = undefined ;
141+ mouse . y = undefined ;
142+ console . log ( 'mouseout' ) ;
143+ }
144+ )
0 commit comments