Author Topic: [HTML5] - TinyC5  (Read 40461 times)

0 Members and 1 Guest are viewing this topic.

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
[HTML5] - TinyC5
« on: October 21, 2011 »
TinyC5

Introduction

TinyC5 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























Showcase (web applications using TinyC5)


Related Links


Current Version
0.7

Changelog for current version

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.

Download

DOWNLOAD LATEST VERSION
Note: You need to be logged in in order to download earlier versions.
« Last Edit: January 10, 2012 by benny! »
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #1 on: October 21, 2011 »
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!
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline Raizor

  • Founder Member
  • Pentium
  • ********
  • Posts: 1154
  • Karma: 175
    • View Profile
Re: [HTML5] - TinyC5
« Reply #2 on: October 21, 2011 »
Cool stuff Benny! Hopefully I'll get a chance to check this out over the weekend. K++
raizor

Challenge Trophies Won:

Offline lachose1

  • ZX 81
  • *
  • Posts: 17
  • Karma: 0
  • I love apples
    • View Profile
Re: [HTML5] - TinyC5
« Reply #3 on: October 22, 2011 »
Hehehe,
exactly what I was talking about! Good job, I will definitely check this out Benny!  :goodpost:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #4 on: October 23, 2011 »
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!
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Online Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17407
  • Karma: 498
  • evil/good
    • View Profile
    • My Homepage
Re: [HTML5] - TinyC5
« Reply #5 on: October 23, 2011 »
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.
Shockwave ^ Codigos
Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #6 on: October 23, 2011 »
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.
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Online Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17407
  • Karma: 498
  • evil/good
    • View Profile
    • My Homepage
Re: [HTML5] - TinyC5
« Reply #7 on: October 23, 2011 »
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.

Code: [Select]

    #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
Shockwave ^ Codigos
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: [HTML5] - TinyC5
« Reply #8 on: October 24, 2011 »
This should make porting YaBasic code into HTML5 much easier, especially where the buffers are used.
You are our 9001st visitor.
Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #9 on: October 24, 2011 »
@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 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.
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #10 on: October 26, 2011 »
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!
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #11 on: October 30, 2011 »
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!
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Online Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17407
  • Karma: 498
  • evil/good
    • View Profile
    • My Homepage
Re: [HTML5] - TinyC5
« Reply #12 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.
Shockwave ^ Codigos
Challenge Trophies Won:

Offline Raizor

  • Founder Member
  • Pentium
  • ********
  • Posts: 1154
  • Karma: 175
    • View Profile
Re: [HTML5] - TinyC5
« Reply #13 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.
raizor

Challenge Trophies Won:

Online Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17407
  • Karma: 498
  • evil/good
    • View Profile
    • My Homepage
Re: [HTML5] - TinyC5
« Reply #14 on: October 30, 2011 »
I think that this bit of code sets the refresh rate;

Code: [Select]
    var _loop = function() {
        _stats();
        if ( _isRunning ) {
            self.update( _buffer );
            _render();
            // @todo Replace this with requestAnimFrame
            setTimeout( _loop, 1000 / 60 );
        }
    };
Shockwave ^ Codigos
Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #15 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.

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 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.
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #16 on: October 30, 2011 »
I think that this bit of code sets the refresh rate;

Code: [Select]
    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/
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline Kirl

  • Senior Member
  • Pentium
  • ********
  • Posts: 1217
  • Karma: 230
    • View Profile
    • Homepage
Re: [HTML5] - TinyC5
« Reply #17 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!
www.kirl.nl
Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [HTML5] - TinyC5
« Reply #18 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!
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline Rbz

  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 2756
  • Karma: 493
    • View Profile
    • https://www.rbraz.com/
Re: [HTML5] - TinyC5
« Reply #19 on: October 30, 2011 »
Nice work benny!

Those examples are working fine here.
Challenge Trophies Won: