@@ -11,34 +11,63 @@ canvas.height = height;
1111
1212let points = [ ] ;
1313
14+ const fallSpeed = 5 ; // Adjust for desired falling speed
15+ const minimumSpacing = 50 ; // Adjust for desired spacing between stars
16+ const rotationSpeed = .015 ; // Adjust for base rotation speed
17+
1418window . addEventListener ( "mousemove" , ( event ) => {
1519 const x = event . clientX ;
1620 const y = event . clientY ;
1721
18- // Add a new point to the trail
19- points . push ( { x, y } ) ;
22+ // Check if there are any existing points
23+ if ( ! points . length ) {
24+ points . push ( { x, y, timestamp : Date . now ( ) , rotation : Math . random ( ) * Math . PI * 2 } ) ; // Add first star with random rotation
25+ return ;
26+ }
27+
28+ // Calculate distance between the current and last point
29+ const lastPoint = points [ points . length - 1 ] ;
30+ const distance = Math . sqrt ( Math . pow ( x - lastPoint . x , 2 ) + Math . pow ( y - lastPoint . y , 2 ) ) ;
31+
32+ // Add a new star only if the distance is greater than the minimum spacing
33+ if ( distance > minimumSpacing ) {
34+ points . push ( { x, y, timestamp : Date . now ( ) , rotation : Math . random ( ) * Math . PI * 2 } ) ; // Add new star with random rotation
35+ }
36+ } ) ;
2037
21- // Limit the number of points for performance
22- points = points . slice ( - 20 ) ;
38+ window . requestAnimationFrame ( draw ) ;
2339
40+ function draw ( ) {
2441 ctx . clearRect ( 0 , 0 , width , height ) ;
2542
26- // Draw the trail
27- for ( let i = 0 ; i < points . length - 1 ; i ++ ) {
28- const current = points [ i ] ;
29- const next = points [ i + 1 ] ;
30-
31- ctx . beginPath ( ) ;
32- ctx . moveTo ( current . x , current . y ) ;
33- ctx . lineTo ( next . x , next . y ) ;
34- ctx . strokeStyle = "white" ; // Trail color
35- ctx . lineWidth = 2 ; // Trail thickness
36- ctx . stroke ( ) ;
43+ // Loop through points and update their positions
44+ for ( let i = 0 ; i < points . length ; i ++ ) {
45+ const point = points [ i ] ;
46+ const elapsedTime = ( Date . now ( ) - point . timestamp ) / 1000 ; // Time in seconds
47+ const opacity = 1 - elapsedTime ; // Fading factor based on time
48+
49+ if ( opacity > 0 ) { // Only draw visible stars
50+ point . y += fallSpeed * elapsedTime ; // Update y position for falling
51+
52+ // Update rotation based on elapsed time and adjusted rotation speed
53+ point . rotation += ( rotationSpeed + ( 1 - elapsedTime ) * rotationSpeed ) * elapsedTime ; // Gradually decreasing rotation speed
54+
55+ // Draw the star emoji with adjusted properties
56+ ctx . save ( ) ;
57+ ctx . translate ( point . x , point . y ) ;
58+ ctx . rotate ( point . rotation ) ; // Apply accumulated rotation
59+ ctx . scale ( 1 , 1 ) ; // No scaling in this version
60+ ctx . font = `20px sans-serif` ; // Adjust font size as desired
61+ ctx . textAlign = "center" ;
62+ ctx . textBaseline = "middle" ;
63+ ctx . fillStyle = `rgba(255, 255, 255, ${ opacity } ; // White with adjustable opacity
64+ ctx . fillText ( "⭐" , 0 , 0 ) ;
65+ ctx . restore ( ) ;
66+ }
3767 }
3868
39- // Draw the star
40- ctx . beginPath ( ) ;
41- ctx . arc ( x , y , 5 , 0 , Math . PI * 2 ) ; // Star size and shape
42- ctx . fillStyle = "yellow" ; // Star color
43- ctx . fill ( ) ;
44- } ) ;
69+ // Remove old points after 2 seconds
70+ points = points . filter ( point => ( Date . now ( ) - point . timestamp ) < 2000 ) ;
71+
72+ window . requestAnimationFrame ( draw ) ;
73+ }
0 commit comments