The Graphing Calculator Guide | Difficulty: 🟪

If you’ve been in the community for long enough, you’ve probably heard me talk about my graphing calculator. Made on GKC day 6, most people consider it to be magic, but in this guide I’m going to break down how I made it, and how you can made it too. And for reference, the finished graphing calculator can be found here. This guide isn’t going to contain step by step instructions, since if it did it would take me a month to write. Instead, I’m going to explain how the graphing calculator works, and hopefully you’ll learn enough to recreate it.

Where do you even start?

Well, we need something to graph. I used three properties, a, b and c, to store the function I was graphing: ax² + bx + c. I then set up some triggers that increased and decreased each property, so the player could adjust what was being graphed in game. I used counters, and had the counters update the properties with their value. Here is the final input system:

The display design

Displaying images in gimkit is pretty tricky. The method I used was pretty similar to this pixel art guide by bluebear. However, instead of making my pixel art in google docs, I generated it on the spot with block code. Each column of the display was a text object, and contained the following code:
image

There are two big properties- iterator and x. The x property holds the x value of the column being graphed, and the iterator property holds the value of the y pixel being graphed.

This code starts by storing the x value of the column and the iterator (y value) in two variables. It then checks if the x value being graphed is the x value of this column. If so, it starts the process of graphing the column.
image

It first finds the pixel that needs to be graphed, by plugging in the a, b, c, and d properties into ax^2+bx+c.
image

It then gets the property compiledLine. This is where the emoji’s that are being rendered are stored before they are displayed.
image

Now, the code figures out whether the current pixel should be on or off. It checks if the y value that we calculated earlier is the same as the y value we are currently finding the pixel for. If it is, we append a black pixel to the compiledLine property, otherwise we append a white pixel.
image

To now graph the next pixel, iterator is increased by one.
image

Before everything is done, the code checks if this column is done being graphed, by checking if the y coordinate being graphed (iterator) is greater than 9. If the graphing for the column is done, the text is set to compiledLine, the value of compiledLine is reset to nothing, the iterator (y value being graphed) is set to -10, and the x is increased by 1.
image

Finally, we recurse to either graph the next vertical pixel or the next column.
image

Limits

Well, that wasn’t that complex was it? The algorithm the graphing calculator uses to graph is quite simple, but actually implementing it can be a nightmare. All of my code had to be less than 75 blocks to fit under the block limit, and bypassing the block limit by adding extra recursion would have slowed the calculator down to a state of unusability. Also, the larger the display, the more gimkit will lag, since gimkit wasn’t ever made to run a graphing calculator.

Conclusion

And that’s all! The graphing calculator isn’t complex because it is a graphing calculator, it’s complex because it has to cram a lot of code into not much space. I hope you learned something, and maybe now you can make your own graphing calculator :slight_smile:

20 Likes

I hope I didn’t make this too vague lol

2 Likes

You finished it! Great guide btw.

No I think I could make it and I am not good at block code nor any code to be exact.

1 Like

As I said, the hard part is cramming the block code under the limit, not the graphing calculator itself :smiley:

3 Likes

You finally finished it! Now I just have to call mine “Myszian” or something.

Statistics calculator next?

P.S. Are you done with essence of calculus?

1 Like

His reaction is probably like this: :tired_face:

Yeah, I get the idea now:
Circle broken down into rings
rings are trapezoids
trapezoids are rectangles
when lined up on a graph its just the area under 2Rpi
then find the area under the graph

differentials are throwing me for a loop though.

1 Like

Differentials are just the infinitesimally small values as in dx and dy (I don’t actually know if this is true so don’t trust).

Yeah its something with tangent lines or something

If you’re down to make some sort of mega calculator, I’m in!

yeah i think it is hfjdjdjs

For the statistics calculator, do you know how to count the occurrences of a value n in a data set that can be as big as you want?

Recursion.

What do you mean by that?

Recurse over the data set, check if set_x = n, increment counter if so

i thought tangent lines had to do with something abt origin to a point on line correct me if wrong, i didnt study calc

Idk

I didn’t either. I just know to find the line tangent to a graph, you use a slight change in dx and dy or something

yeah same, i heard some theory on how small differences in dx and dy make of the line or smth