#22 PlusOne

Our custom graph
Some basic math with the calc command
The homepage

Inspiration

Our major source inspiration for the graphing system was Desmos Graphing Calculator. For the main user interface (UI) on the homepage, it was based off of Windows Terminal & PowerShell.

What it does

Arithmetic

PlusOne is a graphing calculator! It can do basic arithmetic, such as addition, subtraction, multiplication, and division with the calc command. Similarly, calc 1+1 returns 2, similarly calc (1+2)*3 returns 9.

Graphing

On top of that, this application can also graph on a 2D coordinate plane with the draw command! So draw x^2 would graph a parabola on our custom graph and show it to the user. Our custom graph allows for the user to view their graphed function, pan around the graph, zoom in, and zoom out. And don't worry, we implemented scientific notation for when the x or y axis numbers get too small or large.

How we built it

In order to allow for a lightweight, compact, and fast experience, we programmed PlusOne with HTML, CSS, and JavaScript.

How it works

It starts off in the terminal, where the user's input is split into a command (calc, draw, etc.) and its argument (1+1, x², etc.). From here the argument is passed into a tokenizer which splits the equation and categorizes the different parts (e.g. 1+1 → {1: number, +: operator, 1: number}). From there, a parser takes these tokens and creates a tree, which determines the order of the operations to be carried out. If the argument passed in is a purely arithmetic operation (ex. 1+1), then it is given to an evaluation function, which returns a single numeric value. Otherwise, if it contains variables (x is the only supported variable right now), it will create and pass off a graph-able function to our custom graph.

Challenges we ran into

We ran into many challenges along the way of creating this application. Firstly, we had many issues with the graph. Such as it not graphing, not showing the grid lines, the entire thing breaking when the user attempts to zoom in/out, and so many more issues we had to overcome. Additionally, we had difficulties with the tokenizer and parser not outputting the correct tokens (tokenizer) or tree of operations (parser).

Accomplishments that we're proud of

We're proud of our custom graph, especially it's use of scientific notation and especially our tokenizer & parser, which took a lot of effort but luckily worked out in the end.

What we learned

We learned a variety of skills from this experience. Some of us learned how to use JavaScript Canvas (for the graph), other learned some new CSS and JavaScript syntax, and a majority of us learned a lot of new math!

What's next for PlusOne

Tokenizer & Parser

We want to expand the capabilities of our graphing calculator, such as being able to parse sine, cosine, tangent, secant, cosecant, and cotangent. Additionally, we want to give the tokenizer the ability to see parentheses as multiplication so it can interpret, for example, 3(3) as 3x3.

Graph

As for the graph we want to add the ability for it to take in and graph multiple things at once. We also want to add a feature that would allow the user to essentially "trace" the graph and find the value of the graphed equation at any point. Lastly, we would add the ability for the user to drag and click around in addition to being able to use their keyboard.