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
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer