Jan 11, 2012

Pixel particles

For a recent project there was a need for lots of particles, in flashplayer 10. Here´s some of the experimentation that came out of that. There are no preloaders, so just wait for something to show(some are quite heavy).

2x pixels, heightmap/colormap
2x pixels, heightmap/colormap shapes
1x pixels, heightmap 200x200px
1x pixels, heightmap 300x300px
1x pixels, heightmap 400x400px
1x pixels, 3d teapot 50k
1x pixels, 3d teapot 100k
1x pixels, 3d teapot 200k
1x pixels, morph A (click anywhere to morph)
1x pixels, morph B (click anywhere to morph)
1x pixels, morph C (click anywhere to morph)

Lesson learned is that linked lists are way faster than arrays.. ;)


  • Amazing performance. Great work.

  • Absolutely fantastic!

  • smooth without hardware acceleration, but it take a lot of memory.

    • Regarding the memory useage, the heightmap tests uses png-sequences for the heigtmaps so that eats some memory in those cases.

  • I’ve done something similar here: http://wonderfl.net/c/3G3j, with linked list too, tough with less efficiency. Any tips how You implemented the transition?

  • Very impressed with your work, especially the morph animations. I’m working on a kinect particle data driven app, and I had similar transitions in mind. Any chance you can give me some tips?

    • Thanks!

      It´s pretty straight forward, but there are some variations you can play around with.

      Let´s say you have two shapes, shape0 and shape1, just a bunch of xyz coordinates.
      So if we have x of one point, like:
      x0 = 1000
      x1 = 2000

      Then you have a morphValue = 0, 0 means x0 and 1 means x1, so you can morph between the positions with something like: newx = x0 – (x0 – x1)*morphValue
      So then you can tween the morphValue between 0 and 1 to morph between the shapes.
      I made an array of morphValues and had like 300 morphValues and each point had an index of which morphValue to use. That way you can can tween all morphValues with a bit of delay in between them, so you get a more “fluid” morph.

      I also played around with presorting the points and sort them on the y-value from top to bottom for example, that way the morph would happen more like a “wave”.

      Hope that made some sense and helps a bit!

  • This is awesome, can’t believe it’s from 2012.

    I’ve just discovered http://oos.moxiecode.com/js_webgl/particles_morph/

    Any tips on converting models to the point array you use?

Leave a comment


    Sorry, no Tweets were found.