Antimatter 3D Graph Plotter and a little animation

Last year I stumbled upon this blog post by @antimatter15 who added a little three line modification to mr.doobs particle floor demo and created a graph plotter in three.js. Unfortunately as three.js has developed and evolved the API has changed; in doing so it broke the graphing demo. I left a message asking if there was a fix on Antimatters blog but got no response. So I decided to update the code and fix it for the latest version of three.js; once updated for the latest API it ran as expected.

3D graph plotter using three.js
Antimatter15 graph plotter updated for latest version of three.js.

You pass the equation you wish to plot via a URL parameter and out the other pops a pretty 3D graph. Here are a couple of examples taken from the original blog post:

In updating the code I thought I’d have a little play myself and see if I could add a bit of motion to the graphs just for the fun of it. I’ve created a version of my own which you can view here.

Graphing multiple for formula using JavaScript and three.js
Modified version allows you to add more than one formula to plot.

In my version you no longer pass the formula you wish to plot via a URL parameter, you add it via the panel on the right hand side. You can add and remove as many equations as you wish and the demo will cycle between them. To do so update the right hand panel then click the “Plot new formula(e)” button. The equation that is currently being plotted is highlighted in grey and available mathematical functions listed below.

With a little bit of trial end error you can create some interesting effects. There may not be much practical use for the experiment but I enjoyed putting it together with a little help from mr.doob and antimatter15 :)