[HTML5] - TinyC5

[Raizor]

Great work Benny! I still haven't had time to have a proper play with it yet but I will code something with it once the compo is out of the way. Hopefully get a couple of things for you to include as examples. Cool that's it's on Google Code now too

[benny!]

Thanks, mate!

... but I will code something with it once the compo is out of the way. Hopefully get a couple of things for you to include as examples...

That would be extremely cool! But, no hurry of course.

[Jim]

re: ~~ optimisation
Wow, hardcore!

It will work great in the scanline code 'cos all the x values are positive.
It's not a direct replacement always:
>> ~~-5.9
-5
>> Math.floor(-5.9)
-6
The rasteriser part maybe doesn't care about that though, as long as the rounding's consistent

Thanks for hooking us up to google code!

Jim

[benny!]

...
It will work great in the scanline code 'cos all the x values are positive.
It's not a direct replacement always:
>> ~~-5.9
-5
>> Math.floor(-5.9)
-6
The rasteriser part maybe doesn't care about that though, as long as the rounding's consistent
...

Doh, of course, you are right. Did not think about that - but seems to be okayish in the result.

[benny!]

I proudly present version 0.6 of the TinyC5 library. The core feature of this update is mainly about mouse interaction. There are no API changes to existing commands which is a good sign IMHO.

The new example shows most of the new features:


Run Example 06


Interact

• Move left/right to change x-position of text
• Move up/down to change speed of animation
• Press left mouse button to change color set

Refer to first post for complete changelog.

Have fun!

[Shockwave]

Works great here mate, even in overblown, clunky bloated firefox

[benny!]

Works great here mate...

Thanks mate, that's always good to hear...

...even in overblown, clunky bloated firefox

Yup, you are absolutely right. I am using firefox for quite a time now - and its really bloated by now. It's really about time that Mozilla makes it slimer again.

[benny!]

What's next...

Last update of TinyC5 was mainly about mouse interactions. For the next version I want to focus on mobile browsers. That said - don't expect too much. Even if the HTML5 standard is supported well on mobile browsers, the canvas stuff and especially the pixel-based low level stuff the library is for - is by far not suited for mobile devices yet. (If you want to do serious animation on mobiles in HTML5 now, I recommend to use CSS3 and sprites for now.)

Nevertheless, I hope that I can do at least some optimizations regarding mobile browsers. I converted some of the existing examples to proper screen resolution. It would be of great help if you could test them on your mobile devices and just report back your handhelds details and the FPS for the demos.

Here are the links to the examples:


http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m01.html

http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m02.html

http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m03.html

http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m05.html


Thanks in advance!

[Raizor]

Tested in Safari on iPhone 4:

Example 1:
44 FPS (15-45)

Example 2:
17 FPS (3-18)

Example 3:
24 FPS (3-24)

** Example 4 is missing?? **

Example 5:
14 FPS (4-16)

All seem to work fine. I get a weird shaded grey triangle floating around with Jim's duck, but I get that on PC too, so probably supposed to be there?

[benny!]

Thank you very much, Raizor. Since I do not have access to iphone4 it is really interesting to see the results. K++ !!! Yeah, and example #4 and #6 are currently missing. Those mobile examples are just a current quick hack to see the current state. I will start investigate more on how I can improve performance for mobile canvas in the next days.

Here are my results:

Device: HTC Desire S

Example #1: ~40FPS
Example #2: ~12FPS
Example #3: ~14FPS
Example #5: ~8FPS

[benny!]

...
All seem to work fine. I get a weird shaded grey triangle floating around with Jim's duck, but I get that on PC too, so probably supposed to be there?

Yup, that is OK ;-)

[Raizor]

I can test also on Ipad and Ipad2 later today if that information is helpful for you Benny?

[benny!]

I can test also on Ipad and Ipad2 later today if that information is helpful for you Benny?

That would be really cool. Thanks, mate!

[Raizor]

iPad 2

Ex1: 40 fps (7-45)
Ex2: 22 fps (6-22)
Ex3: 26 fps (8-26)
Ex5: 18 fps (10-18)

Will do iPad one later tonight mate

[benny!]

[Raizor]

Yeah Benny, I was quite surprised that the performance wasn't much better, especially compared to iphone.

Some ipad 1 benchmarks:

ex1: 32 fps (7-35)
ex2: 11 fps (3-11)
ex3: 14 fps (6-15)
ex5: 9 fps (2-10)

pretty much the same as iphone and ipad2.

[Jim]

ducky gets 6 or 7fps on my Nexus One.  8 or 9fps in FF Beta.
The grey triangle is an fps indicator, the faster it is spinning the faster it is running.

Jim

[benny!]

Thanks for testing mates!

[Raizor]

Benny, I've made a new example for TinyC5 if you want to use it. Please don't feel obliged.

It's based on the MetaBlobs example for IQ's ShaderToy. Not sure how to describe it, color-cycling metablob bobs or something along those lines

I didn't know what to number it, so I chose number 7. I've put some comments in the code, feel free to chop and change as you see fit if you do decide to use it.

I've uploaded it here.

[benny!]

Totally awesome, Raizor. Thanks a lot. I will add it this weekend. I am currently on the road/hotel atm.
This runs really smooth - will have a look at the source soon.

Great stuff. Thanks for supporting the library, mate!