Color mapperv0.22 by Matvey Andreyev
Once upon a time there was an idea, this one, of dynamically creating a
table in a
for loop with all the
tds painted dependent on their row and column numbers.
Now that we have
canvas, I've rewritten that into this. Old browsers aren't supported.
What's going on here?
A loop is calculating the color of each pixel in a 2d-canvas. It puts the color data into the
ImageData.data array. After calculating everything, the data is being displayed via
putImageData() — in about 0.04 shakes of lion's tail. As a result, we have that moire or a pattern on canvas.
Calculating colors is the heaviest part — you hear your CPU fan while it lasts. A browser crash is possible on some combinations of pixel quantity and coloring function complexity.
In your function, you can use — and redefine — some variables:
||Iterators from 0 to sqW and sqH respectively|
||Canvas width, value of the «Width» input|
||Canvas height, value of the «Height» input|
||Frame shift along the x axis, value of the «horizontally by» input|
||Frame shift along the y axis, value of the «vertically by» input|
||Equals to sqW/sqH.|
Below is an image trying to illustrate these variables. In this example, the image is a 150×150 square. So,
sqH both equal 150. The
shiftH values are both equal to -50. Values of
j increase from 0 to 150 (zero included), and
a, b are simply
To understand the thing more quickly, replace any example code with the following:
var color = a*b;
Press «Paint», wait for the result. Then tweak shift settings a bit, negative numbers allowed, too. Paint again, see what's the difference. Try adding more js between the
return color;. That should help.
What is it for?
Nothing in particular. Well, one may save the generated canvas and use it... somehow. Wallpaper is what comes to mind first.
Have a nice example?
I kindly accept them via email@example.com.