diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 16b544c1b..1534b8151 100644 Binary files a/.vs/AAWeb/v15/.suo and b/.vs/AAWeb/v15/.suo differ diff --git a/Ball.js b/Ball.js index a1d48dec9..6662f3519 100644 --- a/Ball.js +++ b/Ball.js @@ -1,9 +1,12 @@  - function newBall() { var ball = { + initializeTargetPosition: initializeTargetPosition, + initializeMass: initializeMass, + initializeRadius: initializeRadius, + currentPosition: 0, // Current x,y position of the ball at the ball'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 ball. currentRadius: 0, // This is the current radius of the ball, including its zoom applied. @@ -26,9 +29,6 @@ function newBall() { radomizeCurrentPosition: radomizeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, - initializeTargetPosition: initializeTargetPosition, - initializeMass: initializeMass, - initializeRadius: initializeRadius, drawBackground: drawBallBackgrond, // Function to draw the ball elements on the canvas layer. drawForeground: drawBallForeground, // Function to draw the ball elements on the balls layer. @@ -41,12 +41,10 @@ function newBall() { linkedObjectType: "", // Since there might be balls for different types of objects, here we store the type of object we are linking to. container: undefined // This is a pointer to the object where the ball belongs to. - }; return ball; - function initializeTargetPosition() { /* The initialization is based on the rawPosition that must be set before calling this function. */ @@ -91,7 +89,6 @@ function newBall() { } - function radomizeCurrentPosition(arroundPoint) { var position = { @@ -165,129 +162,122 @@ function newBall() { } -} + function drawBallBackgrond() { + if (this.currentRadius > 1) { + /* Target Line */ -function drawBallBackgrond() { + browserCanvasContext.beginPath(); + browserCanvasContext.moveTo(this.currentPosition.x, this.currentPosition.y); + browserCanvasContext.lineTo(this.targetPosition.x, this.targetPosition.y); + browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'; + browserCanvasContext.setLineDash([4, 2]); + browserCanvasContext.lineWidth = 1; + browserCanvasContext.stroke(); + browserCanvasContext.setLineDash([0, 0]); - if (this.currentRadius > 1) { + } - /* Target Line */ + if (this.currentRadius > 0.5) { - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(this.currentPosition.x, this.currentPosition.y); - browserCanvasContext.lineTo(this.targetPosition.x, this.targetPosition.y); - browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'; - browserCanvasContext.setLineDash([4, 2]); - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - browserCanvasContext.setLineDash([0, 0]); + /* Target Spot */ + var radius = 1; + + browserCanvasContext.beginPath(); + browserCanvasContext.arc(this.targetPosition.x, this.targetPosition.y, radius, 0, Math.PI * 2, true); + browserCanvasContext.closePath(); + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'; + browserCanvasContext.fill(); + + } } - if (this.currentRadius > 0.5) { + function drawBallForeground() { - /* Target Spot */ + if (this.currentRadius > 5) { - var radius = 1; + /* Contourn */ - browserCanvasContext.beginPath(); - browserCanvasContext.arc(this.targetPosition.x, this.targetPosition.y, radius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'; - browserCanvasContext.fill(); + browserCanvasContext.beginPath(); + browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true); + browserCanvasContext.closePath(); + browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'; + browserCanvasContext.lineWidth = 1; + browserCanvasContext.stroke(); - } + } -} + if (this.currentRadius > 0.5) { + /* Main Ball */ + var alphaA; + if (this.currentRadius < 3) { + alphaA = 1; + } else { + alphaA = 0.75; + } - -function drawBallForeground() { - - - if (this.currentRadius > 5) { - - /* Contourn */ - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - } - - if (this.currentRadius > 0.5) { - - /* Main Ball */ - - var alphaA; - - if (this.currentRadius < 3) { - alphaA = 1; - } else { alphaA = 0.75; + + browserCanvasContext.beginPath(); + browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true); + browserCanvasContext.closePath(); + + browserCanvasContext.fillStyle = this.fillStyle; + + browserCanvasContext.fill(); + } - alphaA = 0.75; + /* Label First Text */ - browserCanvasContext.beginPath(); - browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); + if (this.currentRadius > 6) { - browserCanvasContext.fillStyle = this.fillStyle; + browserCanvasContext.strokeStyle = this.labelStrokeStyle; - browserCanvasContext.fill(); + var xOffset = 0; - } + if (this.labelFirstText >= 10) { + xOffset = this.currentRadius / 10; + } - /* Label First Text */ + browserCanvasContext.font = (this.currentRadius / 4).toFixed(0) + 'px verdana'; - if (this.currentRadius > 6) { + try { + browserCanvasContext.fillText(this.labelFirstText.toFixed(0), this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2); + } catch (err) { + browserCanvasContext.fillText(this.labelFirstText, this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2); + } - browserCanvasContext.strokeStyle = this.labelStrokeStyle; - - var xOffset = 0; - - if (this.labelFirstText >= 10) { - xOffset = this.currentRadius / 10; } - browserCanvasContext.font = (this.currentRadius / 4).toFixed(0) + 'px verdana'; + /* Label Second Text */ - try { - browserCanvasContext.fillText(this.labelFirstText.toFixed(0), this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2); - } catch (err) { - browserCanvasContext.fillText(this.labelFirstText, this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2); - } + if (this.currentRadius > 10) { - } + browserCanvasContext.strokeStyle = this.labelStrokeStyle; + + var xOffset = 0; - /* Label Second Text */ - - if (this.currentRadius > 10) { - - browserCanvasContext.strokeStyle = this.labelStrokeStyle; - - var xOffset = 0; + xOffset = this.currentRadius / 2; - xOffset = this.currentRadius / 2; + browserCanvasContext.font = (this.currentRadius / 6).toFixed(0) + 'px verdana'; - - browserCanvasContext.font = (this.currentRadius / 6).toFixed(0) + 'px verdana'; - - try { - browserCanvasContext.fillText(this.labelSecondText.toFixed(8), this.currentPosition.x - xOffset, this.currentPosition.y + xOffset); - } catch (err) { - browserCanvasContext.fillText(this.labelSecondText, this.currentPosition.x - xOffset, this.currentPosition.y + xOffset); + try { + browserCanvasContext.fillText(this.labelSecondText.toFixed(8), this.currentPosition.x - xOffset, this.currentPosition.y + xOffset); + } catch (err) { + browserCanvasContext.fillText(this.labelSecondText, this.currentPosition.x - xOffset, this.currentPosition.y + xOffset); + } } } + } + + diff --git a/Balls.js b/Balls.js index 50a83e64f..aed5f21b1 100644 --- a/Balls.js +++ b/Balls.js @@ -1,6 +1,4 @@  - - function updateBallsTargets() { /* Whenever there is a change in the currentZoom level, all targets needs to be recalculated in order to fit in the new timeLineCoordinateSystem. */ diff --git a/Canvas.js b/Canvas.js index 115c9b2f1..01c4ee999 100644 --- a/Canvas.js +++ b/Canvas.js @@ -14,8 +14,8 @@ All these spaces are child objects of the Canvas object. */ -var browserCanvas; // This is the canvas object of the browser. -var browserCanvasContext; // The context of the canvas object. +let browserCanvas; // This is the canvas object of the browser. +let browserCanvasContext; // The context of the canvas object. let stepsInitializationCounter = 0; // This counter the initialization steps required to be able to turn off the splash screen. let marketInitializationCounter = 0; // This counter the initialization of markets required to be able to turn off the splash screen. @@ -25,13 +25,13 @@ function newCanvas() { /* Mouse event related variables. */ - var containerDragStarted = false; - var ballDragStarted = false; - var ballBeingDragged; - var containerBeingDragged; - var viewPortBeingDragged = false; + let containerDragStarted = false; + let ballDragStarted = false; + let ballBeingDragged; + let containerBeingDragged; + let viewPortBeingDragged = false; - var dragVector = { + let dragVector = { downX: 0, downY: 0, upX: 0, @@ -40,7 +40,7 @@ function newCanvas() { /* canvas object */ - var canvas = { + let canvas = { eventHandler: undefined, chartSpace: undefined, floatingSpace: undefined, @@ -61,14 +61,14 @@ function newCanvas() { addCanvasEvents(); - /* The canvas has one ChartSpace child. Here is where we get it. */ + /* The canvas has one ChartSpace child. Here is where we get it. */ - var chartSpace = newChartSpace(); + let chartSpace = newChartSpace(); chartSpace.initialize(); this.chartSpace = chartSpace; - var floatingSpace = newFloatingSpace(); + let floatingSpace = newFloatingSpace(); floatingSpace.initialize(); this.floatingSpace = floatingSpace; @@ -76,11 +76,13 @@ function newCanvas() { splashScreen = newSplashScreen(); splashScreen.initialize(); - var animation = newAnimation(); + let animation = newAnimation(); animation.initialize(clearBrowserCanvas); this.animation = animation; + /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction("Chart Space", this.chartSpace.draw); animation.addCallBackFunction("Floating Space", this.floatingSpace.physicsLoop); animation.addCallBackFunction("Splash Screen", splashScreen.draw); @@ -93,7 +95,7 @@ function newCanvas() { browserCanvas = document.getElementById('canvas'); browserCanvasContext = browserCanvas.getContext('2d'); - var body = document.getElementById('body'); + let body = document.getElementById('body'); browserCanvas.width = window.innerWidth; browserCanvas.height = window.innerHeight; @@ -147,12 +149,12 @@ function newCanvas() { /* If it is not, then we check if it is over any of the existing containers. */ - var point = { + let point = { x: event.pageX, y: event.pageY }; - var container = canvas.chartSpace.getContainer(point); + let container = canvas.chartSpace.getContainer(point); if (container !== undefined && container.isDraggeable === true) { @@ -172,9 +174,9 @@ function newCanvas() { dragVector.downX = event.pageX; dragVector.downY = event.pageY; - /* We check first if the mouse is over a ball/ */ + /* We check first if the mouse is over a ball/ */ - var ballBeingClicked = isInside(event.pageX, event.pageY); + let ballBeingClicked = isInside(event.pageX, event.pageY); if (ballBeingClicked >= 0) { @@ -184,12 +186,12 @@ function newCanvas() { /* If it is not, then we check if it is over any of the existing containers. */ - var point = { + let point = { x: event.pageX, y: event.pageY }; - var container = canvas.chartSpace.getContainer(point); + let container = canvas.chartSpace.getContainer(point); if (container !== undefined && container.isClickeable === true) { @@ -260,21 +262,21 @@ function newCanvas() { browserCanvas.style.cursor = "grabbing"; canvas.eventHandler.raiseEvent("Dragging", undefined); - var targetBall = isInside(event.pageX, event.pageY); + let targetBall = isInside(event.pageX, event.pageY); if (ballDragStarted) { - var ball = balls[ballBeingDragged]; + let ball = balls[ballBeingDragged]; ball.currentPosition.x = dragVector.upX; ball.currentPosition.y = dragVector.upY; /* Now we estimate if the drag was towards the Target Point of the ball or not. */ - var distDown = distance(dragVector.downX, dragVector.downY, ball.targetPosition.x, ball.targetPosition.y); - var distUp = distance(dragVector.upX, dragVector.upY, ball.targetPosition.x, ball.targetPosition.y); + let distDown = distance(dragVector.downX, dragVector.downY, ball.targetPosition.x, ball.targetPosition.y); + let distUp = distance(dragVector.upX, dragVector.upY, ball.targetPosition.x, ball.targetPosition.y); - var mZoomValue; + let mZoomValue; if (distDown < distUp) { @@ -291,21 +293,21 @@ function newCanvas() { /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ - var downCopy = { + let downCopy = { x: dragVector.downX, y: dragVector.downY }; - var downCopyNoTransf; + let downCopyNoTransf; downCopyNoTransf = viewPort.unzoomThisPoint(downCopy); //downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf); - var upCopy = { + let upCopy = { x: dragVector.upX, y: dragVector.upY }; - var upCopyNoTranf; + let upCopyNoTranf; upCopyNoTranf = viewPort.unzoomThisPoint(upCopy); //upCopyNoTranf = containerBeingDragged.zoom.unzoomThisPoint(upCopyNoTranf); @@ -367,11 +369,11 @@ function newCanvas() { function onMouseWheel(event) { - // cross-browser wheel delta + // cross-browser wheel delta var event = window.event || event; // old IE support - var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)); + let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)); - var ballIndex = isInside(event.pageX, event.pageY); + let ballIndex = isInside(event.pageX, event.pageY); if (ballIndex >= 0) { @@ -383,7 +385,7 @@ function newCanvas() { /* We check if the mouse is over any of the existing containers. */ - var point = { + let point = { x: event.pageX, y: event.pageY }; diff --git a/FloatingSpace.js b/FloatingSpace.js index 6bd1c68d0..8c56583ef 100644 --- a/FloatingSpace.js +++ b/FloatingSpace.js @@ -4,17 +4,17 @@ The Floating Space is the place where floating elements like balls, live and are */ -var balls; // This is the array of balls being displayed +let balls; // This is the array of balls being displayed function newFloatingSpace() { - var floatingSpace = { + let thisObject = { physicsLoop: physicsLoop, balls: [], initialize: initialize }; - return floatingSpace; + return thisObject; function initialize() { @@ -26,9 +26,9 @@ function newFloatingSpace() { /* This function makes all the calculations to apply phisycs on all objects in this space. */ - for (var i = 0; i < balls.length; i++) { + for (let i = 0; i < balls.length; i++) { - var ball = balls[i]; + let ball = balls[i]; /* Change position based on speed */ @@ -65,7 +65,7 @@ function newFloatingSpace() { /* Collision Control */ - for (var k = i + 1; k < balls.length; k++) { + for (let k = i + 1; k < balls.length; k++) { if (colliding(balls[i], balls[k])) { @@ -81,14 +81,14 @@ function newFloatingSpace() { } - for (var i = 0; i < balls.length; i++) { - var ball = balls[i]; + for (let i = 0; i < balls.length; i++) { + let ball = balls[i]; ball.drawBackground(); } - for (var i = 0; i < balls.length; i++) { - var ball = balls[balls.length - i - 1]; - //var ball = balls[i]; + for (let i = 0; i < balls.length; i++) { + let ball = balls[balls.length - i - 1]; + //let ball = balls[i]; ball.drawForeground(); } diff --git a/Physics.js b/Physics.js index 4d51f2743..e2d020f9e 100644 --- a/Physics.js +++ b/Physics.js @@ -105,8 +105,6 @@ function repulsionForce(currentBall) { } - - function colliding(ball1, ball2) { @@ -132,7 +130,6 @@ function colliding(ball1, ball2) else return true; } - function isInside(x, y) { /* This function detects weather the point x,y is inside any of the balls. */ @@ -149,7 +146,6 @@ function isInside(x, y) { } - function isInsideBall(ballIndex, x, y) { /* This function detects weather the point x,y is inside one particular balls. */ @@ -170,7 +166,6 @@ function distance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); } - function resolveCollision(ball1, ball2) { /* This function changes speed and position of balls that are in collision */ @@ -196,17 +191,12 @@ function resolveCollision(ball1, ball2) { var cosAngle = Math.cos(collisionision_angle); var sinAngle = Math.sin(collisionision_angle); - ball1.currentSpeed.x = cosAngle * final_xspeed_1 - sinAngle * final_yspeed_1; ball1.currentSpeed.y = sinAngle * final_xspeed_1 + cosAngle * final_yspeed_1; ball2.currentSpeed.x = cosAngle * final_xspeed_2 - sinAngle * final_yspeed_2; ball2.currentSpeed.y = sinAngle * final_xspeed_2 + cosAngle * final_yspeed_2; - - - - var pos1 = { x: ball1.currentPosition.x, y: ball1.currentPosition.y