You'll have to do some more memoization to make the performance reasonable; recomputing and redrawing everything on each change isn't very scalable. I'm working on a programming model for this:
However, when you change something inside the loop, its likely that everything will have to be re-executed. The only way around this is to break up the loop somehow. Or perhaps see Umut's work on self-adjusting computation:
Where he pretends to be in a late 70's conference, discussing how the current ideas about Smalltalk, GUI environments, parallel programming and so forth, can be used and how the computing world might look like in 30 years time (meaning nowadays).
Yeah that was a very good one. I saw that a few days after it came out and he makes some very good points in that talk. I would love to be able to chat with him 1 on 1 and just ask him questions because he seems like he's thinking about problems in very new and exciting ways.
I agree. As a parent of a kid interested in programming and math, I would only suggest replacing "for kids" with "for beginning learners." From what I've seen, kids over 7 and grown-ups are pretty much on even footing as beginning programmers. Additionally, "for kids" has a trivializing ring to it, like they're not full humans; my daughter does not like anything with a "for kids" label on it. (If only "Python for Kids" were not called that!)
I totally agree. In fact, I might even go further to say that this is really for anyone to think new thoughts regardless of age. Here's what I mean:
I've been programming for over a decade and the first time I read the code for the bouncing ball example I had basically no idea what it meant. I could sort of tell that there was something drawing circles but that was about it.
By dragging the constants around and seeing every frame change (across time, not just a single frame) you're able to get an intuition about what each line of code is doing.
I'm not a child nor a beginning programmer and using this tool was super useful for me to gain insight on how it works.
The original Learnable Programming article is a response to the work that we did in building the Khan Academy Computer Science platform - which is exactly that. An educational real-time environment for writing and manipulating code: https://www.khanacademy.org/cs
I love Khan Academy and the CS platform in particular. I think it would be amazing if it was possible to put Choc, or a tool like it, on some of the KA lessons. Being able to step through time (or view all of time in the case of animation) and inspect values are both really useful features for helping folks learn to think procedurally. I find that learning to think procedurally is often harder than learning the syntax.
For the interested: Jan Paul Posma has done some really awesome stuff with similar inspirations at jsdares (http://www.jsdares.com/) — try dragging around some of the variables in the brick game.
If you're targeting a younger audience flowlab (http://www.flowlab.io/) is a great starter. Compared to Rocky's Boots and Robot Odyssey of my youth, there are so many great tools available to get today's kids into programming.
I love this. Sure it might be good for learning, but I really would like something like this for eg IPython. Something that allows me quickly to tweak some parameters until whatever I'm doing looks right. I'm really exited about the possibilities of python-javascript integration coming up in ipython 2.
Another project that this kinda reminds me of is LightTable. I haven't followed how it's shaping up, but the initial concept demo had some similar live editing stuff iirc.
The idea Bret Victor represented is great, but the form of his creations are probably inefficient. Now these guys are trying to imitate that exact form in unusable SVG mess that doesn't work at interactive frame rates.
You should concentrate on the concept of interactive debugging and representing data going within the software.
Really solid way to learn about Programming. See each step and figure out how conditions work and _why_ things happen, not just _what_ happens. Awesome!
You know....I have wanted to build a Ruby tool like this, but just for iterators. I was going to call it 'eye-terator', because you can see within the iterator.
The idea being that you can step through the iteration (say an each, for, or any other iterator in Ruby) and see the state of all variables/objects at each step in the iteration - and then also allow it to handle nested loops, blocks, etc.
I was thinking a simple site like the Ruby Regex Tool[1] would work wonders.
I just haven't had the time to do something like that - I need to beef up my JS to execute that as elegantly as I would like. But I suspect that would be a very useful tool for Ruby devs.
REPL's aren't really interactive programming. In Bret Victor's demo, he makes a infinite loop and as he is typing, the mistake is immediately clear.
Pry is awesome though, it's just not really close to the things that Bret talks about. In fact, I think in one talk he specifically speaks against REPL's being interactive.
This appears to be working demos of the ideas that Bret Victor brought up when he initially criticized Khan Academy's CSE program -- the ones mentioned at http://worrydream.com/LearnableProgramming/.
I feel like the OP is missing the forest for the trees; the key takeaways from Bret Victor's lamenting seemed to indicate to me that we need Yet Another Programming Language, but one that non-programmers can actually use for "real programming" in conjunction with a "real IDE" (as opposed to one where you just "learn programming" but don't use for "real work").
Really very cool. I can't wait to see how these interactive tutor things evolve. Programming is such an abstract thing for many people, something interactive like this is really powerful.
One suggestion: please add some form of code intelligence, so that when I type "pad." a popup appears with all the public pad methods and their descriptors. That would encourage playing around even more imo.
Agreed - this version uses CodeMirror as the editor, but the core of Choc is editor agnostic. Choc isn't really "enabled" when you're editing code, so any plugins that provide browser autocompletion would work. (CodeMirror or otherwise)
Not to be a smartass but how is this different from hitting F10 over and over? (disclaimer I skimmed the article very quickly). I supposed it is nice that you can go backward also.
There's no real-time execution, but it does show a (more or less) word-to-word relationship between Javascript and English, which is an alternative (and complementary) way to "explain" code to someone learning Javascript.
Note that my English "translation" is totally hand-crafted. From the description, Choc allows hand-crafted translations of individual library functions, but applying those translations to a program still gives you a mostly automatic translation which is not as easy to understand as a hand-crafted translation would be.
I love this, I could see this being the next wave of programming tutorials, much simpler and fun way to learn how to program. Could you do one for Python? that would be just brilliant.
my Aunty Paige just got an awesome yellow Nissan Rogue SUV by working part time from a home computer... find more information ...................http://redir.ec/buzz55
you're seeing the tree and missing the forest -- this isnt about the examples its about the technology they feature. write a LOGO turtle example, then you can scrub its instructions, and execution
I'm not sure I follow. With Logo, I can see what the turtle/pen does at each moment of execution. That was the point, right? (Now, this has the cool slider idea... but really I'm not sure that helps understand any better than just having a reset and stepping each line again.)
Would it be cool to have this "at large" for a full stack of software. Possibly, but I'm not completely convinced yet.
Edit: Seeing how you can "slide" numbers is also kind of neat, but again, I'm not sure it really helps understanding. If anything, I would think this is somewhat confusing, as I have to grasp changing the numbers treats is as if that number was changed on previous iterations.
Fair enough. I should say my comment is not geared to the skill involved with this, which is high. Nor in the capability. Just saying that the odd graph of "making time tangible" just doesn't really do it for me. Whereas the metaphor of a turtle/pen did.
60 comments
[ 3.1 ms ] story [ 46.6 ms ] threadIt went into minus and I couldn't bring it back.
That said, you should be able to type in a value yourself. The code is completely editable.
http://research.microsoft.com/apps/pubs/default.aspx?id=2013...
However, when you change something inside the loop, its likely that everything will have to be re-executed. The only way around this is to break up the loop somehow. Or perhaps see Umut's work on self-adjusting computation:
http://www.umut-acar.org/self-adjusting-computation
Its an interesting research area.
Where he pretends to be in a late 70's conference, discussing how the current ideas about Smalltalk, GUI environments, parallel programming and so forth, can be used and how the computing world might look like in 30 years time (meaning nowadays).
However, I think that more visual debugging tools like this actually need to exist for professional developers as well. I think Bret would agree too.
I've been programming for over a decade and the first time I read the code for the bouncing ball example I had basically no idea what it meant. I could sort of tell that there was something drawing circles but that was about it.
By dragging the constants around and seeing every frame change (across time, not just a single frame) you're able to get an intuition about what each line of code is doing.
I'm not a child nor a beginning programmer and using this tool was super useful for me to gain insight on how it works.
Another project that this kinda reminds me of is LightTable. I haven't followed how it's shaping up, but the initial concept demo had some similar live editing stuff iirc.
You should concentrate on the concept of interactive debugging and representing data going within the software.
The idea being that you can step through the iteration (say an each, for, or any other iterator in Ruby) and see the state of all variables/objects at each step in the iteration - and then also allow it to handle nested loops, blocks, etc.
I was thinking a simple site like the Ruby Regex Tool[1] would work wonders.
I just haven't had the time to do something like that - I need to beef up my JS to execute that as elegantly as I would like. But I suspect that would be a very useful tool for Ruby devs.
#justsaying
[1] - http://rubular.com/
But....I may revisit it again.
Pry is awesome though, it's just not really close to the things that Bret talks about. In fact, I think in one talk he specifically speaks against REPL's being interactive.
I feel like the OP is missing the forest for the trees; the key takeaways from Bret Victor's lamenting seemed to indicate to me that we need Yet Another Programming Language, but one that non-programmers can actually use for "real programming" in conjunction with a "real IDE" (as opposed to one where you just "learn programming" but don't use for "real work").
One suggestion: please add some form of code intelligence, so that when I type "pad." a popup appears with all the public pad methods and their descriptors. That would encourage playing around even more imo.
I'm working on similar things for Go in my spare time, but I'm not yet that close to having cool results.
There's no real-time execution, but it does show a (more or less) word-to-word relationship between Javascript and English, which is an alternative (and complementary) way to "explain" code to someone learning Javascript.
Note that my English "translation" is totally hand-crafted. From the description, Choc allows hand-crafted translations of individual library functions, but applying those translations to a program still gives you a mostly automatic translation which is not as easy to understand as a hand-crafted translation would be.
[1] http://en.wikipedia.org/wiki/Logo_%28programming_language%29
Would it be cool to have this "at large" for a full stack of software. Possibly, but I'm not completely convinced yet.
Edit: Seeing how you can "slide" numbers is also kind of neat, but again, I'm not sure it really helps understanding. If anything, I would think this is somewhat confusing, as I have to grasp changing the numbers treats is as if that number was changed on previous iterations.