Extracting Web Videos from Cache

I’ve been trying to use different applications to capture my desktop to create videos of WebGL demos. I found most applications just don’t export to formats YouTube likes. I already had a video on my Facebook account I wanted to upload, so I decided to just grab that file once it was cached. To do this I opened Firefox, went to Facebook and watched the video. Once it was done being cached, I threw:

about:cache?device=memory

in the address bar and I did a search for mp4. I found a link to this:

http://video.ak.facebook.com/video-ak-sf2p/v6808/21/
81/1206393119872_62630.mp4

Facebook, mp4? That looked about right. I saved it to my desktop and found it was the file I wanted. I went to YouTube and tried to upload this new file. It worked with my first attempt (no surprise there). Here is the video.

This method of browsing your cache can be useful to obtain videos without some unnecessary and bulky add-on or application. Minimalism--

(Not) Building Minefield

For the past week or so I’ve been having problems trying to build Minefield. After my first few unsuccessful attempts, I checked Tinderbox and found it was burning for OSX 10.5. This explained why I couldn’t build then, but not why I can’t build now. It’s no longer burning, but I keep getting make errors about js hashtable errors. Having a working version sure would be nice. I may just have to re-clone the repository. Hopefully it won’t keep me too busy on the weekend.

Release 0.6

This marks my 0.6 release for my open source class at Seneca College. I’m collaborating with a few of students from the class along with other contributors. We are porting over Processing to Processing.js which is a JavaScript implementation of the language. There are a few of us are working with WebGL to implement Processing’s 3D functions. This blog details some of the things I’ve been up to for this release.

P3D

Processing allows users to select different 3D renderers. One is OPENGL, which delegates the rendering work to OpenGL, the other is P3D which is the software renderer. We started off adding 3D support by allowing the OPENGL renderer which seemed the most appropriate. Since WebGL-enabled browsers allow the selection of software/hardware rendering, this is something we don’t have control over. Because we want to allow users to simply copy and paste their sketches from Processing to Processing.js, we added the P3D constant which now can also be used to acquire a 3D context.

modelX(), modelY(), modelZ()

These functions required the invApply() function in PMatrix3D so I had to implement that function in the branch I set up for these functions. I needed to do this so my unit tests would all run. They now run and all pass, which is good.

screenX(), screenY(), screenZ()

I ran into problems with these functions and couldn’t get some of my unit tests to pass. I’ll have to continue these for my 0.7 release.

scale()

This is a small function which allows scaling the current transformation matrix. I wrote a few visual tests and everything seems ok.

fill(), noFill()

There is still an issue when calling fill() and passing in an alpha value which isn’t 100% opaque. It does not look identical to the Processing versions, but I wanted to get this code in. Maybe someone else might be able to fix it. Otherwise the filled in colors look pretty much the same.

stroke(), noStroke(), strokeWeight()

I had the same transparency issue here are well, but otherwise the final rendered image in Processing.js looks the same as Processing.

PMatrix3D

There were some PMatrix3D methods which I didn’t get chance to finish in my last release, so I wrote them for this one. I implemented multX(), multY(), multZ(), invApply(), skewX(), skewY(), and skewZ(). The actual code took no time at all to write, but writing over 50 tests took quite a while, but I hope they can be used in the future to test for any changes in the library.

IDE 3D DEMO

I’ve been playing with my Web IDE and I fixed an issue I had when the sketch uses size dimensions which don’t match the canvas width and height. In Minefield, I couldn’t get anything to render. So every time the user selects a new sketch I now find call to size() and pull out the width and height and use innerHTML to adjust the canvas dimensions. This allows loading between some of the Processing sketches which use dimensions which differ from my sketches.

Wiki Update

I also updated my wiki page which includes links to the Lighthouse tickets and Github branches for all the things I’ve been working on.

Multiple size((3D)) Calls in Processing.js

I started working on fixing a size() bug in Processing.js. If the user has a canvas and has a Pjs sketch which calls size() and requests a 3D context and the width/height attributes of the HTML canvas differ from the arguments in the size() call, then the rendering fails. I first wanted to see what Processing does if size() is called twice in the same sketch. For 2D contexts, it just resizes the ‘canvas’. For 3D, it throws an exception:

For P3D contexts (create P3D and later create another P3D context), the second size() call is ignored, but no exception is thrown. So I think this means I can ignore any further calls to size() once the first one is done. And since Pjs should determine (I think?) the size of the canvas, all I need to do is set the canvas width and height attributes dynamically using innerHTML the first time size is called to fix the rendering bug. I already implemented this in my Web IDE, so it shouldn’t be too tricky. I may be able to finish it today.

Adding stroke() for 3D Objects in Processing.js

I’m working on adding the stroke() function to Processing.js for 3D objects using WebGL. So far I wrote two tests for this function. The first draws 100 boxes with different colors. This test does the same but adds strokeWeight() calls in different places. The results between Processing and Processing.js are almost identical, the main visible difference is when the color value isn’t 100% opaque. Otherwise, my progress looks pretty good.

The Joy of Writing Unit Tests

I started implementing some remaining functions for the PMatrix3D object in Processing.js. I guess you can say I’m not entirely enjoying the process of digging through Processing code, throwing in calls to create matrices and getting Processing to spit out the values so I can compare against Pjs. I just scratched the surface and It’s taking about forever with all the files I have open and building and running and copying and pasting…. 😦 To keep myself sane, I’ve been working on some really sweet 3D stuff in C3DL…but I’m showing anything till I’m done. teehee…. Instead of a screenshot or demo, here is something much more exciting: The PMatrix3D tests I have written so far…

var p = new PMatrix3D();

///////////////////
//   SKEWX
//////////////////

p.skewX(0.0);
_checkEqual( 
[ 1.0000,  0.0000,  0.0000,  0.0000,
 0.0000,  1.0000,  0.0000,  0.0000,
 0.0000,  0.0000,  1.0000,  0.0000,
 0.0000,  0.0000,  0.0000,  1.0000
], p.array() );

p.reset();
p.skewX( 3.14 );
_checkEqual( 
 [1.0000, -0.0015926549364072232,  0.0000,  0.0000,
 0.0000,  1.0000,  0.0000,  0.0000,
 0.0000,  0.0000,  1.0000,  0.0000,
 0.0000,  0.0000,  0.0000,  1.0000],
p.array() );

p.reset();
p.skewX(-3.14);
_checkEqual( 
[1.0000,  0.0015926549364072232,  0.0000,  0.0000,
 0.0000,  1.0000,  0.0000,  0.0000,
 0.0000,  0.0000,  1.0000,  0.0000,
 0.0000,  0.0000,  0.0000,  1.0000],
p.array());

p.reset();
p.set(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
p.skewX(0.0);
_checkEqual( 
[1.0000,  2.0000,  3.0000,  4.0000,
 1.0000,  2.0000,  3.0000,  4.0000,
 1.0000,  2.0000,  3.0000,  4.0000,
 1.0000,  2.0000,  3.0000,  4.0000],
p.array());

p.reset();
p.set(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
p.skewX(-1.0);
_checkEqual( 
[1.0000,  0.44259227534509793,  3.0000,  4.0000,
 1.0000,  0.44259227534509793,  3.0000,  4.0000,
 1.0000,  0.44259227534509793,  3.0000,  4.0000,
 1.0000,  0.44259227534509793,  3.0000,  4.0000],
p.array());

///////////////////
//   SKEWY
//////////////////

p.reset();
p.skewY(0.0);
_checkEqual( 
[ 1.0000,  0.0000,  0.0000,  0.0000,
 0.0000,  1.0000,  0.0000,  0.0000,
 0.0000,  0.0000,  1.0000,  0.0000,
 0.0000,  0.0000,  0.0000,  1.0000
], p.array() );

p.reset();
p.skewY( 3.14 );
_checkEqual( 
 [1.0000, 0.0000,  0.0000,  0.0000,
 -0.0015926549364072232,  1.0000,  0.0000,  0.0000,
 0.0000,  0.0000,  1.0000,  0.0000,
 0.0000,  0.0000,  0.0000,  1.0000],
p.array() );

p.reset();
p.skewY( -3.14 );
_checkEqual( 
 [1.0000, 0.0000,  0.0000,  0.0000,
 0.0015926549364072232,  1.0000,  0.0000,  0.0000,
 0.0000,  0.0000,  1.0000,  0.0000,
 0.0000,  0.0000,  0.0000,  1.0000],
p.array() );

p.reset();
p.set(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
p.skewY( 0.0 );
_checkEqual( 
[1.0000,  2.0000,  3.0000,  4.0000,
 1.0000,  2.0000,  3.0000,  4.0000,
 1.0000,  2.0000,  3.0000,  4.0000,
 1.0000,  2.0000,  3.0000,  4.0000],
p.array() );

p.reset();
p.set(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
p.skewY( -1.0 );
_checkEqual( 
[-2.114815449309804, 2.0000,  3.0000,  4.0000,
-2.114815449309804,  2.0000,  3.0000,  4.0000,
-2.114815449309804,  2.0000,  3.0000,  4.0000,
-2.114815449309804,  2.0000,  3.0000,  4.0000],
p.array() );

p.reset();
p.set(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
p.skewY( -3.14 );
_checkEqual( 
[1.0031853098728145,  2.0000,  3.0000,  4.0000,
 1.0031853098728145,  2.0000,  3.0000,  4.0000,
 1.0031853098728145,  2.0000,  3.0000,  4.0000,
 1.0031853098728145,  2.0000,  3.0000,  4.0000],
p.array() );

p.reset();
p.set(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
p.skewY( 3.14 );
_checkEqual( 
[0.9968146901271856,  2.0000,  3.0000,  4.0000,
 0.9968146901271856,  2.0000,  3.0000,  4.0000,
 0.9968146901271856,  2.0000,  3.0000,  4.0000,
 0.9968146901271856,  2.0000,  3.0000,  4.0000],
p.array() );

All tests pass so far, but this is about the most boring and tedious thing I’ve ever had to write.

Adding fill() for 3D Objects in Processing.js

I’m working on adding the fill() function to Processing.js for 3D objects using WebGL. So far I wrote one test which fills in a box 100 different ways. From the screen shot, you can see the main issue is the box isn’t identical when opacity values aren’t 100%, so that’s what I’m currently fixing. But because there are many ways to do alpha blending, I’m wondering if I missed an option to change blending modes in the Processing language, I’ll have to look into that.

Rendering Blending Objects Last

This morning I added a static outline to a building in the C3DL RTS demo. I soon realized there was something wrong with the way the final scene looked. Here is a screen shot, can you see what’s wrong?

The problem is the lines (which make up the circle) are being rendered after the particle system. Since the particle system uses blending, it needs to be rendered last. It takes whatever is in the color buffer and blends it with its own colors, it doesn’t just overwrite the color buffer fragments like lines. Here is how it should look:

Obviously we didn’t have a demo before which used both particle systems and lines, which is why this little bug managed to slip its way into the library. The fix was simple, but I’ll need to add a ticket to our lighthouse account before I can get the changes committed.

Preliminary WebGL RTS Game With C3DL

Cathy asked me to make a cool demo using C3DL. C3DL is a JavaScript library which wraps WebGL, but also adds other functionality. I had some ideas, but starting a preliminary real-time strategy game made the most sense. It not only demonstrates a lot of C3DL features such as model loading, transformations, lighting, shaders, picking, cameras, textures, etc, but since animation is kept to a minimum, the frame rate on slower machines shouldn’t be a big deal.

You’ll need a WebGL-compatible browser to run it. You can either download Minefield, WebKit or Chromium. The demo seems to work on all three. Keep in mind I hacked this thing together in a day so the code isn’t pretty, but here it is anyway!

0.6 Plan

I’m collaborating with a few students in my open source class, working on porting over Processing to Processing.js which is a JavaScript implementation of the language. For my 0.6 release I plan to implement the following functions:

• stroke()
• noStroke()
• fill()
• noFill()
• Remaining PMatrix3D functions such as invApply()
• screenX(), screenY(), screenZ() – (already complete, but needs update)
• modelX() modelY(), modelZ() – (already done, but needs update)