pouët.net

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%
 0%
  • rulez 0.84
alltime top: #1646
added on the 2010-11-27 10:25:04 by SkyLined SkyLined

popularity helper

increase the popularity of this prod by spreading this URL:

comments

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
O_O'
rulezadded on the 2010-11-27 11:01:21 by panic panic
Nice and runs fine here.
rulezadded on the 2010-11-27 11:04:26 by Zplex Zplex
nice, but chrome only...
rulezadded on the 2010-11-27 11:08:29 by las las
Cool
rulezadded on the 2010-11-27 11:14:19 by Mystra Mystra
Wow!
rulezadded 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 :-)
rulezadded 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.
rulezadded on the 2010-11-27 11:31:19 by msqrt msqrt
yup, js is getting somewhere :)
rulezadded on the 2010-11-27 11:36:55 by hArDy. hArDy.
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
rulezadded on the 2010-11-27 12:52:44 by button button
nice, but could be more noisy
rulezadded on the 2010-11-27 12:59:53 by cruzer cruzer
Work in Firefox :) !
rulezadded on the 2010-11-27 13:35:57 by XT95 XT95
Nice work. And what XT95 said.
rulezadded on the 2010-11-27 13:41:09 by iks iks
Eyecandy oldschool effet. :)

By the way I disagree with XT95.
rulezadded 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 !
rulezadded on the 2010-11-27 18:42:40 by lsl lsl
gorgeous effect! now fix it to work in more browsers like p01 suggested ;)
rulezadded on the 2010-11-27 20:29:33 by Weyland Yutani Weyland Yutani
rulezadded on the 2010-11-27 21:25:39 by Alpha C Alpha C
Nice :)
rulezadded on the 2010-11-27 21:28:59 by PauloFalcao PauloFalcao
really great effect :D
rulezadded 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.
rulezadded 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!
rulezadded on the 2010-11-28 01:57:45 by jaw jaw
runs almost fine in ff4b7 but a bit sluggish.
cool effect, tho.
rulezadded on the 2010-11-28 04:05:05 by wysiwtf wysiwtf
works on chrome
green fun on opera, as previously mentioned
rulezadded on the 2010-11-28 07:10:45 by micksam7 micksam7
Not amazing but at parts looks REALLY nice
rulezadded on the 2010-11-28 08:06:41 by ferris ferris
Doesn't work in my Firefox but rulez in chromium.
rulezadded on the 2010-11-28 12:01:34 by joooo joooo
It works with Firefox 4 and probably not with 3.6. Otherwise great! :)
rulezadded 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.
rulezadded on the 2010-11-28 20:35:13 by neoneye neoneye
what * said
rulezadded 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?
rulezadded 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 :)
rulezadded 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
rulezadded on the 2010-11-29 00:21:10 by nosfe nosfe
Approved.
rulezadded 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.
rulezadded on the 2010-11-29 01:43:13 by xteraco xteraco
what irokos said
rulezadded on the 2010-11-29 09:00:23 by sensenstahl sensenstahl
Nice fire effect
rulezadded 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 ;)
rulezadded on the 2010-11-29 13:48:55 by psonice psonice
looks nice
rulezadded 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
rulezadded 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.
rulezadded 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
rulezadded on the 2010-11-30 00:03:21 by dixan dixan
runs nice here (FF)
totally great for a 1k!
rulezadded on the 2010-11-30 10:24:55 by nekomono nekomono
cool
rulezadded on the 2010-11-30 18:45:01 by yandexx yandexx
Nice for a 1k !
rulezadded on the 2010-12-03 09:49:55 by yannshu yannshu
nice
rulezadded on the 2010-12-03 11:16:39 by Buckethead Buckethead
I like. :)
rulezadded on the 2010-12-03 17:21:31 by Cosmocat Cosmocat
Wowser! It actually keeps me warm from my big office LCD monitor. ;)
rulezadded on the 2010-12-05 00:42:18 by AntDude AntDude
nice
rulezadded 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.
rulezadded 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.
rulezadded on the 2010-12-14 07:48:23 by d3pth d3pth
looks great here, average dell and chrome 9
rulezadded 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.
rulezadded on the 2010-12-17 18:51:07 by ppanag ppanag
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).
rulezadded on the 2011-01-08 14:12:09 by Sesse Sesse
Hot!
rulezadded on the 2011-07-11 01:05:18 by Danguafer Danguafer
This is quite nice, and 1k to boot
rulezadded 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