Profile Ball Menu Ready, not clickable yet.

FloatingSpace/FloatingLayer.js

@@ -339,7 +339,7 @@ function newFloatingLayer() {
                     if (INTENSIVE_LOG === true) { logger.write("[INFO] physicsLoop -> applyPhysics -> Entering function."); }
 
                     for (let i = 0; i < visibleFloatingObjects.length; i++) {
-
+                        
                         let floatingObject = visibleFloatingObjects[i];
 
                         if (INTENSIVE_LOG === true) { logger.write("[INFO] physicsLoop -> Change position based on speed."); }
@@ -436,7 +436,7 @@ function newFloatingLayer() {
 
                         // The fontSize also have a target.
 
-                        if (Math.abs(floatingObject.currentImageSize - floatingObject.targetImageSize) >= 0.2) {
+                        if (Math.abs(floatingObject.currentFontSize - floatingObject.targetFontSize) >= 0.2) {
 
                             if (floatingObject.currentFontSize < floatingObject.targetFontSize) {
                                 floatingObject.currentFontSize = floatingObject.currentFontSize + 0.2;
@@ -444,6 +444,10 @@ function newFloatingLayer() {
                                 floatingObject.currentFontSize = floatingObject.currentFontSize - 0.2;
                             }
                         }
+
+                        // We let the Floating Object animate the physics loops by itself.
+
+                        floatingObject.physicsLoop();
                         
                         /* Collision Control */
 

FloatingSpace/FloatingObject.js

@@ -3,6 +3,7 @@ function newFloatingObject() {
 
     var thisObject = {
 
+        physicsLoop: physicsLoop, 
         eventHandler: undefined,
 
         payload: undefined,                     // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here.
@@ -97,12 +98,19 @@ function newFloatingObject() {
         callBackFunction();
     }
 
+    function physicsLoop() {
+
+        underlayingObject.physicsLoop();
+
+    }
+
     function onMouseOver() {
 
         thisObject.targetRadius = thisObject.rawRadius * 1.5;
         thisObject.targetImageSize = thisObject.rawImageSize * 1.5;
         thisObject.targetFontSize = thisObject.rawFontSize * 1.5;
 
+        underlayingObject.onMouseOver();
     }
 
     function onMouseNotOver() {
@@ -110,6 +118,8 @@ function newFloatingObject() {
         thisObject.targetRadius = thisObject.rawRadius * 1;
         thisObject.targetImageSize = thisObject.rawImageSize * 1;
         thisObject.targetFontSize = thisObject.rawFontSize * 1;
+
+        underlayingObject.onMouseNotOver();
     }
 
     function drawBackground() {

FloatingSpace/ProfileBall.js

@@ -1,22 +1,115 @@
 
 function newProfileBall() {
 
-    var thisObject = {
+    let thisObject = {
 
+        physicsLoop: physicsLoop,
+        onMouseOver: onMouseOver, 
+        onMouseNotOver: onMouseNotOver,
         drawBackground: drawBackground,
         drawForeground: drawForeground,
         initialize: initialize
 
     };
 
+    let ballStringMenu = [
+        {
+            visible: false,
+            imagePath: "Images/menu.icon.1.gif",
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 60
+        },
+        {
+            visible: false,
+            imagePath: "Images/menu.icon.2.gif",
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 20 * 1
+        },
+        {
+            visible: false,
+            imagePath: "Images/menu.icon.3.gif",
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -20
+        },
+        {
+            visible: false,
+            imagePath: "Images/menu.icon.4.gif",
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -60
+        }
+    ];
+
     return thisObject;
 
     function initialize(callBackFunction) {
 
+        for (let i = 0; i < ballStringMenu.length; i++) {
+
+            let menuItem = ballStringMenu[i];
+
+            menuItem.icon = new Image();
+
+            menuItem.icon.onload = onImageLoad;
+
+            function onImageLoad() {
+                menuItem.canDrawIcon = true;
+            }
+
+            menuItem.icon.src = menuItem.imagePath;
+
+        }
+
         callBackFunction();
 
     }
 
+    function physicsLoop() {
+
+        // The menuItems also have a target.
+
+        for (let i = 0; i < ballStringMenu.length; i++) {
+
+            let menuItem = ballStringMenu[i];
+
+            if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) {
+
+                if (menuItem.currentRadius < menuItem.targetRadius) {
+                    menuItem.currentRadius = menuItem.currentRadius + 0.5;
+                } else {
+                    menuItem.currentRadius = menuItem.currentRadius - 0.5;
+                }
+            }
+        }
+    }
+
+    function onMouseOver() {
+
+        for (let i = 0; i < ballStringMenu.length; i++) {
+
+            let menuItem = ballStringMenu[i];
+
+            menuItem.targetRadius = menuItem.rawRadius * 1.5;
+        }
+    } 
+
+    function onMouseNotOver() {
+
+        for (let i = 0; i < ballStringMenu.length; i++) {
+
+            let menuItem = ballStringMenu[i];
+
+            menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5;
+        }
+    }
+
     function drawBackground(pFloatingObject) {
 
         let point = {
@@ -108,6 +201,24 @@ function newProfileBall() {
             }
         }
 
+
+        /* StringBall Menu */
+
+        for (let i = 0; i < ballStringMenu.length; i++) {
+
+            let menuItem = ballStringMenu[i];
+
+            if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {               
+
+                let position = {
+                    x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)) - menuItem.currentRadius,
+                    y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - menuItem.currentRadius
+                };
+
+                browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2);
+            }
+        }
+
         /* Label Text */
 
         if (pFloatingObject.currentRadius > 6) {

Globals.js

@@ -164,4 +164,8 @@ We define here the size of the chartSpace. It has to bee enough big in order to
 */
 
 const CHART_SPACE_WIDTH = browserCanvas.width * 1000;
-const CHART_SPACE_HEIGHT = browserCanvas.height * 100;
+const CHART_SPACE_HEIGHT = browserCanvas.height * 100;
+
+function toRadians(angle) {
+    return angle * (Math.PI / 180);
+}