December 17, 2016

Incursion into "explorable explanations" lands

A few days ago, Nicky Case released an amazing piece of work in form of an interactive guide to alternative voting systems. This work follows the track of Brett Victor's famous research on explorable explanations and immediately caught our eyes because it is a very good match for the capabilities of our reactive native GUI system. We decided to replicate some of Nicky's interactive explanations in Red and see how it went. The results are pretty amazing, as it was not only relatively easy to design and code (about 8 hours in total and ~280 LOC) but also great fun! Here's how the results look:


You can, of course, try it yourself by using the latest build from the master (or macGUI) branch or, preferably, one of the prebuilt consoles:
Put the console executable in the source code folder, run it and from the prompt, just type:
    red>> do %ballots.red
For Linux folks, sorry guys, the GUI support is not yet ready for prime time, though in the meantime, you could use Wine, Red GUI usually runs just fine on it.

Notes for macOS users:
  • You need to `chmod +x` the binary before running it from the terminal.
  • When dragging a face quickly, it can lag behind. The macOS GUI backend is still in a development branch, and still need some work to optimize animation latencies.

Implementation notes

The Red version implements only the "model1" and "ballot1" to "ballot4" interactive explanations. The rest could also be easily done in the same way, though we used up all our spare time for that as we are now focussing on the Red 0.6.2 release.

The colored shapes are images in the web version, but instead we chose to draw them using our 2D vector DSL in the Red version. Overall, the Red version is really small, about 25-45 LOC per screen, 85 LOC for the helper code and 2D shapes. All things considered, it is significantly smaller than the web version:
This is an interesting result, as the web version uses only plain JS, no third-party framework (with the exception of the almost weightless minipubsub). The counted JS code could maybe be shortened (excluding minification) though it already looks pretty simple to me, containing very few comments, doing mostly calculations and canvas drawing. I doubt it could be reduced significantly (any thoughts from expert JS readers about that?).

Final thoughts

This fun experiment shows that Red has the potential to be a great match for explorable explanations and other similar reactive interface needs. We hope that this demo will inspire the Red community to dig more in that direction and see what gems are lying there. For example, learning Red using such interactive visual approach would be great, don't you think so? ;-)

9 comments:

  1. Cool! Thanks for the interesting post.

    ReplyDelete
  2. This is pretty extraordinary. What's even better is when you look at how tiny the Red runtime is compared to the Javascript engine (and the fact that you have to run the Javascript version in the browser). Excellent work!

    ReplyDelete
  3. Red is everything I've ever wanted in a PL. Keep up the good work and somebody needs to start putting together a good beginner focused book or tutorial.

    I'm impressed something so cool can be so tiny.

    ReplyDelete
    Replies
    1. Thanks for the kind support! Sane design principles (like using what the OS provides instead of binding to gigantic libraries) are the reasons why it is that tiny. ;-)

      Delete
  4. Hey. I'm brand new to programming. I have a question. Is it possible to create a 2D game using only Red(GUI system)? I don't want to use opengl or directx, because it is to difficult for me. I DON'T mean very simple games like chess for example. I want to create RTS game with isometric view like stracraft. Is Red(out of the box) good for such a things? Thanks.

    ReplyDelete
    Replies
    1. Welcome to Red and programming! AFAICT, modern games which are using isometric views, are actually using 3D engines for rendering (on top of OpenGL/DirectX). Though, you can still experiment and build a prototype for such game using Red and its Draw DSL (vector 2D). You can get support from the Red community (some are pro game programmers) on https://gitter.im/red/red/welcome

      Delete
  5. This looks great and I am really pleased we now have the Mac GUI, will be trying this out tonight. One minor comment is that the link to Vector DSL is broken (seems to put you in the Gitbook but there is no related content. I am on a windoze machine at the moment using MS IE 11 if that makes a difference (will try on my Mac with Chrome or safari later) - regards David Murphy

    ReplyDelete
    Replies
    1. Hi David, thanks for the kind support and the broken link report. As we have moved our documentation to Asciidoc on gitbook.io, the links have changed a bit, breaking most of the doc links in the recent articles. This has been fixed now.

      Delete

Fork me on GitHub