javascript - How do I make a 'radial gradient' of values in a 2D array? -

javascript - How do I make a 'radial gradient' of values in a 2D array? -

let's have 2d array, example, [7][7], zeros, so:

0000000 0000000 0000000 0000000 0000000 0000000 0000000

i'm trying figure out how take number range (example: 0 3) , create radial gradient of sorts center out, so:

0000000 0011100 0122210 0123210 0122210 0011100 0000000

basically edges should lowermost value , center of array should highest. awesome command 'intensity' of center (more threes faster fall-off) can figure part out.

i'm struggling understand math behind this. thought achieved using sine waves or something, have no thought begin or how apply 2d array of values.

(note - i'm trying create grid of divs in html, , utilize javascript set alpha of every element, such center opaque, , edges transparent. it's easier me understand using simple round numbers in meantime).

one possibility gaussian gradient. because gaussian function separable, can apply on x values , on y values independently.

you can take formula on page , implement in code. https://en.wikipedia.org/wiki/gaussian_function#two-dimensional_gaussian_function

in order that, x0 , y0 indexes of center of array (3,3). iterate through array , calculate value of linked function each array element. provide alpha factor.

finally, 1 type of gradient falloff function. it's normal curve, gives pleasant gradation intense to the lowest degree intense. if you'd different kind of curve, can utilize d = sqrt((x-x0)^2 + (y-y0)^2) template distance matrix's center build functions based on d

javascript arrays math matrix radial-gradients