diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 6dd613405..47bbf2b76 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/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 */ diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 01ab74eb1..a22fde442 100644 --- a/FloatingSpace/FloatingObject.js +++ b/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() { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index cdc21f915..9a1076984 100644 --- a/FloatingSpace/ProfileBall.js +++ b/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) { diff --git a/Globals.js b/Globals.js index 43bc85746..f2e3e324a 100644 --- a/Globals.js +++ b/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; \ No newline at end of file +const CHART_SPACE_HEIGHT = browserCanvas.height * 100; + +function toRadians(angle) { + return angle * (Math.PI / 180); +} \ No newline at end of file diff --git a/Images/menu.icon.1.gif b/Images/menu.icon.1.gif new file mode 100644 index 000000000..3f840dee1 Binary files /dev/null and b/Images/menu.icon.1.gif differ diff --git a/Images/menu.icon.2.gif b/Images/menu.icon.2.gif new file mode 100644 index 000000000..85580ee33 Binary files /dev/null and b/Images/menu.icon.2.gif differ diff --git a/Images/menu.icon.3.gif b/Images/menu.icon.3.gif new file mode 100644 index 000000000..3e79c9081 Binary files /dev/null and b/Images/menu.icon.3.gif differ diff --git a/Images/menu.icon.4.gif b/Images/menu.icon.4.gif new file mode 100644 index 000000000..031f9b5c5 Binary files /dev/null and b/Images/menu.icon.4.gif differ