From 04a10dd4f4d08fbffe5052045c239d01f26a9ad4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 5 May 2018 11:42:06 +0200 Subject: [PATCH] Asethetics Improved --- .vs/AAWeb/v15/.suo | Bin 68608 -> 68096 bytes FloatingSpace/Bubble.js | 94 +++++++++++++++------------------ FloatingSpace/BubbleSets.js | 21 +++++++- FloatingSpace/FloatingLayer.js | 42 +++++++++++++-- 4 files changed, 100 insertions(+), 57 deletions(-) diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 218327e8c33b6795219e2faa168fafd20a9df4ea..79942868e7d7164c0424c84ee070042cdc88f6dd 100644 GIT binary patch delta 1740 zcmbW1YfM~46vyw(-i2Mn!UE;d^0)=8E6S_X3Mh0bSSuD}c{IdWi)gJSEl?;16oDov zjRC^$X$)dbVKmW*8oM{aM`F5^FHMOyrj1c!8a|j9jap1O-gWi2_%?U)Bzs93)XG+83o#znmR0hAu(q6=g*dG3?eJM!)}jVB8Ki+kkO`6i zs;=D)SaqZghFEqNVA(T38Q_J(vKJvv0W7-?SoYP^AtxVxG1v-9Kq5g2Q@oeL^p&M!#;13igNff4KmVS zrv+JPUQdq}frMU(%i5PXVpEM$rAiei1BRiShI>f_wi?njvX_K#LJ{YVl`jHS?HgNpLWF8mldK>aU7(>tXJG&>NZPRjVIl9Gz&1)e!rZHGN{ zZs3eLH~f}#@x=%?zJM<381Z3EU5!hc8Qw@KqgPxXg)_9c;3E7Kb7fQtIyY8EW&TQR z_JqGnxVWNgEi=fK)dHt%x~!VPp1SGUWF(CbyJ>cE(RkZR!*3+G0G}@@|6puZKh1aL z)BGztqv~;s_{K(PykWsBC7Qu0kEAVAqeQPAjm&H7?(cuDPbiqp^IEHV zd9@PlFE0PB!YThCt=`mqu#0?$-KP7qF9pp{x>0V|n%H#0|A{D}im`lZC#TFQ4!iU| zRmRMPcK~}y)6CFK;fUaB{GU2p^QU3aSbqN+dHwlG2iddQV8g#vC&8*t^QEZOIje7+ zg6|cPXWC6?XOd&TX`6MHmH+l}RmIgWcHj7Jm?lmy@~J4A-1P2LJe3dBPz!Cq=_Axt H)YbSC8_F^29V^gVx6gg3N9W*SDEj?Dxy?r8H~aN9h<`{Y+Ct=4`2BzN6biTb z^?Jl05CvO!Q?Rji2dX-MbSL5hFaqwyTk%Ulr!tM=Ay5wnz#N|r9*-oRaGN&5*wtn< z<=!h0#i8WlP~rt0Voa1ZfJPwiQdC-vT9nGQn-DJri$E(_ z0xkjAT`LMicCBR{u*7x^DB8Xjxea6yvAq(A1hIWN_}ez}HJ}YNfp*XVMA3CX^z?vE zARBT$SO+!$*$`R3OIDN}k>VCVN`5PH(RhR3H|O?8?LHLT8yQpw-PBF`qOhmKCLI4w z<*N6R>NERd;{hEfT~A)s49|pG&CgY3D(5)1ahBy(uE`hSRR%C8y#h{_w0) zr?`A9?Pa&~w`1EP37qNqpJ{vKW76-Dew_3N#PMfV@W@A#?0U!flS5i(?drky_Wu3K zvJ{wa_a|TG^u!)6cp=_#Y^BK^ew`|1LyApKiNz00xccdN8B>R9x#s8>F*zB{CA&_`MvXMSka#d*vL5m diff --git a/FloatingSpace/Bubble.js b/FloatingSpace/Bubble.js index 4dee1d155..31349458f 100644 --- a/FloatingSpace/Bubble.js +++ b/FloatingSpace/Bubble.js @@ -19,12 +19,6 @@ function newBubble() { function drawBackground(pFloatingObject) { - if (pFloatingObject.payloadBubbleIndex >= pFloatingObject.payload.bubbles.length) { - - return; // The bubbles array changed at the plotter before it was reflected here. We ignore this object from now on. - - } - if (pFloatingObject.currentRadius > 1) { /* Target Line */ @@ -57,32 +51,26 @@ function newBubble() { function drawForeground(pFloatingObject) { - if (pFloatingObject.payloadBubbleIndex >= pFloatingObject.payload.bubbles.length) { - - return; // The bubbles array changed at the plotter before it was reflected here. We ignore this object from now on. - - } - - const BUBBLE_CORNERS_RADIOUS = 10; + const BUBBLE_CORNERS_RADIOUS = 5; const TITLE_BAR_HEIGHT = 14; - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS * 4 + pFloatingObject.currentRadius; - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS * 2 + pFloatingObject.currentRadius; + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 4; + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 2; let borderPoint1; let borderPoint2; let borderPoint3; let borderPoint4; + let intialDisplace = { + x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, + y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 + } + if (pFloatingObject.currentRadius > 5) { /* Rounded Background */ - let intialDisplace = { - x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, - y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 - } - borderPoint1 = { x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS @@ -115,7 +103,7 @@ function newBubble() { /* We paint the panel background first */ - browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 0.75)'; + browserCanvasContext.fillStyle = 'rgba(255, 249, 196, 0.75)'; browserCanvasContext.beginPath(); browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI); @@ -137,7 +125,7 @@ function newBubble() { /* We paint the title bar now */ - browserCanvasContext.fillStyle = 'rgba(255, 151, 48, 0.75)'; + browserCanvasContext.fillStyle = 'rgba(244, 224, 44, 0.75)'; browserCanvasContext.beginPath(); browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y); @@ -154,28 +142,6 @@ function newBubble() { browserCanvasContext.strokeStyle = 'rgba(12, 64, 148, 0.75)'; browserCanvasContext.stroke(); - /* print the title */ - - let labelPoint; - let fontSize = 10; - - browserCanvasContext.font = fontSize + 'px Courier New'; - - let label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].title; - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO; - let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2; - - labelPoint = { - x: intialDisplace.x + BUBBLE_WIDTH / 2 - xOffset, - y: intialDisplace.y + TITLE_BAR_HEIGHT - yOffset - }; - - //labelPoint = frame.frameThisPoint(labelPoint); - - browserCanvasContext.fillStyle = 'rgba(240, 240, 240, 1)'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - } if (pFloatingObject.currentRadius > 0.5) { @@ -183,8 +149,8 @@ function newBubble() { /* Image */ let imagePosition = { - x: borderPoint1.x, - y: borderPoint1.y + TITLE_BAR_HEIGHT + x: pFloatingObject.currentPosition.x, + y: pFloatingObject.currentPosition.y + BUBBLE_HEIGHT / 2 }; if (pFloatingObject.payload.profile.imageId !== undefined) { @@ -207,26 +173,54 @@ function newBubble() { browserCanvasContext.lineWidth = 1; browserCanvasContext.stroke(); - /* Label Text */ + /* Labels */ if (pFloatingObject.currentRadius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle; + const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100; + const ALPHA = 0.5 - (1 - SIZE_PERCENTAGE) * 5; + let labelPoint; let fontSize = 10; let label; + /* print the title */ + + label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].title; + + if (label !== undefined) { + + if (SIZE_PERCENTAGE > 0.9) { + + browserCanvasContext.font = fontSize + 'px Courier New'; + + let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO; + let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2; + + labelPoint = { + x: intialDisplace.x + BUBBLE_WIDTH / 2 - xOffset, + y: intialDisplace.y + TITLE_BAR_HEIGHT - yOffset + }; + + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, ' + ALPHA + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + + } + } + + /* Message Body */ + label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].body; if (label !== undefined) { - const WORDS_PER_ROW = 4; + const WORDS_PER_ROW = 5; const TOTAL_ROWS = 5; - const ALPHA = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100 / 2; - if (ALPHA > 0.4) { + if (SIZE_PERCENTAGE > 0.9) { let startingPosition = { x: pFloatingObject.currentPosition.x, diff --git a/FloatingSpace/BubbleSets.js b/FloatingSpace/BubbleSets.js index ca47e2a4f..e8c606fb4 100644 --- a/FloatingSpace/BubbleSets.js +++ b/FloatingSpace/BubbleSets.js @@ -77,7 +77,9 @@ function newBubbleSets() { if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> j = " + j); } - for (let i = 0; i < pNewBubbles.length; i++) { + let i; + + for (i = 0; i < pNewBubbles.length; i++) { let plotterBubble = pNewBubbles[i]; let plotterBubbleKey = plotterBubble.date.toString() + plotterBubble.rate.toString(); @@ -113,6 +115,12 @@ function newBubbleSets() { if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> Added to newFloatingBubbles."); } if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> newFloatingBubbles.length = " + newFloatingBubbles.length); } + let floatingObject = floatingLayer.getFloatingObject(floatingBubble.floatingHandle); + floatingObject.payloadBubbleIndex = i; + + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> floatingObject index updated."); } + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> floatingObject.payloadBubbleIndex = " + i); } + } } @@ -175,14 +183,17 @@ function newBubbleSets() { floatingObject.initializeMass(200); - let bodyText = pNewBubbles[i].body; + //let bodyText = pNewBubbles[i].body; let radius; + /* if (bodyText.length < 100) { radius = 100; } else { radius = bodyText.length; } + */ + radius = 50; floatingObject.initializeRadius(radius); floatingObject.initializeImageSize(15); @@ -214,6 +225,12 @@ function newBubbleSets() { if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> Added to newFloatingBubbles."); } if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> newFloatingBubbles.length = " + newFloatingBubbles.length); } + let floatingObject = floatingLayer.getFloatingObject(floatingBubble.floatingHandle); + floatingObject.payloadBubbleIndex = i; + + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> floatingObject index updated."); } + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> floatingObject.payloadBubbleIndex = " + i); } + } } diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 507a90e9e..e871f7814 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -11,6 +11,7 @@ function newFloatingLayer() { floatingObjects: undefined, // This is the array of floatingObjects being displayed addFloatingObject: addFloatingObject, removeFloatingObject: removeFloatingObject, + getFloatingObject: getFloatingObject, physicsLoop: physicsLoop, isInside: isInside, isInsideFloatingObject: isInsideFloatingObject, @@ -80,6 +81,32 @@ function newFloatingLayer() { } } + function getFloatingObject(pFloatingObjectHandle) { + + if (INFO_LOG === true) { logger.write("[INFO] getFloatingObject -> Entering function."); } + + for (let i = 0; i < innactiveFloatingObjects.length; i++) { + + let floatingObject = innactiveFloatingObjects[i]; + + if (floatingObject.handle === pFloatingObjectHandle) { + + return floatingObject; + } + } + + for (let i = 0; i < thisObject.floatingObjects.length; i++) { + + let floatingObject = thisObject.floatingObjects[i]; + + if (floatingObject.handle === pFloatingObjectHandle) { + + return floatingObject; + } + } + } + + /******************************************/ /* */ /* Physics Engine Follows */ @@ -121,14 +148,19 @@ function newFloatingLayer() { } case "Bubble": { - if (floatingObject.payloadBubbleIndex >= floatingObject.payload.bubbles.length) { + try { - continue; // The bubbles array changed at the plotter before it was reflected here. We ignore this object. + payload.position = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].position; + payload.visible = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].visible; - } + } catch (err) { - payload.position = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].position; - payload.visible = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].visible; + if (ERROR_LOG === true) { logger.write("[ERROR] physicsLoop -> err = " + err); } + if (ERROR_LOG === true) { logger.write("[ERROR] physicsLoop -> floatingObject.payloadBubbleIndex = " + floatingObject.payloadBubbleIndex); } + if (ERROR_LOG === true) { logger.write("[ERROR] physicsLoop -> floatingObject.payload.bubbles.length = " + floatingObject.payload.bubbles.length); } + + continue; + } break; } default: {