But recently I did a nice project for Little Miss Robot. They asked me to make an Air application that generates images with code. At that point the code didn’t really mater. The only thing that counted was the result.

Some of the type of pictures the application creates (click to enlarge):

(no source code for now, but think Perlin Noise and Delaneay triangulation ) Ill update this post when the app is available. In the meantime, there is a video.

This whas a big difference in mindset for me. The code was just the medium, not the goal, and I actually liked the approach of making interesting images instead of making interesting code.

I looked around on the internet to see what was actually going on in the generative art scene. And one thing I noticed is that a lot of people use photos to extract colours and/or shapes for there art (I also did it).  Which makes a lot of sense, photos always have a nice natural colour scheme. But with everything I saw that uses this technique, the source pictures got somehow lost.  So this gave me the idea to extend the original pictures instead of just using them.

Some results of exploring that concept (click to enlarge):

Original (public domain) pictures:
http://www.flickr.com/photos/library_of_congress/2179909780/
http://www.flickr.com/photos/library_of_congress/2179146618/

Source code:  generative_art_source

An other thing I saw where beautiful 3d structures (mostly made with structuresynth and rendered with sunflow) So I thought it would be nice to make stuff like that in Flash.

Creating 3D structures ain’t a problem, but two things I really wanted for my renders where depth of field and ambient occlusion. So I messed a round with depth-maps to create screen-space ambient occlusion and custom blur filters for the depth of field. But the result wasn’t really satisfying. To get a good result I had to ray trace my structures.  Creating a ray tracer in ActionScript seemed like an interesting challenge, so that’s what I did…

Some of the ray traced images (click to enlarge) :



Making a ray tracer is quit addictive, and soon I wasn’t satisfied with my limited feature set and at this point I don’t feel I have explored those 3D structures enough. So in the next post (coming very soon…) some more renders and more about the ray tracer + the ray tracer source code. So, stay tuned

And finally, a little preview of things to come ( I admit, the shading is a little bit overdone :p ):

                          

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

                          

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.

                          

As input for this test I “made” two images (The model came from here:  blendermodels.org): One with the normal mapping and one with the colours. (normal mapping tutorial for blender)

Applying some Blendmodes and ColorMatrixFilters did the trick. Maybe to optimize the whole thing I should write a PixelBender filter for it, but I’m not sure its gone be faster? Anyway, here is the result:

» View normal mapping experiment

The whole point of this is to create a low polygon model, mapped with a high polygon normal map and so creating a fast rendering model with lot of shaded details. But that’s probably for next week

Source code: NormalMapTest_source

                          

» View “ZBrush” experiment

It’s far from perfect, but it will do for now

Source code: flash_zbrush_source  (Its a mess, sorry)
I shamelessly based the geodesic sphere code on the Away3D geodesic sphere and the shading on keim at Si‘s cool wonderfl’s experiments. (I think that is his name?)

                          

» View test

One of the cool things is that you don’t have to project every single vertex,  but only the control and anchor points.  ( Assuming you can z-sort en calculate the normals without it…?  I still need to look at that ). An other cool aspect is that you can easily change the quality (= number of triangles ) at runtime, by changing the number of segments of the beziers.

Its just the beginning, still a lot of research and experimenting to do before It becomes something useful. If it ever will…

Source code: source_nurbs_part1

                          

An other try at 3D, this time a shading test.

I first wanted to try it with a PixelBender shader, but I found out you can’t use UVW mapping with a shaderFill? I also abandoned the whole drawTriangles method (to much disadvantages) and switched to the drawGraphicsData method, it’s not that fast as drawTriangles, but its much faster than the classic drawing API.

» View test

(drag to rotate the cube)
Source code: shader_source (Warning! Its a mess )

                          

Since I had the normals, I also added some very simple shading. You can view the fur shading process here (Click to start rendering. Update your FlashPlayer if you don’t see anything or when the model is very small ). The rendering is very slow, the Santa is created with more than 10 million line-segments and I didn’t really optimise the code. So have some patience.

Source code: Fur_3D_source

                          

But I soon stumbled on some problems.

-  The drawTriangles method uses the same indices for the uv mapping and the vertices. In the collada they are separated (witch makes actually more sense)
- Drawtriangles doesn’t do z-sorting.
- Drawtriangles only takes one bitmap for the mapping.

Overcoming these problems is actually pretty simple. Just calculate and draw each triangle individually and do the z-sorting in between. But thats very very slow…  So I had to drop the live mapping.

Instructions: Click on the stage to “render”, click on the blue circle to switch between models. If you don’t see anything, or the models are very small, you need to update your FlashPlayer.

» View example

Anyway, learned a lot of new things about 3D and I’m looking forward to the release of PapervisionX to see how they handled it, and how much of the new API they actually use.

Source code: collada_source  (only works with Google sketchup colladas with bitmap materials)