Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@uniphil

uniphil/hints.md Secret

Last active January 31, 2020 15:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uniphil/c3866f3bdcd1bbce6942 to your computer and use it in GitHub Desktop.
Save uniphil/c3866f3bdcd1bbce6942 to your computer and use it in GitHub Desktop.
expression visualizer

This is an expanded reply to a comment on Lobste.rs about my current project, a math expression visualizer.

The point is to get insight into what is going on inside a mathematical expression. We'll start easy:

1

The height bar above the number is its value. Try changing the number to 2.

If you put x instead of 1, you can separate the value from the expression. If you want to see how the expression changes when x changes, select "variable" and drag the slider.

Level 2: operations

1+1

When you put 1+1 into a normal calculator or wolfram alpha, it will tell you, 2. My visualizer says 2 as well (you can see a taller bar over the whole 1+1 expression), but it says more, it shows all the work. You can still see the height-1 bars over each 1. It shows you what values went into that + that gave you the sum.

As before, try swapping out one or both 1s for another number or for x.

Level 3: nested operations

1+2*3

remember BEDMAS? You have to do the (M)ultiplication before the (A)ddition, so to solve you go 1+2*3 == 1+6 == 7. You can see all of that work in the bars of the visualization: bars of heights 1, 2, 3 over the numbers, a bigger one (height 6) over the 2*3, and the final value (height 7) over everything (1 + 6).

That's pretty much it. I have this to play with now and try to make cool-looking graphs with, instead of the graphing calculators we had in high school, where I always tried to make cool-looking graphs, but never knew what was going on inside my fantastic complicated random expressions and they all sucked.

Bonus: things I like so far

The expression linked in my original comment was the trig identity sin(t)^2 + cos(t)^2 which always equals 1. As you slide the value of t, you can see that the bar over the sum never changes -- it's one. You can see the pieces that are added together that make 1, and how to the ^2 fixes the sin and cos outputs to be just right. To see just how important the power 2 is, try abs(sin(t))^p + abs(cos(t))^p.

I don't think I've ever seen the mod operator visualized, here it is: x%1. In real life when I use %, I think the right side is always some constant, but it doesn't have to be! x%(6-x)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment