diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 597b799d2..322b80e41 100644 Binary files a/.vs/AAWeb/v15/.suo and b/.vs/AAWeb/v15/.suo differ diff --git a/Ball.js b/Ball.js index 47bd95cbe..cd2002192 100644 --- a/Ball.js +++ b/Ball.js @@ -8,6 +8,7 @@ function newBall() { initializeMass: initializeMass, initializeRadius: initializeRadius, + initializeImageSize: initializeImageSize, imageId: undefined, @@ -70,6 +71,19 @@ function newBall() { } + function initializeImageSize(suggestedValue) { + + var size = suggestedValue; + if (size < 2) { + size = 2; + } + + thisObject.rawImageSize = size; + thisObject.targetImageSize = size; + thisObject.currentImageSize = size / 3; + + } + function radomizeCurrentPosition(arroundPoint) { var position = { @@ -191,15 +205,13 @@ function newBall() { /* Image */ - let imageSize = 50; - if (thisObject.input.imageId !== undefined) { let image = document.getElementById(thisObject.input.imageId); if (image !== null) { - browserCanvasContext.drawImage(image, thisObject.currentPosition.x - imageSize / 2, thisObject.currentPosition.y - imageSize / 2, imageSize, imageSize); + browserCanvasContext.drawImage(image, thisObject.currentPosition.x - thisObject.currentImageSize / 2, thisObject.currentPosition.y - thisObject.currentImageSize / 2, thisObject.currentImageSize, thisObject.currentImageSize); } } @@ -219,7 +231,7 @@ function newBall() { labelPoint = { x: thisObject.currentPosition.x - label.length / 2 * fontSize * 0.60, - y: thisObject.currentPosition.y + imageSize / 2 + fontSize * 0.60 + 5 + y: thisObject.currentPosition.y + thisObject.currentImageSize / 2 + fontSize * 0.60 + 5 }; browserCanvasContext.font = fontSize + 'px Courier New'; diff --git a/FloatingSpace.js b/FloatingSpace.js index b7f0042e9..c5fa8b9e1 100644 --- a/FloatingSpace.js +++ b/FloatingSpace.js @@ -25,6 +25,62 @@ function newFloatingSpace() { } + + function createNewBall(pInput, pContainer) { + + /* This function is used to create new balls, representing labels of each point on the chart. */ + + var ball = newBall(); + + ball.input = pInput; + + ball.container = pContainer; + + ball.friction = .995; + + ball.initializeMass(15); + ball.initializeRadius(30); + ball.initializeImageSize(50); + + ball.fillStyle = 'rgba(255, 255, 255, 0.5)'; + ball.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'; + + createdBalls.push(ball); + + ball.handle = Math.floor((Math.random() * 10000000) + 1); + + return ball.handle; + } + + function destroyBall(pBallHandle) { + + for (let i = 0; i < createdBalls.length; i++) { + + let ball = createdBalls[i]; + + if (ball.handle === pBallHandle) { + createdBalls.splice(i, 1); // Delete item from array. + return; + } + } + + for (let i = 0; i < thisObject.balls.length; i++) { + + let ball = thisObject.balls[i]; + + if (ball.handle === pBallHandle) { + thisObject.balls.splice(i, 1); // Delete item from array. + return; + } + } + } + + /******************************************/ + /* */ + /* Physics Engine Follows */ + /* */ + /******************************************/ + function physicsLoop() { /* This function makes all the calculations to apply phisycs on all balls in this space. */ @@ -65,6 +121,14 @@ function newFloatingSpace() { ball.currentRadius = ball.currentRadius - .5; } + // The imageSize also have a target. + + if (ball.currentImageSize < ball.targetImageSize) { + ball.currentImageSize = ball.currentImageSize + 1; + } else { + ball.currentImageSize = ball.currentImageSize - 1; + } + /* Collision Control */ for (let k = i + 1; k < thisObject.balls.length; k++) { @@ -117,60 +181,6 @@ function newFloatingSpace() { } } - function createNewBall(pInput, pContainer) { - - /* This function is used to create new balls, representing labels of each point on the chart. */ - - var ball = newBall(); - - ball.input = pInput; - - ball.container = pContainer; - - ball.friction = .995; - - ball.initializeMass(15); - ball.initializeRadius(30); - - ball.fillStyle = 'rgba(255, 255, 255, 0.5)'; - ball.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'; - - createdBalls.push(ball); - - ball.handle = Math.floor((Math.random() * 10000000) + 1); - - return ball.handle; - } - - function destroyBall(pBallHandle) { - - for (let i = 0; i < createdBalls.length; i++) { - - let ball = createdBalls[i]; - - if (ball.handle === pBallHandle) { - createdBalls.splice(i, 1); // Delete item from array. - return; - } - } - - for (let i = 0; i < thisObject.balls.length; i++) { - - let ball = thisObject.balls[i]; - - if (ball.handle === pBallHandle) { - thisObject.balls.splice(i, 1); // Delete item from array. - return; - } - } - } - - /******************************************/ - /* */ - /* Physics Engine Follows */ - /* */ - /******************************************/ - function gravityForce(ball) { /* We simulate a kind of gravity towards the target point of each ball. This force will make the ball to keep pushing to reach that point. */