User:Joak/canvas1: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
<canvas id="c1" showsrc>  
<canvas id="c1" showsrc>  
something
function draw() {
  c = document.getElementById("c1");
  p = c.getContext('2d');
  drawer();
}
function drawer() {
function drawer() {
     x = window.innerWidth;
    r = 0;
     y = window.innerHeight;
    r = 3;
     x = 250;
     y = 250;
     var positionx = x / 2;
     var positionx = x / 2;
     var positiony= y / 2;
     var positiony= y / 2;


     if( r < 5){
     if( r < 3){
if(r == 3){
if(r == 3){
upordown = -0.02;
upordown = -0.02;
Line 20: Line 30:
movement = 400*Math.sin(r);
movement = 400*Math.sin(r);
movement2 =400*Math.sin(r2);
movement2 =400*Math.sin(r2);
//console.log("r is ",r,"movement is",movement, "movement2 is", movement2);
     var number1 = p.createRadialGradient(positionx,positiony,movement2,positionx,positiony,movement);
     var number1 = p.createRadialGradient(positionx,positiony,movement2,positionx,positiony,movement);
Line 29: Line 38:
   p.clearRect(0,0,c.width,c.height);
   p.clearRect(0,0,c.width,c.height);
   p.fillRect(0,0,x,y);
   p.fillRect(0,0,x,y);
    //console.log("i is",i);
     setTimeout(drawer,10)
     setTimeout(drawer,10)
}
}
Line 36: Line 44:
     return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
     return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
}
</canvas>
</canvas>

Latest revision as of 13:22, 1 October 2012

<canvas id="c1" showsrc> something

function draw() {

 c = document.getElementById("c1");
 p = c.getContext('2d');
 drawer();

}

function drawer() {

   r = 0;
   r = 3;
   x = 250;
   y = 250;
   var positionx = x / 2;
   var positiony= y / 2;
   if( r < 3){

if(r == 3){ upordown = -0.02; } if(r == 0){ upordown = +0.02; } r=r+upordown; } r = Math.max(r, 0); r = Math.min(r, 3); r2 = map_range(r,0,3,3,0); movement = 400*Math.sin(r); movement2 =400*Math.sin(r2);

   var number1 = p.createRadialGradient(positionx,positiony,movement2,positionx,positiony,movement);
	number1.addColorStop(0, '#000000');
 	number1.addColorStop(1, '#FFFFFF');
 	
 	p.fillStyle = number1;
 	p.clearRect(0,0,c.width,c.height);
 	p.fillRect(0,0,x,y);
   setTimeout(drawer,10)

}

function map_range(value, low1, high1, low2, high2) {

   return low2 + (high2 - low2) * (value - low1) / (high1 - low1);

}

</canvas>