A nodeblock-based math webapp, designed to make the graphic calculator more accessible and easy to use!
You can view the website running the code at makaip.github.io/mathematix
Users can right-click to open the context menu, where they can select from a variety of nodes to add to the canvas.
Let's create a simple graph, y = sin(x) - 5.
The first for any graph is to create an output node, which will display the contents of the graph. To do this, right click to open the context menu. Then click on Output to add an output node to the canvas.
Now, we need to make our graph. Mathematix includes 17 mathematical functions, as well as the variable x and numerical constants (e.g., 1, 2, 3, etc.), which allow for a diverse range of graphs to be created.
This graph need one arithmetic node for subtraction, one trigonometry node for sine, one variable node for x, and one input node for the number 5. After using the context menu to create these nodes, it should look like the following:
The final step is to connect the nodes together. To do this, drag the nodules from the right side of each node to the left side of the next node. The final graph should look like the following:
Finally, we need to click the box showing Add in the arithmetic node to switch it to subtraction.
If you want to continue experimenting with the graph, try changing the operation types (by clicking "Sine" or "Subtract") or adding more nodes. Thank you for following!
To pan around the editor or graph, simply Middle Click or use Shift + Left Click and drag.
| Action | Hotkey |
|---|---|
| Open Context Menu | Shift + A |
| Add Input Node | Shift + R |
| Add Function Node | Shift + F |
| Add Output Node | Shift + C |
| Add Variable Node | Shift + V |
| Add Trig Node | Shift + T |
| Add Unary Node | Shift + U |
To delete a node block, you can simply select the desired node block (it should have a green outline) then use any of the following hotkeys:
| Deletion Action | Key |
|---|---|
| Regular Delete | Delete key or Backspace |
| Blender-Style Delete | x |
| (Neo)Vi(m)-Style Delete | d |