This is an interactive web experiment inspired by such things like IBNIZ.
It's about creating fancy graphic patterns and sound using amazingly simple mathematical expressions. You can use predefined variables to add interactivity with the user to your creations, and even share them with others easily.
If you look at the equatio application, you can see two textboxes where you can write your expression at the left side. The graphics/sound will change after the repective textbox loses the focus. Over them, there is a little label that will show you when your expression is invalid.
Under them, there are the Share! and Reset! buttons. The share button will create a shortlink to your current creation when clicked. The reset button will clear the text fields.
In the middle, there's a 256x256 pixels large screen where your graphics expression will be drawn. Under it is a bar with the play/pause and back buttons, a speed slider and a display with the current time and speed.
At the right side you can find the checkboxes to toggle the graphics and sound, a slider to set the sound volume and a list of examples you can look at to get inspiration.
The expressions are nothing but simple JavaScript. You don't need to learn it, but a bit knowledge about bitwise operators and math functions in JS is quite useful.
The graphics expression will be called with changing x and y variables and is supposed to return an RGB number (you can calculate it using "Blue << 16 | Green << 8 | Red" where Blue,Green,Red should be numbers between 0 and 255).
Your code will get called for every pixel, 60 times per second, so better keep it simple and fast.
The sound expression is called for every sample, with a growing s variable. It should return a number between 0 and 256.
You can access more than only the x/y/s variables inside your expression. Here's a table with all of them.
| x, y | The position of the pixel that will be set to the calculated value. Only available inside the graphics expression. |
| rd | A random value between 0 and 256 that stays the same over the entire frame. Only available inside the graphics expression (use Math.random). |
| v | The averaged current volume of the audio output. Useful for easy visualization. Only available inside the graphics expression. |
| s | The number of the sample which amplitude is set to the calculated value. Only available inside the sound expression. |
| t | The current time value. This number is increased by td every frame (60 times per second). |
| td | Time delta, t is increased by this number every frame. |
| mx, my | The last registered position of the mouse inside the screen. |
| z | Basically a zoom value. Gets incremented by one when the user scrolls upwards and decremented by one when he scrolls downwards. |
| mld, mmd, mrd | These variables are set to 1 while the user holds down the left, middle or right mouse button inside the screen, respectively. |