[HTML5] - TinyC5

[Raizor]

No worries Benny, you're welcome. Happy and safe travels!

[Shockwave]

That's a great example. K+ Raizor

[Jim]

Good demo!  In terms of benchmarks, on my phone it's a slideshow.  1fps on my nexus1 in the built in browser, FF beta and Opera.  But the colours are bust in opera too, all random.

Jim

[Raizor]

Thanks Jim. Yeah, it is pretty weird looking in Opera. I'll see if I can figure it out and maybe speed it up at the same time.

[benny!]

Thanks Jim. Yeah, it is pretty weird looking in Opera. I'll see if I can figure it out and maybe speed it up at the same time.

I already fixed the opera bug. Seems like Opera does not clamp the color/alpha values by itself. I will add a new function to clamp color/alpha values (0-255) and will include the example with the next version.

Could you just give me some details on what I should write in the footer ?

Besides, I removed the backbuffer in order to save one copyPixel step (which is quite expensive in the current version). This should speed it up although your original version runs really fast already.

Again, thanks a lot and of course have some good K++, mate!

[Raizor]

Thanks Jim. Yeah, it is pretty weird looking in Opera. I'll see if I can figure it out and maybe speed it up at the same time.

I already fixed the opera bug. Seems like Opera does not clamp the color/alpha values by itself. I will add a new function to clamp color/alpha values (0-255) and will include the example with the next version.

Could you just give me some details on what I should write in the footer ?

Besides, I removed the backbuffer in order to save one copyPixel step (which is quite expensive in the current version). This should speed it up although your original version runs really fast already.

Again, thanks a lot and of course have some good K++, mate!

Thanks Benny. Write whatever you like at the bottom, something like "Meta Bobs example by Raizor" maybe?

[benny!]

Sounds good ;-)

[benny!]

Hi,

here is another small update of my library. I added some unit tests and some helper methods if you want to customize your app if it is viewed on a mobile device. Btw, all examples run on mobiles now. And of course I officially added that great example by Raizor. Thanks a lot again, mate!






Full changelog:

25.11.2011 - Release of version 0.7 (Quality and mobility)

• Added QUnit tests. Jaja, I know - those tests should be written before the actual code.
• Added TinyC5.clamp() to clamp color values.
• Added TinyC5.resume() to resume a stopped application.
• Added Example07 (thanks to Raizor) demonstrating TinyC5.clamp().
• Added TinyC5.FAST_CLICK_EVENT which is the device specific fasted event type for clicks.
• Added TinyC5.isMobile() to check if app is running on mobile device.
• Added 'supportMobile' flag for initialization.
• Added How to get started with TinyC5 development tutorial.
• Fixed Opera color bug in Example06.
• Fixed a bunch of setter/getter bugs. Thanks to qunit testing.

[combatking0]

I'd like to submit a function for TinyC5 if I may. At the moment I'm using the following code in the main function:

Code: [Select]

tinyC5.line=function(x0,y0,x1,y1,rd,gn,bu,a){
var xd,xda,xt,yd,yda,yt,g,tmp,pxl,w,h;
w=this.WIDTH;
h=this.HEIGHT;
xd=x1-x0;
yd=y1-y0;
xda=Math.abs(xd);
yda=Math.abs(yd);
if(xda>yda){
if(x0>x1){
tmp=x0;
x0=x1;
x1=tmp;
tmp=y0;
y0=y1;
y1=tmp;
}
g=yd/xd;
for(i=0;i<=xda;i++){
xt=x0+i;
yt=y0+Math.round(i*g);
pxl=(w*yt+xt)*4;
this.pixels[pxl]=rd;
this.pixels[pxl+1]=gn;
this.pixels[pxl+2]=bu;
this.pixels[pxl+3]=a;
}
}else{
if(y0>y1){
tmp=x0;
x0=x1;
x1=tmp;
tmp=y0;
y0=y1;
y1=tmp;
}
g=xd/yd;
for(i=0;i<=yda;i++){
yt=y0+i;
xt=x0+Math.round(i*g);
pxl=(w*yt+xt)*4;
this.pixels[pxl]=rd;
this.pixels[pxl+1]=gn;
this.pixels[pxl+2]=bu;
this.pixels[pxl+3]=a;
}
}
}

This allows me to draw a line from x0,y0 to x1,y1 with a colour defined by rd, gn, bu and a.

I'm using as follows to draw a line in the update function:

Code: [Select]

this.line(xx0,yy0,yy1,xx1,red,green,blue,alpha);

If you choose to add this function to a future update of TinyC5, please let me know. You may be able to optimise it better than I have.

[benny!]

Hey CK0,

first K++ for your work. That's really kind and nice to see. I will think about it how to add this to the library. Actually, I just wanted to give access to the pixels array itself without adding functionalit of drawing lines, dots, squares etc. Hmmm ... I need to think about it. If I would just make the original canvas element accessible within the tinyC5.update method, you could use the inbuilt (maybe) faster drawing routines before doing pixel stuff. Do the basic logic could be:

Code: [Select]

tinyC5.update = function() {
// Perform standard canvas operation
var ctx = tinyC5.getOrigCanvasContext();
// ctx.draw,moveTo,line...

// Loop over the pixels

// Peform post rendering on canvas
ctx = tinyC5.getOrigCanvasContext();
// ctx.draw,moveTo,line...
}

This would give great flexibility I guess. But this is just a thought. Will see.

The cool thing about the current TinyC5 challenge is that while ppl start using the library all the shortcomings are coming up - and that really helps me to improve the lib.

[jace_stknights]

Yep canvas allows lot of effect wich can be used in the tinyC5.update()  method! Really cool to add this one


I repeat : I love you work 

[benny!]

Yep canvas allows lot of effect wich can be used in the tinyC5.update()  method! Really cool to add this one


I repeat : I love you work 

Thanks, mate. Much appreciated. The changes are already about to be implemented in the next version. However, this might takes some weeks ... I am already too xmas stressed ;-)

[combatking0]

I just wanted to give access to the pixels array itself without adding functionalit of drawing lines, dots, squares etc. Hmmm ... I need to think about it.

That's understandable - my intention was to add the ability to draw lines which can be modified by other TinyC5 effects. Unless the pixels array can be used to modify the canvas behind it. I don't know if that's possible.

It's your project, and I'll respect your descision, which ever way it goes.

Attached is a snapshot of an incomplete test of the line function used for a 3D wireframe with a motion blur effect:

[jace_stknights]

Attached is a snapshot of an incomplete test of the line function used for a 3D wireframe with a motion blur effect:

hum... I think we have both the same ideas... got also this running here...

[Raizor]

Attached is a snapshot of an incomplete test of the line function used for a 3D wireframe with a motion blur effect:

hum... I think we have both the same ideas... got also this running here...

Let the battle for FPS commence

[benny!]

Hehe .. Gong .. The battle is opened! 

[benny!]

@CkO:
Screeny looks already really promising!

[jace_stknights]

Hum, I'm trying something else... hope it will be ready tomorow 

[combatking0]

I'd like to see what your wireframe code is like after the contest Jace, just to compare notes.

Mine gets a decent frame rate on a PC 2GB with of RAM and a dual core processor. It just tops 10fps on my crummy laptop

I've got the legs on - now I just need to animate them.

[jace_stknights]

It's just a conversion of my line rout : http://www.dbfinteractive.com/forum/index.php?topic=5376.0

Got the same things onscreen
And use of the alpha channel at 128 for the "motion blur effect"...