Yea so I made a basic 3D graph thing
yea so all the online 3d graphers suck huge dick so I decided to make my own.
Game plan was this I think:
make points plotable on said axis
create a way for a two independent variable function to be graphed and drawn on the axis
This was actually super fucking hard for no reason.
Yea so I used Goegebra as my template for my 3d axis. Just because (in my opinion) that the lesser of all the evils that are the 3d graphing tools online.
So it looked like there were two angles that the rotation of the space depended on. The rotation around the z axis, and rotation around an imaginary axis that was perpendicular to the z axis and parallel to the screen. Looks like everything is dependent on the z-axis so it makes sense to start there. It also looked like the z-axis didn’t actually rotate “side ways”. As in it was always the vertical axis. Which made sense. What good does it have for your vertical axis to rotate around anyway?
So I went into desmos and got to work. I made an angle for the rotation around the z axis, A_z, and an angle for rotation around that imaginary axis i was talking about, A_p. I mentally flipped a coin and decided that the initially the x-axis should come out of the screen, and the y-axis should be parallel to the screen, perpendicular to the z-axis.
The way that I have this setup is that I have three 2D points that represent each axis. Those points can be used to create a line through (0,0) to create an axis. Each one is just a function based off of A_z and A_y but that’s all it is.
I won’t detail how I got there because it was a couple days ago that I did this and also a lot of it was guess and check as I went, but here are the properties for each axis with certain conditions for each angle.
the syntax for each point value is:
x_a = the x value for the axis point, where a is the axis
y_a = the y value for the axis point, where a is the axis
I’ll have a link to the actual desmos page so you can take a look at the math and this will all probably make a lot more sense. Anyway so here is the logic behind getting to the formulas for each point.
y-axis should be fully extended on the 2d x-axis, fully retracted on the 2d y-axis
x-axis should be fully retracted on both 2d axis
z-axis should be fully extended on the 2d y-axis (always fully retracted on the 2d x-axis)
When A_z = 0 and A_p = 90
y-axis should be fully retracted on both 2d axis
x-axis should be fully extended on the 2d x-axis, fully retracted on the 2d y-axis
z-axis should be fully extended on the 2d y-axis(always fully retracted on the 2d x-axis)
when A_z = 90 and A_p = 0
y-axis should be fully extended on the 2d x-axis, fully retracted on the 2-d y-axis
x-axis should be fully extended on the 2d y-axis, fully retracted on the 2-d x-axis
z-axis should be fully retracted on both 2d x-axis
and finally when A_z = 90 and A_p = 90
y-axis should be fully extended on the 2d y-axis, fully retracted on the 2-d x-axis
x-axis should be fully extended on the 2d x-axis, fully retracted on the 2-d y-axis
z-axis should be fully retracted on both 2d x-axis
So when you put the pieces together the formulas for each x and y value for each point for each axis are as follows:
COOL all done with the axis itself. All I did was assign the angles to a move-able point and boom. rotatable and stable 3-d axis.
Make points plottable on the axis
This part was similar in structure to making the axis itself. Essentially the points that I was talking about for each of the 3d axis are points in the 3d space itself. I just needed to find a formula that would take point (x,y,z) and make it point(x,y) based on the same parameters.
I’m gonna be totally honest with you, I don’t remember how I reasoned this out. I think I took the formulas above for each axis, multiplied them by the input value for the corresponding axis, then added them all together.
So for 3d points (a,b,c) I think I took:
x_abc = a*sin(A_p) + b*cos(A_p) + c*0
y_abc = a*sin(A_z)cos(A_p) + b*sin(-A_z)sin(A_p) + c*cos(A_z)
Then did some trial and error and got
actually the above is the right answer I think
So yea the point (x_abc,y_abc) is the corresponding 2d point for the 3d point (a,b,c) with the corresponding angles. Now all I have to do is
create a way for a two independent variable function to be graphed and drawn on the axis
Yea so all the math work is pretty much done and just need to transfer all the stuff above into a javascript HTML canvas loop and kaboom
that actually really oversimplifies things and how long it took me to do that and honestly at this point I’m not completely done.
So basically here’s what I did.
1. create a function f(x,y)
2. create variables x and y, both equal to the negative side of the bounding box
3. create array that holds the x, y, z, 2d x, and 2d y values for each point
4. create a while loop similar to the following
while(y < positive side of bounding box)
{
while(x < positive side of bounding box
{
This is where you assign the values of your array to the five values described in step 3
x = x + 1
}
y = y + 1
}
this loop will create points for a fixed y value, and a variable x value, and once it reaches the bounding box for y, it will add 1 to y, and start over for x.
5. create a similar while loop as before but this one draws rectangles from point to point to create a surface.
and that’s all I have so far.
There is a lot more work that I need to do including fix the gaps between triangles, add support for multiple functions, add support for input from the HTML page and now just raw javascript code, fix the weird visual rendering (you’ll see if you let the example code run for a bit, it doesn’t render the back triangles first it just renders the -y triangles first so it makes for some weird looking movements) and probably a whole bunch more.
Here is the Desmos page and Here is the javascript code in action
izzy806
2087
germansingergirl
stormborns
prguitarman
romaincrisis
annaxmalina
titsay
