The first part of any CODEF screen is to make a canvas - this is where your creation will be seen within the page of the browser.
If you look at the TEMPLATE.HTML example we created in the previous section, you will see a section marked...
<script>
// ENTER YOUR CODE HERE....
</script>
BETWEEN these markers is where we create our CODEF code.
To make a canvas we need to do a couple of things, we need to define a canvas, specify the DIV (Document Division) we want to apply the canvas to (otherwise it will not be visible), and what size it will be in pixels.
So, in order to do this, we first define our variable.
var mycanvas;
This defines a VARiable, in this case, one called 'mycanvas'. I havn't assigned any value to it yet, but purely made it available for the code.
As discussed within the previous section, most CODEF pages are broken up into three mains sections.
1) Defining variables, and loading/storing data.
2) The "init" function, which initiates the requirements for the screen.
3) The "go" function, which is the main screen code itself.
After defining our variable (above), we now need to create the "init" section.
function init(){
go();
}
This is the basic requirement, but we also have to add our command(s) to create our canvas.
So we add this command into the function:
mycanvas=new canvas(640,480,"main");
What this does is assign our variable which we defined earlier ("mycanvas") as a NEW canvas, followed by the WIDTH and HEIGHT (in pixels) of that canvas.
If the canvas is to be hidden (for example to calculate an effect on it before displaying on the main screen), then that's the command - however for the main screen, we need to assign the canvas to a DIV (document division) - which as we defined earlier is called "main" in our case. So, we add the link to the DIV name at the end.
So adding this all together, we end up with the following...
function init(){
mycanvas=new canvas(640,480,"main");
go();
}
Here we created a new canvas, which is 640 pixels wide, by 480 high, and which is linked to the "main" DIV element in our canvas.
Next we need to add our "go" function for the main part of the screen to actually do something!
function go(){
requestAnimFrame( go );
}
This command performs this for us. Any commands between the { and the } will be looped, approx. 60 times every 1000ms - although the exact speed will vary depending on individual machine and browser performance.
In order to show our newly created canvas, we add the following commands:
mycanvas.fill('#FF0000');
This basically applies a "fill" command to the canvas. In this case, we are applying a HEX colour fill pattern to the canvas - which here will fill the canvas with RED.
Obviously any colour can be used here - although this command EXPECTS HEX!
(This is useful website for converting RGB colours into HEX).
This is great to simply show us a RED canvas, but for more complex screens, a different command might be required. Rather than applying a "fill" command, we could use a "clear" command, which does exactly what it says on the tin, and simply clears the screen.
The is more useful if you are moving an object across the screen, this means the screen is cleared each refresh before the move takes place - which means the object will appear to move smoothly across the screen, if we did not use a "fill" or "clear" command, the image we were moving would "smear" across the screen, because the image on the previous frame has not been cleared, so each refresh the new image would be drawn in top of the current view.
If we put all of this together, we get the following:
function go(){
mycanvas.fill('#FF0000');
requestAnimFrame( go );
}
These elements would fit on the page like this...
<!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>
var mycanvas;
function init(){
mycanvas=new canvas(640,480,"main");
go();
}
function go(){
mycanvas.fill('#FF0000');
requestAnimFrame( go );
}
</script>
</head>
<body onLoad="init();">
<body bgcolor="#000000">
<br>
<center>
<div id="main"></div><br>
</center>
</body>
</html>
That's it - you've just created your first CODEF screen.
You can see what it looks like online, by clicking here.
No comments:
Post a Comment