Archived entries for Experiments

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.

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:

To the animation

To the animation

To the animation

http://www.hdinteraction.nl/blog/experiments/web/

 

HTML 5 canvas particles

Finally, a year and a half after I wrote that I was still waiting with html5 development, I’ve finally took my first steps in exploring the canvas element. I took a familiar subject, particles, mixed it with my basic javascript knowlegde and Google search skills, which resulted in the following (Chrome and Safari only):

http://www.hdinteraction.nl/blog/experiments/html5/particles/

First comparison to developing Flash applications:

  • Haven’t found nice development tools yet (tips are welcome)
  • Debugging javascript takes a lot of time
  • Cross browser support for the techniques I used is poor
  • Browser performance varies greatly
  • But, it is a lot of fun

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:

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.

circles

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.

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.

3D sound wave



Copyright © 2004–2009. All rights reserved.

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