|
@@ -1,50 +1,50 @@
|
|
|
-export function bgStart(){
|
|
|
+export function bgStart () {
|
|
|
/**
|
|
|
* Generates random particles using canvas
|
|
|
- *
|
|
|
+ *
|
|
|
* @class Particles
|
|
|
* @constructor
|
|
|
*/
|
|
|
- function Particles(){
|
|
|
- //particle colors
|
|
|
+ function Particles () {
|
|
|
+ // particle colors
|
|
|
this.colors = [
|
|
|
'255, 255, 255',
|
|
|
'255, 99, 71',
|
|
|
'19, 19, 19'
|
|
|
]
|
|
|
- //adds gradient to particles on true
|
|
|
- this.blurry = true;
|
|
|
- //adds white border
|
|
|
- this.border = false;
|
|
|
- //particle radius min/max
|
|
|
- this.minRadius = 10;
|
|
|
- this.maxRadius = 35;
|
|
|
- //particle opacity min/max
|
|
|
- this.minOpacity = .005;
|
|
|
- this.maxOpacity = .5;
|
|
|
- //particle speed min/max
|
|
|
- this.minSpeed = .05;
|
|
|
- this.maxSpeed = .5;
|
|
|
- //frames per second
|
|
|
- this.fps = 60;
|
|
|
- //number of particles
|
|
|
- this.numParticles = 75;
|
|
|
- //required canvas variables
|
|
|
- this.canvas = document.getElementById('canvas');
|
|
|
- if(this.canvas){
|
|
|
- this.ctx = this.canvas.getContext('2d');
|
|
|
+ // adds gradient to particles on true
|
|
|
+ this.blurry = true
|
|
|
+ // adds white border
|
|
|
+ this.border = false
|
|
|
+ // particle radius min/max
|
|
|
+ this.minRadius = 10
|
|
|
+ this.maxRadius = 35
|
|
|
+ // particle opacity min/max
|
|
|
+ this.minOpacity = 0.005
|
|
|
+ this.maxOpacity = 0.5
|
|
|
+ // particle speed min/max
|
|
|
+ this.minSpeed = 0.05
|
|
|
+ this.maxSpeed = 0.5
|
|
|
+ // frames per second
|
|
|
+ this.fps = 60
|
|
|
+ // number of particles
|
|
|
+ this.numParticles = 75
|
|
|
+ // required canvas variables
|
|
|
+ this.canvas = document.getElementById('canvas')
|
|
|
+ if (this.canvas) {
|
|
|
+ this.ctx = this.canvas.getContext('2d')
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* Initializes everything
|
|
|
* @method init
|
|
|
*/
|
|
|
- Particles.prototype.init = function(){
|
|
|
- this.render();
|
|
|
- this.createCircle();
|
|
|
+ Particles.prototype.init = function () {
|
|
|
+ this.render()
|
|
|
+ this.createCircle()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* generates random number between min and max values
|
|
|
* @param {number} min value
|
|
@@ -52,145 +52,144 @@ export function bgStart(){
|
|
|
* @return {number} random number between min and max
|
|
|
* @method _rand
|
|
|
*/
|
|
|
- Particles.prototype._rand = function(min, max){
|
|
|
- return Math.random() * (max - min) + min;
|
|
|
+ Particles.prototype._rand = function (min, max) {
|
|
|
+ return Math.random() * (max - min) + min
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* Sets canvas size and updates values on resize
|
|
|
* @method render
|
|
|
*/
|
|
|
- Particles.prototype.render = function(){
|
|
|
- var self = this,
|
|
|
- wHeight = window.innerHeight,
|
|
|
- wWidth = window.innerWidth;
|
|
|
-
|
|
|
- self.canvas.width = wWidth;
|
|
|
- self.canvas.height = wHeight;
|
|
|
- window.addEventListener('onresize',self.render)
|
|
|
+ Particles.prototype.render = function () {
|
|
|
+ var self = this
|
|
|
+ var wHeight = window.innerHeight
|
|
|
+ var wWidth = window.innerWidth
|
|
|
+
|
|
|
+ self.canvas.width = wWidth
|
|
|
+ self.canvas.height = wHeight
|
|
|
+ window.addEventListener('onresize', self.render)
|
|
|
|
|
|
document.body.style.background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggXAAmiCIAEgQAAE4FBbECyZcAAAAASUVORK5CYII=) #222'
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* Randomly creates particle attributes
|
|
|
* @method createCircle
|
|
|
*/
|
|
|
- Particles.prototype.createCircle = function(){
|
|
|
- var particle = [];
|
|
|
-
|
|
|
+ Particles.prototype.createCircle = function () {
|
|
|
+ var particle = []
|
|
|
+
|
|
|
for (var i = 0; i < this.numParticles; i++) {
|
|
|
- var self = this,
|
|
|
- color = self.colors[~~(self._rand(0, self.colors.length))];
|
|
|
-
|
|
|
+ var self = this
|
|
|
+ var color = self.colors[~~(self._rand(0, self.colors.length))]
|
|
|
+
|
|
|
particle[i] = {
|
|
|
- radius : self._rand(self.minRadius, self.maxRadius),
|
|
|
- xPos : self._rand(0, canvas.width),
|
|
|
- yPos : self._rand(0, canvas.height),
|
|
|
- xVelocity : self._rand(self.minSpeed, self.maxSpeed),
|
|
|
- yVelocity : self._rand(self.minSpeed, self.maxSpeed),
|
|
|
- color : 'rgba(' + color + ',' + self._rand(self.minOpacity, self.maxOpacity) + ')'
|
|
|
+ radius: self._rand(self.minRadius, self.maxRadius),
|
|
|
+ xPos: self._rand(0, canvas.width),
|
|
|
+ yPos: self._rand(0, canvas.height),
|
|
|
+ xVelocity: self._rand(self.minSpeed, self.maxSpeed),
|
|
|
+ yVelocity: self._rand(self.minSpeed, self.maxSpeed),
|
|
|
+ color: 'rgba(' + color + ',' + self._rand(self.minOpacity, self.maxOpacity) + ')'
|
|
|
}
|
|
|
-
|
|
|
- //once values are determined, draw particle on canvas
|
|
|
- self.draw(particle, i);
|
|
|
+
|
|
|
+ // once values are determined, draw particle on canvas
|
|
|
+ self.draw(particle, i)
|
|
|
}
|
|
|
- //...and once drawn, animate the particle
|
|
|
- self.animate(particle);
|
|
|
+ // ...and once drawn, animate the particle
|
|
|
+ self.animate(particle)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* Draws particles on canvas
|
|
|
* @param {array} Particle array from createCircle method
|
|
|
* @param {number} i value from createCircle method
|
|
|
* @method draw
|
|
|
*/
|
|
|
- Particles.prototype.draw = function(particle, i){
|
|
|
- var self = this,
|
|
|
- ctx = self.ctx;
|
|
|
-
|
|
|
- if (self.blurry === true ) {
|
|
|
- //creates gradient if blurry === true
|
|
|
- var grd = ctx.createRadialGradient(particle[i].xPos, particle[i].yPos, particle[i].radius, particle[i].xPos, particle[i].yPos, particle[i].radius/1.25);
|
|
|
-
|
|
|
- grd.addColorStop(1.000, particle[i].color);
|
|
|
- grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)');
|
|
|
- ctx.fillStyle = grd;
|
|
|
+ Particles.prototype.draw = function (particle, i) {
|
|
|
+ var self = this
|
|
|
+ var ctx = self.ctx
|
|
|
+
|
|
|
+ if (self.blurry === true) {
|
|
|
+ // creates gradient if blurry === true
|
|
|
+ var grd = ctx.createRadialGradient(particle[i].xPos, particle[i].yPos, particle[i].radius, particle[i].xPos, particle[i].yPos, particle[i].radius / 1.25)
|
|
|
+
|
|
|
+ grd.addColorStop(1.000, particle[i].color)
|
|
|
+ grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)')
|
|
|
+ ctx.fillStyle = grd
|
|
|
} else {
|
|
|
- //otherwise sets to solid color w/ opacity value
|
|
|
- ctx.fillStyle = particle[i].color;
|
|
|
+ // otherwise sets to solid color w/ opacity value
|
|
|
+ ctx.fillStyle = particle[i].color
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (self.border === true) {
|
|
|
- ctx.strokeStyle = '#fff';
|
|
|
- ctx.stroke();
|
|
|
+ ctx.strokeStyle = '#fff'
|
|
|
+ ctx.stroke()
|
|
|
}
|
|
|
-
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(particle[i].xPos, particle[i].yPos, particle[i].radius, 0, 2 * Math.PI, false);
|
|
|
- ctx.fill();
|
|
|
+
|
|
|
+ ctx.beginPath()
|
|
|
+ ctx.arc(particle[i].xPos, particle[i].yPos, particle[i].radius, 0, 2 * Math.PI, false)
|
|
|
+ ctx.fill()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
- * Animates particles
|
|
|
+ * Animates particles
|
|
|
* @param {array} particle value from createCircle & draw methods
|
|
|
* @method animate
|
|
|
*/
|
|
|
- Particles.prototype.animate = function(particle){
|
|
|
- var self = this,
|
|
|
- ctx = self.ctx;
|
|
|
-
|
|
|
- setInterval(function(){
|
|
|
- //clears canvas
|
|
|
- self.clearCanvas();
|
|
|
- //then redraws particles in new positions based on velocity
|
|
|
+ Particles.prototype.animate = function (particle) {
|
|
|
+ var self = this
|
|
|
+ var ctx = self.ctx
|
|
|
+
|
|
|
+ setInterval(function () {
|
|
|
+ // clears canvas
|
|
|
+ self.clearCanvas()
|
|
|
+ // then redraws particles in new positions based on velocity
|
|
|
for (var i = 0; i < self.numParticles; i++) {
|
|
|
- particle[i].xPos += particle[i].xVelocity;
|
|
|
- particle[i].yPos -= particle[i].yVelocity;
|
|
|
-
|
|
|
- //if particle goes off screen call reset method to place it offscreen to the left/bottom
|
|
|
+ particle[i].xPos += particle[i].xVelocity
|
|
|
+ particle[i].yPos -= particle[i].yVelocity
|
|
|
+
|
|
|
+ // if particle goes off screen call reset method to place it offscreen to the left/bottom
|
|
|
if (particle[i].xPos > self.canvas.width + particle[i].radius || particle[i].yPos > self.canvas.height + particle[i].radius) {
|
|
|
- self.resetParticle(particle, i);
|
|
|
+ self.resetParticle(particle, i)
|
|
|
} else {
|
|
|
- self.draw(particle, i);
|
|
|
+ self.draw(particle, i)
|
|
|
}
|
|
|
- }
|
|
|
- }, 1000/self.fps);
|
|
|
+ }
|
|
|
+ }, 1000 / self.fps)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* Resets position of particle when it goes off screen
|
|
|
* @param {array} particle value from createCircle & draw methods
|
|
|
* @param {number} i value from createCircle method
|
|
|
* @method resetParticle
|
|
|
*/
|
|
|
- Particles.prototype.resetParticle = function(particle, i){
|
|
|
- var self = this;
|
|
|
-
|
|
|
- var random = self._rand(0, 1);
|
|
|
-
|
|
|
- if (random > .5) {
|
|
|
+ Particles.prototype.resetParticle = function (particle, i) {
|
|
|
+ var self = this
|
|
|
+
|
|
|
+ var random = self._rand(0, 1)
|
|
|
+
|
|
|
+ if (random > 0.5) {
|
|
|
// 50% chance particle comes from left side of window...
|
|
|
- particle[i].xPos = -particle[i].radius;
|
|
|
- particle[i].yPos = self._rand(0, self.canvas.height);
|
|
|
+ particle[i].xPos = -particle[i].radius
|
|
|
+ particle[i].yPos = self._rand(0, self.canvas.height)
|
|
|
} else {
|
|
|
- //... or bottom of window
|
|
|
- particle[i].xPos = self._rand(0, self.canvas.width);
|
|
|
- particle[i].yPos = self.canvas.height + particle[i].radius;
|
|
|
+ // ... or bottom of window
|
|
|
+ particle[i].xPos = self._rand(0, self.canvas.width)
|
|
|
+ particle[i].yPos = self.canvas.height + particle[i].radius
|
|
|
}
|
|
|
- //redraw particle with new values
|
|
|
- self.draw(particle, i);
|
|
|
+ // redraw particle with new values
|
|
|
+ self.draw(particle, i)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* Clears canvas between animation frames
|
|
|
* @method clearCanvas
|
|
|
*/
|
|
|
- Particles.prototype.clearCanvas = function(){
|
|
|
- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
+ Particles.prototype.clearCanvas = function () {
|
|
|
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
// go go go!
|
|
|
- var particle = new Particles().init();
|
|
|
-}
|
|
|
+ var particle = new Particles().init()
|
|
|
+}
|