bacteria.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by candyapplecorn (http://jsbin.com/jiyuxa/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
    <title>Candy's Bacteria</title>
    <style>
      body{
        background: black;
      }
      #myCanvas{
        margin-left: 20%;
        margin-right: 20%;
      }
    </style>

<style id="jsbin-css">

</style>
</head>
  <body>
    <div id="container">
      <canvas id="myCanvas"><script>var c = document.getElementById("myCanvas");
        var ctx = c.getContext('2d');
        // Adjust size of canvas and add resizer
        (function(){ c.width = window.innerWidth, c.height = window.innerHeight; if (c.width > c.height) c.width = c.height; else c.height = c.width; }());
        window.addEventListener('resize', function(){ c.width = window.innerWidth, c.height = window.innerHeight; if (c.width > c.height) c.width = c.height; else c.height = c.width; }, true);

        // functions rolls a dice with "sides" many sides.
        function d(sides){ return 1 + Math.floor(Math.random() * sides); }

        var length = 22, wall = 9999, bacteria = 1, usedbacteria = 32 * 5, fancytable = new Array(Math.pow(length, 2));

        for(counter = 0; counter < fancytable.length; counter++){
          switch(true){
            case (counter - length < 0):
            case (counter + length > Math.pow(length, 2)):
            case (counter % length == 0):
            case ((counter + 1) % length == 0):
              fancytable[counter] = wall;
              break;
            default:
              fancytable[counter] = 0;
          }
        }
        while(true){ var index = d(fancytable.length) - 1; if(fancytable[index] != 0) continue; fancytable[index] = bacteria; break; }

        console.clear();
        function myObject(){ this.a = 0; }
        counter23 = new myObject();
        function display(){
          var string = "\n";
          for(var counter = 0; counter < fancytable.length; counter++){
            string += '' + fancytable[counter] + '';
            if ((counter + 1) % length == 0) string += "\n";
          }
          console.log(string);
        }
        //display();

        function spread(index){
          if(fancytable[index] == bacteria){
            if((index - length > 0) && !(fancytable[index - length] == wall) && !(fancytable[index - length] == bacteria) && !(fancytable[index - length] > bacteria && fancytable[index - length] < usedbacteria)){
              if(d(6) == 6){
                fancytable[index - length] = bacteria;
                fancytable[index]++;
              }
            }
            if ((index - 1 > 0) && !(fancytable[index - 1] == wall && !(fancytable[index - 1] == bacteria) && !(fancytable[index - 1] > bacteria && fancytable[index - 1] < usedbacteria))){
              if(d(6) == 6){
                fancytable[index - 1] = bacteria;
                fancytable[index]++;
              }
            }
            if ((1 + index < fancytable.length) && !(fancytable[index + 1] == wall && !(fancytable[index + 1] == bacteria) && !(fancytable[index + 1] > bacteria && fancytable[index + 1] < usedbacteria))){
              if(d(6) == 6){
                fancytable[index + 1] = bacteria;
                fancytable[index]++;
              }
            }
            if((length + index < fancytable.length) && !(fancytable[index + length] == wall && !(fancytable[index + length] == bacteria) && !(fancytable[index + length] > bacteria && fancytable[index + length] < usedbacteria))){
              if(d(6) == 6){
                fancytable[index + length] = bacteria;
                fancytable[index]++;
              }
            }
          }
        }

        setInterval(
          function(){
            ctx.fillStyle = "lightgray";
            ctx.fillRect(0, 0, c.width, c.height);
            for(var row = 0; row < length; row++){
              for(var column = 0; column < length; column++){
                if (fancytable[row * length + column] > bacteria && fancytable[row * length + column] < usedbacteria) fancytable[row * length + column]++;
                else if (fancytable[row * length + column] == usedbacteria) fancytable[row * length + column] = 0;
                spread(row * length + column);
                var color = Math.floor(fancytable[row * length + column]/usedbacteria * 255);
                ctx.fillStyle = fancytable[row * length + column] == wall ? "black" : "gray";
                ctx.fillStyle = fancytable[row * length + column] == bacteria ? "rgb(0,255,0)" : ctx.fillStyle;
                ctx.fillStyle = fancytable[row * length + column] <= usedbacteria && fancytable[row * length + column] > bacteria ? 'rgb(' + Math.floor(color / 1.5) + ', ' + color + ', ' + Math.floor(color / 1.5) + ')' : ctx.fillStyle;
                ctx.beginPath();
                ctx.rect(column * (c.width / length), row * (c.height / length), c.width / length, c.height / length);
                ctx.stroke();

                ctx.fillRect(column * (c.width / length), row * (c.height / length), c.width / length, c.height / length);
              }
            }
            //if((counter23.a++) == 10) display();
          }, 1000/32);





        </script></canvas>
    </div>
  <script>
// BACTERIA
</script>
<script src="http://static.jsbin.com/js/render/edit.js?3.22.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script src="http://static.jsbin.com/js/vendor/eventsource.js?3.22.2"></script>
<script src="http://static.jsbin.com/js/spike.js?3.22.2"></script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'jsbin.com');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
</html>