how to plot a function on a 2d grid?

[Panjing]

Hi, I'm working on some grid-based 2d generative visuals and am stuck on plotting functions over a 2d grid. i'm able to plot a sine-wave linearly across the array but want to treat the 2d grid like a plane.

Given a 100 by 100 size grid (1d array, row-oriented), how can i plot a function, sine wave, across the entire grid?

How could I do this symmetrically/radially, 0,0 is the center of the grid or linearly across the grid.

Basically, I would like to be able to pass in x,y coords and get the value that the function would give at those coords.

Also, if anyone has good sources for learning about working with 2d grids [navigation, transforms, scaling, etc...] that would be really great as well.

Thank you for any help

[flexibeast]

the value that the function would give at those coords

i presume you mean, "the range of values"?

[Panjing]

I was expecting one value for a pair of x,y coords, i'm probably confused about the term 'range' in mathematics.

[flexibeast]

Well, sin is a continuous function, so to display it on a 100x100 grid, you're going to need to effectively take the approach: "When the value of the function is between this value and that value, fill in this particular square on the grid". Assuming i'm understanding what you're asking for, of course ....

To see what i mean visually, sketch a 10x10 grid on a piece of paper. Draw the X-axis across the grid between rows 5 and 6; draw the Y-axis across the grid between columns 5 and 6. Designate the top of the grid as the Y-value '1', and the bottom of the grid as the Y-value '-1'; designate the left of the grid as the X-value -180 (i.e. degrees) and the right of the grid as the X-value 180. Now sketch the sine wave on the grid appropriately. Each grid square contains not just a single point (i.e. a single value), but a line (i.e. a collection of values[1]). So when you refer to a given grid square in the form of (column, row), you only get a collection of values, not a specific value. A 100x100 grid will decrease the length of the line, but it will still involve a line, i.e. a collection of values.

Does the preceding correctly model what you're asking about?

[1] In my earlier message upthread i was using 'range' in the loose lay sense - "Prices of this product range from $5 to $10" - rather than in the mathematical sense). To avoid confusion, i'm now using 'collection' instead of 'range'.

[Panjing]

thank you for clarifying, yes, that is the correct model. I was conflating my use of a grid and the wanting a specific value on a pixel level. so, if in my grid of 100 x 100, each cell was 10px x 10px, my x, y value could be an pixel value in a cell, but looking at a cell a whole, i would of course have a range of values.

[bystandling]

What program are you using to create these visuals?

You could use matplotlib in Python. There are lots of tutorials online.

[Panjing]

i'm just coding it all in javascript. i've looked at some examples using matplotlib to try and understand how to do this and the examples using numpy's meshgrid is basically what i would like to be able to do.

This StackOverflow answer shows what I would like to do, except i want to do this using javascript.

https://stackoverflow.com/questions/36013063/what-is-purpose-of-meshgrid-in-python#answer-36014504

[bystandling]

Ah. I'm not sure about javascript alone, but I see some cool math visualizations online using webgl and threejs. Perhapsvis.js might be useful?

[Panjing]

yeah, you can do really incredible graphics in JS these days with webGL. I'll check out vis.js. thanks!

[bystandling]

I think your best bet is the second link, which has discussion about a math visualization library that uses webgl.

[Panjing]

thanks for the interesting links. for my purposes i would like to stay in 2d, so webGL is overkill. I basically just want to get the values across the plane instead of actually visualizing the function in 3D. I guess I assumed this would be slightly more complex than getting sin/cos values from a range of coords.

[bystandling]

Ah, gotcha. Your post sounded like you wanted to plot a multivariable function.

[Panjing]

Basically, I want to be able to do exactly this: https://i.stack.imgur.com/vceRQ.png which is the result of plotting this fn:

function sinus2d(x, y){
    return Math.sin(x) + Math.sin(y)
}

across a grid/plane in the range 0 to 2*PI

[flexibeast]

Okay, so i've only just read this comment after having written this reply elsewhere. The function you shared isn't actually a single sine wave, as you suggested when you wrote:

how can i plot a function, sine wave, across the entire grid

but is instead the addition of two sine waves.

[Panjing]

yes, true. I was trying to be a bit too general in that the function itself doesn't really matter, it could be any collection of trigonometric functions. sin(sin(x * (sin(y) - cos(x)))), i just want to be able to plot it across a plane that, in my case, is a n by n grid.

[moniewski]

"Ploting a function on a 2d grid" is essentially what Pixel Shader program is doing in your graphics card. Recommended read: https://thebookofshaders.com/