Note: I forgot to devlog a large portion of this project, so this devlog is gonna be huge dump of everything I’ve worked on for the past couple weeks.
To start this project off, I had to research any existing calculators and/or math-related websites for inspiration (other than Desmos ofc). I found this website known as leibniz.com.au, which gave math problems for users to solve. The UI on this website was super simplistic but stunning; exactly what I needed for my graphing calculator! As such, the UI for this project largely mirrors the Leibniz website. As you can see, a lot of the components on the graphing calculator is very similar to Leibniz, as I took the CSS components from Leibniz, changed the colors, text, and sizes slightly, then converted it to TailwindCSS, which was more compatible with ReactJS, which is the main framework used in this calculator. Big thank you to Leibniz for their CSS contributions!
As for the actual functioning calculator, I had to employ the use of canvases. Using canvases, which I learned from the React documentation, I was able to create a graph with labeled grids. Combined with the use of a mouse handler, I was able to allow the user to navigate across the grid! There are still a few bugs I need to fix however, such as being able to lock the grid in one position, making sure the y and x axis are always in view, and scaling of the axises while scrolling.
The input system largely mirrors Desmos, as Desmos’s input system was really intuitive and needed little improvement. To actually convert the text given by the user into a function, however, I needed to learn Latex and Regex. Latex is the mathematical standard, so employing the use of Latex was necessary. Regex allowed me to convert the user’s input into an understandable form of Latex, which we can then hardcode into a type of function.
Log in to leave a comment
