Archived entries for Algorithm


I’ve always been interested in artificial intelligence and always wondered how hard it was to create or implement a flocking algorithm. I ended up using a simplified version by some described in articles I found online.The “Boids“ will follow or repel each other based on distance, speed and travelling direction. If there is no Boid to base the speed and direction on, the Boid will try to travel towards the mouse location. Try it out over here.

Fun with circles

It has been a while since I made something fun, but today I had an idea that could be done fairly quick. So after a quick test if it actually looked alright, I started tweaking colors, sizes, angles etc. And before I knew it I had a little tool. Just mess around with the controls, and see what happens. You can see it, and play around with it over here.

In the woods

After working on this project for some time (postponing the deadline, client changes etc), we finally put it live last week. In the woods is a teaser website for the first part of a trilogy that will be released later this year (or next year). The original request from the client was to build a 3D forest in Flash, that was not going to happen :) , so I suggested to use a parallax effect instead, combined with a forward motion. The result turned out quite nice as you can see here Prepare for a lot of loading though, since a lot of graphics have to be loaded for each section.

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.

paint taxi

paint traffic

paint market

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.

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.

Alternativa3D flatshading

Processing webcam

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

Philips MSS 2009

My first month as a partner at Random is over and my first project is finished. We had to make a campaign website for the Philips MSS shaver. The idea was to use your webcam and a face recognition algorithm to “scan” your face so the shaver could attach itself to your face. Shaving your face also triggers panels on the right side to explain the unique features of the shaver. People without a webcam can shave the face of a model instead. Check out the website over here, or watch the video below.

Philips MSS 2009

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

Random paths

Random paths

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.

perlin noise 1

perlin noise

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…

Glow filter pattern 6

Glow filter pattern 5

Glow filter pattern 1

Glow filter pattern 4

Copyright © 2004–2009. All rights reserved.

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.