I remember seeing this several years ago, and was thoroughly impressed. The gentleman who wrote this library used it in an interactive essay called "Ladder of Abstraction." [1]
Also consider reading his seminal essay called "Magic Ink" [1] and afterwards take a look at the publication date and try to remember where the web was back then.
I believe LightTable [0] ran with some of the concepts in the video, and I remember one of Chris Granger's videos having an almost identical bit about mapping time over space in a ball/block jumping game and very similar themes. Either way, it's definitely worth checking out. Sorry if I get any of the details wrong, I'm a bit out of step with Clojure.
[0] An IDE that supports Clojure and Javascript right now, maybe Python soon? Bit behind on the news: http://www.lighttable.com/
I have watched this video a few times and periodically revisit it. Sometimes we get to far into the woods and need to be reminded where we can go writing software.
Although Bret Victor's ideas behind reactive documents are interesting, I think the first example on this page (regarding the state parks) is particularly unfriendly and difficult to gain any understanding from. My views very closely aligns with (and was influenced by) Evan Miller's blog post [1] on the top that I highly recommend you read. The overall gist is that equations are actually the friendliest way to spread information about the relationships between several (ie more than 3 or 4) variables.
The final paragraphs of Evan Miller's essay address this particular webpage (the Tangle demo) in particular.
Have yet to go through Evan's post, but as you point out, the equations might be the most accessible way to truly comprehend relationships between 4 or more variables.
However, libraries like Tangle are powerful tools to visualize and understand relationships between 2-3 variables.
Maybe visualize, but understand? Doubtful. I don't think the computational overhead justifies a complex subsystem instead of just something like "x = cos(theta)" without some fancy rotating control.
My take on the best way to write/use such a document would be first present the math, then a reactive example. The user should read the math formulate a hypothesis/visualization/understanding of the system then use the reactive document to verify or falsify the concept.
This does not remove mathematical understanding from the document, but adds an opportunity for quick verification of an understanding. And according to my vague understanding of learning and neural connection getting quick feedback is key to forming strong connections.
Just an FYI, but your choice of series colors for your graph are very difficult to differentiate as a colorblind person. Might consider changing one of the colors.
I saw this a few years back and was seriously impressed with the idea, not just as a JS library but the concept of interactive (or reactive as Brett calls them) documents. This is where HTML should be going as a form of media, armed with the question, "what can HTML do that other forms of media cannot?"
But a lot has changed since then - has this been superseded by client-side libraries with two-way data binding? e.g. angular or knockout. It would probably be quite trivial to duplicate the functionality in either of those libraries.
If what you're looking for is exactly what the example on the website shows (say, an interactive textbook), then I would just use Tangle because it's ready to go without much effort on your part. But if you wanted more flexibility, then of course you should use a move advanced library like Angular.
I don't think it would be a big ask. Dependency tracking/resolution and two-way data binding is baked in, so you'd only have to create some ui components (e.g. a slider) to allow for altering of the values and everything else would just work. Though if you wanted to do it properly you'd probably encapsulate the functionality in a directive of some sort.
We are wholly inspired by Bret's work, and are currently playing around with the tangle library to help students visualize the concept of area, perimeter, and volume. Here is a preview: http://tuvalabs.com/resources/area/
We also plan to open source this code in due time. Ignore the mess please.
A suggestion for the visual area widget: Count the boxes for the user. So in the first box you'd write 1, the second 2, etc. Then it's easy to verify that the numbers are indeed a counting (they increase by 1) and that the calculated are indeed checks out.
I'd write the numbers in gray so they don't dominate the image.
Thanks for the feedback. There is a lot of work that still needs to be done to improve the UI for these tools, but our goal is to build a library of such visual tools for tens of relevant topics.
I share your passion for revolutionizing math education, but I don't quite understand the attachment to "Common Core." Federal prescriptive nonsense is a huge obstacle for real innovation in education and outside of the need to make a sale I don't see why you'd limit yourselves.
personally, I feel uncomfortable reading stuff like "If the width is 2 units and the height is 2 units, the area is 4 square units since 2 times 2 is 4".
2 plus 2 is 4 as well, yeah ?
As also, 2 ^ 2 = 4
The area is 4 regardless of what 2 times 2 is, or 2 plus 2 is, or 2 raised to 2.
I get your intent, but the phrasing is questionable pedagogy at best.
They'd be quite small touch targets assuming you wanted to view the shape and calculation as you change them. Have you considered making the shapes resizable by dragging?
Stuff like this, that explores the document nature of HTML, should be standard on the web, instead of the current crazy trend of reinventing desktop applications in the browser.
I can imagine this in the science books of the future. I usually check with a few cases to see if I understand the subject correctly, but sometimes I have enough samples to test.
This would be great: the student can see the default example, learn the subject and then try to check if he understood it correctly seeing how it behaves changing the parameters!
In a physics course I took some years ago, we used Mathematica notebooks for that. The professor had written out explanations of a few subjects we were studying in the style of tutorial notes or a paper handout, but within Mathematica so you could change the parameters and see updates in real time.
I am currently working on interactive 2-d physics simulation in the browser with much the same ideas. On the desktop we have apps like KDE Step but I haven't found anything similar for the web.
Currently I have particles,disks and boxes working with gravitation, coulomb and custom-defined forces. I also implemented Runge-Kutta method of integration instead of horribly inaccurate Euler's method. You can manipulate the objects, their parameters and laws even while the simulation is running.
I need to add basic collision detection and things like springs, links, and linear/angular motors and embedding the simulation as a widget before polishing it up and releasing.
Email me in case this sounds interesting and you would like to stay updated.
Precisely. In physics, testing extreme cases and boundary conditions is one of the first ways to get a better understanding of a system. Tangle can be a great tool to empower learners to do this visually.
Bar the obvious use in scientific texts I can imagine this being useful in client facing data-driven BDD tests, i.e. tools like Concordion [1], FitNesse [2], etc.
This is a cool implementation, but the idea is not new. In fact, the majority of front-end JavaScript libraries right now are more or less aiming to do the same thing in their own way: AngularJS, Meteor, Ember, KnockoutJS, Bacon ... even d3js. The list goes on. These are all attempts at implementing reactive programming in the web, but they have different data and data binding models, and they may have different front-end goals (e.g., Ember tries to keep a 1-1 correspondence between document state and URLs).
There's also Elm, which implements a variant of reactive programming known as FRP.
I don't think AngularJS, Meteor or Ember are close to this though. The result might be the same, depending on the use case, but the philosophy isn't.
AngularJS for instance looks like more about components and data-binding (makes me remember the old Delphi days) in an attempt to use the browser as an application framework than "interactive documents".
Those libraries are ultimately just more sophisticated versions of this on a bigger scale. Meteor in particular takes reactivity to a whole new level: changes are propagated immediately not only to you but to other users as well (if appropriate to the application, e.g., a chat room). The philosophy is more or less the same in all cases: make the page react immediately to what the user is doing without a full refresh. Some of those libraries take it further and tie the page directly to the application back-end or database if desired.
I think the main appeal of something like Tangle is to get the benefits of reactive programming while using only a very lightweight and simple library. It provides a very clean interface to a subset of the functionality.
This is very interesting. As an aside: MooTools doesn't get enough love in the JS community. His Live Coding stuff was done with it (http://www.youtube.com/watch?v=-QJytzcd7Wo)
When I read this a year ago I was very impressed, but now I think (1) this was superseeded by Angular and stuff alike and (2) this is not good user experience, this is experience to experimenters, a restrict kind of user, very restrict. For the common user maybe a simple chart is better.
I'm in the process of writing my first serious academic paper, and while I'll still put the traditional document together, I think I'll try to make a second version using tangle where appropriate. Very cool, thanks for pointing this out.
Man, I would've loved something like this going through school--the final example of the performance of an analog filter and watching the root-locus plot change was really really cool.
Something like this is perfect update the horde of egregiously out-of-date STEM examples littered across academics' websites that all look just like this sans fancy JS.
He has some great stuff on the site, and I'm thinking of using Tangle to help teach math, but I'm wondering if letting people drag numbers is really so helpful?
For a mortgage simulation, or any kind of matrix type calculation, dragging the numbers might be simpler and easier to understand than having a standard form (even with seamless inline text input)
Very cool. This is one of those things that makes me wonder "where can I use this next?" Even more impressive is that this is apparently a few years old.
Except the original Lisp and Smalltalk environments are much more than a simple REPL.
Sometimes I wish people would learn about computing history.
Presentation from Kalman Reti about Lisp Machines, check the interactivity starting at 00:44:00 and how to introduce mouse sensitive images at 01:00:00
For me "more-than-REPL" just looks like a code visualization tool where you can jump between symbolics. Mouse sensitive images looks just like a prototype of AutoCAD
Bret Victor's work is much, much more impressive, you can change variable values and see results in realtime. In that Mario game example, you can see Mario's trajectory and adjust values to see how physical parameters affect the height and distance Mario can jump, and modify gravity ticking equation to see Mario jump & walking up-side-down.
You could do that on a Lisp Machine, too. Symbolics sold a complete interactive animation and game development system. Nintendo used it in the early years. The software later got ported.
Parent really thinks Smalltalk had the capabilities, realized or not, to do the demos that Bret did in Inventing on Principle. Smalltalk and Lisp have never shown the capability, and in fact just can't do it. Time travel was just never a big thing there.
The Smalltalkers do this all the time; I had even Ralph Johnson poo hoo my 2007 live programming talk. But you get the feeling that these people really think nothing new can be invented after the 80s. They say "Smalltalk" already does this! And you say "show me" and then they just shut up.
All the ideas presented in Christopher Hancock's 2003 dissertation on live programming are compared adequately against previous work. There are plenty of advocates out there for anything that don't do their homework and don't bother with related/previous work sections...only academics like us concern ourselves with that.
Here is its previous HN discussion: [2]
[1] http://worrydream.com/LadderOfAbstraction/ [2] https://news.ycombinator.com/item?id=3099595