HD Interaction

Pixel search algorithm

Continuing to exploit my recently found spare time, I thought it would be fun to see what happens if you scan a bitmap in search for the greatest color pixels. Turned out to be pretty cool! Even though you can probably do this a million times faster in Photoshop, I’m still pretty happy with the result. Check the images below. Check my flickr site for more details.

So, how does it work:

• Sort all the pixels by color. 0xFFFFFF first, 0×000000 last, this means that yellowish pixels will be searched first.
• Remove the first pixel from the sorted pixels, and find the neighboring pixel with the greatest value. Remove this pixel from the list.
• Continue until no neighbors are found.
• Repeat step one until no pixels are left.

It is a very slow algorithm, so I made this video of the process and increased the speed.

UPDATE: made it faster, sorting the pixels had a slow element to it. Now the algorithm is finished within several seconds.

3D sound waves

Finally had a moment to do my own stuff again. And since I like to play around with sound and visuals, this is the result! Be sure to close any other windows of your browser that have video or sound, otherwise it might not work.

Custom Alternativa3D flat shading

Choosing the right platform, tool or engine is essential for the success of your project. Right now I’m working on a 3D game, so naturally I thought of using Papervision3D because I’m familiar with it. Our game however, relies heavily on collision detection and fast rendering, and both are done better by the Alternativa3D engine. The only thing that is missing is any form of lighting the 3D objects dynamically.

We need to dynamically add shadows on our models because baking textures by using 3D studio max is not an option, but the Alternativa platform does not support it (yet). So I had to add it myself. The only problem is that the engine is not open source. I asked if I could get it, but they didn’t give it to me. So I had to decompile the engine first, which presented problem number two: decompiled source code contains lots of errors.

It took me 1 day to fix the source code, and then another day of optimizing the code for Flash player 10. After that was done, adding the flat shading was done in less then an hour. I added flat shading for TextureMaterial and MovieClipMaterial, which are lighted only the first time their surfaces are created. But the FillMaterial has dynamic lighting (only ambient).

Check out the demo here. Click the color pallet to change the color of the light and see how it affects the color of the surfaces of the spheres.

Processing webcam

My first experiment with Processing, based on a previous experiment with Flash.

Random path

I had this idea to let the Math.random() function generate paths in flash. What does it look like? Like this. The algorithm is really simple (as usual):

1. Pick an empty point
2. Pick a random neighboring point which is not occupied
3. Draw a line between the active point and the picked neighbour
4. Set the active point to the neighboring point
5. Repeat step 2
6. When no neighbors are found start from step 1

Perlin noise generative art

Two days ago I continued to play around with perlin noise (see previous experiment). The idea is to let lots of particles crawl over a perlin noise bitmap. Each frame they will leave their trail generating nice patterns like the ones below. I wrote a little tool to influence the curve width, speed of the particles, colors, type etc. Try it out for yourself over here, and show me the result when you’ve created something nice.

Papervision3D and inverse kinematics

Today I had some time to do some experimenting again. In the Placebo project I used 2D inverse kinematics on the octopus tentacles, so when that project was finished I was curious how that would work in 3D. Turns out not much different then the 2D version. Check out the result over here. I also added a drawing function to the experiment, just click the mouse on the canvas to turn drawing on and off and create your own artwork.

House of orange

Yesterday, a new website I’ve been working on with the guys from Random went live. It is the portfolio site for the modeling, photographer and stylist agency House of orange. For this site I created the architecture and data communication, as well as the menu and the collage view (e.g. the landing page). An extensive CMS is backing up the website for easy maintenance. Users can add their favorite images to a lightbox after which the lightbox can be downloaded onto their computer. You can check the website here.

Check out the video below for a recorded example of the website.

Glow filter patterns

This afternoon I was in a designer furniture shop in Amsterdam. While I was there I spotted a carpet which was made up out of lines of fabric (check the image below).

This gave me the idea of doing something similar with code. It ended up being a pretty simple thing to do. You just need to start out with a basic shape, then you need to draw that shape onto a bitmap. The next step is to apply a glow filter with a specific color, and repeat this over and over again with different colors. You can try it out yourself over here. The result may end up something like this…

Interactive waves

It is still work in progress, but I couldn’t keep this for myself. Based on perlin noise using the brightness of pixels (again) to push up each line of the wave, drawing the layers from back to front and giving them a different color. When you move the mouse left, right, up and down you will influence the perlin noise bitmap, which affects the waves. Try it out here.