canvas-starfield
Advanced tools
Comparing version 1.0.2 to 1.1.3
@@ -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 @@ |
{ | ||
"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", |
@@ -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 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
6922
116
27
1