TinyC5IntroductionTinyC5 is a library for javascript programmers who want to write their own software rendering routines, reading and writing to an array of pixels.
This library is inspired by such great libraries like tinyPTC/Pixeltoaster.
Features
- Extremely lightweighted (approx. 2KB compressed and gzipped)
- Supports all modern browsers (FF 6, IE 9, Chrome 15, Opera 11)
- Executes browser specific code under the hood for optimal performance
- Easy to use (Minimal application just requires two lines of javascript code)
- Fullscreen mode
- Written in pure native javascript (no dependency on any other libraries like e.g. jQuery)
Examples
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-01.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example01.html)
|
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-02.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example02.html)
|
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-03.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example03.html)
|
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-04.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example04.html)
|
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-05.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example05.html)
|
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-06.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example06.html)
|
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-07.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example07.html)
|
Showcase (web applications using TinyC5)
- "Oldschool never dies!" (http://stknights.free.fr/html5/dbf_tinyc5/) by jace^stknights
- "The Death Of A Sun" (http://www.bennyschuetz.com/2011/the-death-of-a-sun/) by benny!schuetz
- "Slidely Distorted" (http://www.bennyschuetz.com/2011/slidely-distorted/) by benny!schuetz
- "Plawesoma" (http://kirl.nl/plasmaScript/playMe.html) by kirl
- More cool productions of the TinyC5 challenge... (http://www.dbfinteractive.com/forum/index.php?topic=5511.0)
Related Links
- How to get started with TinyC5 http://www.dbfinteractive.com/forum/index.php?topic=5455.0 (http://www.dbfinteractive.com/forum/index.php?topic=5455.0)
- Project on google code http://code.google.com/p/tinyc5/ (http://code.google.com/p/tinyc5/)
- Complete changelog http://tinyc5.googlecode.com/svn/trunk/docs/changelog.txt (http://tinyc5.googlecode.com/svn/trunk/docs/changelog.txt)
- Planned features http://tinyc5.googlecode.com/svn/trunk/docs/todo.txt (http://tinyc5.googlecode.com/svn/trunk/docs/todo.txt)
Current Version0.7
Changelog for current version25.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.
DownloadDOWNLOAD LATEST VERSION (http://www.dbfinteractive.com/adminteam/benny/TinyC5/releases/TinyC5-V0.7.zip)Note: You need to be logged in in order to download earlier versions.
Hey,
since more and more people here start thinking about HTML5 I thought I could help some of you to dive into javascript/HTML5 programming. And since a lot of you are used to TinyPTC and buffer manipulation I thought I could create a similar library. Feel free to ask questions and let me know if you miss some functionality or encounter a bug.
Best,
benny!
Cool stuff Benny! Hopefully I'll get a chance to check this out over the weekend. K++
Hehehe,
exactly what I was talking about! Good job, I will definitely check this out Benny! :goodpost:
Thanks guys. I will try to provide some more functionality and examples within the next week.
I would really appreciate if some old tinyPTC users could share their thoughts on the API.
Best,
benny!
Looks really cool Benny, this may be a stupid question, but anyway I can see you use the onload event to start the effect, but looking through the source code it seems like the swapping of the buffers is handled by the API and not the examle code that draws the TV noise.
To me, one of the big plusses of Tinyptc is the control that it gives you with the buffers, often in my stuff I will have several buffers and might not necessarily update from the same buffer each frame, I also like to have control over when my screen is updated too so that I can code my own delta timing routines.
They may be irrelevant questions, so apologies if they are - the library looks cool and easy to use.
Thanks for your feedback and input Shocky. Could you give me some more details about what exactly you mean (maybe a pseudo code of your update function)? Generally the double buffer stuff is handled by the browser so you do not have to care about. But if you could provide some pseudo or freebasic code of the update function I could try to re-implement it in Javascript.
No problem.
Actually the TV noise effect is a good example of why you might want to do some non-standard stuff with the screen buffer. Tinyptc updates a set size from a given location in a single dimension array, so here I've made the screen buffer 2000 pixels bigger than it needs to be, precalculated the TV noise into all the pixels and just updated the screen from a random start point in the screen buffer so the only calculation needed is just for the start position in the buffer.
In real life situations I've used things like this to add some noise to my intros.
#INCLUDE "TINYPTC_EXT.BI"
OPTION STATIC
OPTION EXPLICIT
CONST XRES = 800
CONST YRES = 600
DIM BUFFER((XRES*YRES)+2000) AS INTEGER
PTC_ALLOWCLOSE(0)
PTC_SETDIALOG(1,"WWW.RETRO-REMAKES.NET"+CHR$(13)+"FULL SCREEN?",0,1)
IF (PTC_OPEN("REMADE BY SHOCKWAVE/CODIGOS",XRES,YRES)=0) THEN
END-1
END IF
SLEEP 5
DIM AS INTEGER Z,LP
FOR LP=0 TO ((XRES*YRES)+2000)
Z=INT(RND(1)*255)
BUFFER(LP)=RGB(Z,Z,Z)
NEXT
'-------------------------------------------------------------------------------
WHILE(GETASYNCKEYSTATE(VK_ESCAPE)<> -32767 and PTC_GETLEFTBUTTON=FALSE and PTC_GETRIGHTBUTTON=FALSE)
Z = INT(RND(1)*2000)
PTC_UPDATE@BUFFER(Z)
'Normally we'd want to clear the buffer here, but not in this case!
'ERASE BUFFER
WEND
This should make porting YaBasic code into HTML5 much easier, especially where the buffers are used.
@Shocky:
Thanks a lot for your FB code. I got now what you mean and it's a nice idea btw to pre-render the noise and then just change the pointeroffset to the buffer on each update.
However, I did some research on this topic and it seems not really possible at the moment - at least not if you aim for multiple browser. The reason is that each browser currently implement the canvas ie. Pixeldata in a different format. For example latest Firefox Uint8ClampedArray (http://www.khronos.org/registry/typedarray/specs/latest/#7.1) datatype whereas Chrome e.g. uses the type CanvasPixelArray. Hope that this will change soon - I will keep this in mind and I will provide a working example as soon as possible.
@CK0:
Yeah, that was my intention. People who wrote effects in other languages might port some of their stuff over to javascript.
Uploaded version 0.2 with some minor changes (refer to changelog).
@Shocky:
I modified the library and the example01 so it fits a bit better to your proposal. Thanks for the input, mate!
I just uploaded an update. Various changes:
- Optimized rendering routine with detaching pixels (refer to: http://www.onaluf.org/en/entry/13).
- Added optional param property 'container' that let you assign your canvas to a certain DOM element.
- Added TinyC5.setFullscreen().
- Added TinyC5.isFullscreen().
- Added TinyC5.getCanvas().
- Modified naming of 'fullscreen' param property. Changed from fullScreen to fullscreen.
- Added constant property PIXEL_LENGTH.
- Added two more examples.
- Added proper styling of the examples.
Check first post of this thread for new examples and download link!
The new examples run beautifully in Google Chrome!
I love it that you can click the window to expand the effect too :)
Nice work mate.
What Shockie said. I know what keftales are now too :)
Runs a lot faster in Chrome than FF, but I expect that's usual. Is it locked at 60fps? Seems faster than that in Chrome for me.
I think that this bit of code sets the refresh rate;
var _loop = function() {
_stats();
if ( _isRunning ) {
self.update( _buffer );
_render();
// @todo Replace this with requestAnimFrame
setTimeout( _loop, 1000 / 60 );
}
};
Quote from: Shockwave on October 30, 2011
The new examples run beautifully in Google Chrome!
I love it that you can click the window to expand the effect too :)
Nice work mate.
Thanks, Shocky. V8 (the javascript engine of Google Chrome) simply rocks. I hope you don't mind, that I used your Keftales code for an example.
Quote from: Raizor on October 30, 2011
What Shockie said. I know what keftales are now too :)
Runs a lot faster in Chrome than FF, but I expect that's usual. Is it locked at 60fps? Seems faster than that in Chrome for me.
Yeah, Chrome's javascript/rendering engnie is usually faster than Firefox. And yes, it is locked at 60fps max. That said, some frames could be dropped if the update/render routine takes too long on an old computer/browser. Nevertheless, I will replace the setTimout() update function with the RequestAnimationFrame (http://paulirish.com/2011/requestanimationframe-for-smart-animating/) function to make the library ready for future browser versions.
In addition I am currently looking at the image-rendering CSS property which allow you to control the quality of streched images. This way I hope I can improve performance of scaled/fullscreen canvas effects.
Quote from: Shockwave on October 30, 2011
I think that this bit of code sets the refresh rate;
var _loop = function() {
_stats();
if ( _isRunning ) {
self.update( _buffer );
_render();
// @todo Replace this with requestAnimFrame
setTimeout( _loop, 1000 / 60 );
}
};
Yep, totally right. And as I said, the setTimeout will be replaced with requestAnimationFrame in the upcoming version:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/ (http://paulirish.com/2011/requestanimationframe-for-smart-animating/)
Wow, some excellent work there Benny!, cool examples and great presentation overall!
This really makes me want to dive into webdev again!
Quote from: Kirl on October 30, 2011
Wow, some excellent work there Benny!, cool examples and great presentation overall!
This really makes me want to dive into webdev again!
Thanks, mate! Glad you like it!
Nice work benny!
Those examples are working fine here.
I'm missing words .. this is extremely cool benny! Hopefully even I can code some stuff with it ;)
@rbz&neriakX:
Thanks for your kind words, mates ;-)
Sorry for the update penetration ... but I just released a new version :skint:
With this update I improved the execution speed a lot. Even the New Example - Plane deformation (http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/TinyC5_Example04.html) 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.
I can't wait to try this out :)
The screen updating looks even better now, the last effect of the rotating tunnel looks the best!
Really nice mate.
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.
Looking great here, nice speed in Chrome. Well done. :clap:
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
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 (http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/dux3d.html)
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!
Thanks for putting it online. Means I get to run it on my nexus1 at 1fps :)
<edit>2fps in Opera!
Jim
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 ;-)
Maybe reallocating a new canvas is faster than clearing an old one?
(2fps on ff8 beta too :))
Jim
Cool additions Benny!
Just tested on my iPhone 4 and get ~5 fps.
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!
Love the rubber ducky!
Nice one Jim.
Missed the duck! Looks very cool Jim :)
Another weekend, another update ;-)
Complete changelog:
- Added project to google code. Make your checkout here (https://code.google.com/p/tinyc5/)
- 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.
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...
It's really great that you linked this great project into DBF!
Thanks Benny, that's much appreciated :)
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 (https://code.google.com/p/tinyc5/) 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.
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 :)
Thanks, mate!
Quote from: Raizor on November 06, 2011
... 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.
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
Quote from: Jim on November 06, 2011
...
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.
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 (http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example06.html)
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 (http://www.dbfinteractive.com/forum/index.php?topic=5397.msg72202#msg72202) for complete changelog.
Have fun!
Works great here mate, even in overblown, clunky bloated firefox :)
Quote from: Shockwave on November 12, 2011
Works great here mate...
Thanks mate, that's always good to hear...
Quote from: Shockwave on November 12, 2011
...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.
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/m01.html)
http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m02.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/m03.html)
http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m05.html (http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/m05.html)
Thanks in advance!
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?
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
Quote from: Raizor on November 13, 2011
...
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 ;-)
I can test also on Ipad and Ipad2 later today if that information is helpful for you Benny?
Quote from: Raizor on November 13, 2011
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!
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 :)
Thanks Raizor, really interesting. It's strange how bad the iPad2 performance is when it comes to HTML5. I also owned an iPad2 for some weeks - but I was really disappointed about nearly every HTML5 game I launched on it. Since Apple talked Flash down and didnt run it - I really hoped/thought that the performance of HTML5 woudl be way better - especially when I buy hardware for ~500€. That's part of the reason why I sold it after some weeks btw.
Nevertheless, thanks so much so benchmarking.
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.
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
Thanks for testing mates!
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 (http://www.0xdeadface.com/dump/tinyc5/examples/TinyC5_Example07.html).
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!
No worries Benny, you're welcome. Happy and safe travels! :)
That's a great example. K+ Raizor
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
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.
Quote from: Raizor on November 19, 2011
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!
Quote from: benny! on November 20, 2011
Quote from: Raizor on November 19, 2011
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?
Sounds good ;-)
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!
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/scr-ex-07.jpg)
(http://www.dbfinteractive.com/adminteam/benny/TinyC5/examples/Example07.html)
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.
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:
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:
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.
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:
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.
Yep canvas allows lot of effect wich can be used in the tinyC5.update() method! Really cool to add this one :D
I repeat : I love you work ;D
Quote from: jace_stknights on December 12, 2011
Yep canvas allows lot of effect wich can be used in the tinyC5.update() method! Really cool to add this one :D
I repeat : I love you work ;D
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 ;-)
Quote from: benny! on December 11, 2011
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:
Quote from: combatking0 on December 12, 2011
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... :-\
Quote from: jace_stknights on December 12, 2011
Quote from: combatking0 on December 12, 2011
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 :)
Hehe .. Gong .. The battle is opened! :diablo:
@CkO:
Screeny looks already really promising!
Hum, I'm trying something else... hope it will be ready tomorow ;D
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.
It's just a conversion of my line rout : http://www.dbfinteractive.com/forum/index.php?topic=5376.0
Got the same things onscreen :D
And use of the alpha channel at 128 for the "motion blur effect"...
Quote from: jace_stknights on December 13, 2011
...
And use of the alpha channel at 128 for the "motion blur effect"...
Yeah, clever! :clap:
Quote from: combatking0 on December 12, 2011
Quote from: benny! on December 11, 2011
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.
...
Thanks for your understanding. I think it's great that you implemented a line drawing function into tinyC5. This shows me that there is a need for that.
I think after this challenge a lot of source code will be available to implement in the TinyC5 lib ;D
I'm New to the antics of Java. I've downloaded TinyC5. But I don't know what else is needed and what paths to put them in?
In the tinyC5 compo thread Shockwave supplied a challenge template (http://www.dbfinteractive.com/adminteam/benny/DBFChallengeTemplate.zip), which contains a folder with everything you need. It includes a ready to go html file which you can edit with any text editor and it contains helpfull comments on where your code goes etc.
Good luck! :)
This Tutorial (http://www.dbfinteractive.com/forum/index.php?topic=5455.0) Should help you too Clyde.
Btw, it was Benny who wrote the template :)