Monday, March 16th, 2009

More Particles in JavaScript

Category: Fun, JavaScript

A long time ago we covered a simple particle engine in JavaScript, used to produce a toy fire effect (about two years later it was ported to canvas and got much faster).

Pawel Witkowski wrote in with another particle demo, this one as a teaser to his promised future full-featured JavaScript particle framework:

I spent some of mine free time to create this nice effect in pure Javascript. Actually I plan to make a whole libary for it. Just to show you what it might give you i prepared some cool example…

He goes on to discuss performance a touch:

Please don’t blame me for performance :) I tried almost everything I could get to make it faster. I used and tested a few trick of optimalisation to give you some result of mine tests:

1. Hiding element, moving it then showing – does not increase performance. In fact it is faster to do:

  1. element.style.top="10px";
  2. element.style.left="10px";

This is what I observe in this application, but also in mine application that I currently work in my job (moving map tiles).

2. Fastest way to move object is to directly set style attribute via:

  1. element.setAttribute("style","left: 10px; top: 10px");

But this does not work in IE. Instead you could use:

  1. element.style.cssText="top:10px; left:10px";

But to make things strange – this is slower in IE than setting style.top, and style.left separately.

Canvas, my friend, canvas. My favorite part of the source code is the in-line font definition, partially reproduced here:

  1. var font=
  2. [
  3. "    :::$    ",
  4. "  :+: :+:$  ",
  5. " +:+   +:+$ ",
  6. "+#++:++#++:$",
  7. "+#+     +#+$",
  8. "#+#     #+#$",
  9. "###     ###$",
  10. ":::::::::$ ",
  11. ":+:    :+:$",
  12. "+:+    +:+$",
  13. "+#++:++#+$ ",
  14. "+#+    +#+$",
  15. "#+#    #+#$",
  16. "#########$ "

Posted by Ben Galbraith at 9:00 am
3 Comments

+++--
3.9 rating from 30 votes

3 Comments »

Comments feed TrackBack URI

Oh yes

Please gods of javascript let us have the good old Snoqualmie Screensaver in javascript!

(for those of you that don’t know Snoqualmie, it’s now re-released as Zen Light ( http://www.zendogsoftware.com/Gallery_b.asp )

Comment by SchizoDuckie — March 16, 2009

@Ben, Dion: No mention of http://service.futuremark.com/peacekeeper/index.action so far?

Comment by Aimos — March 16, 2009

That is unreal, excellent work!

Comment by scoult01 — March 16, 2009

Leave a comment

You must be logged in to post a comment.