After some squinting, I was able to use JQuery UI sliders to update values in a Processing.js canvas. This is handy, but next time I may just implement my own class of sliders in Processing itself. There are some finicky things with mouse and keystroke events that would be simpler that way.

I made a simple sketch to help visualize equations of the form *f(x) = a sin(bx + c) + t cos(ux + v)*, where you can adjust the values of all constants and coefficients using sliders. This is a quick way to get a sense of what each of the terms are adding to the function as a whole. I think some topics in high school algebra would be simpler for a student to understand using a tool like this.

Somewhere down the line I’ll either turn this into a more general equation grapher or just add a pull-down menu of common equation types to manipulate.

It doesn’t work in IE, but it does work in both WebKit and Mozilla browsers. This would be another reason to keep the UI elements in Processing itself. That way, I could easily fall back to a Java applet for IE users.

Play around with it here.