title: Making Canvas text objects bounce off of each other and be created by an array
body: <p>I've recently started working on a website and learning HTML/CCS/JS and came across and idea that I'm unsure of how to execute. Basically I want the floating text that currently moves around and bounces off the window borders to bounce off one another as well. I also figured that an array might be good to be able to set how many text objects I want to spawn. Here is my site for reference of how the text bounces around <a href="http://gmtrash.ga/" rel="nofollow noreferrer">http://gmtrash.ga/</a></p>
  
  <p>And here Is the JavaScript controlling the text objects and coloration</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setInterval(function() {
   myContainer = document.getElementById("colortext");
   displayRandomColor();
  
   function getRandomColor() {
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);
    hexR = r.toString(16);
    hexG = g.toString(16);
    hexB = b.toString(16);
    if (hexR.length == 1) {
     hexR = "0" + hexR;
    }
    if (hexG.length == 1) {
     hexG = "0" + hexG;
    }
    if (hexB.length == 1) {
     hexB = "0" + hexB;
    }
    hexColor = "#" + hexR + hexG + hexB;
    return hexColor.toUpperCase();
   }
  
   function displayRandomColor() {
    myRandomColor = getRandomColor();
   }
  }, 450);
  myRandomColor = 000000;
  var context;
  var x = Math.floor(Math.random() * window.outerWidth);
  var y = Math.floor(Math.random() * window.outerHeight);
  var x1 = Math.floor(Math.random() * window.outerWidth);
  var y1 = Math.floor(Math.random() * window.outerHeight);
  var x2 = Math.floor(Math.random() * window.outerWidth);
  var y2 = Math.floor(Math.random() * window.outerHeight);
  var x3 = Math.floor(Math.random() * window.outerWidth);
  var y3 = Math.floor(Math.random() * window.outerHeight);
  var x4 = Math.floor(Math.random() * window.outerWidth);
  var y4 = Math.floor(Math.random() * window.outerHeight);
  var x5 = Math.floor(Math.random() * window.outerWidth);
  var y5 = Math.floor(Math.random() * window.outerHeight);
  var x6 = Math.floor(Math.random() * window.outerWidth);
  var y6 = Math.floor(Math.random() * window.outerHeight);
  var x7 = Math.floor(Math.random() * window.outerWidth);
  var y7 = Math.floor(Math.random() * window.outerHeight);
  var x8 = Math.floor(Math.random() * window.outerWidth);
  var y8 = Math.floor(Math.random() * window.outerHeight);
  var x9 = Math.floor(Math.random() * window.outerWidth);
  var y9 = Math.floor(Math.random() * window.outerHeight);
  var dx = Math.floor(Math.random() * 15);
  var dy = Math.floor(Math.random() * 15);
  var dx1 = Math.floor(Math.random() * 15);
  var dy1 = Math.floor(Math.random() * 15);
  var dx2 = Math.floor(Math.random() * 15);
  var dy2 = Math.floor(Math.random() * 15);
  var dx3 = Math.floor(Math.random() * 15);
  var dy3 = Math.floor(Math.random() * 15);
  var dx4 = Math.floor(Math.random() * 15);
  var dy4 = Math.floor(Math.random() * 15);
  var dx5 = Math.floor(Math.random() * 15);
  var dy5 = Math.floor(Math.random() * 15);
  var dx6 = Math.floor(Math.random() * 15);
  var dy6 = Math.floor(Math.random() * 15);
  var dx7 = Math.floor(Math.random() * 15);
  var dy7 = Math.floor(Math.random() * 15);
  var dx8 = Math.floor(Math.random() * 15);
  var dy8 = Math.floor(Math.random() * 15);
  var dx9 = Math.floor(Math.random() * 15);
  var dy9 = Math.floor(Math.random() * 15);
  
  function init() {
   context = myCanvas.getContext('2d');
   setInterval(draw, 10);
  }
  
  function draw() {
   context.clearRect(0, 0, window.outerWidth, window.outerHeight);
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x, y);
   context.closePath();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x1, y1);
   context.closePath();
   context.fill();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x2, y2);
   context.closePath();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x3, y3);
   context.closePath();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x4, y4);
   context.closePath();
   context.fill();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x5, y5);
   context.closePath();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x6, y6);
   context.closePath();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x7, y7);
   context.closePath();
   context.fill();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x8, y8);
   context.closePath();
   context.beginPath();
   context.fillStyle = myRandomColor;
   context.font = "64px fixedsys";
   context.fillText("nerd", x9, y9);
   context.closePath();
   if (x &lt; 0 || x &gt; window.outerWidth) dx = -dx;
   if (y &lt; 0 || y &gt; window.outerHeight) dy = -dy;
   x += dx;
   y += dy;
   if (x1 &lt; 0 || x1 &gt; window.outerWidth) dx1 = -dx1;
   if (y1 &lt; 0 || y1 &gt; window.outerHeight) dy1 = -dy1;
   x1 += dx1;
   y1 += dy1;
   if (x2 &lt; 0 || x2 &gt; window.outerWidth) dx2 = -dx2;
   if (y2 &lt; 0 || y2 &gt; window.outerHeight) dy2 = -dy2;
   x2 += dx2;
   y2 += dy2;
   if (x3 &lt; 0 || x3 &gt; window.outerWidth) dx3 = -dx3;
   if (y3 &lt; 0 || y3 &gt; window.outerHeight) dy3 = -dy3;
   x3 += dx3;
   y3 += dy3;
   if (x4 &lt; 0 || x4 &gt; window.outerWidth) dx4 = -dx4;
   if (y4 &lt; 0 || y4 &gt; window.outerHeight) dy4 = -dy4;
   x4 += dx4;
   y4 += dy4;
   if (x5 &lt; 0 || x5 &gt; window.outerWidth) dx5 = -dx5;
   if (y5 &lt; 0 || y5 &gt; window.outerHeight) dy5 = -dy5;
   x5 += dx5;
   y5 += dy5;
   if (x6 &lt; 0 || x6 &gt; window.outerWidth) dx6 = -dx6;
   if (y6 &lt; 0 || y6 &gt; window.outerHeight) dy6 = -dy6;
   x6 += dx6;
   y6 += dy6;
   if (x7 &lt; 0 || x7 &gt; window.outerWidth) dx7 = -dx7;
   if (y7 &lt; 0 || y7 &gt; window.outerHeight) dy7 = -dy7;
   x7 += dx7;
   y7 += dy7;
   if (x8 &lt; 0 || x8 &gt; window.outerWidth) dx8 = -dx8;
   if (y8 &lt; 0 || y8 &gt; window.outerHeight) dy8 = -dy8;
   x8 += dx8;
   y8 += dy8;
   if (x9 &lt; 0 || x9 &gt; window.outerWidth) dx9 = -dx9;
   if (y9 &lt; 0 || y9 &gt; window.outerHeight) dy9 = -dy9;
   x9 += dx9;
   y9 += dy9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body onLoad="init();"&gt; &lt;canvas id="myCanvas" style='position: absolute; left: 0px; top: 0px;'&gt;
    &lt;/canvas&gt;
    &lt;div id="colortext"&gt;
    &lt;/div&gt;
    &lt;script src="scripts/suchcolor.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      (function() {
        var htmlCanvas = document.getElementById('myCanvas'),
          context = htmlCanvas.getContext('2d');
        initialize();
  
        function initialize() {
          window.addEventListener('resize', resizeCanvas, false);
          resizeCanvas();
        }
  
        function redraw() {
          context.strokeStyle = 'blue';
          context.lineWidth = '5';
          context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
        }
  
        function resizeCanvas() {
          htmlCanvas.width = window.innerWidth;
          htmlCanvas.height = window.innerHeight;
          redraw();
        }
      })();
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>now how would I go about this?</p>