Animating LSystems

I found an amazing article on animating LSystems which uses physics to apply forces to the trunk, branches and leafes of a tree. In the thesis of Nicholas Hampshire one can find a full description of the algorithm used to create some realistic motion. Interesting on this solution is the use of physics, particles and bend forces to create a tree which keeps its shape. When using regular particle systems, you need to create lots of springs to keep the shape together. In this thesis Nicholas describes a way to create this spring forces just from geometric data.

27 October 2009

openFrameworks FreakDay #1

Last weekend we had our first openFrameworks FreakDay with a group of ~14 creative-developers. Some did already amazing things with oF others just came to learn to use it. After a wonderful introduction on oF by Theo everyone started with examples applications or their own projects. This was our first meeting so we had to figure out the format.. for the next meeting we're thinking to create interest-groups where you can participate on a certain subject and work as a group on a problem and try to help/figure out how to create things with oF. You can think of a interest-group "hardware<>of" or visualisation/3D/openGL. We'll think about this format and start a mailing list where everyone can participate on this discussion.

19 October 2009

Electricity plan + closet design

Just some images so I know where to put the electricty ;-) I'm currently working on my house and puttng all the electricity back into it's place; I'm also working on a closet design.

7 October 2009

Exportscript for Illustrator

Ever since I work with Illustrator CS3 I'm looking for an easy and fast solution to export visuals to png/gif so I can use them for my websites. Today I had to export again a couple of layers and inspired by Todd Vanderlins openFramework<--> illustrator connection I started with a simple script that exports each layer, and each group on each layer to a separate PNG file and this works fantastically!

/**
* Based on the export to png script from Niels Bosma
* Changed in such a way that we exprt each group per layer to a png.
*
* @author   Diederick Huijbers
* @date 2009.10.06
*/
 
 
var document = app.activeDocument;
var folder = Folder.selectDialog();
 
if(document && folder) {    
    var options = new ExportOptionsPNG24();
    options.antiAliasing = true;
    options.transparency = true;
 
    var n = document.layers.length;
    hideAllLayers();
    for(var i=0; i<n; ++i) {
        var layer = document.layers[i];
        layer.visible = true;
        for(var j = 0; j < layer.groupItems.length; ++j) {
            hideAllGroups(i);     
            layer.groupItems[j].hidden = false;
            document.cropBox = layer.groupItems[j].geometricBounds;
 
            var file = new File(folder.fsName+"/"+layer.name+"_group_" +j +".png");
            var options = new ExportOptionsPNG24();
            options.artBoardClipping = false;
            document.exportFile(file,ExportType.PNG24,options);
        }
    layer.visible = false;
    }
    showAllLayers();
    showAllGroups();
}
 
function hideAllGroups(iLayer) {
    for(var i = 0; i < document.layers[iLayer].groupItems.length; ++i) {
        document.layers[iLayer].groupItems[i].hidden = true;
    }
}
 
function showAllGroups(iLayer) {
    for(var i = 0; i < document.layers.length; ++i) {
        for(var j = 0; j < document.layers[i].groupItems.length; ++j) 
            document.layers[i].groupItems[j].hidden = false;
    }
}
 
function hideAllLayers() {
    forEach(document.layers, function(layer) {
        layer.visible = false;
    });
}
 
function showAllLayers() {
    forEach(document.layers, function(layer) {
        layer.visible = true;
    });      
}
 
function forEach(collection, fn) {
    var n = collection.length;
    for(var i=0; i<n; ++i) {
        fn(collection[i]);
    }
}

6 October 2009

Creating a separate preloader for your Flash website

What you need to about preloaders

What you need to know about preloaders when you create a separate preloader.swf for your site.

I'll explain a couple of things which are important when you create a preloader for your Flash based website. First of all: use a separate preloader.swf, do not put your preloader code in your site.swf. When I talk about site.swf, I'm talking about your big fat 2MB Flash based website and the preloader.swf is your slim and shiny tiny 2KB preloader.

In your site.swf (pseude code)

The important part is the ADDED_TO_STAGE event listener. Put this in de constructor of your Document class. This event is fired when the preloader.swf loads in site.swf and adds it as a child.

import flash.display.StageAlign;
import flash.display.StageScaleMode;
package {
  public class Site extends MovieClip {
 
    public function Site():void {
        addEventListener(Event.ADDED_TO_STAGE, init);
    }
 
   private function init():void {
      //  create your children here!
        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;
   }
 }
}

In your preloader.swf (pseudo code)

After you've loaded your site.swf, you can start the intro tweens etc..

When you need to call a function on the loaded swf use:

var myLoader:Loader = new Loader();
var myUrlReq:URLRequest = new URLRequest(”data.swf”);
myLoader.load(myUrlReq);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);

...and the complete handler...

function onLoaded(event:Event):void {
    var Square:Class = event.target.applicationDomain.getDefinition(”Square”) as Class
    var mySquare:MovieClip = new Square() as MovieClip;
    addChild(mySquare);
}

20 September 2009

Blender scripting

Scripting a 3D object in Blender

import Blender 
from Blender.Object import *
from Blender import Window,Scene,Material
from math import *
import sys
 
scn = Scene.GetCurrent()
num_rows = 10
num_objects = 19
angle_per_obj = (pi * 2)/num_objects
radius = 10.4
angle = 0 
z = 0
 
for row in range(num_rows):
    angle += angle_per_obj/2
    for x in range(num_objects):
        print x
        Blender.Object.Duplicate()
        active = scn.objects.active
        x = cos(angle) * radius
        y = sin(angle) * radius
        active.LocX = x
        active.LocY = y  
        active.LocZ = z
        active.RotZ = angle + pi/2
        angle += angle_per_obj
    z+= 3

20 September 2009

Creating a GUI for openFrameworks

Just a note to myself:

When defining a bounding box it's wise to use members variables like:

min_x  
min_y  
max_x  
max_y

and not variable like

x  
y  
width  
height

Why not?
Because using the min_x/max_x variant reduces the number of calculations you have to do for both collision detection and drawing; For example this is how we check the bounding box collision using the min_x variant:

return ((nX > min_x) && (nX < max_x) && (nY > min_y) && (nY < max_y));

where this is the x/y/width/height variant:

return ((tx > x) && (tx < x + width) && (ty > y) && (ty < y + height));

Do you see we need to accumulate a couple of things over there? Well these are just 2 calculations which are dont around 60 times per second when you've a framerate of 60 for each visual object you have.

13 September 2009

Making Electronic Thingies In Amsterdam

Yesterday was the first time I visited META; a group of developers, designers, artists, mediatechnologists who get-together and talk about interesting projects and hardware related thingies. I've to say it was really fantastic to meet up with other people who dream about interactive/electronic installations. Adriaan of Waterleven had a small talk about his project; you can see some photos over here.

Tim Olden showed us some pictures of his "light installation" (what's the name?) he showed at LowLands 2009.

Just as a reminder, this book, The Hidden Language of Computer Hardware and Software passed along; maybe or probably it's interesting to read.

8 September 2009

Export your Illustrator work to separate PDF files

This weekend I had to create an user interface design for which I used Illustrator. The document has about 200 layers separated over ~30 pages. For each page I created a main layer that contains all the elements for that specific page. Well, after I finished the UID I wanted to export the pages to a PDF. I couldn't find a multi page option for the export and therefore I had to export each layer (the page layers) one at a time. By default the settings of the PDF printer exports everything, even hidden layers. You should disable this option when you want to export your pages. Another thing I did was to create a crop area around the visuals in my document that I wanted to export. Using this crop area only the visible/necessary elements are exported. Then I tweaked the size properties in such a way that the page size of the pdf matches exactly the size of the crop area (in the printer settings dialog).

Have a look at the screenshots for the important settings I changed after doing File > Print ...

30 August 2009

3D math

Playing around with 3D rotations.. I'm rotating vertices around several axis to create a peristaltic movement in the figures you can see in the image below. They just use basic sin and cos functions.

30 August 2009