More Particles in JavaScript

<>p>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:

PLAIN TEXT

JavaScript:

element.style.top="10px";

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:

PLAIN TEXT

JavaScript:

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

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

PLAIN TEXT

JavaScript:

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:

PLAIN TEXT

JavaScript:

var font=
[
" :::$ ",
" :+: :+:$ ",
" +:+ +:+$ ",
"+#++:++#++:$",
"+#+ +#+$",
"#+# #+#$",
"### ###$",
":::::::::$ ",
":+: :+:$",
"+:+ +:+$",
"+#++:++#+$ ",
"+#+ +#+$",
"#+# #+#$",
"#########$ "

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

Ajax Questions and Answers

Caching and dynamic views
My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...

IE 8 Crashing Problem
Hello Everyone, Here\'s the situation: two iSeries boxes - Dev and Prod both V5R4M0 We\'re using AJAX to dynamically load content using a tabbed...

JQuery Function Not Defined?
[div]Hi there,[/div] [div][/div] [div]I\'m trying to set a php session variable from a radio button. The idea is that a jquery function is called...