Particle power!

Ever since Ralph Hauwert first announced his part of the LetItBloom site, I kinda wondered how he did it.

 

V1

A few weeks ago, in Amsterdam, Ralph explained a bit about it during his session. And then finally yesterday (actually the day before…), I bit the bullet and spent the evening making it happen. Only 4 hours later I had a first version that got pretty close to it.

Check this very first edition on the following URLs. The text is generated using AS3, so you can just make it show any text you want. Just change the URL params 😉

The particles move to a perlin-map (red & green) with text in front of it. The color of each pixel is used to determine whether the particles has to move up,down,left or right and how far. Not how fast… That left all particles moving almost equally fast… Which is kind of a minor downside to me… Seeing how it almost was 6AM, I felt it were a good idea to catch some sleep…

V2

When I woke up a few hours later, I felt the irresistible need to improve the effect of the particle swarms and optimize some code in order to squeeze a few more frames per second out of the code.

I ruined the rest of my day coming up with another version. This time the perlin-map’s color would not just serve as a guide who tells the particles where to go and how far. The map would actually act as a force field: Each pixel would accelerate the particles on both the x and y-axis. As a result: we have now very different speeds of particles! And it looks pretty cool too! Example below. The text can be controlled using the URL parameters.

Watch out! Nerd time!

This final version (well… final…) looks pretty good in my opinion. A few details about it:

  • 25000 particles (1 particle = 1 pixel)
  • runs up to 85fps (Capped this at 50fps, otherwise it the animation would be too wild)
  • The bitmapdata object’s dimensions: 750 x 350

Most important things

During this experiment I learned a lot about optimization. A few things that might come in handy some time:

  • Instead of using setPixel() for every single pixel you wish to animate, only update the bitmapdata once using setVector(). You can get the vector of pixelvalues from the bitmapdata obj using getVector(). Then change the values in the vector. When done, appy the new values to the bitmapdata object using setVector(). This will give you some valuable milliseconds (believe me: every millisecond counts when doing 25 000 loops per frame)
  • Instead of looping through long arrays  (or even vectors) use linked lists: They’re easy and fast!
  • Bitwise operations might look very unhuman, but they can buy you a great deal of milliseconds! Make sure you check the bitwise possibilities that there are out there. A lot of great minds have shared ‘common’ calculations in the form of bitwise operations that turn out to be just a bit faster.
  • Think a lot about what kind of calculations you’re going to make and most importantly: When? For example in my first version: I get the pixelvalue from the perlinmap every iteration of the loop (times 25 000). However in version 2, after generating the perlin map, I immediately calculated the forces of every pixel and saved the values in a vector. I then request those values in the loops. This kind of precalculations will give you valuable milliseconds per frame and thus more fps.
  • When editing pixel per pixel, make sure to lock()/unlock() your bitmapdata. That will prevent the bitmap from updating after every change. Again: giving you more milliseconds for your viewing pleasure!

I can’t really post any technical optimization tips (since I really just got started myself) but there are tons of articles out there on this topic. I suggest you check those out for more practical optimization tips.

I’m looking into doing more experimentation regarding particles. If you have any optimization techniques that I should know off, don’t hold back to educate me 🙂 Either way: I really love this, so stay tuned!

Sources: Click (Flash Builder 4 project)

Ronny

view all posts

Ronny is a freelance frontend developer with a wild passion for creativity and a relentless hate against flat design. Ronny spent years as a Flash developer before moving to HTML5 and rediscovering fun and happiness.

2 Comments Join the Conversation →


  1. Doc

    Hey, ik ben van de week toevallig ook bezig geweest met particles en pixels, maar het werd al snel traag na > 1000 particles. Dus bedankt voor je tips over vetors en linked lists, ik ga het snel eens uitproberen!

    En het ziet er trouwens echt heeel gaaf uit!

    Reply
  2. rolf

    Thank you so much for sharing the code and your tips on linked lists. Rock on!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *