JSFBGL :: Javascript Framebuffer Graphic Library

[benny!]

Hi all,

today I released JSFBGL :: Javascript Framebuffer Graphic Library !

It is a little experimental art project to provide a graphic library similar to
TinyPTC e.g. in JavaScript. Do not take it too seriously ;-)

Project Site: http://www.weltenkonstrukteur.de/?site=works&prd=jsfbgl
Direct Download : http://www.weltenkonstrukteur.de/dl/jsfbgl.zip

Three examples are available online (see project site):

      

Any feedback welcome.

[Shockwave]

That's a really neat idea Benny I like the examples. Would bigger windows be practical or would they slow things down too much?

I'd love to see a glenze vector done in this lib

[Rbz]

Nice one 

Would bigger windows be practical or would they slow things down too much?

I would make the same question 

[benny!]

@Rbraz&shockwave:

First - thank you. I am glad you like it.

Anyway. Big windows - meaning a higher resolution of the acutal html table -
would be not practical at the moment. You can cheat around with some
clever algorithms - but a constant redraw of the whole table is really cpu consuming.
So better check out the cpu usage while developing !

Again - this is more like a html hack of pretending to have something like a  frame
buffer using a simple html table. But a html table is of course not mend to be used
in that way ;-)

[Shockwave]

Well it gives a result of some almost ascii-ish effects and definately looks interesting Benny
How about increasing the scale of the display instead of the resolution then?

[benny!]

Well it gives a result of some almost ascii-ish effects and definately looks interesting Benny

You are right. When I wrote the first effects with this library it also reminds me on some
kind of ascii-art.

How about increasing the scale of the display instead of the resolution then?

Yup. That is no problem. You can change it really simple.

jsfbgl_open(x_res, y_res, pixel_width, pixel_height)

Is the function to 'open' (i.e. create) the html table (i.e. screen). x_res and y_res
are the amount of cells and rows of the table. With the parameters pixel_width and
pixel_height you specify the width and the height of each cell - which represents a single
pixel.

[Shockwave]

It actually gives me a really interesting idea for a coding challenge.

Perhaps if the entrants of the challenge had to use a frame buffer of say 64 * 64 and t he display scaled up to 800 X 600 and drawn in blocky rectangles what effects would be made?

I kind of think we'd be surprised at how diverse they'd be.
Your routine has definately given me cause to think about this and perhaps that could be a future challenge. It's certainly different and wouldn't be limited by language either.

Would you mind if I did something like that in the future Benny?

[benny!]

@Shockwave:

That definately sounds like a cool idea. A competition were the display is limited!
Never heard of this before and the entries could be very surprising, I think !


@topic:

Added another example: Pixelfade - a pixelwise fading fx between two pics.



Link is on here : http://www.weltenkonstrukteur.de/?site=works&prd=jsfbgl

[Shockwave]

Hehee.

You know, it's crazy using html tables like this. What a great idea. I love it!
I love the cross fade effect too.

[benny!]

@shockwave: thx.


@topic:

I decided to add the tool I coded for the pixelfade fx to the official release pack.
It's just a small command line tool that converts any bitmap file into a javascript
array source code, so that you can use it with the library.

You will find it in the jsfbgl_bin folder. The download url remains the same :

http://www.weltenkonstrukteur.de/dl/jsfbgl.zip

[Rbz]

I'll try to include some effects into my site, thx benny!

[Clyde]

Btw, Benny Cool Work dude, real nice stuff and work.

[Tetra]

Thats really cool, i like that, never given Javascript a second thought for stuff like that before now 

[benny!]

@Clyde & Tetra:

Thanks - I am glad you guys like it.



@Rbraz:

cool. Give me a note when you put something online.

[Shockwave]

You should definately add your site to our links forum Benny

[benny!]

You should definately add your site to our links forum Benny

@shockwave:
that's a nice thought .. but I do not dare to put the link of my little site in a list with
names like intro inferno, kkrunchy by ryg^farbrausch, but maybe I start
another thread concerning personal pages worth visiting in that section ...


@topic:
coded a little snake game today using jsfbgl. Resolution is a 20 cell * 20 cell large html-
table. Each table 6*6pixel big. Well, just to prove that even simple games are possible to
be played in a html-table ;-)



Play it online : http://www.weltenkonstrukteur.de/?site=works&prd=jsfbgl

[Shockwave]

I am crap at this game, I could only manage to eat 5 apples!!!

[taj]

Very cool idea indeed, simple and very effective. Karma up!

[benny!]

Very cool idea indeed, simple and very effective. Karma up!

Thank you very much!

[p01]

Guys, most of the effects in Neja, the JavaScript demo I presented at the Assembly 2005 Browser demo compo, are done with a linear frame buffer.

Since I aimed for standard compliants browsers ( aka anything but that piece of junk called IE ), I used the 9yo RFC 2397 - the data url scheme to generate 24bits BMP images on the fly. The format is not compressed and is ridiculously easy to manipulate and generate. Also this technique is much faster than the zillion DID/TD techniques.

Being a JS demo, anyone can grab the code and have look. Of course credits would be appreciated if one make anything useful out of it :p