How to get started with TinyC5
Introduction
Welcome to this small tutorial about how to get started with TinyC5 development. This tutorial assumes that you ...:
- have basic coding knowledge
- have heard about TinyPTC/Pixeltoaster and/or framebuffer stuff
- have some basic knowledge about HTML and javascript
Before we start, just another short list of what this tutorial is
not/not about:
- complete
- bug-free ;-)
- advanced
- producing great graphic effects
All files of this tutorial are attached.
Step 01
Let's start off with the most minimal example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/TinyC5-0.6.js"></script>
<script type="text/javascript">
function main() {
new TinyC5().start();
}
</script>
</head>
<body onload="main()">
</body>
</html>
Assuming that you know the basic structure of a standrad HTML page, let's focus on the important bits, actually only 2 lines.
With the followin line we include the TinyC5 library code:
<script type="text/javascript" src="js/TinyC5-0.6.js"></script>
Within the main-function, which is called after the page is successfully loaded, we create a new instance of TinyC5 and immediately call the start method.
new TinyC5().start();
ResultWe see a black square on the screen with the dimensions of 320x200 pixels, which are the default values. The black square is actually our drawing buffer, ie.
canvas which is appended by default to the body element.
Step 02
In the second step we restructure our code. This will show us the different parts of how to setup a TinyC5 instnace. The important bits are as follows. We replace the code of the main funciton with the following lines:
var tinyC5;
tinyC5 = new TinyC5();
tinyC5.init();
tinyC5.update = function() {};
tinyC5.start();
Line 1: Declare a variable that will refer to our TinyC5 instance.
Line 2: Assign to our tinyC5 varibale a new instance of TinyC5.
Line 3: Initialize out TinyC5 instance.
Line 4: Overwrite the update property of our instance with a new function, which we leave is empty for now.
Line 5: Start the animation of our tinyC5 instance.
ResultThe outcome is the same as in Step 01. But this time we have created a detailed setup of our TinyC5 instance we can build on in future steps.
Step 03
In this step we beautify our application while adding some more CSS/HTML to our code. In addition, we define some arguments which we pass to the TinyC5.init() function to overwrite certain default values.
New CSS/HTML code. No magic in here really.
Include some styles...
<link rel="stylesheet" type="text/css" href="css/styles.css" />
Add some more HTML to our body...
<div id="container">
<div id="tinyC5_container">
</div>
</div>
<div id="footer">
Tutorial | Created with <a href="http://www.dbfinteractive.com/forum/index.php?topic=5397.0">TinyC5</a>
</div>
Then we define a new variable that we pass as argumennt to TinyC5.init(). The argument is a simple proterty object which values will configure the TinyC5 instance.
Lines we modified:
var tinyC5, args;
tinyC5 = new TinyC5();
args = {
width: 160,
height: 100,
scale: 2,
title: 'Tutorial | TinyC5',
bgColor: tinyC5.color( 155, 255, 100, 255 ),
container: document.getElementById( 'tinyC5_container' )
};
tinyC5.init( args );
Line 01: Added delcaration for args.
Line 03: Assigned property-object to args. Most properties should be pretty self-explanary.
Line 06: The scale property will scale the canvas tag by the given value. In this example the resulting canvas will have a dimension of 320x200 pixels.
Line 07: The title will be set to the windows browser tab.
Line 08: We define a nice background color and overwrite the default value (which is solid black).
Line 09: In the previous steps the output canvas was appended directly beneath the body tag. If we pass another HTML element via the container property we can determine to which HTML node the canvas element is inserted in.
Line 11: We pass the created args as parameter to the TinyC5.init() funciton.
ResultNow the layout changed mostly due to the CSS. Our output should now be in the centre of the screen showing a green square.
Step 04
Alright, let's draw something. Since we calculate the color of each pixel new on each loop, we do not need to set the initial background color anymore.
That's why we drop it:
bgColor: tinyC5.color( 155, 255, 100, 255 ),
The main addition in this step is that we actually create some logic in our update method - in this case we draw a sinple checkerboard:
tinyC5.update = function() {
var p, color, index;
index = 0;
p = tinyC5.pixels;
for( var y = 0; y < tinyC5.HEIGHT; y++ ) {
for( var x=0; x < tinyC5.WIDTH; x++ ) {
color = 255 * ( ( ( x >> 4 ) & 1 ) ^ ( ( y >> 4 ) & 1 ) );
p[index++] = color;
p[index++] = color;
p[index++] = color;
p[index++] = 255;
}
}
};
This should look actually a bit familiar to you if you have ever worked with tinyPTC/PixelToaster. Some quick notes:
Line 04: We make a local reference to the TinyC5.pixels array. The array holds all the pixel data in the following format [ Red, Green, Blue, Alpha, Red, Green, Blue, Alpha, Red, ... ]
Line 05: TinyC5.HEIGHT is the height value of the pixel buffer. In this case 100.
Line 06: Same with TinyC5.WIDTH. It's 160 pixel in our example.
ResultThe result is a simple black/white checkerboard. Guess the FX itself does not require any explanation.
Step 05
This step already indicates the end of the tutorial. In this step we added some movement to our small effect as well as some cracker-colors. Only one TinyC5 related function needs to be explained here.
tinyC5.getTime()
This returns the elapsed time in milliseconds since the TinyC5.start() function was called. Use this for timed animation.
ResultSince this is the last step, the code contains detailed comments for further details. Please have a look at the code.
Please feel free to post any comments, thoughts or questions about this tutorial in this thread.
Thanks for reading.
P.S.: You need to be logged in in order to download the tutorial files.
Additional Stuff
ImageLoading with TinyC5