Tyding code and Profile Pictures Animated

Ball.js

@@ -8,6 +8,7 @@ function newBall() {
 
         initializeMass: initializeMass,
         initializeRadius: initializeRadius,
+        initializeImageSize: initializeImageSize,
 
         imageId: undefined,
 
@@ -70,6 +71,19 @@ function newBall() {
 
     }
 
+    function initializeImageSize(suggestedValue) {
+
+        var size = suggestedValue;
+        if (size < 2) {
+            size = 2;
+        }
+
+        thisObject.rawImageSize = size;
+        thisObject.targetImageSize = size;
+        thisObject.currentImageSize = size / 3;
+
+    }
+
     function radomizeCurrentPosition(arroundPoint) {
 
         var position = {
@@ -191,15 +205,13 @@ function newBall() {
 
         /* Image */
 
-        let imageSize = 50;
-
         if (thisObject.input.imageId !== undefined) {
 
             let image = document.getElementById(thisObject.input.imageId);
 
             if (image !== null) {
 
-                browserCanvasContext.drawImage(image, thisObject.currentPosition.x - imageSize / 2, thisObject.currentPosition.y - imageSize / 2, imageSize, imageSize);
+                browserCanvasContext.drawImage(image, thisObject.currentPosition.x - thisObject.currentImageSize / 2, thisObject.currentPosition.y - thisObject.currentImageSize / 2, thisObject.currentImageSize, thisObject.currentImageSize);
 
             }
         }
@@ -219,7 +231,7 @@ function newBall() {
 
             labelPoint = {
                 x: thisObject.currentPosition.x - label.length / 2 * fontSize * 0.60,
-                y: thisObject.currentPosition.y + imageSize / 2 + fontSize * 0.60 + 5
+                y: thisObject.currentPosition.y + thisObject.currentImageSize / 2 + fontSize * 0.60 + 5
             };
 
             browserCanvasContext.font = fontSize + 'px Courier New';

FloatingSpace.js

@@ -25,6 +25,62 @@ function newFloatingSpace() {
     
     }
 
+
+    function createNewBall(pInput, pContainer) {
+
+        /* This function is used to create new balls, representing labels of each point on the chart. */
+
+        var ball = newBall();
+
+        ball.input = pInput;
+
+        ball.container = pContainer;
+
+        ball.friction = .995;
+
+        ball.initializeMass(15);
+        ball.initializeRadius(30);
+        ball.initializeImageSize(50);
+
+        ball.fillStyle = 'rgba(255, 255, 255, 0.5)';
+        ball.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)';
+
+        createdBalls.push(ball);
+
+        ball.handle = Math.floor((Math.random() * 10000000) + 1);
+
+        return ball.handle;
+    }
+
+    function destroyBall(pBallHandle) {
+
+        for (let i = 0; i < createdBalls.length; i++) {
+
+            let ball = createdBalls[i];
+
+            if (ball.handle === pBallHandle) {
+                createdBalls.splice(i, 1);  // Delete item from array.
+                return;
+            }
+        }
+
+        for (let i = 0; i < thisObject.balls.length; i++) {
+
+            let ball = thisObject.balls[i];
+
+            if (ball.handle === pBallHandle) {
+                thisObject.balls.splice(i, 1);  // Delete item from array.
+                return;
+            }
+        }
+    }
+
+    /******************************************/
+    /*                                        */
+    /*        Physics Engine Follows          */
+    /*                                        */
+    /******************************************/
+
     function physicsLoop() {
 
         /* This function makes all the calculations to apply phisycs on all balls in this space. */
@@ -65,6 +121,14 @@ function newFloatingSpace() {
                 ball.currentRadius = ball.currentRadius - .5;
             }
 
+            // The imageSize also have a target.
+
+            if (ball.currentImageSize < ball.targetImageSize) {
+                ball.currentImageSize = ball.currentImageSize + 1;
+            } else {
+                ball.currentImageSize = ball.currentImageSize - 1;
+            }
+
             /* Collision Control */
 
             for (let k = i + 1; k < thisObject.balls.length; k++) {
@@ -117,60 +181,6 @@ function newFloatingSpace() {
         }
     }
 
-    function createNewBall(pInput, pContainer) {
-
-        /* This function is used to create new balls, representing labels of each point on the chart. */
-
-        var ball = newBall();
-
-        ball.input = pInput;
-
-        ball.container = pContainer;
-
-        ball.friction = .995;
-
-        ball.initializeMass(15);
-        ball.initializeRadius(30);
-
-        ball.fillStyle = 'rgba(255, 255, 255, 0.5)';
-        ball.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)';
-
-        createdBalls.push(ball);
-
-        ball.handle = Math.floor((Math.random() * 10000000) + 1);
-
-        return ball.handle;
-    }
-
-    function destroyBall(pBallHandle) {
-
-        for (let i = 0; i < createdBalls.length; i++) {
-
-            let ball = createdBalls[i];
-
-            if (ball.handle === pBallHandle) {
-                createdBalls.splice(i, 1);  // Delete item from array.
-                return;                 
-            }
-        }
-
-        for (let i = 0; i < thisObject.balls.length; i++) {
-
-            let ball = thisObject.balls[i];
-
-            if (ball.handle === pBallHandle) {
-                thisObject.balls.splice(i, 1);  // Delete item from array.
-                return;
-            }
-        }
-    }
-
-    /******************************************/
-    /*                                        */
-    /*        Physics Engine Follows          */
-    /*                                        */
-    /******************************************/
-
     function gravityForce(ball) {
 
         /* We simulate a kind of gravity towards the target point of each ball. This force will make the ball to keep pushing to reach that point. */