Fire JS Bin - NormalMapping

$(document).ready(function() {
  doStats();
    
  // Disable Currently selected page
  //$(".Selected").click(function(){return false;});

// Rotate around the y plane (from front to around the back in a full cycle)
    // Based on mouse location
    var ra = (mouse.x * 2 * 360 + 180) * Math.PI / 180
    light.x = Math.sin(ra);
    light.y = 0;
    light.z = Math.cos(ra);
    
    return light;
  
    ray.start.x = mouse.x - 0.5;
    ray.start.y = mouse.y - 0.5;
    var res = normalizer.sphereIntersect(sphere, ray);

if (res.hit == false) {
      // If it didn't hit the sphere, just make it a vector that sets everything to black.
      light = {x: 0, y: 0, z: 1};
      if (mouseDownRight) light.z = -light.z;
    } else {
      light = {x: -res.x, y: -res.y, z: -res.z}
      light = normalizer.normalize(light);
    }
    return light;
  }

function mouseToLightCircle(){
    // Clamp mouse to 2D circle if it's outside
    var vx = mouse.x - 0.5, vy = mouse.y - 0.5;
    var len = Math.sqrt(vx * vx + vy * vy);
    var returnVal = {adjusted: false};
    
    if (len > 0.5 == true){
      vx *= 0.49 / len;
      vy *= 0.49 / len;
      returnVal.adjusted = true;
    }

// Hack the mouse a bit if it's in the positive, beth's picture doesn't quite light properly
    // from directly below (Likely due to not really being able to put a light below her with
    // her head resting on the a desk.
    var adjustedY = vy, adjustScalar = 0.80;
    if (vy > 0) adjustedY *= adjustScalar;
    
    ray.start.x = vx;
    ray.start.y = adjustedY;
    
    var res = normalizer.sphereIntersect(sphere, ray);
    var light;
    
    if (res.hit == false){
      // If it didn't hit the sphere, just make it a vector that sets everything to black.
      light = {x: 0, y: 0, z: 1};
      if(mouseDownRight) light.z = -light.z;
      returnVal.l = light;
      returnVal.success = false;
      return returnVal;
    } else {
      light = {x: -res.x, y: -res.y, z: -res.z}

lightPos.x = (vx+0.5)*app.canvas().width;
      lightPos.y = (vy+0.5)*app.canvas().height;
      lightPos.z = res.z;
      
      light = normalizer.normalize(light);
      returnVal.l = light;
      returnVal.success = true;
      return returnVal;
    }
  }

function floatToColorChannel(f){
    var ch;
    if (f >= 0) ch = 128 + f * 127;
    else ch = 128 - f * 127;
    return Math.floor(ch);
  }

var lastDraw = (new Date().getTime() - 1000),
    lightAngle = 0,
    lightSpeed = 100, // Angle change per second
    light = {x: 0, y: 0, z: -1};

function draw() {
    var d = new Date(), t = d.getTime(), timeDelta = t - lastDraw;
    if (timeDelta <= (1000 / 60)) return;
      
    // Figure out light color
    switch(0) {
      case 0:
        lightColors = [255, 255, 255];  
        break;
      case 1:
        lightColors = [
          floatToColorChannel(light.x),
          floatToColorChannel(light.y),
          floatToColorChannel(light.z)
        ];
        break;
      case 2:
        lightColors = [
          Math.floor(app.randomRange(0, 255)),
          Math.floor(app.randomRange(0, 255)),
          Math.floor(app.randomRange(0, 255))
        ];
        break;
    }

// Update light's angle
    lightAngle += lightSpeed * timeDelta / 1000;

// Create list of lights and then pass it to the renderer
    var options={
      ambient: {r: 0, g: 0, b: 0},
      lights: [{
        dir: {x: light.x, y: light.y, z: light.z},
        color: {r: 255, g: 255, b: 255}
      }]
    };

if (mode == 'sphere') {
      options.lights.push({
        dir: {x: Math.sin(lightAngle * Math.PI / 180), y: 0, z: Math.cos(lightAngle * Math.PI / 180)},
        color: {r: 0, g: 255, b: 0}
      });
      options.lights.push({
        dir: {x: 0, y: Math.sin((lightAngle * 1.8 + 62) * Math.PI / 180), z: Math.cos((lightAngle * 1.8 + 62) * Math.PI / 180)},
        color: {r: 255, g: 0, b: 0}
      });
    }

normalizer.light(cvs, options);

if (glow) normalizer.glow(cvs,options);

// Draw light positions
    if (mode == 'me') {
      for(var l = 0; l < options.lights.length; l++) {
        var x = (-options.lights[l].dir.x * cvs.width / 2) + cvs.width / 2,
            y = (-options.lights[l].dir.y * cvs.height / 2) + cvs.height / 2;
      }
    } else if (mode.match(/beth|cereal/)) {  
      for(var l = 0; l < options.lights.length; l++) {
        var x = Math.floor((-options.lights[l].dir.x * cvs.width / 2) + cvs.width / 2),
            y = Math.floor((-options.lights[l].dir.y * cvs.height / 2) + cvs.height / 2),
            radius = Math.floor(Math.max((5 + 8) * -options.lights[l].dir.z, 0.0)),
            color = app.rgba(options.lights[l].color.r, options.lights[l].color.g, options.lights[l].color.b, 1);

mode == 'cereal' && app.circle(x,y,radius,color);
      }
    } else if (mode == 'sphere') {
      for(var l = 0; l < options.lights.length; l++) {
        var x = (-options.lights[l].dir.x * cvs.width / 2) + cvs.width / 2,
            y = (-options.lights[l].dir.y * cvs.height / 2) + cvs.height / 2;

app.circle(Math.floor(x), Math.floor(y), Math.max((5 + 8) * -options.lights[l].dir.z, 0.0), app.rgba(options.lights[l].color.r, options.lights[l].color.g, options.lights[l].color.b, 1));
      }           
    }

// Calculate last draw after it all in case our frame-rate limiter duration is smaller than our elapsed rendering time.
    lastDraw = d.getTime();
  }
  
  var mouseDownLeft = false, mouseDownRight = false, whichImage = 0, glow = false;
  $('#targetCanvas').live('mousedown', function(e) {
      if (e.which == 1) {
        mouseDownLeft = true;
        return true;
      } else if (e.which == 3) {
        mouseDownRight = true;
        return true;
      }
    }).mouseup(function(e) {
      if(e.which == 1) {
        mouseDownLeft = false;
        return true;
      } else if (e.which==3) {
        mouseDownRight = false;
        return true;
      }
    }).live('mousemove', function(e) {
      mouse = rPosition(this.id, e.pageX, e.pageY);
      mouse.x /= normalizer.getImage('colorsImage').width * canvasScalar;
      mouse.y /= normalizer.getImage('colorsImage').height * canvasScalar;
      
      if (mode == 'me') light = mouseToLight();
      else if (mode.match(/beth|cereal|sphere/)) {  
        var res = mouseToLightCircle();
        if (res.success == true) light = res.l;
      }
    });

$(document).keypress(function(e){
    if (e.which == 32) glow = !glow;
  });

normalizer.init(settings);

var items = $('.Picker > div');
  items.click(function(event) {
    items.removeClass('Selected');
    var selected = $(event.target);
    if (event.target.tagName != 'DIV') selected = $(selected.parents('div').get(0));
    mode = selected.addClass('Selected').attr('id');

if (mode == 'cereal') glow = true;
    if (mode == 'sphere') {
      $('#desc').html("");
      alphaMode = null;
      canvasScalar = 1.5;
    } else {
      alphaMode = "alpha";
      canvasScalar = 2.0;
    }

$('#desc').html({
      'me': '<strong>Move the mouse left and right</strong>.',
      'beth': '<strong>Move the mouse around to change the lighting.</strong>',
      'cereal': '<strong>Glow Effect</strong>. Press <strong>Space Bar</strong> to <strong>toggle effect</strong>.',
      'sphere': '<strong>Multiple Colored Lights.</strong>'
    }[mode]);

normalizer.init($.extend(settings, {
      normals: {
        normalsImage: "/assets/normalmapping/normal_" + mode + ".png",
        colorsImage:  "/assets/normalmapping/front_" + mode + ".png"
      }
    }));
    return false;
  });
});

<html>
<head>
  <title>Me Normal Mapped - HTML5 Canvas Element - Francois Laberge - Endergen</title>

</head>
<body>
  <div class="Nav"><img src="/assets/normalmapping/home.png"/><a href="/">Endergen.com</a></div>
  <div class="Centerer">
    <div style="clear:both;"></div>
    <div class="Explanation_Container">
      <div class="Explanation">
        <p><strong>Normal Mapped Photos</strong> using <strong>HTML5 Canvas</strong>.</p>
        <p class="Small">Runs <strong>fastest</strong> in <strong>Google Chrome</strong>.</p>
      </div>
    </div>
    <div class="Picker">
      <div class="Selected" id="me"><a href="../me/"><img src="/assets/normalmapping/me.png"></a></div>
      <div id="beth"><a href="#"><img src="/assets/normalmapping/beth.png"></a></div>
      <div id="cereal"><a href="#"><img src="/assets/normalmapping/cereal.png"></a></div>
      <div id="sphere"><a href="#"><img src="/assets/normalmapping/new_earth.png"></a></div>
    </div>

<div  class="Explanation_Container">
      <div class="Explanation" style="margin: 5px 0 0 84px; 0 0; width: 350px; padding:  3px 30px 3px 30px ;">
        <p class="Small" id="desc"><strong>Move the mouse left and right</strong>.</p>
      </div>
    </div>

</div>
  <div class="Centerer">
    <div style="clear:both; margin-bottom: 0px; padding-bottom: 5px;"></div>
    <div class="Content">
      <canvas id="targetCanvas" width="622" height="315"></canvas>
    </div>
  </div>

</body>
</html>

.Nav{
  background: white;
  -moz-box-shadow: 0px 3px 3px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  box-shadow: 3px 3px 3px #000;
  padding: 2px 10px;
}
.Nav a{
  font-family: Arial;
  font-weight: bold;
  margin: 0;
  
  
  color: black;
  text-decoration: none;
}
.Nav a:hover{
  text-decoration: underline;
}
.Nav img{
  padding-right:6px;
  position:relative;
  top:2px;
}

body,html{
  padding: 0;
  margin: 0;
  background: #000;
  font-family: Arial;
}
.Centerer{
  text-align: center;
}
.Content{
  margin: 0 auto;

}
.Content img{
  border: 0;
  padding:0;
  margin:0;
}
canvas{
  border:none;
  cursor: crosshair;
  /*width: 512px;
  height: 224px;*/
}
.Picker{
  width: 580px;
  margin: 0 auto;
}
#beth,#me,#sphere,#cereal{
  width: 128px;
  height: 128px;  
}
#beth,#me,#sphere,.Explanation,#cereal{
  float: left;
  margin: 10px 5px 5px 5px;
  background: #3f3f3f;

-moz-box-shadow: 0 5px 10px #000000;
  -webkit-box-shadow: 0 5px 10px #000000;
  box-shadow: 0 5px 10px #000000;
  padding: 3px;
}

#beth.Selected,#sphere.Selected,#me.Selected,#cereal.Selected{
  background: white;      
}
#beth.Selected a,#sphere.Selected a,#cereal.Selected a,#me.Selected a{
  cursor: default;
}
#beth:hover,#sphere:hover,#cereal:hover,#me:hover{
  background: #afafaf;
}
#beth.Selected:hover,#sphere.Selected:hover,#me.Selected:hover,#cereal.Selected:hover{
  background: white;
}
#beth:hover,#sphere:hover,#cereal:hover,#me:hover{
  background: #afafaf;
}

.Explanation_Container{
  margin: 10px auto 0 auto;
  width: 590px;
  text-align: center;
}
.Explanation{
  margin: 0 auto;
  text-align:center;
  width:570px;
  margin: 0;
  font-family: Arial;
  font-size: 14px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 10px 10px;
  background: white;
}
.Explanation h2{
  padding: 0 0px;
  margin: 0px 0px;
}
.Explanation p{
  padding: 0 0 5px 0;
  margin: 0;
}
.Explanation p.Small{
  font-size: 85%;
  color: #5f5f5f;
  text-align: center;
  padding: 0px;
  margin: 0
}
.Explanation p.Small strong{
  color: #2f2f2f;
}
.Picker img{
  border: none;
  width: 128px;
  height: 128px;  
}