Dark Bit Factory & Gravity
ARCHIVE => Archive => Java,JS & Flash => Topic started by: benny! on September 23, 2006
-
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):
(http://www.weltenkonstrukteur.de/works/jsfbgl/example00.jpg) (http://www.weltenkonstrukteur.de/works/jsfbgl/example01.jpg) (http://www.weltenkonstrukteur.de/works/jsfbgl/example02.jpg)
Any feedback welcome.
-
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 :)
-
Nice one 8)
Would bigger windows be practical or would they slow things down too much?
I would make the same question :P
-
@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 ;-)
-
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?
-
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.
-
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?
-
@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.
(http://www.weltenkonstrukteur.de/works/jsfbgl/example03.jpg)
Link is on here : http://www.weltenkonstrukteur.de/?site=works&prd=jsfbgl
-
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.
-
@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
-
I'll try to include some effects into my site, thx benny!
-
Btw, Benny Cool Work dude, real nice stuff and work.
-
Thats really cool, i like that, never given Javascript a second thought for stuff like that before now 8)
-
@Clyde & Tetra:
Thanks - I am glad you guys like it.
@Rbraz:
cool. Give me a note when you put something online.
-
You should definately add your site to our links forum 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 ;-)
(http://www.weltenkonstrukteur.de/works/jsfbgl/example04.jpg)
Play it online : http://www.weltenkonstrukteur.de/?site=works&prd=jsfbgl
-
I am crap at this game, I could only manage to eat 5 apples!!!
-
Very cool idea indeed, simple and very effective. Karma up!
-
Very cool idea indeed, simple and very effective. Karma up!
Thank you very much!
-
Guys, most of the effects in Neja (http://www.p01.org/releases/Demoscene/#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 (http://www.faqs.org/rfcs/rfc2397.html) 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
-
Thanks for pointing this out. To be honest. I had the idea once to manipulate a tables
background cell color ... and the creation of this lib was pure fun. I didn't make any
research on the net if there are better ways to achieve the same fx.
But this link/idea sounds pretty interesting. Will have a look on it - if I have some spare
times and maybe rewrite the lib. Thanks a lot, p01 !!!
-
Very cool indeed.
-
Glad you like the technique :)
To make it more like an LFB, you can store the BMP header, and have an array with one entry per pixel, then output the whole thing using:
targetImg.src = BMPHeader+LFBArray.join('');
The join() method is really fast, and this way you can maintain parts of the image and only update a few pixels with no overhead at all.
-
I had the idea once to manipulate a tables
background cell color ... and the creation of this lib was pure fun. I didn't make any research on the net if there are better ways to achieve the same fx.
Although that doesn't really mean anything, I've never seen anyone else generating images, let alone on the fly, using JavaScript and data: URL.
The one zillion DID/TD techniques on the other hand are widely spread. The good thing about them is that they are so basic that they work on any half decent browser. Unfortunately, even if you only update the necessary cells/pixels, it is quite slow. Don't expect to get a good framerate with anything around 64x64 or higher.
For instance, I coded a fire effect using both techniques. Here are the results on my crappy 800mhz laptop:
- one zillion DIV/TD technique using 36x22 = 762 pixels = ~4 fps
- BMP image generation using 96x48 = 4,608 pixels = ~14 fps
-
...
For instance, I coded a fire effect using both techniques. Here are the results on my crappy 800mhz laptop:
- one zillion DIV/TD technique using 36x22 = 762 pixels = ~4 fps
- BMP image generation using 96x48 = 4,608 pixels = ~14 fps
...
This sounds great for sure. I really keep this in mind when I have some spare time to spend
some more time on it !!! Sounds very cool indeed!