Bubbles Apperar and Dissapear but are not removed from the Floating Layer

FloatingSpace/Bubble.js

@@ -19,6 +19,12 @@ 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 */
@@ -51,6 +57,12 @@ 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 TITLE_BAR_HEIGHT = 14;
 
@@ -214,7 +226,7 @@ function newBubble() {
                     const TOTAL_ROWS = 5;
                     const ALPHA = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius  * 100) / 100 / 2;
 
-                    if (ALPHA > 0.3) {
+                    if (ALPHA > 0.4) {
 
                         let startingPosition = {
                             x: pFloatingObject.currentPosition.x,
@@ -232,11 +244,11 @@ function newBubble() {
 
                             labelArray.push(word);
 
-                            if (word.length > 10) {
+                            if (word.length > 8) {
                                 labelArray.push("");
                             }
 
-                            if (word.length > 12) {
+                            if (word.length > 10) {
                                 labelArray.push("");
                             }
                         }

FloatingSpace/BubbleSets.js

@@ -59,9 +59,9 @@ function newBubbleSets() {
 
             let newFloatingBubbles = []; // We will create a new array of Floating Bubbles as a result of this operation.
 
-            for (let i = 0; i < bubbleSet.payload.bubbles.length; i++) {
+            for (let i = 0; i < pNewBubbles.length; i++) {
 
-                let plotterBubble = bubbleSet.payload.bubbles[i];
+                let plotterBubble = pNewBubbles[i];
                 let plotterBubbleKey = plotterBubble.date.toString() + plotterBubble.rate.toString();
                 let found = false;
 
@@ -93,7 +93,7 @@ function newBubbleSets() {
 
                         floatingObject.initializeMass(200);
 
-                        let bodyText = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].body;
+                        let bodyText = pNewBubbles[i].body;
                         let radius;
 
                         if (bodyText.length < 100) {
@@ -131,9 +131,9 @@ function newBubbleSets() {
                 let floatingBubble = bubbleSet.floatingBubbles[j];
                 let floatingBubbleKey = floatingBubble.date.toString() + floatingBubble.rate.toString();
 
-                for (let i = 0; i < bubbleSet.payload.bubbles.length; i++) {
+                for (let i = 0; i < pNewBubbles.length; i++) {
 
-                    let plotterBubble = bubbleSet.payload.bubbles[i];
+                    let plotterBubble = pNewBubbles[i];
                     let plotterBubbleKey = plotterBubble.date.toString() + plotterBubble.rate.toString();
 
                     if (plotterBubbleKey === floatingBubbleKey) {

FloatingSpace/FloatingLayer.js

@@ -94,10 +94,11 @@ function newFloatingLayer() {
                 }
                 case "Bubble": {
 
-                   // if (floatingObject.payloadBubbleIndex >= floatingObject.payload.bubbles.length) {
+                    if (floatingObject.payloadBubbleIndex >= floatingObject.payload.bubbles.length) {
 
-                     //   continue;   // The bubbles array changed at the plotter but the 
-                    //} 
+                        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;