Posterize using Canvas and Tilemap

I'm having some issues to find the easiest way to loop through a grid, setting the tiles in a tilemap based on the rgb-values of a sprite pasted onto the canvas..

At this time I use 32 values of gray.

I use : (canvas.redAt(x,y)+canvas.greenAt(x,y)+canvas.blueAt(x,y))/3 to get the gray value between 0 and 255 and based on that set the tile at that position to one of the 32 tiles (going from black to white)..

Although I think I am close to getting it to work the way I want to, I thought I might try here to get some input and pointers on ways to do it easier and/or quicker..

There might be some very fun ways to use this, or just the tilemap exported as json, I actually don't know..

Maybe it's just one of my crazy ideas..

You could try other formulas:

http://docs.gimp.org/2.6/en/gimp-tool-desaturate.html

Does your tilemap go all the way from 0 to 255?

BTW Mind blow for the day:

You can use a canvas as a tilemap.

Also array's for each might simplify things if you're having issues with a nested loop.

Thanks newt

Using the array-option was obviously the best way..

Obviously the loop does give a pause, but I kinda like being able to do this:

Canvas-Posterize

Now let's see if I can use it for the backgrounds in my semi-retro-adventure-game-idea...

If not, who cares..

Loading The tilemap from Json

LittleStain

Just for your information (<--is this a valid sentence? Not a native speaker :/), firefox throws some script error, while chrome and NW.js works OK.

BTW you guys stop doing awesome things and make the rest of us look like idiots

LittleStain

Just for your information (<--is this a valid sentence? Not a native speaker :/), firefox throws some script error, while chrome and NW.js works OK.

BTW you guys stop doing awesome things and make the rest of us look like idiots

Seems like Firefox has issues with webgl in this project..

When turning webgl off it works in Firefox too..

This might have to do with the canvas plugin..