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:
i, j |
Iterators from 0 to sqW and sqH respectively |
a, b |
Iterators from 0+shiftH, 0+shiftW to sqW+shiftW, sqH+shiftH respectively. In simple cases, these can be regarded as frame shifting values. Like, let the (0,0) point be in the middle of the screen. |
sqW |
Canvas width, value of the «Width» input |
sqH |
Canvas height, value of the «Height» input |
shiftW |
Frame shift along the x axis, value of the «horizontally by» input |
shiftH |
Frame shift along the y axis, value of the «vertically by» input |
ratio |
Equals to sqW/sqH. |
Below is an image trying to illustrate these variables. In this example, the image is a 150×150 square. So, sqW and sqH both equal 150. The shiftW and shiftH values are both equal to -50. Values of i and j increase from 0 to 150 (zero included), and a, b are simply i-50 and j-50 respectively.
To understand the thing more quickly, replace any example code with the following:
var color = a*b;
return color;
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 color= and 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 matvey@gmail.com.