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

                          

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

                          

I tried it with “BitmapFilling” a stroke of triangles…

» View the brushes

Source code: BruschTest_src ( It’s a mess! )

                          

When you use an isometric perspective, the cubes are all the same. So instead of rendering each cube every frame, you can render only one cube and use that cube as a particle to render a full scene. This way you can easily extend the limit of +-1000 cubes to 20000 or more cubes.

Motivated by the very cool 3D pixel editor Q-BLOCK by Okuyama Kazuya, but mostly because it was great fun to make, I decided to take it one step further and started to build a simple 3D pixel engine.


Use the arrow keys to move the character, drag to rotate the scene.

» View 3D Pixel Engine

At this point, the Pixel3DObjects have x, y, z, rotationX, rotationY, rotationZ properties + they  support very basic animation (gotoAndStop). As input it uses transparent bitmapdata (I use pngs) Where the horizontal “sprites” are the depth layers, and the vertical “sprites” the animation frames (see img below).

But a 3D engine wouldn’t be complete without a possibility to import external generated 3D objects, so I also made a Collada parser witch converts a standard 3D mesh to a 3D pixel object:

» View Collada Elephant

For a good result I had to raytrace the mesh from different angles and regularly check for duplicated cubes. But for big or complicated objects it takes a while to generate all the needed data. So the elephant is actually pre-rendered and just uses the output data from the raytrace object.

I include the source code (with the two examples) but its not what you call user friendly and most features are incomplete or buggy at this point. So you are warned.
Source code: Pixel3D_source

                          

But to do that, I needed a “world” normal map of the 3d object. The problem was that standard 3d normal mapping is done with local maps (img 3). I’m sure someone familiar with 3D modeling programs can create world normal maps, but I don’t, I tried for hours

So I had to create the world map in Flash and unwrap the hole thing to the local map’s UV cords. Then I used Pixel Bender to create one map by adding the local and the world map together. So I ended up with 2 maps, the diffuse map (img 2) and the world normal map (with the details of the local map). All that was left to do was render the two on top of each other and apply a Pixel Bender blendmode to create the shading effect (something like this, but with Pixel Bender)

» View normal mapping experiment

Ok, all nice and stuff, but there is actually something very interesting going on (correct me if I’m wrong).
Lets say you want an object with a bitmap material and phong shading. In the classic way you have to project every normal of every vertex every frame and recalculate the the uv mapping to draw the phong layer, After that, you blend the phong and the diffuse layer.
But with the normal map, you just have to (pixel)blend 2 bitmap material renders…. I didn’t tested it yet, but it sounds a lot faster to me? + there is no extra cost for adding local normal maps.

I joined the Away3D team and this is part of the experiments for a new FP10 branch. So no source code for now. If its still is interesting after optimalization and further testing, it will be in Away3D sooner or later.
But if you have questions, your free to ask.