Prep for changing velocities

static/js/background_anim.js

@@ -2,7 +2,8 @@
 const FPS = 60;
 
 const DOTS_NUM_VALUES = [100, 75];
-const VELOCITY_MAX_VALUES = [25, 15];
+const INITIAL_VELOCITY_MAX_VALUES = [25, 15];
+const VELOCITY_MAX_VALUES = [40, 30];
 const RADIUS_MIN_VALUES = [2, 0.5];
 const RADIUS_MAX_VALUES = [6, 2];
 const LINE_DISTANCE_MAX_VALUES = [120, 55];
@@ -18,7 +19,8 @@ const LINE_COLOUR = "#777";
 // Sort-of constants (change with window size)
 let DOTS_NUM = 100;
 
-let VELOCITY_MAX = 25;
+let INITIAL_VELOCITY_MAX = 25;
+let VELOCITY_MAX = 40;
 let RADIUS_MIN = 1;
 let RADIUS_MAX = 4;
 
@@ -33,7 +35,9 @@ class Dot {
         this._y = y;
         this._radius = radius;
         this._vx = vx;
+        this._initial_vx = vx;
         this._vy = vy;
+        this._initial_vy = vy;
     }
 
     get x() {
@@ -60,12 +64,18 @@ class Dot {
     set vx(value) {
         this._vx = value;
     }
+    get initial_vx() {
+        return this._initial_vx
+    }
     get vy() {
         return this._vy;
     }
     set vy(value) {
         this._vy = value;
     }
+    get initial_vy() {
+        return this._initial_vy;
+    }
 }
 
 const randInt = (min, max) => {
@@ -100,6 +110,7 @@ const setDisplayParameters = () => {
 
     // Set properties
     DOTS_NUM = DOTS_NUM_VALUES[index];
+    INITIAL_VELOCITY_MAX = INITIAL_VELOCITY_MAX_VALUES[index];
     VELOCITY_MAX = VELOCITY_MAX_VALUES[index];
     RADIUS_MIN = RADIUS_MIN_VALUES[index];
     RADIUS_MAX = RADIUS_MAX_VALUES[index];
@@ -119,8 +130,8 @@ for (let i = 0; i < DOTS_NUM; i++) {
         Math.random() * canvas.width, // position x
         Math.random() * canvas.height, // position y
         randInt(RADIUS_MIN, RADIUS_MAX), // radius
-        randInt(-VELOCITY_MAX, VELOCITY_MAX), // velocity x
-        randInt(-VELOCITY_MAX, VELOCITY_MAX) // velocity y
+        randInt(-INITIAL_VELOCITY_MAX, INITIAL_VELOCITY_MAX), // velocity x
+        randInt(-INITIAL_VELOCITY_MAX, INITIAL_VELOCITY_MAX) // velocity y
     ));
 }
 
@@ -196,6 +207,18 @@ const physics = () => {
         dot.x += dot.vx / FPS;
         dot.y += dot.vy / FPS;
 
+        // Clamp velocities to maximum
+        dot.vx = clamp(dot.vx, -VELOCITY_MAX, VELOCITY_MAX);
+        dot.vy = clamp(dot.vy, -VELOCITY_MAX, VELOCITY_MAX);
+
+        // Stop velocity from going below initial velocity
+        if(dot.vx < dot.initial_vx) {
+            dot.vx = dot.initial_vx;
+        }
+        if(dot.vy < dot.initial_vy) {
+            dot.vy = dot.initial_vy;
+        }
+
         // Invert velocities if off-screen and not already inverted
         if ((dot.x < 0 && dot.vx < 0) || (dot.x > canvas.width && dot.vx > 0)) {
             dot.vx = -dot.vx;