Perlin noise flames
screenshot added by SkyLined on 2010-11-27 10:25:19
platform :
type :
release date : november 2010
  • rulez 53
  • is ok 10
  • sucks 0
popularity : 0%
  • rulez 0.84
alltime top: #1912
added on the 2010-11-27 10:25:04 by SkyLined SkyLined

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter google+ pinterest tumblr


Generates a pool of randomness, which is used to create one dimentional perlin noise arrays that change fluidly over time. Two perlin noise arrays are used; one as a distortion map, the other as a color map. The size and range of noise of the color map is used to create the look of flames and the size and range of the distortion map is used to make the flames move like flames.

The same data is used for flames and smoke, with different color palettes. Two hidden canvasses are used to create the flames and smoke individually, which are combined into a third, visible canvas.

Original code size ~10k (with comments and useful variables names).
Code size after comment & whitespace removal, variable renaming and various size reduction tricks: ~1.2k.
Code size after [ulr=http://code.google.com/p/jssfx/]JsSfx[/url] compress: 992 bytes (this is the JavaScript only and excludes the HTML tags in the final prod).
added on the 2010-11-27 10:40:50 by SkyLined SkyLined
Doh! JsSfx
added on the 2010-11-27 10:41:44 by SkyLined SkyLined
This only works with Chrome.
added on the 2010-11-27 10:48:49 by SkyLined SkyLined
rulez added on the 2010-11-27 11:01:21 by panic panic
Nice and runs fine here.
rulez added on the 2010-11-27 11:04:26 by Zplex Zplex
nice, but chrome only...
rulez added on the 2010-11-27 11:08:29 by las las
rulez added on the 2010-11-27 11:14:19 by Mystra Mystra
rulez added on the 2010-11-27 11:20:56 by D.Fox D.Fox
Hah. This works in OWB on AmigaOS4. Very slowly, but it works :-)
rulez added on the 2010-11-27 11:25:59 by xeron xeron
It has a nice flowiness to it :)
added on the 2010-11-27 11:30:26 by msqrt msqrt
Uh, missed the button I guess.
rulez added on the 2010-11-27 11:31:19 by msqrt msqrt
yup, js is getting somewhere :)
rulez added on the 2010-11-27 11:36:55 by ɧคɾɗվ. ɧคɾɗվ.
Replace s[ i ].data[x*4+u]=e*n[1]+e*e*n[2]-n[0]; by s[ i ].data[x*4+u]=Math.min(255,Math.max(0,e*n[1]+e*e*n[2]-n[0])); and it will work in ALL browsers.

Right now you are going through a crack of the spec. Unfortunately, it's no longer specified what vendors should do with out of bound values.

The packers seems to do a good job. I just through the cross browser version through the packer I used/improved for JS1K and got 1017 bytes. I'm sure it can be even smaller with a couple of tweaks.
added on the 2010-11-27 11:50:20 by p01 p01
Skylined: please don't link to a website with the effect, but to an archive (ZIP) of all files needed to run the effect. Otherwise it becomes impossible to maintain a sensible archive over at Scene.org. :)
added on the 2010-11-27 12:02:11 by gloom gloom
s/just through/just threw :p
added on the 2010-11-27 12:44:24 by p01 p01
very pretty
rulez added on the 2010-11-27 12:52:44 by button button
nice, but could be more noisy
rulez added on the 2010-11-27 12:59:53 by cruzer cruzer
Work in Firefox :) !
rulez added on the 2010-11-27 13:35:57 by XT95 XT95
Nice work. And what XT95 said.
rulez added on the 2010-11-27 13:41:09 by iks iks
Eyecandy oldschool effet. :)

By the way I disagree with XT95.
rulez added on the 2010-11-27 18:30:15 by Zavie Zavie
looks quite weird in opera 10.63.
added on the 2010-11-27 18:38:58 by uncle-x uncle-x
Screenshot looks very nice !
rulez added on the 2010-11-27 18:42:40 by lsl lsl
gorgeous effect! now fix it to work in more browsers like p01 suggested ;)
rulez added on the 2010-11-27 20:29:33 by Weyland Yutani Weyland Yutani
rulez added on the 2010-11-27 21:25:39 by Alpha C Alpha C
Nice :)
rulez added on the 2010-11-27 21:28:59 by PauloFalcao PauloFalcao
really great effect :D
rulez added on the 2010-11-27 22:21:33 by rez rez
Strange green colors in Opera, guess it's related to what p01 wrote?
added on the 2010-11-27 22:33:06 by Dbug Dbug
Cool effect, and what Dbug said.
rulez added on the 2010-11-27 22:53:35 by martin martin
Fucked up palette on opera.
added on the 2010-11-28 01:33:58 by xernobyl xernobyl
oh yeah! smooth!
rulez added on the 2010-11-28 01:57:45 by jaw jaw
runs almost fine in ff4b7 but a bit sluggish.
cool effect, tho.
rulez added on the 2010-11-28 04:05:05 by wysiwtf wysiwtf
works on chrome
green fun on opera, as previously mentioned
rulez added on the 2010-11-28 07:10:45 by micksam7 micksam7
Not amazing but at parts looks REALLY nice
rulez added on the 2010-11-28 08:06:41 by ferris ferris
Doesn't work in my Firefox but rulez in chromium.
rulez added on the 2010-11-28 12:01:34 by joooo joooo
It works with Firefox 4 and probably not with 3.6. Otherwise great! :)
rulez added on the 2010-11-28 12:56:34 by xTr1m xTr1m
works not!
added on the 2010-11-28 19:32:43 by rac rac
really nice and nice code too.
rulez added on the 2010-11-28 20:35:13 by neoneye neoneye
what * said
rulez added on the 2010-11-28 20:51:40 by thec thec
@hArDy./tRSi: Thanks, I fixed that and updated the script. It now works in FF and Opera as well as Chrome (IE9 not so much). I had to tweak some things a bit to get it down to under 1k again. From what I can tell it looks like your packer does a better job than mine? I'd like to have a look at it if it's public! I'm working on some new compression ideas atm, so I do with some extra inspiration :).

@p01: I can't seem to find out where I can upload a .zip for this on pouet.net. I must admit the pouet.net site layout is beyond me most of the time, so I'm probably missing something obvious... any hints?
rulez added on the 2010-11-28 23:30:17 by SkyLined SkyLined
You Sir, are awesome! Thanks for the explanation of the whole monster in your blog too :)
rulez added on the 2010-11-29 00:19:09 by mog mog
I think you mixed your replies ;)

Check the post-mortem of WOLF1K.
added on the 2010-11-29 00:19:36 by p01 p01
looks nice
rulez added on the 2010-11-29 00:21:10 by nosfe nosfe
rulez added on the 2010-11-29 00:29:59 by raer raer
Very nice!

Afaik pouet does not have a place to upload prods. Try uploading the zip to http://ompldr.org or on your own server, and linking it here.
rulez added on the 2010-11-29 01:43:13 by xteraco xteraco
what irokos said
rulez added on the 2010-11-29 09:00:23 by sensenstahl sensenstahl
Nice fire effect
rulez added on the 2010-11-29 12:17:23 by untel untel
@p01: thanks, I had a look at @cowboy's packer and it appears that my most recent version of JsSfx achieves a slightly better compression for wolf1k (994 bytes). However, I can't get the uncompressed version of wolf1k from your post mortem to run ("t" is not defined), so I can't make sure the code still works after compression. Do you have a working, uncompressed version of wolf1k somewhere that I can test with?
added on the 2010-11-29 13:23:25 by SkyLined SkyLined
Lovely. I'd like to see how it looks when it's running much faster though. I mean it's smooth, but it's like slow motion flames.. would it look quite realistic running much faster? (I'm pretty sure this isn't a simple task unfortunately.)

Also, artistic criticism: it looks like the top half of a fire. A great top half, but it makes me miss the bottom half ;)
rulez added on the 2010-11-29 13:48:55 by psonice psonice
looks nice
rulez added on the 2010-11-29 15:05:01 by pommak pommak
SkyLined: Sorry, I'm kinda in a rush these days. I'M GONNA BE A DADDDDY!

But it seems your packer uses tokens with a charcode higher than 127. Doing so for JS1K was costing 1 extra byte per occurence due to the strict UTF-8 encoding.

Check again the post mortem of WOLF1K. There are 2 working versions of WOLF1K at the top of post:

* the "compo" version
* the "development" version where you can hold down SHIFT to see the map with the player w. cone of vision, other characters, ... and TAB for some hypnoglow sexyness.
added on the 2010-11-29 15:36:34 by p01 p01
cool stuff
rulez added on the 2010-11-29 17:40:32 by v3nom v3nom
dude, it's like 2 fps here, and i fucking don't care if it will be faster in tomorrow's chrome nightly build or not, or if you think i should buy a newer laptop (not). To be honest, i never was a fan of these js quick hacks, and that hasn't changed a bit. I also have the rather strongly formed opinion that people shouldn't pollute the pouet with every small effect they rediscover and implement just to run 1000x slower than it run 15 years ago. No thumb down because at least it is not very ugly, but seriously, submit these kind of stuff to the regular js compos or to reddit or whereever else...
added on the 2010-11-29 22:05:48 by blala blala
blala: does it disturb you that cool work done in a weird environment such as js (tried coding for it anytime? it's just stupid) take up any of your clicking time on a wasteful site such as this anyway? It's not like it's disturbing anything right now anyway since there are no big parties to overview or nothing.

I too would like to see more demos in js or at least 4k or something with some more effects but whatever, maybe he don't have time for that or the wish to do so.

Just let people hack for crying out loud, it's not like they're making offensive stuff or anything.
added on the 2010-11-29 22:17:22 by thec thec
I think it's worth it. The effect is nicely done and it's creativity just the way it should be. Nice implementation of perlin-noise. Continue and find other exciting effects to do.
rulez added on the 2010-11-29 22:35:10 by Punqtured Punqtured
Looks a lot better as a screenshot than in motion.
added on the 2010-11-29 22:47:01 by stijn stijn
looks ok
rulez added on the 2010-11-30 00:03:21 by dixan dixan
runs nice here (FF)
totally great for a 1k!
rulez added on the 2010-11-30 10:24:55 by nekomono nekomono
rulez added on the 2010-11-30 18:45:01 by yandexx yandexx
Nice for a 1k !
rulez added on the 2010-12-03 09:49:55 by yannshu yannshu
rulez added on the 2010-12-03 11:16:39 by Buckethead Buckethead
I like. :)
rulez added on the 2010-12-03 17:21:31 by Cosmocat Cosmocat
Wowser! It actually keeps me warm from my big office LCD monitor. ;)
rulez added on the 2010-12-05 00:42:18 by AntDude AntDude
rulez added on the 2010-12-06 02:42:09 by T$ T$
Wow, its actually pretty fast on my 64bit firefox (4 preview). Didnt know that something in javascript could be so smooth.
rulez added on the 2010-12-07 03:02:58 by Exin Exin
Awesome. Don't know which computer you guys are using, but it's >20fps on my machine at least.
rulez added on the 2010-12-14 07:48:23 by d3pth d3pth
looks great here, average dell and chrome 9
rulez added on the 2010-12-15 10:56:29 by cg_ cg_
Rules. Runs smoothly on Chrome, though I had to change from UTF-8 to a western ISO charset for the js code to get picked up by the browser. Strange.
rulez added on the 2010-12-17 18:51:07 by suorm suorm
nice code but some more segments and music would be nice
it's like a JS 2k raytracer,radiosity,DOF,AO,whatever ...running at 0.0002fps on today's browsers. wow! impressive!
Javascript enabled browsers were already there, during the SVGA +MCGA +non-GPU+ MSDOS graphics programming big bang?¿ what's the point? why now doing this? It's not bad idea, I mean, just do not agree the technology used here.
added on the 2010-12-19 20:31:07 by JaK JaK
@JaK I don't know how much media you check out. But JavaScript compilers have become about 100x faster in the last two years, which kind of makes a difference. And please disregard Internet Explorer as it's not a modern browser anyway.
added on the 2010-12-26 23:02:43 by d3pth d3pth
Looks very nice, and pretty framerate (especially for being JavaScript).
rulez added on the 2011-01-08 14:12:09 by Sesse Sesse
rulez added on the 2011-07-11 01:05:18 by Danguafer Danguafer
This is quite nice, and 1k to boot
rulez added on the 2012-10-28 21:30:57 by Tjoppen Tjoppen

submit changes

if this prod is a fake, some info is false or the download link is broken,

do not post about it in the comments, it will get lost.

instead, click here !

[previous edits]

add a comment