Bubble test

Working on bubble graph

by falldeaf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.7.0/Tween.js"></script>
<div id="bubbles"></div>

<button onclick="addRand()">
  add bubble
</button>

CSS

body {
  background-color:black;
}

#bubbles {
  height: 30px;
  width: 100%;
  margin:10px;
  padding:10px;
  background-color: #222222;
  border:1px solid #220000;
}

.bubble {
  height:20px;
  width:20px;
  border-radius: 25px;
  border:3px solid grey;
  background-color: #555555;
  float:right;
  margin-right:13%;
}

JavaScript

color_scheme = ["#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#FFFF00"];
bubble_index = 0;

addBubble(0);
function addRand(){
	const rand = Math.floor(Math.random() * 5);
  console.log(rand);
	addBubble(rand);
}

function addBubble(classifier_index){
	let bubble_elem = document.createElement("div");
  bubble_elem.classList.add("bubble");
	bubble_elem.style.marginRight = 0;
  bubble_elem.alpha = 0;
  bubble_elem.id = "bindex" + bubble_index;
	document.querySelector('#bubbles').prepend(bubble_elem);
  
  var coords = { mr: 0, alpha: 1, color: 0 }; // Start at (0, 0)
	new TWEEN.Tween(coords).to({ mr: 13, alpha: 0, color: 1 }, 800).easing(TWEEN.Easing.Bounce.Out)
	.onUpdate((object)=> { bubble_elem.style.marginRight = coords.mr + '%'; }).start();
  
  if(bubble_index>0) {
  	bubble_index_hold = bubble_index;
  	console.log(document.getElementById("bindex" + (bubble_index_hold-1)));
  	new TWEEN.Tween(coords).to({ color: 1 }, 800).easing(TWEEN.Easing.Bounce.Out).onUpdate(()=>{ document.getElementById("bindex" + (bubble_index_hold-1)).style.backgroundColor = lerpColor("#555555", color_scheme[classifier_index], coords.color); }).start();
    }
  
  if(document.querySelectorAll(".bubble").length >= 6) {
  		let bubbles = document.querySelectorAll(".bubble");
  		bubble_to_delete = bubbles[bubbles.length-1];
      new TWEEN.Tween(coords).to({ alpha: 0 }, 500).easing(TWEEN.Easing.Bounce.Out)
      .onComplete(()=>{ bubble_to_delete.parentNode.removeChild(bubble_to_delete); })
    	.onUpdate((object)=> { 
      	bubble_to_delete.style.opacity = coords.alpha;
        let deleted_mr = (13 - coords.mr);
        bubble_to_delete.style.marginRight = deleted_mr + "%"; 
      }).start();
      
      
  }

	bubble_index++;
}

function handleComplete() {
  console.log("done");
}

function animate(time) {
	requestAnimationFrame(animate);
	TWEEN.update(time);
}
requestAnimationFrame(animate);

function lerpColor(a, b, amount) { 

    var ah = parseInt(a.replace(/#/g, ''), 16),
       ...