The environment is built around a two-panel view: The left being an Ace editor and the right being a canvas.
All of the user’s code is written using JavaScript and uses Processing.js to generate all the graphics.
All code is executed in real-time. Not only is the code re-run but the code that you change is live dynamically injected into the runtime — this gives you the ability to change variables, colors, or even functions on the fly without the program ever restarting.
We did a lot to try and take advantage of the real-time nature of the environment, giving the user all sorts of tools to adjust the code, and thus the state of the program as well.
We have a number picker:
We have a color picker:
and we even have an image picker
We’ve also put a lot of work into the error correction.
In our experience students who’ve never programmed before can be left unattended using this environment and be able to resolve almost all of their issues via the error hints or the tutorials.