From df353348bb0f1879270335048bb65dc9eb85ea13 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:23:09 +0200 Subject: [PATCH] Current Position from the Frame --- Canvas.js | 4 +-- FloatingSpace/FloatingLayer.js | 52 ++++++++++++++++----------------- FloatingSpace/FloatingObject.js | 6 ++-- FloatingSpace/Note.js | 14 ++++----- FloatingSpace/ProfileBall.js | 28 +++++++++--------- FloatingSpace/StrategyPart.js | 15 +++++----- 6 files changed, 58 insertions(+), 61 deletions(-) diff --git a/Canvas.js b/Canvas.js index 8a6f1eab3..b05bc1674 100644 --- a/Canvas.js +++ b/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) { diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index c2a07b07d..0d2c63ecc 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/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) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 357547743..bc023a4a4 100644 --- a/FloatingSpace/FloatingObject.js +++ b/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 () { } } - diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 3a1aa4ead..24fd8fbb5 100644 --- a/FloatingSpace/Note.js +++ b/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 = { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 3a2c6c22e..b3c387050 100644 --- a/FloatingSpace/ProfileBall.js +++ b/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 diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 44a20db78..0df9d3cf4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/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 () { } } } -