Now for another quick CODEF tutorial, this time on how to make a Starfield on your canvas.
What I will do is split this into FOUR sections, which will be added one at a time.
Part 1 - A 2D starfield
Part 2 - A 3D starfield
Part 3 - A 2D bob starfield
Part 4 - A 3D bob starfield
PART ONE
A 2D starfield is quite an easy thing to create using CODEF. To make it even easier, there is even a simple library specifically for this purpose.
Add the following line into your SCRIPT code section, after the main CODEF_CORE.JS call.
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_starfield.js"></script>
That will bring the script into play, and next we start to define the starfield we want, give it properties, and finally draw it onto your canvas.
After you have defined your canvas in your case, you need to define the starfield.
var mystarfield;
Now we define the parameters of the starfield.
var mystarsparams=[
{nb:50, speedy:0, speedx:2.0, color:'#FFFFFF', size:2},
{nb:50, speedy:0, speedx:1.2, color:'#444444', size:1},
];
Let me explain how these parameters work...
The key commands here are:
{nb:W, speedy:X, speedx:Y, color:'#FFFFFF', size:Z},
...where W is the number of stars in this command, X is the speed in pixels per refresh in the Y plane (Vertical), and Y is the speed in pixels per refresh in the X plane (Horizontal plane), the COLOR is the RGB value required, in HEX (see previous pages for more info), and Z is the size in pixels.
In our examples, I have two sets of stars defined, one set of 50 stars moving left to right at 2 px per refresh, WHITE (#FFFFFF) and 2 pixels by 2 pixels in size. The other set of 50 stars moving left to right at 1.2 px per refresh, GREY (#444444) and 1 pixel by 1 pixel in size.
(NOTE: To move right to left, set tge Y value at a NEGATIVE value).
Next, in the INIT section, we have set command to these parameters.
mystarfield=new starfield2D_dot(mycanvas,mystarsparams);
This defines a 2D starfield, applies it to the canvas of choice (in this case, "mycanavs"), using the parameters we defined above.
Finally, we call the command to draw the starfield on the canvas.
mystarfield.draw();
You can see the entire script and HTML below, and see it in action here.
<!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_starfield.js"></script>
<script>
var mycanvas;
var mystarfield;
var mystarsparams=[
{nb:50, speedy:0, speedx:2.0, color:'#FFFFFF', size:2},
{nb:50, speedy:0, speedx:1.8, color:'#888888', size:2},
{nb:50, speedy:0, speedx:1.2, color:'#444444', size:1},
];
function init(){
mycanvas=new canvas(640,480,"main");
mystarfield=new starfield2D_dot(mycanvas,mystarsparams);
go();
}
function go(){
mycanvas.fill('#000000');
mystarfield.draw();
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