More HTML5 Canvas experiments
It is more of the same, but figuring out the capabilities and performance of the html5 canvas element resulted in two nice animations. Check them on our Random Studio labs site, html5 web, and html5 worms.
Archived entries for Experiments
Flocking
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.
Another Flash particle animation
I used a basic version of the following animation on the random.nu portfolio website. But after adding it, I played around with it a bit more, and ended up with this:
http://www.hdinteraction.nl/blog/experiments/web/
Random Studio portfolio site
Finally we launched our new site for Random Studio. The site shows of both projects and experiments in a quick and responsive way. I did the original development architecture and animation style but everybody at Random participated in the development of this site. It was a tough cookie to crack, but in the end I am very pleased with the result. I also created the two initial experiments: The weather man, and Message in a bottle. The site is backed up by a shadow html site, for all the people that haven’t installed Flash on their devices (iPad/iPhone), but the design for that still needs some work.
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.
Photo reel video 2
New video, this time from winter sport earlier this year. I promised to make a video for the guys, so now I did.
Photo reel video
Whenever I go on holiday I tend to shoot lots of photos, but in the end I usually pick the 50 best photos and upload them to my Flickr account. So, a couple of weeks back I made about 1500 photos in Cape Town, and selected only 46 photos to put on my Flickr account, wasting 1400 shots. Then I came across this video , and thought, why not do the same thing with all the photos I took:
OpenFrameworks
Today I had my first encounter with openFrameworks. Feels the same as Processing, except using c++ rather then java. I like it.
Pulsating circles
Today I had to do homework again. Not for myself, but for my girlfriend, Anna Kröger. She came up with the idea of black an white outlines, continuing outwards from a certain shape. In addition to paintings and drawings she thought it would be fun to do an interactive animation. This is where I came in. We came up with the following animation. Hover your mouse over a circle, or click one, and see what happens.
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.