From b2c631c3125949484337986403252d11621e894e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:30:00 +0200 Subject: [PATCH] Could not get it without moving --- FloatingSpace/CircularMenu.js | 2 - FloatingSpace/CircularMenuItem.js | 2 +- FloatingSpace/FloatingLayer.js | 120 +++++++++--------------------- FloatingSpace/FloatingObject.js | 5 ++ FloatingSpace/StrategyPart.js | 4 +- 5 files changed, 42 insertions(+), 91 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index bf458d7b9..461419026 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -76,7 +76,6 @@ function newCircularMenu () { menutItem.isDeployed = true } thisObject.isDeployed = true - console.log('mouse over') } function onMouseNotOver () { @@ -86,7 +85,6 @@ function newCircularMenu () { menutItem.isDeployed = false } thisObject.isDeployed = false - console.log('mouse not over') } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 52ebdedcc..83687751b 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -100,7 +100,7 @@ function newCircularMenuItem () { } function drawBackground () { - if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true) { + if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { let position = { x: 0, y: 0 diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index ff6c93287..6208366ef 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -16,7 +16,6 @@ function newFloatingLayer () { const MODULE_NAME = 'Floating Layer' const INFO_LOG = false - let INTENSIVE_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -307,8 +306,6 @@ function newFloatingLayer () { function drawVisibleObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawVisibleObjects -> Entering function.') } - /* We draw all the visibleFloatingObjects. */ for (let i = 0; i < visibleFloatingObjects.length; i++) { @@ -323,14 +320,11 @@ function newFloatingLayer () { makeVisible() } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err= ' + err.stack) } } } function makeVisible () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeVisible -> Entering function.') } - /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ for (let i = 0; i < invisibleFloatingObjects.length; i++) { @@ -366,8 +360,6 @@ function newFloatingLayer () { } if (payload.visible === true) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } - /* The first time that the floatingObject becomes visible, we need to do this. */ floatingObject.radomizeCurrentPosition(payload.position) @@ -375,16 +367,8 @@ function newFloatingLayer () { visibleFloatingObjects.push(floatingObject) - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - invisibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - return // Only one at the time. } } @@ -397,8 +381,6 @@ function newFloatingLayer () { function makeInvisible () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeInvisible -> Entering function.') } - /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ for (let i = 0; i < visibleFloatingObjects.length; i++) { @@ -429,20 +411,10 @@ function newFloatingLayer () { } if (payload.visible === false) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } - invisibleFloatingObjects.push(floatingObject) - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - visibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - return // Only one at the time. } } @@ -455,8 +427,6 @@ function newFloatingLayer () { function drawDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawDyingObjects -> Entering function.') } - /* We also draw all the dyingFloatingObjects */ for (let i = 0; i < dyingFloatingObjects.length; i++) { @@ -496,31 +466,23 @@ function newFloatingLayer () { */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Entering function.') } - applyPhysics() function applyPhysics () { /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> applyPhysics -> Entering function.') } - for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Change position based on speed.') } - - 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] physics -> Apply some friction to desaccelerate.') } + if (floatingObject.positionLocked === false) { + 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 + } floatingObject.currentSpeed.x = floatingObject.currentSpeed.x * floatingObject.friction // Desaceleration factor. floatingObject.currentSpeed.y = floatingObject.currentSpeed.y * floatingObject.friction // Desaceleration factor. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Gives a minimun speed towards their taget.') } - let payload = { position: undefined, visible: false @@ -561,8 +523,6 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Set a maximun speed.') } - const MAX_SPEED = 50 if (floatingObject.currentSpeed.x > MAX_SPEED) { @@ -610,8 +570,6 @@ function newFloatingLayer () { function animateDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> animateDyingObjects -> Entering function.') } - /* We animate some parts of the dying objects */ for (let i = 0; i < dyingFloatingObjects.length; i++) { @@ -639,8 +597,6 @@ function newFloatingLayer () { function gravityForce (floatingObject, payload) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] gravityForce -> Entering function.') } - /* We simulate a kind of gravity towards the target point of each floatingObject. This force will make the floatingObject to keep pushing to reach that point. */ const coulomb = 0.00001 @@ -669,20 +625,22 @@ function newFloatingLayer () { y: pos2.y - pos1.y } - var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. - x: posDiff.x / d, - y: posDiff.y / d + if (d !== 0) { + var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. + x: posDiff.x / d, + y: posDiff.y / d + } + + var forceVector = { + x: unitVector.x * force, + y: unitVector.y * force + } + + /* We add the force vector to the speed vector */ + + floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x + floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } - - var forceVector = { - x: unitVector.x * force, - y: unitVector.y * force - } - - /* We add the force vector to the speed vector */ - - floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x - floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err= ' + err.stack) } } @@ -690,8 +648,6 @@ function newFloatingLayer () { function currentRepulsionForce (currentFloatingObject) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] currentRepulsionForce -> Entering function.') } - /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ const coulomb = 2 @@ -754,8 +710,6 @@ function newFloatingLayer () { function targetRepulsionForce (currentFloatingObject) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] targetRepulsionForce -> Entering function.') } - /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ const coulomb = 2 @@ -815,20 +769,22 @@ function newFloatingLayer () { y: pos2.y - pos1.y } - var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. - x: posDiff.x / d, - y: posDiff.y / d + if (d !== 0) { + var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. + x: posDiff.x / d, + y: posDiff.y / d + } + + var forceVector = { + x: unitVector.x * force, + y: unitVector.y * force + } + + /* We substract the force vector to the speed vector of the current floatingObject */ + + floatingObject1.currentSpeed.x = floatingObject1.currentSpeed.x - forceVector.x + floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } - - var forceVector = { - x: unitVector.x * force, - y: unitVector.y * force - } - - /* We substract the force vector to the speed vector of the current floatingObject */ - - floatingObject1.currentSpeed.x = floatingObject1.currentSpeed.x - forceVector.x - floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err= ' + err.stack) } @@ -837,8 +793,6 @@ function newFloatingLayer () { function changeTargetRepulsion (pDelta) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] changeTargetRepulsion -> Entering function.') } - if (pDelta > 0) { pDelta = 1 } else { @@ -857,8 +811,6 @@ function newFloatingLayer () { function colliding (floatingObject1, floatingObject2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] colliding -> Entering function.') } - /* This function detects weather 2 floatingObjects collide with each other. */ var r1 = floatingObject1.container.frame.radius @@ -883,8 +835,6 @@ function newFloatingLayer () { function distance (x1, y1, x2, y2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] distance -> Entering function.') } - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } @@ -893,8 +843,6 @@ function newFloatingLayer () { function resolveCollision (floatingObject1, floatingObject2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] resolveCollision -> Entering function.') } - /* This function changes speed and position of floatingObjects that are in collision */ 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)) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 11557b0b0..4db202c68 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -11,6 +11,7 @@ function newFloatingObject () { let thisObject = { physics: physics, + positionLocked: false, 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. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. @@ -168,6 +169,8 @@ function newFloatingObject () { thisObject.targetFontSize = thisObject.rawFontSize * 2.0 thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) + + thisObject.positionLocked = true } function onMouseNotOver (point) { @@ -176,6 +179,8 @@ function newFloatingObject () { thisObject.targetFontSize = thisObject.rawFontSize * 1 thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) + + thisObject.positionLocked = false } function onMouseClick (pPoint) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 77747bc87..e7feb426b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -399,7 +399,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius / 3 - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -412,7 +412,7 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius / 3 + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY