[HTML5] How to get started with TinyC5

[jace_stknights]

Nevertheless, it is still possible to additionally add normal canvas operation on the resulting output canvas. Refer to Example 06 and have a look how the text is drawn on the canvas. It's all handled in the tinyC5.postUpdate().

Thanks Benny,

I will make the effect I was thinking of alongside a genuine TinyC5 pixel effect.

Yep I've made a heavy use of the two way

I've also merged CODEF with TinyC5, but it will be for a next compo 

[benny!]

...
Thanks Benny,

I will make the effect I was thinking of alongside a genuine TinyC5 pixel effect.

Cool! Looking forward to see it!

...
(Already made tunnel, plasma, zoomer effects  )

Huhu back to my code... Hum at the end, I will produce a mega demo 

Woot ... wow .. that sounds awesome. 

[jace_stknights]

The problem is that all my effects are "common". I hope to find a original one up to the 24th of december 
Guys like Raizor, Shockwave, Padman, Combatking0, Hellfire, Rbz, and so on (and even you ) will do!

Have to work hard if I don't want to make up the numbers here! 

[Kirl]

I got a few questions, sorry if they seem obvious or weird...

- Where can I find a command list or something, the docs only contain a todo list and changelog?
- How do I get or set specific pixel color values?
- This is prolly my animation brain talking but where is the framrate determined? For my old js games I used an interval timer which called a redraw function, what is making it tick here and at what speed?

PS I find the code bits in the examples quite elegant, some clever coding there! 

[benny!]

...
- Where can I find a command list or something, the docs only contain a todo list and changelog?

Unfortunately, I havent had the time to research a good javascript documentator. Please refer to the public functions descriptions within the TinyC5 code (all functions declared like this:

Code: [Select]

this.functionName = function( .. ) {
}
are publically available. I tried to do my best to added as explicit comments to their headers. Nevertheless, you are write I should provide a better docs for the functions. I will work on that!

- How do I get or set specific pixel color values?

For example to set a pixel at point (100,10) here is the equivalent code:

Code: [Select]

    var destY = 10, destX=100, pixelIndex;
    pixelIndex = ( destX * 4 ) + ( tinyC5.WIDTH * destY * 4);
    tinyC5.pixels[ pixelIndex   ] = 0;      // Red color value (0-255)
    tinyC5.pixels[ pixelIndex+1 ] = 255;    // Green color value (0-255)
    tinyC5.pixels[ pixelIndex+2 ] = 0;    // Blue color value (0-255)
    tinyC5.pixels[ pixelIndex+3 ] = 255;    // Alhpa value (0-255)

I multiply with 4 because each pixel contains of the following single values: Red, Green, Blue, Alpha.

- This is prolly my animation brain talking but where is the framrate determined? For my old js games I used an interval timer which called a redraw function, what is making it tick here and at what speed?

Framerate is set to constant 60fps. Nothing to do about this, because some browsers already implement natively a function called requestAnimationFrame() which is also set to 60fps.

PS I find the code bits in the examples quite elegant, some clever coding there! 

Thanks ;-)

[combatking0]

I have worked out how to draw a line in individual pixels. Now I can add a TinyC5 effect to the lines themselves

[benny!]

I have worked out how to draw a line in individual pixels. Now I can add a TinyC5 effect to the lines themselves

Sounds cool. Good news!

[combatking0]

- Where can I find a command list or something, the docs only contain a todo list and changelog?

I use the following site as a javascript reference:
http://www.w3schools.com/js/default.asp

It won't contain anything specific to TinyC5, but it will help anyone who is new to JS in general.

[Kirl]

Thanks for the help benny, I'm up and running now!

w3schools is a great resource I haven't checked in a while, thanks CK!

[Kirl]

Does anybody have an easy solution for a performance indicator like an fps counter?

[benny!]

Does anybody have an easy solution for a performance indicator like an fps counter?

Definately. I would recommend:

https://github.com/mrdoob/stats.js?utm_source=javascriptweekly&utm_medium=email

It's simple easy to get them working. Pseudocode:

Code: [Select]

var stats = new Stats();

// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.getElementsByTagName('body')[0].appendChild( stats.domElement );

tinyC5.update = function() {
    stats.update();
}


[jace_stknights]

  my favorite 

[jace_stknights]

A question for Benny!

when I use the script ( http://www.greywyvern.com/code/php/binary2base64 ) to encode binary (music), if I want to decode it to plain/text (base64 decode) with the atob() javascript function I have to remove the start and the end of the text

"data:text/plain;base64,IQYtbGg1LWsRAADfJQIAAgD9EiAAC1NZTlRIRDUuQklOk... .... %3D" in bold

Have you got a technique or a function that auto-remove this? thanx

[benny!]

Hmm ... would it be enough if you simply remove the header and trailing part with some string manipulation functions. Something like:

Code: [Select]

base64String.replace( "data:text/plain;base64,", "" );
base64String.replace( "%3D", "" );

Would this work for you?

[benny!]

Or doing something similar with slice/subsring.

[jace_stknights]

Huhu yep I know this, but I thought about a special function that remove this "header" It will works for everything Hmmm I think there nothing

[Fol]

Nice tutorial, thanks !

Thanks for the "K" ... guess most of the coders here don't need that tutorial - but maybe its useful for one or the other. In addition, I hope to pull some non-forum members into this forum (tutorial is also linked from google code). Will see ...

And you where right about pulling some non-forum members here ; )

[benny!]

Nice tutorial, thanks !

Thanks ;-)

Thanks for the "K" ... guess most of the coders here don't need that tutorial - but maybe its useful for one or the other. In addition, I hope to pull some non-forum members into this forum (tutorial is also linked from google code). Will see ...

And you where right about pulling some non-forum members here ; )

Hehe ... cool to know, that my tactics work ;-)

So,  to the forum!