Font Size Animation

FloatingSpace/FloatingLayer.js

@@ -434,7 +434,17 @@ function newFloatingLayer() {
                             }
                         }
 
+                        // The fontSize also have a target.
 
+                        if (Math.abs(floatingObject.currentImageSize - floatingObject.targetImageSize) >= 0.1) {
+
+                            if (floatingObject.currentFontSize < floatingObject.targetFontSize) {
+                                floatingObject.currentFontSize = floatingObject.currentFontSize + 0.1;
+                            } else {
+                                floatingObject.currentFontSize = floatingObject.currentFontSize - 0.1;
+                            }
+                        }
+                        
                         /* Collision Control */
 
                         for (let k = i + 1; k < visibleFloatingObjects.length; k++) {

FloatingSpace/FloatingObject.js

@@ -13,6 +13,7 @@ function newFloatingObject() {
         initializeMass: initializeMass,
         initializeRadius: initializeRadius,
         initializeImageSize: initializeImageSize,
+        initializeFontSize: initializeFontSize,
 
         imageId: undefined,
 
@@ -100,12 +101,15 @@ function newFloatingObject() {
 
         thisObject.targetRadius = thisObject.rawRadius * 2;
         thisObject.targetImageSize = thisObject.rawImageSize * 2;
+        thisObject.targetFontSize = thisObject.rawFontSize * 1.5;
+
     }
 
     function onMouseNotOver() {
 
         thisObject.targetRadius = thisObject.rawRadius * 1;
         thisObject.targetImageSize = thisObject.rawImageSize * 1;
+        thisObject.targetFontSize = thisObject.rawFontSize * 1;
     }
 
     function drawBackground() {
@@ -158,6 +162,19 @@ function newFloatingObject() {
 
     }
 
+    function initializeFontSize(suggestedValue) {
+
+        var size = suggestedValue;
+        if (size < 3) {
+            size = 3;
+        }
+
+        thisObject.rawFontSize = size;
+        thisObject.targetFontSize = size;
+        thisObject.currentFontSize = size / 3;
+
+    }
+
     function radomizeCurrentPosition(arroundPoint) {
 
         var position = {

FloatingSpace/ProfileBall.js

@@ -115,7 +115,7 @@ function newProfileBall() {
             browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle;
 
             let labelPoint;
-            let fontSize = 10;
+            let fontSize = pFloatingObject.currentFontSize;
 
             browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
 

FloatingSpace/ProfileBalls.js

@@ -56,6 +56,7 @@ function newProfileBalls() {
             floatingObject.initializeMass(100);
             floatingObject.initializeRadius(30);
             floatingObject.initializeImageSize(50);
+            floatingObject.initializeFontSize(10);
 
             floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)';
             floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)';