From ea6bce95c9447b4e05b63b531bc7a38b41c36dbf Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 22 Apr 2018 17:12:39 +0200
Subject: [PATCH] Tyding code and Profile Pictures Animated

---
 .vs/AAWeb/v15/.suo | Bin 44032 -> 44032 bytes
 Ball.js            |  20 ++++++--
 FloatingSpace.js   | 118 ++++++++++++++++++++++++---------------------
 3 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo
index 597b799d2e0ad1e0caababd1606b62a0e4003715..322b80e41e4923e82b7985309fccb3da9cb28a32 100644
GIT binary patch
delta 437
zcmZp;!PIbrX+sVZ>wzWr-g#{<Wctm_s&I0rulMFcHg-Nn#m$u>|BV@yHdlJIt8y#y
zFfa%+Ffgz&^iDP`PoA7#ragI4UczMiZh^^m4H`hU|K^5#2d2ph-GY<zTlE(eu}n71
z_n#b)CpCFp3+H707LCob%1js;LD~%$Rj_a?k!a#%$5y?`6UtdYR&P#gTg-^Z{K*qr
z)HdsP++sx26vrx-0`vp~eAwRrWH<t`3&KwsJ#$5`Lgc~ZOCaeBQZm_~e8S}2D-LW<
z?3>THnX_v*qgXmz9hy=4izcy6URWp(4h*Q1S=pTub8;phT%pOLmsPAaxu8dLa&W)1
j=w7%X3=ANP?;%+hw`mq5)8v9i$H~zv6*ec$na2+RPd}0g

delta 366
zcmZp;!PIbrX+sVZtHXU;KF`gCOuv~~8J@B81DR~>e2iL~D@FbrgD8)7RW2<a1_ogU
z1_m~U$%gs<lMfUMPCngbF?nWQ!sN78i^-g2ZkrqO9hfF>?2?)++oHCph=tqH&Ct-r
z+{Mz;v3Bx>?*7fQ%1ju6nvE7!u#jrpqy{~Zb(>=wW-;P4cd|pP+Gg37Ta0kkZE>uE
zT|h^}z(OEHVe^@814cn#m>9!@{i#5<@?^f5pC<qBP1>B*H;r*}RIAKp;jR^oVi?+i
pYF&CK8<wjrn#4BQFfU_re9v60roGxUi;-!v(8|osS#zfG0|0lFbbbH;

diff --git a/Ball.js b/Ball.js
index 47bd95cbe..cd2002192 100644
--- a/Ball.js
+++ b/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';
diff --git a/FloatingSpace.js b/FloatingSpace.js
index b7f0042e9..c5fa8b9e1 100644
--- a/FloatingSpace.js
+++ b/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. */