Be a Supporter!

B1KMusicB1KMusic

Main News Games Audio Art Favorites Reviews Stats 17 Fans
Follow B1KMusic

Check out this...thing I made

3/9/13 by B1KMusic
Updated 3/9/13

http://jsfiddle.net/B1KMusic/xf7De/

It generates a map of random colors up to 10 000 x 10 000 pixels without making the browser lag.

I spent extra time making the settings easy to understand.

You can mess around with the settings, change the size of the image, change the pixel size, and the color channel ratios, and the picture renders before your eyes, and if you like it, you can click it and save it. It can crash trying to save huge pictures, though.

Tip: In firefox, set the image size to your screen resolution, pixel size to 1, and the color channels to:

R: 0x00
G: 0x77
B: 0x00

Instant grass!

For more realistic grass, some blue should be included:

R: 0x00
G: 0x77
B: 0x33 <-- Since dark blue is kinda the color of grass shadow, this actually makes it a little more realistic

Chrome renders fast
Firefox can save massive pictures that would kill the page on chrome
IE9 works
Safari works about the same as chrome
Haven't tested Opera

Picture below is a 1280x800 "grass" picture I rendered in firefox.

Technical details:

The way it progressively renders is through the use of setTimeout and anonymous functions.

((function renderY(i){
__if(i < H){
____((function renderX(j){
______if(j < W){
________for(var k = 0; k < 100; k ++){
__________context.fillStyle = randomColor();
__________context.fillRect(j,i,1,1);
__________j++;
________}
________setTimeout(function(){renderX(j)},0)
______}
____})(j));
____i++;
____setTimeout(function(){renderY(i)},0);
__}
})(-1));

Check out this...thing I made


Comments

You must be logged in to comment on this post.


Very cool -B


I always wanted Instant grass! but seriously this is acc quite cool!

3/9/13 (Updated 3/9/13) B1KMusic responds:

Thanks :D