Graphics overhaul as well as many other things

animations/victory.js

@@ -10,13 +10,10 @@ overlay2Canvas.height = H;
 
 //Random Circles creator
 function create() {
-
     //Place the circles at the center
-
     this.x = W/2;
     this.y = H/2;
 
-
     //Random radius between 2 and 6
     this.radius = 2 + Math.random()*3;
 
@@ -30,26 +27,27 @@ function create() {
     this.b = Math.round(Math.random())*255;
 }
 
-for (var i = 0; i < 500; i++) {
-    circles.push(new create());
+function initBalls() {
+    for (let i = 0; i < 500; i++) {
+        circles.push(new create());
+    }
 }
 
 function drawVictory() {
-
     //Fill overlay2Canvas with black color
-    overlay2Ctx.globalCompositeOperation = "source-over";
-    overlay2Ctx.fillStyle = "rgba(0,0,0,0.15)";
-    overlay2Ctx.fillRect(0, 0, W, H);
+    overlayCtx.globalCompositeOperation = "source-over";
+    overlayCtx.fillStyle = "rgba(0,0,0,0.15)";
+    overlayCtx.fillRect(0, 0, W, H);
 
     //Fill the overlay2Canvas with circles
-    for(var j = 0; j < circles.length; j++){
-        var c = circles[j];
+    for(let j = 0; j < circles.length; j++){
+        const c = circles[j];
 
         //Create the circles
-        overlay2Ctx.beginPath();
-        overlay2Ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
-        overlay2Ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
-        overlay2Ctx.fill();
+        overlayCtx.beginPath();
+        overlayCtx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
+        overlayCtx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
+        overlayCtx.fill();
 
         c.x += c.vx;
         c.y += c.vy;