Microbial AnalysisAT WARP SPEED

Detecting multiple pathogens simultaneously without enzymes, amplification or reagents

INVESTMENT IN DISCOVERY

Featured On

<canvas id="canvas"></canvas>
<div class="controls"><label class="warp_lines" for="line">Lines</label>
<input class="warp_lines" type="checkbox" name="line" id="line" checked="checked" />
<label for="warp">Initiate Warp Speed</label>
<input type="checkbox" name="warp" id="warp" /></div>
<style>
</style>
<script>
(function () {
  'use strict';

  var cvs,ctx,lineCheck,warpCheck;
  var line = true;
  var warp = false;
  
  function init () {
    cvs = document.getElementById("canvas");
    ctx = cvs.getContext("2d");
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;

    lineCheck = document.getElementById("line");
    warpCheck = document.getElementById("warp");

    
    
    var galaxy = new starField(1000);
    window.requestAnimationFrame(galaxy.render.bind(galaxy));

    var toLine = function () {
      line = lineCheck.checked;
    }

    var toWarp = function () {
      warp = warpCheck.checked;
    }

    lineCheck.addEventListener("change",toLine);
    warpCheck.addEventListener("change",toWarp);
  }
  
  function  starField (num) {

    this.stars = [];
    this.setSpeed = 1;
    this.speed = this.setSpeed;
    this.t = 0;

    for (var i = 0; i < num; i++) {
      var temp = {
        x:Math.random()*cvs.width-cvs.width/2,
        y:Math.random()*cvs.height-cvs.height/2,
        z:Math.random()*1000,
        d:Math.random()*2+4};
      this.stars.push(temp);
    }

    this.draw = function () {
      //ctx.fillStyle = "rgba(0,0,0,0.5)"
      ctx.clearRect(0, 0, cvs.width, cvs.height);
      for (var i = 0; i < this.stars.length; i++) {
        var zpos = 1000/this.stars[i].z;
        var xpos = (this.stars[i].x * zpos) + cvs.width/2;
        var ypos = (this.stars[i].y * zpos) + cvs.height/2;
        var dia = (1 - this.stars[i].z/1000)*this.stars[i].d;

        if (line) {
          var oldz = 1000/(this.stars[i].z+this.speed);
          if (oldz < 1) oldz = 1;
          var oldx = (this.stars[i].x * oldz) + cvs.width/2;
          var oldy = (this.stars[i].y * oldz) + cvs.height/2;
          ctx.beginPath();
          ctx.strokeStyle = "#fff";
          ctx.lineWidth = dia;
          //ctx.lineCap = "round";
          ctx.moveTo(oldx,oldy);
          ctx.lineTo(xpos,ypos);
          ctx.closePath();
          ctx.stroke();

        } else {
          if (xpos > -dia*2.5 && xpos < cvs.width+dia*2.5 && ypos > -dia*2.5 && ypos < cvs.height+dia*2.5){
            if ((1 - this.stars[i].z/1000) > .5) {
                ctx.beginPath();
            var glow = ctx.createRadialGradient(xpos,ypos,0,xpos,ypos,dia*10);
            glow.addColorStop(0, "rgba(1,171,236,"+(((1 - this.stars[i].z/1000)-.5)*.2) || 0+")");
            glow.addColorStop(1, "rgba(200,220,255,0)");
            ctx.fillStyle = glow;
            ctx.arc(xpos,ypos,dia*10,0,2*Math.PI);
            ctx.closePath();
            ctx.fill();
                }
          
            ctx.beginPath();
            ctx.fillStyle = "#fff";
            ctx.arc(xpos,ypos,dia/2,0,2*Math.PI);
            ctx.closePath();
            ctx.fill();
          }
        }
      }
    }

    this.update = function () {
      if (warp) {
        this.speed = this.setSpeed*12;
      } else {
        this.speed = this.setSpeed;
      }
      for (var i = 0; i < this.stars.length; i++) {
        this.stars[i].z -= this.speed;
        //this.stars[i].y = 20;
        if (this.stars[i].z <= 0) {
          this.stars[i].z = 1000;
          this.stars[i].x = Math.random()*cvs.width-cvs.width/2;
          this.stars[i].y = Math.random()*cvs.height-cvs.height/2;
        }
      }
      this.draw();
    }
    this.render = function () {
      window.requestAnimationFrame (this.render.bind(this));
      this.update();
    }
  }

  function ease(a,b,t) {
    return a + t*(b-a);
  }

  document.addEventListener('DOMContentLoaded',init,false);
})();   
</script>