1
+ let scalar = .75 ,
2
+ width = 610 * scalar ,
3
+ height = 273 * scalar ,
4
+ pSystemSize = 20 ,
5
+ pathString = '' ,
6
+ pathLength ;
7
+
8
+ const tau = Math . PI * 2 ,
9
+ repaint = 'rgba(0,0,10,.05)' ,
10
+ shadowPath = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'path' ) ,
11
+ wrapper = document . querySelector ( '.wrapper' ) ,
12
+ canvas = document . querySelector ( 'canvas' ) ,
13
+ ctx = canvas . getContext ( '2d' ) ;
14
+
15
+ canvas . width = width ;
16
+ canvas . height = height ;
17
+ wrapper . style . width = width + 'px' ;
18
+
19
+ pathString = 'M264 97 l11 -82, 10 33, 41 0, 9 -33, 10 82 q72 32, 83 -70 c205 50, 205 155, 39 210 c-5 -60, -72 -60, -81 -12, -10 -42, -70 -32, -81 33 c-11 -72, -70 -72, -80 -33 c-9 -48, -76 -48, -81 12 c-168 -55, -168 -160, 40 -210 q9 102, 80 69 m40 -95 c405 0, 405 270, 0 270 c-405 0, -405 -270, 0 -270' ;
20
+ shadowPath . setAttribute ( 'd' , pathString ) ;
21
+ pathLength = shadowPath . getTotalLength ( ) ;
22
+
23
+ const ParticleSystem = function ( num ) {
24
+ this . colour = '#eee' ;
25
+ this . numParticles = num ;
26
+ this . allParticles = [ ] ;
27
+ this . generate ( ) ;
28
+ }
29
+ ParticleSystem . prototype . generate = function ( ) {
30
+ for ( let i = 0 ; i < this . numParticles ; i ++ ) {
31
+ let vo = { } ;
32
+ vo . colour = this . colour ;
33
+ vo . position = pathLength / this . numParticles * i ;
34
+ vo . id = i ;
35
+ vo . parent = this ;
36
+ vo . scalar = scalar ;
37
+ vo . size = 1 ;
38
+ vo . speed = 3.2 ;
39
+ vo . vx = 0 ;
40
+ vo . vy = 0 ;
41
+ this . allParticles . push ( new Particle ( vo ) ) ;
42
+ }
43
+ }
44
+ ParticleSystem . prototype . update = function ( ) {
45
+ for ( let i = 0 ; i < this . allParticles . length ; i ++ ) {
46
+ this . allParticles [ i ] . update ( ) ;
47
+ }
48
+ }
49
+ ParticleSystem . prototype . getPointAtLength = function ( id ) {
50
+ return shadowPath . getPointAtLength ( id ) ;
51
+ }
52
+
53
+ const Particle = function ( vo ) {
54
+ this . colour = vo . colour ;
55
+ this . id = vo . id ;
56
+ this . position = vo . position ;
57
+ this . parent = vo . parent ;
58
+ this . scalar = vo . scalar ;
59
+ this . size = vo . size ;
60
+ this . speed = vo . speed ;
61
+ this . pt = this . parent . getPointAtLength ( this . position ) ;
62
+ this . x = this . pt . x * this . scalar ;
63
+ this . y = this . pt . y * this . scalar ;
64
+ this . vx = 0 ;
65
+ this . vy = 0 ;
66
+ }
67
+
68
+ Particle . prototype . update = function ( ) {
69
+ this . position += this . speed ;
70
+ if ( this . position >= pathLength ) {
71
+ this . position = this . position - pathLength ;
72
+ }
73
+ this . pt = this . parent . getPointAtLength ( this . position ) ;
74
+ this . x = this . pt . x * this . scalar ;
75
+ this . y = this . pt . y * this . scalar ;
76
+ }
77
+
78
+ function update ( ) {
79
+ system . update ( ) ;
80
+ }
81
+
82
+ function draw ( ) {
83
+ ctx . fillStyle = repaint ;
84
+ ctx . fillRect ( 0 , 0 , width , height ) ;
85
+ ctx . fillStyle = system . colour ;
86
+ for ( let i = 0 ; i < system . numParticles ; i ++ ) {
87
+ let p = system . allParticles [ i ] ;
88
+ ctx . beginPath ( ) ;
89
+ ctx . arc ( p . x , p . y , p . size , 0 , tau , false ) ;
90
+ ctx . fill ( ) ;
91
+ }
92
+ }
93
+ function animate ( ) {
94
+ update ( ) ;
95
+ draw ( ) ;
96
+ requestAnimationFrame ( animate ) ;
97
+ }
98
+ let system = new ParticleSystem ( pSystemSize ) ;
99
+ animate ( ) ;
0 commit comments