I Do Math Stuff On This Blog

Hi I'm Nathan and I do a lot of math projects in my spare time and this is my journal documenting progress on things My main blog is Offical granny Smith Apples

[eggusa-deactivated20180302]

[yomathstuff]

Bada Bing Bada Boom

Cool now the weird overlap thing isnt a problem anymore.

Aight so heres what I had

There was a while loop that assigned values to a set of 3d points for each x and y per funciton. Then I had a while loop that drew the triangles for each function.

in the while loop that assigns the points, in certain conditions I just had the x and y values be negative

and you can take a look Here.

[yomathstuff]

i fucked up lmao

I fucked up. None of the previous links on live weave are going to work because I deleted them all. I’m sorry for anyone going through this in the future.

On the bright side I’ll start saving them now, and also I’m making progress. Graphs now go through each other instead of sitting on top of each other based on which was drawn first. all I did was draw each row for each function individually. It’s not really perfect but it absolutely does the trick.

Here is the latest version. It should actually work. All I have to do now is fix the second overlapping problem, get a better input system and I’ll have a prototype.

I’m planning on remaking it entirely from scratch, as this one is probably riddled with bad bugs and was bad with super bad planning and I’ll have a better idea of what I’m getting myself into if I start from scratch.

[yomathstuff]

Multi graph support sorta woo

Yea so added multi graph support to my 3D graphing thing.

All I did was add an array to hold multiple functions and then a loop that draws all functions while a variable is less than the length of the array. So

The problem still being that the rendering of every part of the graph is independent of where each point on the graph is in 3D space. So even if triangle A is behind triangle B, but triangle A is drawn first, triangle A will be in front of triangle B. I don’t know how to establish a distance from the camera type deal so I can’t tell it to draw certain things first.

anyway here is the current version.

[yomathstuff]

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 the 3d axis

make points plotable on said axis

create a way for a two independent variable function to be graphed and drawn on the axis

Make the 3d 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.

When A_z = 0 and A_p = 0

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:

x_z = 0

x_y = cos(A_p)

x_x = sin(A_p)

y_z = cos(A_z)

y_x = sin(A_z)cos(A_p)

y_y = sin(-A_z)sin(A_p)

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

[yomathstuff]

I got distracted again looking at the visualization for binomial expansion on wikipedia and so I’m gonna make a 3d shape plotter thing ding on livewave

[yomathstuff]

okay so I was integrating sin^4(x)/4+sin^2(x)/2+sin(x) and then I took the derivative of a that and got something other than sin^4(x)/4+sin^2(x)/2+sin(x) because of the technique I used to integrate (and I'll outline that below).

So anyway I noticed that any sin^a(x) can be written as something like (1-cos(2x)+cos(4x)-cos(6x))/6. where 2, 4, and 6 and 1 are all some sort of multiple of a. So you essentially get sin^a(x) in a form without any exponents which is actually pretty amazing considering there is a giant obnoxious reduction formula for integration and its shit. So being able to convert sin^a(x) to something else would be way more convenient instead of the reduction formula, at least for me.

So now I'm here trying to use binomial theorem to expand sin^a(x) into some sort of polynomial in terms of (a1+a2cos(b1(x))+a3cos(b2)+....)/something

which will be fun

and yea here is the way I integrated sin^4(x)/4+sin^2(x)/2+sin(x). I'm hoping you can follow it not because I think you're stupid but because desmos only supports derivatives and doesn't like integral symbols so

[yomathstuff]

SO here’s what I have right now

so since I just started this blog you don’t know what I’m working on right now or what my progress has been on it so I’ll just give you a quick summary and yea.

So a couple weeks ago i was looking at the page for Line Integrals on wikipedia and so i was really interested in the visual given for it and the neat little scalar field they had and stuff so I decided to make my own scalar field generator.

So I started off with my basic template for javascript canvas stuff. It looks like this and is just a basic grid to make some 2d javascript images on and yea whatever.

What I’ll have it to is:

Generate six points for the high points and low points of the field

make some sort of path between the points based on a function which is based on the points that will be the basis for the scalar field

based on some x and y coordinates given it will color that point (or area) a certain color depending on its height

and then you can do different things with it like take an actual line integral or maybe find the most efficient path from point A to point B or something like that

So far it looks like this

And it was particularly fun finding parabolas based on three points. I just took a generic expression for ax2 +bx + c, three points and solved for a,b, and c and yea. and you can do that for all or any three (x,y) point and get a unique parabola.

Now I am currently creating the part where it generates a color at a point based on its distance from the blue and red parabolas. However I realized I need to find out what the closest point on each parabola is based on the (x,y) point.

So currently I am working on this desmos page to get the zero points of g(x) in a general form so I can use that in my javascript code.

So I’ll find out the nearest point, use the distance that point is from the nearest point, and generate a color based on it.