Pages

▼

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 goes. 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 is the result:


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? ;-)
at

17 comments:

  1. EdocDecember 17, 2016 at 11:58 PM

    Cool! Thanks for the interesting post.

    ReplyDelete
  2. mydoghaswormsDecember 19, 2016 at 12:06 PM

    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. AnonymousJanuary 2, 2017 at 9:21 PM

    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. Nenad RakocevicFebruary 16, 2017 at 6:53 AM

      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. AnonymousFebruary 14, 2017 at 11:03 PM

    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. Nenad RakocevicFebruary 16, 2017 at 6:49 AM

      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. AnonymousFebruary 15, 2017 at 6:49 PM

    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. Nenad RakocevicFebruary 16, 2017 at 6:44 AM

      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
  6. MaartenFebruary 24, 2017 at 6:04 PM

    I/O.....

    ReplyDelete
    Replies
    1. Nenad RakocevicMarch 7, 2017 at 11:22 AM

      Marteen, there is no roadmap which would satisfy every possible user. We choose the project priorities according to intrinsic technical needs (for implementing planned features for next milestone), the user growth it could generate and how much it can help the project survive in the long term (e.g. GUI before IO). Overall, it's a complex process in a changing context, it does not boil done to one single feature which would be a game-changer for the whole project (unfortunately).

      That said, the work on 0.7.0 (full I/O) should start as soon as 0.6.3 is release, which is planned for a couple of months from now.

      Delete
  7. joseMarch 24, 2017 at 7:14 PM

    I believe that implementing call as Rebol has, could be a big help to use RED while mature, in this way we can call another tools to do stuff that RED can not do it now. Thanks! (i speak spanish and use windows )

    ReplyDelete
  8. joseMarch 24, 2017 at 7:30 PM

    How we can conect the View or interface as a front end from Red to another languajes in a easy way? , Could be with call ? http ? ftp?, a file ?, I do not mean embed code , only comunication between red and another compilated program, i know little about that topic, I saw VBA example, I can not run it because I have Libre Office and all fail with errors, and with C all error too, undefined functions told me. Thanks

    ReplyDelete
    Replies
    1. Nenad RakocevicApril 8, 2017 at 4:52 AM

      AFAIK, LibreOffice does not have VBA support, but it has its own version of Basic. So I guess someone knowledgeable in that macro language could give it a try to integrate libRed.

      Delete
  9. joseMarch 24, 2017 at 8:09 PM

    Sorry in red-latest call is implemented!! Thanks

    ReplyDelete
  10. austenStrineMarch 30, 2017 at 8:17 AM

    I second the motion from the above anonymous that a tutorial should be developed for beginners. I'm new to code as well (started about 8 months ago, I know some C++ and JavaScript, working on Java right now) and am very interested in investing time and energy into teaching myself Red. The simplicity and speed is extremely appealing to me as a beginner especially, and it seems like the flexibility suits a lot of my eventual goals. Keep up the good work! If you need help with develop​ing a tutorial, I'll be a guinea pig!

    ReplyDelete
    Replies
    1. Nenad RakocevicApril 8, 2017 at 4:55 AM

      You can have a look at the Documentation page on this site, under the "Community-provided learning material" section, you should find there some suitable material for beginners. As the Red community grows, new docs are tutorials will be added, so stay tuned. ;-)

      Delete