From ee7bf6500b35623ddb4eed248c3048690a4b2711 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 21 Apr 2018 11:03:30 +0200 Subject: [PATCH] tyding up some code part 1 --- .vs/AAWeb/v15/.suo | Bin 43008 -> 38912 bytes Ball.js | 174 +++++++++++++++++++++------------------------ Balls.js | 2 - Canvas.js | 68 +++++++++--------- FloatingSpace.js | 22 +++--- Physics.js | 10 --- 6 files changed, 128 insertions(+), 148 deletions(-) diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 16b544c1ba749386de0ed642abdd79aeaf11d907..1534b81517ec7593354a0664e027a3a93d886a33 100644 GIT binary patch delta 4032 zcmeH~dr;I>6vyxVxh%`_gBE$LisUYW5~6|{J_2Fcb=7i0Ma!C4duiEbSy`$4dcTzL51X8{n&~mqRO3I*^mH1Waweni+5PLIbH}+nok>)4e}_RRa)gdT0f*| z{Jl_rXT=YS8JzF`t^A^kvCt0(>Etw}-;@i9J4~oEb(!14AZLIPzyi{M16%=yf^5L! zxQx{0>3W@tIt$j5LspY3I;6jUqTZR0x&TZ9Q@}OgYETHKf@#1GW`N0{j33kKfy9<( zq4t7n^|oRCm#zgLh0HaHb#d-h>>nrk*+1q%{)ugB9_$}uY8-|delmQ-ed*9AgBV}~ zi9iJ@U=(1l@HqBb0=QCdvyQ#SH5UhD-D}>6G9C(Eh}||C%miaVWHf%pLe2r>Kq+8- z9_k6YT*MyfS~{|z7z%b(3AhTlfE)0H*?P?~mpN$9r7n}bYw7V&j)g4NytoeNc7RTD zrX)A-gtQCX2kr+CfCs@tU^mzU9tMwqz2H$029JS#;BoK-*bklrPl2bw0q_iX7CZ+I zf> zEW+k@kSS%0$|JJ@#~t0D(k?eqcIs=k^=NJY9G)Aw>r84sIY#VLIlL6WkHyxtz7eYI z9(GKsd~Z3W7(Fo@-X`r_`gKyB3NdX^pBBt$S3*U-)T7Jxk|kA6@4+piMu z&e%LV@vS-NPodUb#qtJ{j*{?wGJL(#J;$viNIq81egh94oYXEUywyRD`8(usIyAoy zlX}`c@wbchA|O_XDiNT@1wJ~lppeQI&eTd5wkYwZ5e;m{EOyYNODfH7f9*PdfO;y& z(cUFXRd3B|e{ejNvQB72hCd6T9xe@zW=u(*crMT#Zpt&fR??V#3DMb5%*Q*vDK2fD?jj++IMNE4Upt=YGZ_z& z9Lv&#m4O`h4Bz5Fb$!4$kB+tjzY99t zVCS15>Z_`K_0@H&13s7Q#_DB0-Ss&Z{rm-OY?u}a0LPj?34njeL3%IC33^jM9*7Ge zK13SlFAvWpFW^wy;44{;I4R&@NV=pp;Q}o=8@$xNMvaMl3{g+x^1)X_wd(f-Cda{K zrZswPjHYd%ndh&bG}T|IwRE;f+Ba$>*-ElWcBR?AUiHp5C&z7z?`WN3|6!EROa4MT zHbZNIMZB(cB6h`}L!OK7nbi`xa#-mq-b>sCEvwPW^CQJJV=))4Zgjz5>P5FXE|!PF zN)B6z*fbi^8}DrJWc!eMT;fJiEtUzNm@ft;M|{7nM54rpB5hneTkF_zvy_XFji&R* zB=Wq(Uj9EQyNLAjI5gkRL)FEDVH8I-hj_HZ}!wPGE9f9rALQ1zG1wkzeb$ZO}! zwk#RdbwC${Zo%ksQ7@JcikZu>2Aycjp_H~;sjsb8F6Sp1?Zqxu<9UO4ao395M1`nB zs|s;zM5%)++x@g>>`2 delta 4783 zcmeHKeN0nV6uJk461p95%Aa$cO7y)=AjNK}<%72pTdC>%1^s z8X9PsIU5;s5M_vRLx(Pqq#)7KkkHLu-xyFjKBC4XdU}G2jZs<`@MT&Nrvxg64 z3;s9_Xp(wIwOL07oD=Neb<}Do_9L;o8w%rk5fjq%)IX8xr^C-$m z64?lbESG7y+7@K)LSP9z5V_z_KK~R`=MOU)-x9c6Q1uk^6;9P8#H_eX z`ODx!jT3^kIcau0dn8PxeEiuk!HQTR+m4w?=a>tuy&{~bvw*5D`JsjAT!^eRVj;7_ zLKqp0(RMWK2v|0*(bhJ%xtBDoYie$HgKhbNG1P9whS=2L@gip`4~?t#Y-sFU=M@_~ zjWYKr&DK@7Zt!~Dp6Z5ncPp`>d}Y15!|mDZ_Q<0S(Wrvv_C|MiUX!=2b=$U{88)fF zURYF=D^`fM+!^`KqTF)l+{#>sQ*zph9Qg(1PRDjxXYzu!hV|}>POo=EdtOTi&b7~w z>_yH(ze9W&sLGI#0~PvR>GCo{6KNR+&KO6?rMYaRjZal+m^5OCNv|*wE@Qe_yt-~c z68=l~YX3)G(<;37FeLsZUl@n`0yeF(8ix6Yc#nnkCtVUoiJV#C7gl@-Yi1&OP}d~Bqbid^oT9YWd+DH|J~ zOvVJ`WBG|ov(wVzN8}Eh9x}tRNFJcF50O5CbvW>crMOYAU{K)8#vXyERq!CBh3*BB zQiTLv;8NI?J~|hxv*_Qsn0-%$E*pU8ygU?M1S^NVf2eBy=KQ=7FLSSa zE&OS3A#akYV6O_U?8}DUgDwcVg7E2qTkw71c(BZ$0(oKrTsxQ)Xg#==qbR&js;XHl z3-~-f4qq&NKKSNyisZOm#DY^Rw2mhzk zI$RU8 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