

Live canvas editor compiles and runs as you edit - bezalmighty
http://anthonydel.com/projects/canvas-editor/index.html

======
Lerc
I like this. I have worked on a couple of things in a similar area.

This too suffers from the problem that has plagued me.

I tried to add this code to the program

    
    
      var x=2;
      var y=1;
      while (x>y) {
        x+=2;
        y+=1;
      }
    

Which is my usual check for what happens when you encounter an endless loop.
Of course, I didn't get the entire thing typed in because the user interface
froze when I typed the close bracket of (x>y).

Javascript can't pre-empt. An endless loop is a killer. I'm going to write
something long and detailed about this one day. It'll be a big rant.

I made a MediaWiki plugin for my approach. It uses a worker, which lets you do
something about busy loops (you can kill it, not much else). The down side is
that all of the drawing operations have to be passed through to the host as
messages.

The other part of what I have been working on is a extremely simple API to use
environments like this for novice programmers.

I made whio. [https://github.com/Lerc/whio](https://github.com/Lerc/whio) and
I'm slowly building up a wiki as a intro to programming.
[http://fingswotidun.com/code/index.php/Main_Page](http://fingswotidun.com/code/index.php/Main_Page)

I teach some programming in a class of 10 year olds. I start off with
[http://jsbin.com/tinydraw/1/edit](http://jsbin.com/tinydraw/1/edit) Which is
a program they can focus on in one view and lets them draw pictures. Then I
make suggestions and point them to the wiki. Where they go from there is
amazing to see.

Just changing the number on the jsbin url shows where some of the kids have
taken this.
[http://jsbin.com/tinydraw/45/edit](http://jsbin.com/tinydraw/45/edit)
[http://jsbin.com/tinydraw/130/edit](http://jsbin.com/tinydraw/130/edit)
[http://jsbin.com/tinydraw/148/edit](http://jsbin.com/tinydraw/148/edit)

This one appears to be by a someone who copied an example from the wiki then
modified it
[http://jsbin.com/tinydraw/48/edit](http://jsbin.com/tinydraw/48/edit)

I like this one. Here a kid figured out from the wiki how to read the mouse.
[http://jsbin.com/tinydraw/50/edit](http://jsbin.com/tinydraw/50/edit)
Scattered through the versions are evolutions of this program until it ends up
here, as a simple, but fairly complete game.
[http://jsbin.com/tinydraw/141/edit](http://jsbin.com/tinydraw/141/edit)

------
nornagon
Try out [https://nornagon.github.io/live](https://nornagon.github.io/live),
which also lets you edit constants without recompiling.

------
Leszek
I've been working on something similar for teaching graphics programming to
our undergrads. Uses esprima to parse the input JS and add some runtime error
checking with line numbers, including unidentified variables and timeouts for
loops:

[http://www.cl.cam.ac.uk/~ls426/graphicstutor/](http://www.cl.cam.ac.uk/~ls426/graphicstutor/)

~~~
seanmcdirmid
I will always remember what Bret Victor said about these kinds of projects in
his Learnable Programming essay:

> As you can see, live coding, on its own, is almost worthless. The programmer
> still must type at least a full line of code before seeing any effect. This
> means that she must already understand what line of code she needs to write.
> The programmer is still doing the creative work entirely in her head --
> imagining the next addition to the program and then translating it into
> code.

(To be fair to yaxu, its not live coding that he is talking about, but the
feature of live update in isolation.)

------
johnorourke
Simpsons already did it. Well OK, @sanchothefat already did a similar thing
using Processing.js over at [http://hascanvas.com](http://hascanvas.com) \-
bit old now but he had plenty of interesting user contributions over the
years.

------
dested
Can you elaborate on what is actually happening?

