|
|
| Line 1: |
Line 1: |
| <canvas id="c1" showsrc>
| |
| function drawer() {
| |
| x = window.innerWidth;
| |
| y = window.innerHeight;
| |
| var positionx = x / 2;
| |
| var positiony= y / 2;
| |
|
| |
|
| if( r < 5){
| |
| 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);
| |
| //console.log("r is ",r,"movement is",movement, "movement2 is", movement2);
| |
|
| |
| 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);
| |
| //console.log("i is",i);
| |
| setTimeout(drawer,10)
| |
| }
| |
|
| |
| function map_range(value, low1, high1, low2, high2) {
| |
| return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
| |
| }}
| |
| }
| |
| </canvas>
| |
XPUB & Lens-Based wiki