Help

Code realtime graphics using the HTML5 Canvas API, based in some great ideas from this Bret Victor speech.

You can use the auto-compile mode if you want to compile everytime the code change, but if you are worried that it can cause a infinite loop or destroy the canvas state, disabled it using the toolbar and press control + enter or control + S every time you want to recompile.

You can select a value and pressing control and dragging it you can change its value. Useful for realtime mode.

You can use some vars in your loop:

mouseX to get the mouse X.

to get the mouse X. mouseY to get the mouse Y.

to get the mouse Y. mousedown 1 if the mouse left button is down, 0 otherwise.

1 if the mouse left button is down, 0 otherwise. T for the time in seconds.

Keyboard Shortcuts: (don't work in Chrome)

control + enter compile.

compile. control + G auto-compile toggle

auto-compile toggle control + Q reset the canvas state

Some useful functions:

RGB(r,g,b) returns an string formated with the color info for the canvas.

Troubleshooting

Lots...

Enjoy!