Mathnimatics

Help

Welcome to Mathnimatics, a webapp coded in Javascript to test the power of Javascript and HTML5.

Just write the equation on the textbox below the canvas to see how it looks like, the result has to be between 0 and 1.

Remember to use as many variables as you want on the equation, taking into account that they are in normalized coordinates (from 0 to 1).

Some vars you may want to use:

• X,Y: pixel normalized position
• MX,MY: mouse normalized position
• TIME or T: seconds since the app started
• W,H,ASPECT: Width and height of the canvas in pixels, Aspect ratio (H/W).
• FRAME: number of frame being rendered.

Some function you may want to use:

• distance(x1,y1,x2,y2): returns the distance between (x1,y1) and (x2,y2).
• module(x,y): returns the module of the vector (x,y).
• normalize(x,y): returns an array [x,y] with the vector normalized.
• rotate(x,y, angle): rotate the vector 'angle' degrees from 0,0. returns an array [x,y].

You can set colors on image plots by using an array as RGB output, p,e: [X,Y,MX]

Use the vars MX,MY to catch the mouse position normalized to add a little interaction.

Press Control+Enter to evaluate the function (even when it's running)

Press Control+P to Play/Stop the animation

Warning: it could run slow in some machines if you set resolution really high on complex equations.

Pro tricks

You can use multiline equations if you want to speed up the equation by saving some values in temporary vars, to do that write your javascript code, but remember to end it with 'V = ...' because V is the var when the result will be read. If you are confused by this explanation, check the examples on the demos.

You can declare functions inside your code, use the javascript sintax: function foo(x,y) { return x*y; }

You can read the previous value of that pixel using this sintax: (_D[_P]/255) for the red, (_D[_P+1]/255) for the green and (_D[_P+2]/255) for the blue. _D is the data buffer and _P the pixel position on that buffer.

You can speed up a lot the computation if instead of using round or floor you use (number>>0) but it doesnt work in all the situations.

If you want to have a uberhigh resolution (2000x2000) of your formula to store in your hard drive, you can click the next button, but it can take some time depending on the complexity of the equation and in Chrome it can crash the tab (Firefox works fine).

Generate high resolution

And remember, you get extra kudos if you can make it using just one line of code ;)

Troubleshooting

Lots...