Snowfall Plugin Updated

Updated the snowfall plugin that was released yesterday with a few more features.  The primary new feature allows you to specify which elements you want the snow to appear in. An example of this can be seen below. View a full page demonstration


$('#snow-window').snowfall({flakeCount : 100, maxSpeed : 10});

In addition to snowing within elements there are some more options available, properties available are

flakeCount,
flakeColor,
flakeIndex,
minSize,
maxSize,
minSpeed,
maxSpeed

You can still initialize the plugin with

$(document).snowfall();

but the flakes will not use fixed for positioning, they will now travel down the page completely. On some long pages this will make it seem like its not “snowing” as much. Im working on a few more updates that should be released in the following days. If you end up using this I’d love to know. You can download the most recent version here.


Jquery Snowfall plugin

Plugin has been updated to 1.4 please go here for more up to date information

Got bored today and decided to put together a quick snow plugin for Jquery. On my site Undeadgames.com the members look forward to the snow every year. I decided to replace the older one we were using, it was nice overall, but ran terribly slow on some browsers, and didn’t really care about window dimensions.

Click to download the plugin

The plugin is easy to implement, load up the file and call

$(document).snowfall();

or

$(document).snowfall(number of flakes);

Overall the plugin is pretty useless, and hearkens back to the days of old. Next update will include snow collecting on specified page elements. You can see it in action on either zombietweets.com, or undeadgames.com

Terrain Generation with Canvas and JavaScript

The idea of creating height maps with JS and canvas came from an  idea I started for a different website I’m developing. This small project has taught me many things (some of the unfortunate things I learned is I still suck at math, and I have many JS skills to brush up on). I just couldn’t bring myself to give it up so I also implemented a very slow very light voxel engine.

You can check out the generator here. (Chrome recommended, sorry no IE)

The first major thing I learned was the midpoint displacement (or Diamond Square) algorithm. The Wikipedia article and links contained were definitely a great help but this actually took me the longest to implement. Getting the order of  iteration and recursion was the hardest part. I found so many examples but many of them conflicted on actual implementation. The closest example I got working was the example found on this page but if you try creating height maps with a lot of noise you will notice square patterns popping up, sometimes with low noise you can catch a nice one right in the center.  This is because they do not take the center into consideration when calculating the edges. I was able to fix this in my version fortunately.

That ended up only being a small part of the project however, you’ll notice I added shadow maps which could use some tweaking, and a very slow voxel engine. These sites greatly helped that process.

http://www.cyberhead.de/download/articles/shadowmap/

http://wiki.allegro.cc/index.php?title=Pixelate:Issue_14/Voxel_Landscape_Renderization

The last few things to implement are wrapping height maps, and a better color map, and some sort of progress bar. Hopefully after that my obsessions with height maps will be over for a while. These things are pretty addicting, you get such cool results from just a few numbers. Feel free to check out the code, if you have any improvements let me know, I know its by no means even close to perfect. Also if you happen to use it for anything please give credit where its due.

Ill most likely write up yet another midpoint displacement tutorial, because even the current ones left me scratching my head at some points. Then off to working on my canvas zombie game for zombiegames.net!

Special thanks to Yutt for testing it out and helping me work on the stupid color bug.