When JavaScript Meets Desmos: Rebuilding Games with Mathematics

By Jeff Ho

​Most computer programs are imperative, meaning that they tell the computer what to do next by expressing a sequence of commands that execute one step at a time. For example, video games that are written in JavaScript, might update a player’s position every frame, redraw the scene, and repeat the loop indefinitely, giving the user a continuous and smooth gameplay experience. The program simulates change by constantly rewriting the virtual world experience for the player.

Meanwhile, mathematics takes the opposite approach. Instead of instructing what happens next, it states what is always true. For example, a circle isn’t drawn step by step, it is the set of all points (x, y) which satisfies an equation (e.g. (x-a)2+(y-b)2 = r2). This style is known to be declarative, and it is also exactly how graphing tools like Desmos operate. Users don’t “draw” a line, they specify the equation. Then, Desmos instantly renders all points that satisfy it. The special “sliders” that Desmos has doesn’t move the graph step by step in this style, it continuously changes the parameters of the underlying equation. The platform then recalculates everything in real time, and gives a smooth and responsive graph that users can alter in real-time.

The sliders bring the art of mathematics to life, as many users start making static equations into something dynamic, visual, and interactive. A project called Minecraft in Desmos showcases this beautifully, where the creator explores the intersection of imperative and declarative styles within the Desmos environment. Before stepping into Javascript, it is essential to understand the translation from code to mathematics in Desmos.

Note that a traditional program run in steps:
if (x > 5) y = -y;

However, in Desmos, there is no “if-then” in time. Instead, we have to define the ‘program’ in a declarative style, where we state relationships that are always true. The beauty of this style is that the condition isn’t checked once, it’s continuously satisfied.
y = if(x > 5, -y, y)

Another program could be a loop:
for (let i=0; i<10; i++) drawBlock(i);

However, Desmos doesn’t loop, it uses lists: xi=[1,2,3,...,10], yi=sin(xi)
So all blocks appear simultaneously, meaning that it does not “do this ten times”, but rather “these ten things exist.” 
Even randomness in programming can take on a mathematical form. Instead of Math.random(), Desmos might use a deterministic function: r(n)=frac(sin(n)*10000)

To build a cube in Minecraft, game engines rely on polygons and rendering pipelines. In Desmos, each cube must be defined, so a single block can be expressed with inequalities where the cube is centered at (a, b, c): |x-a|0.5,|y-b|0.5, |z-c|0.5 

Then, creators can generate entire biomes, and while Desmos handles the visuals, JavaScript brings interactivity. Through the Desmos API, developers can connect real-time inputs, like mouse movements, key presses, or even randomized values directly to variables inside the calculator.

A key example in JavaScript is by setting the movement rules in Minecraft or many other games in 2D:
x += speed * dx;
y += speed * dy;
if (x > W) x -= W; // wrap
if (x < 0) x += W; // wrap
In Desmos we might use a time slider t and write:
x(t)=(x0+speed*dx*t) mod W
y(t)=(y0+speed*dy*t) mod H
with mod() performing the wraparound (since we are in a minecraft world with finite size, so we keep the avatar inside a finite world by wrapping).

Another key example is when the program creates dynamic lighting based on camera angle. For example, how one face of a cube brightens when facing the light source.
let lightAngle = 0;

setInterval(() => {
  lightAngle += 0.02;
  const lx = Math.cos(lightAngle);
  const lz = Math.sin(lightAngle);
  calc.setExpression({id: 'light', latex: `L_x=${lx}, L_z=${lz}`});
}, 50);

These code fragments show how Desmos and JavaScript work together, where JavaScript handles inputs and timing, and Desmos handles mathematics and visualization. In this sense, the “Minecraft in Desmos” project demonstrates a very innovative idea for more future projects: a graphing calculator can function as a declarative physics and graphics engine. The logic of gameplay, camera perspective, and shading all arise not from loops and pixels, but from equations that remain continuously true. 

When JavaScript meets Desmos, programming and mathematics merge. What’s usually expressed as step-by-step code becomes a living system of equations. Instead of commanding the computer to act, we define a world that must obey its own mathematical laws, just like the world we are living in right now. Whether plotting functions or building digital universes, the distinction between coding and calculating begins to blur since the art of mathematics arises in the intersection of these two typically independent fields. Overall, mathematics is not just a tool for understanding the world, but it is a language that is capable of building new ones and offers creative solutions.