Archived entries for Demo

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

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

Lines with depth

I had the idea for a while to do something with points and lines in 3D space, so yesterday after reading the post of bit-101, I finally started to do some testing. After creating a 3D sphere with lines, a 3D landscape of lines I finally thought it would be more exiting to do something with the web cam.

The idea is simple. Scan an image, in this case the image from the web cam from left to right. The more brightness a pixel has, the more the line gets pushed back at that point (in 3D space), and if it contains no brightness at all, it gets no depth at all. Repeat this process until you covered the whole image from top to bottom. Because flash needs to draw plenty of lines I used the new drawPath function in Flash 10 to speed things up a bit. If you have a webcam you can play around with the result for yourself over here.

3Dlines

Kaleidoscope

Yesterday I did a little experiment to simulate a kaleidoscope. First I added some mouse interaction to  it, so the user could drag the mouse to change the shape, but then I decided it would be more fun to let the kaleidoscope react to music. So turn on you sound and check it out here. Click on the movie to change the photo that is used to generate the image.

kaleidoscope

Fun with pARTicles

I just made two flash movies that use particles to create a nice visual. You can try them out here and here. Move your mouse around to create the image.

Particles 1

Particles 2

Word cloud

October last year I worked on the new website for 180 Amsterdam with the guys from random.nu. 180 is still working on the content for the new site, and it should go live anytime soon, I’ll keep you posted. We did a lot of prototyping and experimenting for the different views of the content. One of them was a display of the projects based on how many media items each of them contained. It didn’t make it to the final version, but I would still like the effect. Check it out here.

Word cloud

AStar pathfinding demo 2, with source

Here is another demo of my actionscript 3.0 AStar implementation. If there is a path the algorithm is guaranteed to find it. However, it doesn’t necessarily mean that this is the shortest path.  You can play with the demo here and download the source here.

AStar demo 2

AStar pathfinding demo

A quick AStar pathfinding algorithm demo, soon I will release an open source version that will be available to download. I just have to make it a little bit easier and flexible. Check the demo here.

AStar



Copyright © 2004–2009. All rights reserved.

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