Yes, I know, pretty useless . But I like the results :

How Does it work?

In short, make an isosurface of the depth output from the Kinect and calculate the normals.

Then calculate points on the triangles where a hair starts. Now, start growing the hair in the direction of the normal in that point. Add some random and gravity to the growing direction of the hair. And to finish it of, calculate the lightning on every hair segment for a more realistic effect.

Of course, you can also use the pixel data of the Kinect webcam to make hairs in the original object colours. But I liked the black images more.

It’s uses openFrameworks + it needs the ofxKinect addon.

Source code is a real mess, so at your own risk : Kinect Hair.

                          

After a year doing mostly C++/OpenGL for client (installations and iPad games) I decided it was time to release my own app. Its a 3D pixel editor for the iPad!

Check out the official website

Watch the video to see it in action:

How did I make it…

From scratch, no Flash, Unity, Cocos2D or some other framework (beside some matrix classes I borrowed form Open Frameworks).  Although there is some Objective C in the mix,the main part is done in C++/ OpenGL ES2. Does it make sense to do it like that? Probably not, but hey, you learn a lot by doing it that way and it is pretty fun to do, and in the end I hopefully have some performance advantages.

For the main part of the 2D interface I  use a Flash like displaylist I made (OpenGL ES2/ bitmap based) . Which give me the freedom to create cool interactive interfaces like in Flash and I still have the performance of C++.

Of course you have UIkit and cocos2D etc for  i-devices. But  the main reason I made it  is that it also runs on native mac and windows and can be implemented in Open Frameworks and Cinder etc . Open Frameworks en Cinder are both nice for quick prototyping, they really lack the ability to create pretty interfaces without to much work.

And because you eat your own dog-food, I also use it on I-devices. On the plus side, its OpenglES2, so it can be nicely integrated with high performance 3D content in IOS + if I ever want to port it to a non IOS OS, it shouldn’t be to much of a problem.

If you have done ActionScript, you probably recognize the classes, like npDisplayObject, npBitmapSprite, npBitmapMovieClip, npEventdispatcher, npEvent, npTouchEvent, npTweener etc. Its far from complete/finished. But I already used it in several commercial projects. And I implement and optimise things as I need them.

Both the interface and the 3D are rendered first in there own frame buffer object, This gives the main advantage that in most cases, you only have to render one of the two at the same time,  + the cubes are rendered in a multi sample buffer (on iPad 2), with isn’t necessary for the interface . Sadly Al those frame buffers slows it a little bit down on the Ipad 1 if you have a few cubes. But if you you use a certain amount of cubes, it also becomes an advantage there.

Yes it’s a paid app, but…

It was a tuff decision for me to make, I always loved to give things away for free. But hey, maybe some of the time I put in it can be paid back this way. So I can make more apps in the future.

But no worries, even if its a paid app in the app store , I still decided to open source it. And if you read my blog and have an iPad, you probably can figure out how to build it (it’s a complete xcode project)
You get the source code here (Of course,  buying a copy would be appreciated  )

                          

And although I still do a lot of Flash development for clients, I kind of lost track on what’s happening on the web. So I was surprised to see what has become of WebGL. And with OpenGL more and more becoming my new love, I thought I give it a try and remake a C++ experiment I did in JavaScript.

It uses derivatives in the shader, which is an optional extension in the WebGL specifications, and as far is I can see, its only supported by Chrome at the moment. If you have the HTML5 audio API enabled, it reacts to the music (very basic, just some speed adjustments).

» Visit the experiment (needs Google Chrome)

The 30 tadpoles are Inverse Kinematic chains moving in a 3D Perlin Noise vector field. And since they aren’t static objects, I have to project the vertics and calculate the normals every frame in JavaScript. In that sense, the JavaScript speed is reasonable. But as always, I was hoping for more. In C++ I can easily render +500 tadpoles with 4 times as many triangles per tadpole . It should be interesting to see how fast Flash can do this… maybe I try that later.

To get some anti-alias, I render it first in a frame buffer object 9 times the window size (width*3, height*3). So, no complaints about the WebGL speed… for now…

                          

Source code: blowing_up_src

The result of a Sunday afternoon rendering:

Update:

Ronny Welter used my source code to make a cool video of the rendering process. Now you really see how its created and why I called this post “Blowing Up Images” . I also love how he added the shadow so it look like its 3D. Great job Ronny!

                          

It’s dynamic, but it needs some pre-rendering. so the sliders update in the next animation sequence.

In short, I create particles of every pixel. I pre-render the out animation of the in and out bitmap with the same Perlin Noise. Then I animate them over each other.

Check the source code for the details

Source code: ParticleTrans_src

Edit: sometimes the example  doesn’t work in the browser (blame twitter, and there ever changing crossdomain policy )

                          

This time I made a simple web crawler that visualises html pages and the links between them

In short: Every circle is a page, they try to group per domain, the biggest circle is the start page, the smaller the circle, the more clicks your away from it (the smallest ones are 3 clicks), if there is a connection there is a line between them (the deepest items aren’t checked for connections between each other)

An example, click to view in full size (starts from neuroproductions.be) :

It only works local due cross domain issues and spring-graphing almost 2000 nodes is not what you call fast, so no live example.
You can always download the source code and try it yourself. (Warning: the source code is a crappy mess )
Source code: WebCrawler_src

I should have put more time in it, but time flies, and I already have some new exiting ideas for next weekend…

                          

So I looked up the TTF specifications and started reading those bytes. Due to time shortage it wasn’t a complete success. But I got some results and the cool thing about having the raw font data is that you can manipulate it:

But as you can see, it’s not really that fast or spectacular and my parser is not what you’d call complete or bug free (A lot of Fonts don’t work or are mapped wrong). I guess the important thing is that I learned that you don’t have to be afraid of parsing binary files. It’s not so hard as I thought.

But it took some time and effort, so I made an other example to fill this Blog post (inspired by Japanese toy typography)

I added the source code, but I don’t recommend using it in a real project. There are more optimal ways to get those results. And there are definitely better TTF parsers out there like hxswfml (there is a swc you can use in Flash) or FontReader.

Source code with the two examples (without the fonts ): ttf_source

                          

I never did any real JavaScript, so I went to w3schools.com and browsed thru the JavaScript tutorials and started coding. It took me +- 8 hours to to finish the job: the HTML5 version.

My opinion

But first a disclaimer:  I only have one day experience with JavaScript. Correct me if I say something wrong.

Possibilities

Its cool how can manipulate the DOM elements, I really loved that. And yes, It can and will replace some of the Flash out there. But there are sill a lot of limitations.

The canvas element is not an alternative for Flash. There is not something like a display-list and no mouse-events for separate elements. But I guess you can emulate that with a lot of layered canvases and other DOM elements, combined with mouse position calculations etc, but that’s going to be a mess and I don’t know if my cpu will like that… I’m also missing webcam access, decent sound handling, 3D (webGL will do that, but it won’t be in IE9), real video integration etc, the list goes on.  You can say that they are details, but I used those things in almost every recent commercial project. At this point HTML5 would be a step backwards for me.

Performance

Comparing the Flash and the HTML version wouldn’t be fair. I probably did some stupid things in the HTML version, and I know I did some stupid things in the Flash version (which is a couple years old). In many ways the JavaScript version handles  things smarter than the Flash version. The least thing you can say about the Flash version is that it wasn’t optimized for speed.

But I was quit surprised about the JavaScript speed. It’s decent in a modern browser. I was expecting that I had to make a striped down version (with less nodes) But it seems to work fine. But HTML5/JavaScript is no miracle, it uses a lot of CPU for this and it will crash if you have an older browser or slower computer.

JavaScript

This is my main concern with the hole HTML5 thing, sorry guys, but JavaScript sucks. People who say that JavaScript is the future of the web obviously haven’t done some real programming in it. The dynamic objects, the loose typing, the prototype model, the silent failing, they are all a real pain in the ass. For those old enough to remember, JavaScript feels a lot like/is ActionScript 1…

It’s doable if you make a 500 lines project, but if you need to do a 10,000-100,000 lines app/website (which I do daily in AS3) it’s not going to be funny any more.

Mobile Safari

Mobile Safari can’t handle it on an iphone. It goes really slow. But you can’t compare a normal cpu with a phone cpu. And I didn’t want to write about this, till I noticed something very strange and disturbing when I was testing it on the iphone.

Take a look at example below, and try to drag both images:

The left image just reacts as you would expect from an image in a browser. With the right image, I stopped the default browser behaviour, and made my own drag.

This is something very useful. Besides for dragging, you need this functionality if you want to make a html5 drawing app or, and this is the interesting part, if you want to detect mouse/touch gestures

But what seems to be the case : This doesn’t work on Mobile Safari! Does this mean that Apple is blocking html touch functionality in Mobile Safari? It seems so. This wasn’t right. Thanks Ryan for pointing that out! There seems to be good touch support in JavaScript/on the iphone, even multi touch. Which is very cool! -> http://www.quirksmode.org/m/tests/drag2.html

They took our jobs!

You can’t ignore that some Flash developers out there are starting to worry about there future. But I don’t think you have to. If there comes a day when Flash will be obsolete (and I don’t see that happen soon), we’re gonna be excellent JavaScript developers.

I never did any JavaScript before, and I sill managed to make that example in one day. I’m sure it’s not perfect, and I probably made a lot of beginners mistakes. But I know it won’t take me long to make the switch.

As a Flash developer you can script advanced animations and interaction and UIs from scratch. You know your math. You can create large and complex client-side apps. You know how to be creative and create great user experiences with a limited tool-set. And you really love to do all those things.

It’s that combination of talents that made us leave HTML for Flash in the first place. And I think that those talents make that Flash developers can and will kick most HTML’ers asses when it comes to JavaScript development.

So, if that day comes, there not gonna take our jobs, but were gonna take theirs.

Will I do more JavaScript/html5

WebGL is definitely still on my to-do list, but apart from that,  I think I will stick with Flash for now. I have some pretty cool commercial projects coming up and Flash is still is the tool of my choice for experimenting.

                          

I didn’t feel much for creating an other flat Mandelbrot set. So I decided to make it a little more challenging for myself and try something in 3D.

There are already  many amazing renders out there. But instead of copy/pasting formulas, I tried to find my own. And to my surprise, I found some very strange and interesting stuff, especially if you consider they are just mathematical defined volumes.

To render those volumes I made a very simple (and very slow) ray-tracer which follows the ray and start checking points to see if they are in the fractal. A normal ray tracer would just calculate the intersection of the ray and the volume, but I don’t know if that is even possible with this kind of stuff?

If I found a point, I looked near that point for 2 other points so I could calculate the normal and ‘setPixel’ a normal map of the volume.

» a live example (low quality)

After that, I used a Pixel Bender filter (from Stok3D by David Lenaerts) to add phong shading to the renders.

Some of the renders (click to enlarge):

I found a lot of these things and I should have made more images,  but it takes many hours to render them in a high quality. I guess I really should start learning C++…

I included the source code so you can start looking yourself for those amazing volumes out there. If you find something cool, let me know
source code: fractal_raytracer_src

                          

Alice’s Adventures in Wonderland. Written in 1865 by Lewis Carroll.
The full story, 12 chapters, more than 25000 words, all crammed in one Bitmap

» View in high resolution

Detail:

The text “fitting” algorithm isn’t perfect yet, but hey, it did the trick.

Source code: Alice_src_FDT
FDT Air project + I lowered the input bitmap size and quality for this download