[HTML5] - TinyC5

neriakX · October 30, 2011

I'm missing words .. this is extremely cool benny! Hopefully even I can code some stuff with it

benny! · October 31, 2011

@rbz&neriakX:
Thanks for your kind words, mates ;-)

benny! · November 02, 2011

Sorry for the update penetration ... but I just released a new version

With this update I improved the execution speed a lot. Even the New Example - Plane deformation runs at a good framerate on my system.

Check out the following benchmark I did with Shockys Keftale code:

TinyC5_Example_03 Benchmark (Normal mode = scale: 2)

It's the first time I did some canvas speed test on the Intenet Explorer 9.0. I have to admit that I was really impressed on how fast IE9 renders canvas. That said - I am still not a fan of IE ;-) But well, we need to be impartial here ...

	Version 0.3	Version 0.4
Chrome 15	45 fps	60 fps
Internet Explorer 9	21 fps	60 fps
Firefox 7	27 fps	45 fps
Opera 11 (***)	4 fps	6 fps

Note:
To benchmark the tests I used console output which makes the benchmarks unprecise and rough.
(***) Given values are not realistic. It seems that running the scripts with active console dramatically slows down the performance. With closed console the demo runs at a pretty good framerate. So no worries when developing for Opera.

Well, here is the changelog of version0.4

Reworked pixel handling in favor of speed (refer to benchmark)
Reworked all existing examples to fit new API. All examples should run way faster now.
Added new example showing some plane deformation.
Added TinyC5.copyPixels() method to copy arrays of pixels to TinyC5.pixels. Refer to TinyC5_Example01.
Added additional param alpha for a default alpha pixel value. Refer to TinyC5_Example02.
Added TinyC5.Utils.getImagedataFromImage() method - the methodname says it all. Refer to TinyC5_Example04.
Added TinyC5.getTime() that returns elapsed milliseconds since app start.
Added polyFills for requestAnimFrame and cancelAnimFrame. Refer to http://notes.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html .
Removed constant TinyC5.PIXEL_LENGTH.
Fixed some minor bugs.

Shockwave · November 02, 2011

I can't wait to try this out

Shockwave · November 02, 2011

The screen updating looks even better now, the last effect of the rotating tunnel looks the best!

Really nice mate.

benny! · November 02, 2011

Quote from: Shockwave on November 02, 2011
The screen updating looks even better now, the last effect of the rotating tunnel looks the best!

Really nice mate.

Thanks a lot. Yeah, after some optimization I have to say that I am pretty pleased with the result. Didnt expect though that the IE9 beats Firefox with that canvas rendering.

neriakX · November 02, 2011

Looking great here, nice speed in Chrome. Well done.

Jim · November 03, 2011

Here's something I knocked up that you can add to the samples if you like:

It's great in Chrome and OK in FF, Safari and Opera but poor in IE9. Is there any way to accelerate clearing the pixel buffer to all black?

Jim

benny! · November 03, 2011

Quote from: Jim on November 03, 2011
Here's something I knocked up that you can add to the samples if you like:

It's great in Chrome and OK in FF, Safari and Opera but poor in IE9.

That's totally awesome, Jim. Thanks a lot. Your demo definately rocks.

I am glad to add it to the project. Updated the first post with user contributions and put your demo online:

Run Jim's rotating duck example

Quote from: Jim on November 03, 2011
Is there any way to accelerate clearing the pixel buffer to all black?
...

Good point. I will think about it and try to implement something is possible. Then I could replace your cls() function with it. I keep you informed about it.

Thanks again!

Best,
benny!

Jim · November 03, 2011

Thanks for putting it online. Means I get to run it on my nexus1 at 1fps

<edit>2fps in Opera!
Jim

benny! · November 03, 2011

Quote from: Jim on November 03, 2011
Thanks for putting it online.

I thank you for creating this ;-)

BTW, I already had a look at some clearingPixel alternatives and did some tests. The result so far is quite irritating:

- Clearing the canvas using a fillRect speeds up your demo in Firefox/IE9 (gain of roughly 8 fps)
- However it slows down in Chrome (drops from constant 60fps to 54fps)

Nevertheless, I will implement a generic function for clearing the pixels and will execute browser optimized clearing code under the hood in the next update.

Quote from: Jim on November 03, 2011
<edit>2fps in Opera!
Jim

Yeah, I also tried to run the demos on my HTC ... nice slideshow ;-) The canvas stuff is really not made for mobiles yet ;-)

Jim · November 03, 2011

Maybe reallocating a new canvas is faster than clearing an old one?
(2fps on ff8 beta too

)

Jim

Raizor · November 03, 2011

Cool additions Benny!

Just tested on my iPhone 4 and get ~5 fps.

benny! · November 03, 2011

Quote from: Jim on November 03, 2011
Maybe reallocating a new canvas is faster than clearing an old one?
...

Good point. Will try that out, too and see how different browsers perform.

Cheers!

Shockwave · November 04, 2011

Love the rubber ducky!

Nice one Jim.

Raizor · November 04, 2011

Missed the duck! Looks very cool Jim

benny! · November 06, 2011

Another weekend, another update ;-)

Complete changelog:

Added project to google code. Make your checkout here
Added TinyC5.clearPixels() method for setting all pixels to a specified color.
Added browser detection and execution browser optimized code under the hood
Added TinyC5.color() method that created a simple property color object
Added TinyC5.init() method which maps the constructor.
Separated utility functions to its own object TinyC5Utils. TinyC5 core does not depend on TinyC5Utils.
Replaced alpha params property with bgColor property
Added title init parameter to set browser windows title.
Renamed examples.
Added Jim's fantastic rubber duck demo to the official examples. Thanks Jim.

Btw, since I add more and more functionality to the API I removed the API documentation from the original thread since it becomes too big. I will try to add a proper JSDoc someday.

benny! · November 06, 2011

Quote from: Jim on November 03, 2011
Here's something I knocked up that you can add to the samples if you like:
...

@Jim:
Thanks again. I added your demo as an official example. Its a great FX and complex, too. Perfect for benchmarking etc.

I tried to optimize it a bit with only little success though. In chrome your original version runs at steady 60FPS. In Firefox I got roughly 33fps and as you already mentioned I got worst result in IExplorer. Although drawing pixels seems to be quite fast in IE, the overall execution time of javascript seems to suck. I replaced the cls() command with TinyC5.clearPixels() which does the same except for the IE. This speeds the demo up from 11fps to 16fps. I gained another 1fps while replacing Math.floor() with ~~.

Maybe I can think of some more optimization tricks...

Shockwave · November 06, 2011

It's really great that you linked this great project into DBF!

Thanks Benny, that's much appreciated

benny! · November 06, 2011

Quote from: Shockwave on November 06, 2011
It's really great that you linked this great project into DBF!

Thanks Benny, that's much appreciated

I have to thank you Shocky for hosting it here. In addition I really think that this is the right place for that project. That's why I also put an explicit link on the startpage of google code to this forum thread. So that ppl who find that project via google code might come here. Additionally I disabled the WIKI on google code so that ppl cannot post anything on that page ;-)

Nevertheless, having that project on google code makes it much easier for me to maintain the codebase.