DIR : /home/kozerus/public_html/jkwii/js/jsdoit/light/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/light

$(function () {
  
  sizing();
  
  var hyperspace = new Hyperspace();
  hyperspace.draw();
                  
  $("#canv").fadeIn('fast');
  
  $(window).resize(function() {
    sizing();
    hyperspace.draw();
  });
});

function sizing(){
  $("#canv").attr({height:$("#wrapper").height()});
  $("#canv").attr({width:$("#wrapper").width()});
}

var Hyperspace = function(){
  
  var canvas = document.getElementById('canv');
  var ctx = canvas.getContext('2d');
  
  //background
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  var star = new Array(10);
  for( i=0; i<star.length; i++ ){
    star[i] = new Array(7);
    star[i][0] = Math.random()*canvas.width;  // x
    star[i][1] = Math.random()*canvas.height;  // y
    star[i][2] = Math.random()*canvas.width/3 + canvas.width/6;  // r
    star[i][3] = Math.random()*0.05 + 0.2;
    star[i][7] = true;
    var r = Math.random()*255;  // R
    var g = Math.random()*255;  // G
    var b = Math.random()*255;  // B
    r = Math.ceil(r);
    g = Math.ceil(g);
    b = Math.ceil(b);
    star[i][4] = r;    //r
    star[i][5] = g;    //g
    star[i][6] = b;    //b
  }
  
  //draw -------------------------------------
  var draw = function draw(){
    
    //reset
    ctx.globalCompositeOperation = "source-over";
    //ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.globalCompositeOperation = "lighter";
    
    //point
    for(i=0; i<star.length; i++){
      ctx.beginPath();
      var edgecolor1 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.93)";
      var edgecolor2 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.6)";
      var edgecolor3 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.1)";
      var edgecolor4 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0)";
      var gradblur = ctx.createRadialGradient(star[i][0], star[i][1], 0, star[i][0], star[i][1], star[i][2]);
      gradblur.addColorStop(0,edgecolor1);
      gradblur.addColorStop(0.4,edgecolor1);
      gradblur.addColorStop(0.7,edgecolor2);
      gradblur.addColorStop(0.9,edgecolor3);
      gradblur.addColorStop(1,edgecolor4);
      ctx.fillStyle = gradblur;
      ctx.arc(star[i][0], star[i][1], star[i][2], 0, Math.PI*2, false);
      ctx.fill();
      
      
    }
    
  };
    
  return ({'draw': draw});
  
};

//


koh5_pano



Your browser does not support the HTML5 canvas element.


Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer