Manually creating a PNG…

… pixel by pixel.

Like I’ve said before, most of the Processing.js team are shifting their main focus on different projects over the summer.  Some of the members are working on Popcorn.js, a Javascript video player library that uses the HTML5 video tag.  Andor Salga and I are working on imaging 3D point cloud data for Arius3D.  Andor already has a working prototype gallery for what we have to do with our point cloud data; his blog about it is located here.

I have been working on the non-3D spectrum of this work and trying to improve the load times for our prototype.  Well, that’s what I’m going to try and accomplish in the end anyway.  I’ve been looking for ways to solve this problem and the first method I decided to try was server side scripting using PHP.  While PHP isn’t a hard language to comprehend, I soon ran into problems concerning the use of the data I was reading from file.  The only reason I was using PHP was to try and read the file data to give to Javascript.  If trying to extract the data was this much of a hassle, there was no point in using it.

I moved on to just reading the file straight from text using XMLHttpRequest.  I had problems with putting setInterval and setTimeout methods within the code to try and run asynchronously.  The problem was that I didn’t need them!  After I removed them and just called the function on its own, I got the stream and conversion to work… but very slowly.  An example of the stream can be viewed below… be warned, though, it does take a number of seconds.

I was talking with notmasteryet, one of the audio wizards that came up with this hack of streaming byte data into a png for Text to Speech use within browsers, and he told me to use bit shifting instead of string conversions to plug the information into the png.  This would of course make the conversion MUCH faster.  However, something is wrong and not working as it should.  I’m writing this blog not due to accomplishment but more of a bookmark on what I may have to continue with later.  I’m moving on to dissect the PSI Reader given to us by Arius3D and trying to convert it to Javascript to be used for on the fly conversions.

Curved lines in 3D context!

0.9.3 code freeze has come and gone.  Well, it’s not really a code freeze; more of the fact that the main PJS development team will be looking at other projects and sub-projects for a couple of weeks in the summer.  So, the development of PJS will be a little slower over the next month or so.  For 0.9.3, we pushed out as much working code as possible and moved the rest that we deemed unimportant enough before this freeze.  There are still a few major functions that we have to get to and probably will be taken care of before 1.0 is released.  Anyway, I just wanted to give you this brief update but what I really wanted to talk about are the bezier and curve functions.

These primitives are mainly used in 2D sketches for PJS; only because 3D didn’t support them yet.  Now, we can get sketches like the following working in browsers:

(Note: WebGL enabled Browser needed)

That demo is a little slow and needs major optimizations on our part.  Also, there are still known bugs that we are looking to get fixed at a later date.  Trying to fill curves or beziers right now does not work very well, so I would suggest not doing it (if anyone can provide information on this subject, it’ll make for a quicker fix).  Despite fills not working in curved lines, I was able to get it working (using a workaround) on 3D ellipses.  However, it does come with it’s own flaw where in pixels are fighting for space.  I, already, have a working idea on how to fix that.  It involves dynamically setting the polygon offset on each new created object to be 1 pixel higher than the previous one in those coordinates.  It sounds simple to explain but I have a feeling I will run into some expected and unexpected problems.  We’ll see.  Before I get to these new bugs though, I’m going to fix PGraphics slowly.

PGraphics cont’d…

I said I was finished with working on PGraphics; turns out I’m a liar.  I was working on it for a day more, with much encouragement from Dave.  Through our meeting yesterday, he helped me see the model of disassembly to see if it was possible to even do.  For debugging the issue, he suggested I strip PJS from the equation and see what we can do with just canvas.  So, I took the source code for one of the Learning WebGL examples and used it for my test case.  I was having more problems with it and was almost ready to give up.  Dave suggested that I strip down the example more; remove the movement from the objects and pre-render the initial canvases instead of writing them in the background.  In the end, I had a working test case.

(Note: need a WebGL enabled browser)

The problem I was starting to experience at the end of working last night was that when writing to a buffer (instead of a pre-rendered canvas), I was getting errors on Minefield.  The new example was working on Webkit/Safari though (with a few resize bugs).  I think the bugs/problem had some sort of size issue with the buffer but I couldn’t look into it more.  I’m moving past this problem for now as I have other items I need to fix (and a greater amount of them).  Hopefully, with this basis, it won’t be too hard to solve the problem the next time I look at it.