js refactor

Author: jbratcher

readme.md

@@ -1,10 +1,8 @@
-# canvas-particles
+# Canvas Particles
 
-##### v1.0.8
-
-A Canvas Particle Library written in vanilla JS.
+A Canvas Particle Library written in vanilla JS for use with the canvas HTML5 elemnt.
 
-Particle animations on HTML5 Canvas
+##### v1.0.8
 
 ## How to Use canvas-particles
 
@@ -18,7 +16,7 @@ Copy just the JS file for the animation you want and place it in your project di
 Add a link to the js file from your html file.
 Add a canvas element to your html file where you would like the animation to display.
 
-The CSS file remove padding and margin from the body and a background radial gradient which is optional but gives a nice aesthetic
+The CSS file removes padding and margin from the body and a background radial gradient which is optional but is included for demo purposes.
 
 ## Current Animations
 
@@ -29,15 +27,16 @@ The CSS file remove padding and margin from the body and a background radial gra
 * <strong>Gravity</strong>: Multicolored balls fall down with simulated gravity and friction
 * <strong>Wobble Down</strong>: White balls fall down as they wobble on the x-axis
 * <strong>Wobble Up</strong>: White balls float up as they wobble on the x-axis
-* <strong>Weather</strong>: White balls fly to the right simulating snow weather. 
+* <strong>Weather Left</strong>: White balls fly to the left simulating snow weather.
+* <strong>Weather Right</strong>: White balls fly to the right simulating snow weather.
 
 ## Change Log
 
 #### v1.0.8
 
 * Change Weather to Weather Right
 * Added Weather Left
-* Added Gravity effedct to Weather animations
+* Added Gravity effect to Weather animations
 
 #### v1.0.7
 

src/js/balls.js

@@ -22,7 +22,7 @@ var colors = [
     "#172A40",
     "#FFF7DC",
     "#D9383A"
-    ]
+];
 
 // Mouse coordiantes
 
@@ -63,6 +63,7 @@ function Circle(x,y,dx,dy,rad,color) {
     this.color = color;
 
     // Draw circle function
+    
     this.draw = function() {
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.rad, 0, Math.PI *2, false);
@@ -73,79 +74,97 @@ function Circle(x,y,dx,dy,rad,color) {
     };
 
     // Update circle position for animation
+    
     this.update = function() {
 
         // Left/Right Collision Detection for window
+        
         if (this.x + this.rad > window.innerWidth || 
             this.x - this.rad < 0) {
             this.dx = -this.dx;
         } 
 
         // Top/Bottom Collision Detection for window
+        
         if (this.y + this.rad > window.innerHeight || 
             this.y - this.rad < 0) {
             this.dy = -this.dy;
         }
 
         // Increment position (x,y)
+        
         this.x += this.dx;
         this.y += this.dy;
 
         // Interactivity (mouse and circles)
+        
         // Mouse detection for circle
+        
         if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
             // Limit circle grow size
             if (this.rad < maxRad) {
                 this.rad += 1;   
             }
-        // Limit circle shrink size    
+            
+        // Limit circle shrink size
+        
         } else if (this.rad > minRad) {
             this.rad -= 1;
         } else if (this.rad < this.minRad) {
             this.rad += 1;
         }
 
         // Draw Circle
+        
         this.draw();
 
     };
 }
 
 // Create circles array
+
 var circles = [];
 
 function init() {
 
     // Reset circles array
+    
     circles = [];
 
     // Randomize circle value (position, velocity, fill and stroke color, and opacity)
-    for (var i = 0; i < 800; i++) {
+    
+    for(var i = 0; i < 800; i++) {
         var rad = (Math.floor(Math.random() * 4)) + 1;
         var x = Math.random() * (window.innerWidth - rad * 2) + rad;
         var y = Math.random() * (window.innerHeight -rad * 2) + rad;
         var dx = (Math.random() - 0.5) * 3;
         var dy = (Math.random() - 0.5) * 3;
         var color = colors[Math.floor(Math.random() * colors.length)];
         circles.push(new Circle(x,y,dx,dy,rad,color));
-        
-        console.log(circles);
     }
 }
 
 //  Animation function
+
 function animation() {
+    
     //Start loop
+    
     requestAnimationFrame(animation);
+    
     // Clear window after drawing circle
+    
     ctx.clearRect(0,0,window.innerWidth, window.innerHeight);
+    
     // Draw the circles
-    for (var i = 0; i < circles.length; i++) {
+    
+    for(var i = 0; i < circles.length; i++) {
         circles[i].update();
     }
 
 }
 
 // Run 
+
 animation();
 init();

src/js/falldown.js

@@ -52,6 +52,7 @@ function Circle(x,y,dx,dy,rad,color) {
     this.color = color;
 
     // Draw circle function
+    
     this.draw = function() {
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.rad, 0, Math.PI *2, false);
@@ -60,6 +61,7 @@ function Circle(x,y,dx,dy,rad,color) {
     };
 
     // Update circle position for animation
+    
     this.update = function() {
 
         // Move circle to top once it reaches bottom
@@ -69,64 +71,82 @@ function Circle(x,y,dx,dy,rad,color) {
         }
 
         // Increment position (x,y)
+        
         this.x += this.dx;
         this.y += this.dy;
 
         // Interactivity (mouse and circles)
+        
         // Mouse detection for circle
+        
         if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
+           
             // Limit circle grow size
+            
             if (this.rad < maxRad) {
                 this.rad += 1;   
             }
+            
         // Limit circle shrink size    
+        
         } else if (this.rad > minRad) {
             this.rad -= 1;
         } else if (this.rad < this.minRad) {
             this.rad += 1;
         }
 
         // Draw Circle
+        
         this.draw();
 
     };
 }
 
 // Create circles array
+
 var circles = [];
 
 function init() {
 
     // Reset circles array
+    
     circles = [];
 
     // Randomize circle value (position, velocity, fill and stroke color, and opacity)
-    for (var i = 0; i < 100; i++) {
+    
+    for(var i = 0; i < 100; i++) {
         var rad = (Math.floor(Math.random() * 4)) + 1;
         var x = Math.random() * (window.innerWidth - rad * 2) + rad;
         var y = Math.random() * (window.innerHeight - rad *2) + rad;
         var dx = 0;
         var dy = Math.abs((Math.random() - 0.5)) * 2;
         var color = "white";
         circles.push(new Circle(x,y,dx,dy,rad,color));
-        
-        console.log(circles);
     }
+    
 }
 
 //  Animation function
+
 function animation() {
+    
     //Start loop
+    
     requestAnimationFrame(animation);
+    
     // Clear window after drawing circle
+    
     ctx.clearRect(0,0,window.innerWidth, window.innerHeight);
+    
     // Draw the circles
-    for (var i = 0; i < circles.length; i++) {
+    
+    for(var i = 0; i < circles.length; i++) {
         circles[i].update();
     }
 
 }
 
-// Run 
+// Run
+
 animation();
 init();

src/js/wobbleup.js

@@ -53,17 +53,17 @@ function Circle(x,y,dx,dy,rad,color, boundaryRight, boundaryLeft) {
     this.dx = dx;
     this.dy = dy;
     this.rad = rad;
+    this.color = color;
     this.boundaryRight = boundaryRight;
     this.boundaryLeft = boundaryLeft;
     var minRad = rad;
     var maxRad = (rad * 2);
-    this.color = color;
 
     // Draw circle function
 
     this.draw = function() {
         ctx.beginPath();
-        ctx.arc(this.x, this.y, this.rad, 0, Math.PI *2, false);
+        ctx.arc(this.x, this.y, this.rad, 0, Math.PI *2);
         ctx.fillStyle = this.color;
         ctx.fill();
     };
@@ -94,6 +94,7 @@ function Circle(x,y,dx,dy,rad,color, boundaryRight, boundaryLeft) {
         if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
 
             // Limit circle grow size
+            
             if (this.rad < maxRad) {
                 this.rad += 1;   
             }
@@ -139,7 +140,6 @@ function init() {
         circles.push(new Circle(x,y,dx,dy,rad,color,boundaryRight,boundaryLeft));
     }
 
-
 }
 
 //  Animation function
@@ -156,7 +156,7 @@ function animation() {
 
     // Draw the circles
 
-    for (var i = 0; i < circles.length; i++) {
+    for(var i = 0; i < circles.length; i++) {
         circles[i].update();
     }