canvas-starfield - npm Package Compare versions

Comparing version 1.0.2 to 1.1.3

canvas-starfield.js

@@ -52,19 +52,34 @@ /*
   this.style = getComputedStyle(this.canvas)
-  
-  this.onResize()
 
-  this.stars = []
   this.vx = config.vx || 0.05
   this.vy = config.vy || 0.05
 
-  for (var i = 0, l = config.numStars || 500; i < l; i++) this.stars.push({
+  this.maxStars = config.numStars || 500
+  this.maxRadius = config.maxRadius
+
+  this.shootingStarInterval = config.shootingStarInterval || undefined
+  this.lastShootingStar = this.shootingStarInterval ? Date.now() : undefined
+  this.shootingStar = undefined;
+
+  this.onResize()
+
+  window.addEventListener('resize', this.onResize.bind(this))
+}
+
+Starfield.prototype.star = function() {
+  return {
     x: Math.round(Math.random() * this.canvas.width),
     y: Math.round(Math.random() * this.canvas.height),
-    r: 0.5 + (Math.random() * (config.maxRadius || 500)),
+    r: 0.5 + (Math.random() * (this.maxRadius || 500)),
     l: Math.random(),
     bl: 0.1 * (Math.random()*6 + 2),
     dl: Math.round(Math.random()) === 1? 0.01: -0.01
-  })
+  }
+}
 
-  // window.addEventListener('resize', this.onResize.bind(this))
+Starfield.prototype.loadStars = function() {
+  this.stars = []
+
+  for (var i = 0, l = this.numStars; i < l; i++)
+    this.stars.push(this.star())
 }
@@ -75,4 +90,16 @@
   this.canvas.height = Number(this.style.height.replace('px', '')) * window.devicePixelRatio
+
+  if (this.canvas.width / window.devicePixelRatio < 500) this.numStars = 100
+  else this.numStars = this.maxStars
+
+  this.loadStars();
 }
 
+Starfield.prototype.draw = function(star) {
+  this.ctx.beginPath()
+  this.ctx.fillStyle = 'rgba(255,255,255,' + star.l + ')' 
+  this.ctx.arc(star.x, star.y, star.r, 0, 2 * Math.PI, false)
+  this.ctx.fill()
+}
+
 Starfield.prototype.start = function() {
@@ -87,6 +114,4 @@ var tick = function() {
       var star = this.stars[i]
-      this.ctx.beginPath()
-      this.ctx.fillStyle = 'rgba(255,255,255,' + star.l + ')' 
-      this.ctx.arc(star.x, star.y, star.r, 0, 2 * Math.PI, false)
-      this.ctx.fill()
+
+      this.draw(star)
       
@@ -102,2 +127,25 @@ star.y += this.vy
 
+    if (this.shootingStar) {
+      var star = this.shootingStar;
+
+      this.draw(star)
+      
+      star.y += 15
+      star.x += 15
+      star.l += star.dl
+      star.r -= .1
+
+      if (star.r <= 0) this.shootingStar = undefined
+    } else if (this.shootingStarInterval) {
+      var i = this.shootingStarInterval * 1000
+      var t = Date.now()
+
+      if (t - this.lastShootingStar >= i) {
+        this.shootingStar = this.star()
+        this.lastShootingStar = Date.now()
+
+        this.shootingStar.r = 3
+      }
+    }
+
     this.frameId = window.requestAnimationFrame(tick)
@@ -104,0 +152,0 @@

package.json

 {
   "name": "canvas-starfield",
-  "version": "1.0.2",
+  "version": "1.1.3",
   "description": "A canvas rendered starfield that twinkles and moves.",
@@ -5,0 +5,0 @@ "main": "canvas-starfield.js",

README.md

@@ -21,3 +21,4 @@ # canvas-starfield
   dy: 0.025,                   // y speed of stars in px/frame, default 0.05
-  maxRadius: 2                 // maximum star radius in px
+  maxRadius: 2,                // maximum star radius in px
+  shootingStarInterval: 5     // time in seconds between shooting stars (omit field to disable shooting stars)
 })
@@ -24,0 +25,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6922

increased by20.61%

Lines of code

116

increased by41.46%

Number of lines in readme file

27

increased by3.85%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes