fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tyding up some code part 1

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2018-04-21 11:03:30 +02:00
1 parent 8200521725
commit ee7bf6500b
6 files changed
+128 -148
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vs/AAWeb/v15/.suo
BIN
View File
Binary file not shown.
Ball.js
+82 -92
View File
@@ -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);
}
}
}
}
Balls.js
-2
View File
@@ -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. */
Canvas.js
+35 -33
View File
@@ -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
};
FloatingSpace.js
+11 -11
View File
@@ -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();
}
Physics.js
-10
View File
@@ -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