top of page
  • Writer's pictureFreddie Rawlins

3D Graphing

Updated: Feb 12, 2019

The 2D graphing software was fun to make, but wasn't actually more useful than any of the commercial ones I found. However when I was interested in 3D graphs I found the online resources lacking. I sought to use my original 2D graphing code to make a genuinely useful product that I could use to explore more 3D graphs.


Over the course of writing this I developed a series of improvements that were then propagated backwards through previous graphing software I had written. This was especially useful when I was developing the code for 3D ellipsoids.


Two really interesting features of this project:

- Since it's evaluating Javascript disguised as maths one can use programming commands

- The implemented feature allowing the creation and viewing of ellipsoids


 

The first one is what allows the "dynamic" graphs. The variable "fc" serves as an alias for "frameCount", a built in P5JS variable that is incremented in every draw loop. This means graphs can utilize an ever increasing value, in trigonometric functions particularly, and create dynamic sketches. This allows an interesting exploration of how different wave functions evolve over time, but the variable can also be used to show a changing constant (with functions like modulo, floor, ceil, et cetera).


The other useful part of evaluating Javascript is you can use all of the built in "Math" and P5JS functions, but can also delineate with semi-colons to write code preceding the actual evaluation.


For example "y = a = 5; x + a". Breaking this down, you get:

- "y =" which signifies that this is a standard equation and not an ellipsoid

- "a = 5" which is a simple statement in Javascript assigning the value of 5 to the variable "a"

- "x + a" which uses the previously assigned value of "5"


A more complicated example uses ternary statements. This can be seen in the example "y = dist(x, z, 0, 0) > 10 ? 10 : 1"

- "dist(x, z, 0, 0)" is a P5JS function that calculates, unsurprisingly, the distance between the point [x,z] and the centre [0,0]

- " > 10 ? 10 : 1" is a Javascript ternary statement that checks whether the given distance is greater than 10, and if so returns the value of 10. Otherwise, it returns the value of 1.


 

The second useful part that allows one to view ellipsoids, or any equation that takes the form "f(y) = f(x) + f(z)". This is parsed differently from the usual equation, and so rather than for every given "x" and "z" value determining a "y" value, every point in a small subspace is evaluated against this expression. If it satisfies the equation, it draws a point there.


This runs a lot more slowly, since every point (in the given cube) must be put into the equation. I would like to implement a 3D flood-fill algorithm at some point to take advantage of the fact that staring from any given point that satisfies the equation, the rest of the points can be found b continually looking at adjacent neighbors. Another way of doing it, and how I imagine most 3D graph software works, is the skin of points is determined once, and then drawn every frame. While this would make it a lot smoother, it would require another overhaul and doesn't allow for dynamic graphs. In the course of making this I thought that it was worth keeping this dynamic feature and adding the ability to change the resolution of the 3D space evaluated. If one needs to see how a graph of the form "f(y) = k*f(x) + f(z)" changes as k increases, a lower resolution can be chosen to understand the basics of how the graph evolves. However, if you want to get a very clear idea of the shape of a graph, then as long as the camera stays still, that can be drawn to a very high resolution.


To conclude, this sketch has more than served its purpose since it is now my default to draw 3D graphs due to the control I have over the resolution, colour, and scale. It has been a challenge to get all of the features I wanted, and some (like Flood-fill), have not been implemented yet. Despite all of this it is by far one of my favorite projects, and I hope other people can find it useful too.



123 views0 comments
bottom of page