Current Position from the Frame

Canvas.js

@@ -687,8 +687,8 @@ function newCanvas () {
         if (floatingObjectDragStarted) {
           let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged)
 
-          floatingObject.currentPosition.x = dragVector.upX
-          floatingObject.currentPosition.y = dragVector.upY
+          floatingObject.container.frame.position.x = dragVector.upX
+          floatingObject.container.frame.position.y = dragVector.upY
         }
 
         if (containerDragStarted || viewPortBeingDragged) {

FloatingSpace/FloatingLayer.js

@@ -341,8 +341,8 @@ function newFloatingLayer () {
 
             if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Change position based on speed.') }
 
-            floatingObject.currentPosition.x = floatingObject.currentPosition.x + floatingObject.currentSpeed.x
-            floatingObject.currentPosition.y = floatingObject.currentPosition.y + floatingObject.currentSpeed.y
+            floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x
+            floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y
 
             if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Apply some friction to desaccelerate.') }
 
@@ -379,13 +379,13 @@ function newFloatingLayer () {
               }
             }
 
-            if (floatingObject.currentPosition.x < payload.position.x) {
+            if (floatingObject.container.frame.position.x < payload.position.x) {
               floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + 0.005
             } else {
               floatingObject.currentSpeed.x = floatingObject.currentSpeed.x - 0.005
             }
 
-            if (floatingObject.currentPosition.y < payload.position.y) {
+            if (floatingObject.container.frame.position.y < payload.position.y) {
               floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + 0.005
             } else {
               floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005
@@ -676,7 +676,7 @@ function newFloatingLayer () {
       const coulomb = 0.00001
       const minForce = 0.01
 
-      var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.currentPosition.x, 2) + Math.pow(payload.position.y - floatingObject.currentPosition.y, 2))  // ... we calculate the distance ...
+      var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject.container.frame.position.y, 2))  // ... we calculate the distance ...
 
       var force = coulomb * d * d / floatingObject.currentMass  // In this case the mass of the floatingObject affects the gravity force that it receives, that gives priority to target position to bigger floatingObjects.
 
@@ -685,8 +685,8 @@ function newFloatingLayer () {
       }
 
       var pos1 = {
-        x: floatingObject.currentPosition.x,
-        y: floatingObject.currentPosition.y
+        x: floatingObject.container.frame.position.x,
+        y: floatingObject.container.frame.position.y
       }
 
       var pos2 = {
@@ -736,7 +736,7 @@ function newFloatingLayer () {
 
           var floatingObject2 = visibleFloatingObjects[i]   // So, for each floatingObject...
 
-          var d = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2))  // ... we calculate the distance ...
+          var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2))  // ... we calculate the distance ...
 
           var force = coulomb * floatingObject2.currentMass / (d * d)  // ... and with it the repulsion force.
 
@@ -747,13 +747,13 @@ function newFloatingLayer () {
           }
 
           var pos1 = {
-            x: floatingObject1.currentPosition.x,
-            y: floatingObject1.currentPosition.y
+            x: floatingObject1.container.frame.position.x,
+            y: floatingObject1.container.frame.position.y
           }
 
           var pos2 = {
-            x: floatingObject2.currentPosition.x,
-            y: floatingObject2.currentPosition.y
+            x: floatingObject2.container.frame.position.x,
+            y: floatingObject2.container.frame.position.y
           }
 
           var posDiff = {             // Next we need the vector resulting from the 2 positions.
@@ -820,7 +820,7 @@ function newFloatingLayer () {
           }
         }
 
-        var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.currentPosition.x, 2) + Math.pow(payload.position.y - floatingObject1.currentPosition.y, 2))  // ... we calculate the distance ...
+        var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject1.container.frame.position.y, 2))  // ... we calculate the distance ...
 
         var force = coulomb * floatingObject2.currentMass / (d * d)  // ... and with it the repulsion force.
 
@@ -831,8 +831,8 @@ function newFloatingLayer () {
         }
 
         var pos1 = {
-          x: floatingObject1.currentPosition.x,
-          y: floatingObject1.currentPosition.y
+          x: floatingObject1.container.frame.position.x,
+          y: floatingObject1.container.frame.position.y
         }
 
         var pos2 = {
@@ -894,7 +894,7 @@ function newFloatingLayer () {
       var r1 = floatingObject1.currentRadius
       var r2 = floatingObject2.currentRadius
 
-      var distance = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2))
+      var distance = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2))
 
       if (distance > (r1 + r2)) {
                 // No solutions, the circles are too far apart.
@@ -917,7 +917,7 @@ function newFloatingLayer () {
 
       for (var i = 0; i < visibleFloatingObjects.length; i++) {
         var floatingObject = visibleFloatingObjects[i]
-        var distance = Math.sqrt(Math.pow(floatingObject.currentPosition.x - x, 2) + Math.pow(floatingObject.currentPosition.y - y, 2))
+        var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2))
 
         if (distance < floatingObject.currentRadius) {
           return i
@@ -936,7 +936,7 @@ function newFloatingLayer () {
             /* This function detects weather the point x,y is inside one particular floatingObjects. */
 
       var floatingObject = visibleFloatingObjects[floatingObjectIndex]
-      var distance = Math.sqrt(Math.pow(floatingObject.currentPosition.x - x, 2) + Math.pow(floatingObject.currentPosition.y - y, 2))
+      var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2))
 
       if (distance < floatingObject.currentRadius) {
         return true
@@ -964,7 +964,7 @@ function newFloatingLayer () {
 
             /* This function changes speed and position of floatingObjects that are in collision */
 
-      var collisionision_angle = Math.atan2((floatingObject2.currentPosition.y - floatingObject1.currentPosition.y), (floatingObject2.currentPosition.x - floatingObject1.currentPosition.x))
+      var collisionision_angle = Math.atan2((floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y), (floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x))
 
       var speed1 = Math.sqrt(floatingObject1.currentSpeed.x * floatingObject1.currentSpeed.x + floatingObject1.currentSpeed.y * floatingObject1.currentSpeed.y)  // Magnitude of Speed Vector for floatingObject 1
       var speed2 = Math.sqrt(floatingObject2.currentSpeed.x * floatingObject2.currentSpeed.x + floatingObject2.currentSpeed.y * floatingObject2.currentSpeed.y)  // Magnitude of Speed Vector for floatingObject 2
@@ -992,13 +992,13 @@ function newFloatingLayer () {
       floatingObject2.currentSpeed.y = sinAngle * final_xspeed_2 + cosAngle * final_yspeed_2
 
       var pos1 = {
-        x: floatingObject1.currentPosition.x,
-        y: floatingObject1.currentPosition.y
+        x: floatingObject1.container.frame.position.x,
+        y: floatingObject1.container.frame.position.y
       }
 
       var pos2 = {
-        x: floatingObject2.currentPosition.x,
-        y: floatingObject2.currentPosition.y
+        x: floatingObject2.container.frame.position.x,
+        y: floatingObject2.container.frame.position.y
       }
 
             // get the mtd
@@ -1007,7 +1007,7 @@ function newFloatingLayer () {
         y: pos1.y - pos2.y
       }
 
-      var d = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2))
+      var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2))
 
             // minimum translation distance to push floatingObjects apart after intersecting
       var scalar = (((floatingObject1.currentRadius + floatingObject2.currentRadius) - d) / d)
@@ -1029,8 +1029,8 @@ function newFloatingLayer () {
       pos2.x = pos2.x - minTD.x * (im2 / (im1 + im2))
       pos2.y = pos2.y - minTD.y * (im2 / (im1 + im2))
 
-      floatingObject1.currentPosition = pos1
-      floatingObject2.currentPosition = pos2
+      floatingObject1.container.frame.position = pos1
+      floatingObject2.container.frame.position = pos2
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err.message = ' + err.message) }
     }

FloatingSpace/FloatingObject.js

@@ -26,7 +26,6 @@ function newFloatingObject () {
 
     imageId: undefined,
 
-    currentPosition: 0,                     // Current x,y position of the floating object at the floating object's layer, where there is no displacement or zoom. This position is always changing towards the target position.
     currentSpeed: 0,                        // This is the current speed of the floating object.
     currentRadius: 0,                       // This is the current radius of the floating object, including its zoom applied.
     currentMass: 0,                         // This is the current mass of the floating object, including its zoom applied.
@@ -218,12 +217,12 @@ function newFloatingObject () {
   }
 
   function radomizeCurrentPosition (arroundPoint) {
-    var position = {
+    let position = {
       x: Math.floor((Math.random() * (200) - 100)) + arroundPoint.x,
       y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y
     }
 
-    thisObject.currentPosition = position
+    thisObject.container.frame.position = position
   }
 
   function radomizeCurrentSpeed () {
@@ -263,4 +262,3 @@ function newFloatingObject () {
 
   }
 }
-

FloatingSpace/Note.js

@@ -67,7 +67,7 @@ function newNote () {
             /* Target Line */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
+      browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y)
       browserCanvasContext.lineTo(point.x, point.y)
       browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
       browserCanvasContext.setLineDash([4, 2])
@@ -102,8 +102,8 @@ function newNote () {
     let borderPoint4
 
     let intialDisplace = {
-      x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2,
-      y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2
+      x: pFloatingObject.container.frame.position.x - BUBBLE_WIDTH / 2,
+      y: pFloatingObject.container.frame.position.y - BUBBLE_HEIGHT / 2
     }
 
     if (pFloatingObject.currentRadius > 5) {
@@ -185,8 +185,8 @@ function newNote () {
             /* Image */
 
       let imagePosition = {
-        x: pFloatingObject.currentPosition.x,
-        y: pFloatingObject.currentPosition.y + BUBBLE_HEIGHT / 2
+        x: pFloatingObject.container.frame.position.x,
+        y: pFloatingObject.container.frame.position.y + BUBBLE_HEIGHT / 2
       }
 
       if (pFloatingObject.payloadImageId !== undefined) {
@@ -304,8 +304,8 @@ function newNote () {
               let labelRow = labelRows[i]
 
               let startingPosition = {
-                x: pFloatingObject.currentPosition.x,
-                y: pFloatingObject.currentPosition.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10)
+                x: pFloatingObject.container.frame.position.x,
+                y: pFloatingObject.container.frame.position.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10)
               }
 
               labelPoint = {

FloatingSpace/ProfileBall.js

@@ -142,8 +142,8 @@ function newProfileBall () {
 
       if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
         let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
+          x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
         }
 
         browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
@@ -198,7 +198,7 @@ function newProfileBall () {
             /* Target Line */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
+      browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y)
       browserCanvasContext.lineTo(point.x, point.y)
       browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
       browserCanvasContext.setLineDash([4, 2])
@@ -225,7 +225,7 @@ function newProfileBall () {
             /* Contourn */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
       browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'
       browserCanvasContext.lineWidth = 1
@@ -246,7 +246,7 @@ function newProfileBall () {
       alphaA = 0.75
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
 
       browserCanvasContext.fillStyle = pFloatingObject.fillStyle
@@ -262,12 +262,12 @@ function newProfileBall () {
       if (image !== null && image !== undefined) {
         browserCanvasContext.save()
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
+        browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
         browserCanvasContext.closePath()
         browserCanvasContext.clip()
-        browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
+        browserCanvasContext.drawImage(image, pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
+        browserCanvasContext.arc(pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
         browserCanvasContext.clip()
         browserCanvasContext.closePath()
         browserCanvasContext.restore()
@@ -281,8 +281,8 @@ function newProfileBall () {
 
       if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
         let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
+          x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
         }
 
         browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
@@ -305,8 +305,8 @@ function newProfileBall () {
 
       if (label !== undefined) {
         labelPoint = {
-          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
+          x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
         }
 
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -318,8 +318,8 @@ function newProfileBall () {
 
       if (label !== undefined) {
         labelPoint = {
-          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
+          x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: pFloatingObject.container.frame.position.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
         }
 
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY

FloatingSpace/StrategyPart.js

@@ -330,8 +330,8 @@ function newStrategyPart () {
 
       if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
         let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle))
+          x: pFloatingObject.container.frame.position.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle))
         }
 
         browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
@@ -381,8 +381,8 @@ function newStrategyPart () {
     let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle)
 
     if (isMouseOver === false) {
-      pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x
-      pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y
+      pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x
+      pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y
     }
 
    /* Here I continue painting the background */
@@ -396,7 +396,7 @@ function newStrategyPart () {
             /* Target Line */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
+      browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y)
       browserCanvasContext.lineTo(point.x, point.y)
       browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
       browserCanvasContext.setLineDash([1, 4])
@@ -420,8 +420,8 @@ function newStrategyPart () {
 
   function drawForeground (pFloatingObject) {
     let position = {
-      x: pFloatingObject.currentPosition.x,
-      y: pFloatingObject.currentPosition.y
+      x: pFloatingObject.container.frame.position.x,
+      y: pFloatingObject.container.frame.position.y
     }
 
     let radius = pFloatingObject.currentRadius
@@ -538,4 +538,3 @@ function newStrategyPart () {
     }
   }
 }
-