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.. ;)

8 Comments

C January 12, 2012 at 14:22

Amazing performance. Great work.

Reply
darije January 12, 2012 at 18:20

Absolutely fantastic!

Reply
youp January 13, 2012 at 22:19

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

Reply
- Klas January 16, 2012 at 08:04
  
  Regarding the memory useage, the heightmap tests uses png-sequences for the heigtmaps so that eats some memory in those cases.
  
  Reply
esimov January 28, 2012 at 22:12

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?

Reply
RiaanWest September 5, 2012 at 14:21

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?

Reply
- Klas September 7, 2012 at 18:50
  
  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!
  
  Reply
Gazos January 28, 2020 at 23:41

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?

Reply