Once you understand the basics, its really quite easy to achieve.
What I have done is combine the bouncing movement effect, with the gradient effect.
Now, the details of how this is acheived!
As before, firstly we need to call the gradient script, so this line needs to be added BELOW the call for "CODEF_CORE.JS".<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_gradient.js"></script>
Next we need to define some variables.
We will make a new (hidden) canvas called 'raster', and create a gradient background onto it, and then draw multiple copies of it onto our "main" canvas ('mycanvas').
| var raster;
var mygrad; var mygradcolor=[ {color: 'rgb(0,0,0)', offset:0}, {color: 'rgb(0,0,255)', offset:0.5}, {color: 'rgb(0,0,0)', offset:1} ]; var sinY1=0; var sinY2=0.1; var sinY3=0.2; var sinY4=0.3; var sinY5=0.4; | |
As before, we need also to complete the setting up of the gradient effect, and applying it to our 'raster' canvas. NOTE: As we will NOT be clearing the 'raster' canvas on each loop, we can draw the raster on ir in the INIT section of the code, as it will not be changing again.
mygrad=new grad(raster,mygradcolor); mygrad.drawH();
You can see we are drawing the gradient background to the canvas we have called 'raster', and then drawing it Horizontally (with the mygrad.drawH(); ) command.
What we will now do is using the same "bounce" effect as used before, draw FIVE copies of this gradient canvas onto our main canvas (so we can see it!) - but each with a slightly different Y position, which will give the illusion that each is slightly behind the previous one, and to further enhance that effect, we will made a fade on each copy, so it looks as though they are further away!
Finally in the GO section of the code, we put all the commands together to make it work... sinY1+=0.02; sinY2+=0.02;
sinY3+=0.02;
sinY4+=0.02;
sinY5+=0.02;
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY1)*300),0.2,0); raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY2)*300),0.4,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY3)*300),0.6,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY4)*300),0.8,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY5)*300),1,0);
In these commands we are increasing the movement by a factor of 0.2 for each of our five objects (each object is a copy of the 'raster' canvas). If we increase this value, the bounce will be faster, and obviously a smaller value will have a slower bounce effect.
The raster.draw commands, are drawing a copy of the 'raster' canvas object onto our "main" canvas, called 'mycanvas'. As we have previously defined the width of the canvas as the same as the main canvas, we draw it a X position of 0 (zero), so that if fills the width, and then the Y position is calculated using the Math.sin calculation based upon each individual position value sinYx - each copy has its own slightly different value, to simulate a series of bouncing rasters behind each other.
The final part is to make each one successively more "solid". This is done by fading the first to a factor of 0.2, and then drawing the next on top of it at a factor of 0.4 opacity and so on, until the topmost object is no opaque at all (factor 1).
Below is the whole code for the effect, which can be seen by clicking here.
Have a play around with some of the values, and see what you can do with it! Enjoy!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_gradient.js"></script>
<script>
var mycanvas;
var raster;
var mygrad;
var mygradcolor=[
{color: 'rgb(0,0,0)' , offset:0},
{color: 'rgb(0,0,255)', offset:0.5},
{color: 'rgb(0,0,0)' , offset:1}
];
var sinY1=0;
var sinY2=0.1;
var sinY3=0.2;
var sinY4=0.3;
var sinY5=0.4;
function init(){
mycanvas=new canvas(640,480,"main");
raster=new canvas(640,48);
mygrad=new grad(raster,mygradcolor);
mygrad.drawH();
go();
}
function go(){
mycanvas.fill('#000000');
sinY1+=0.02;
sinY2+=0.02;
sinY3+=0.02;
sinY4+=0.02;
sinY5+=0.02;
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY1)*300),0.2,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY2)*300),0.4,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY3)*300),0.6,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY4)*300),0.8,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY5)*300),1,0);
requestAnimFrame( go );
}
</script>
</head>
<body onLoad="init();">
<body bgcolor="#FFFFFF">
<br>
<center>
<div id="main"></div><br><br>
<a href="javascript:window.location='view-source:'+window.location">View Source</a>
</center>
</body>
</html>
No comments:
Post a Comment