Pages

July 18, 2016

Eve-style clock demo in Red, livecoded!

Like many others, we are fans of Chris Granger's work on Lighttable and more recently on Eve. The Eve project shares some similar goals with Red, though taking a different road by giving a new try at visual programming, while Red still tries to push further the limits of textual representation. A few days ago, the Eve team tweeted a nice small clock demo using their framework. Here is our own version of that demo using Red and our native reactive GUI (Eve relies on a web engine):


The Eve demo has a "compile and run" button, which we thought was not necessary in our case, as we can easily build a livecoding editor in few lines. ;-)

Here is the full source of our demo. Use our latest Windows build to run it from the GUI console:
    clock-demo: {
    base 200x200 transparent rate 1 now draw [
        scale 2 2
        fill-pen #0B79CE pen off
        circle 50x50 45
        line-width 2
        hour: rotate 0 50x50 [pen #023963 line 50x50 50x20]
        min:  rotate 0 50x50 [pen #023963 line 50x50 50x10]
        sec:  rotate 0 50x50 [pen #CE0B46 line 50x50 50x10]
    ] on-time [
        time: now/time
        hour/2: 30 * time/hour
        min/2:  6  * time/minute
        sec/2:  6  * time/second
    ]
    }

    system/view/silent?: yes

    view [
        title "Eve clock demo"
        backdrop #2C3339
        across

        source: area #13181E 410x300 no-border clock-demo font [
            name: "Consolas"
            size: 9
            color: hex-to-rgb #9EBACB
        ]

        panel 200x300 #2C3339 react [
            attempt/safer [face/pane: layout/tight/only load source/text]
        ]
    ]

As you can see the clock demo code is held in a string, which will be used to feed an area widget that we use as a code editor. Each change in the area triggers a reaction which will try to interpret the code as VID dialect using thelayout function and feed the panel's content with it. We could have used a simple on-change handler here, but react is so simple and versatile, that we can forget about events in many cases.

Yes, livecoding (using native widgets!) in Red can be that simple. As you can see, there's no built-in "livecode" widget or feature, it's an emergent behavior resulting from the combination of existing Red features, homoiconicity being the most fundamental.

As a sidenote, the code above could be improved to avoid some light flickering.

If you want to see more Red feats and get more info about Red, check out:

Red is only at Alpha 0.6.1, and there is significant work still to do. Though, you can already imagine the sheer power that will be into your hands by the time Red reaches 1.0. ;-)

Cheers!

19 comments:

  1. Copy pasting the code into a Red 0.6.1 gui console on windows 10 results in the following error:

    *** Script Error: VID - invalid syntax at: [#2C3339 across source:]
    *** Where: do

    ReplyDelete
    Replies
    1. You need to download the latest Windows build from http://static.red-lang.org/dl/auto/win/red-latest.exe and run it from the GUI console.

      Delete
  2. It's exciting to think about the possibilities. Someday we'll have a great Red IDE/toolset, that is customizable and supports plug-ins. Until then, though, we can build little tools like this, so easily, for specific purposes. It isn't limited to building GUIs interactively. They can be automated test runners, interactive parse rule development with sample data it runs against, or anything else.
    And I love how easily you can set references to locations in the draw block for later modification.
    What Chris Granger, Jonathan Edwards (http://www.subtext-lang.org/), and others are doing is great, and I bet all the "new kids" will learn from each other as well.

    ReplyDelete
  3. Are you kidding me? That's amazing Doc.

    ReplyDelete
  4. Totally Awesome!!! Red is the language that made recursion make sense to me, I find myself making recursive solutions without even thinking about it. It takes the complexity out of algorithms and makes coding a truly enjoyable creative outlet. Combined with the goal to be capable from the metal to the meta, the age old question "What's the best language to learn?" will finally be answered... Red!!!

    ReplyDelete
  5. One question: I know that Red is meant to be about 90% compatible with Rebol, but does this hold for the VID dialect as well? In other words, if I learn and practice VID in Rebol2, will I be able to easily reuse what I learned once Red GUI support come to my OS?

    ReplyDelete
    Replies
    1. Some things will work, some will not. In R2, it was easy to do a simple stuff. Once you accessed the styles directly, you could mess up the GUI. Red uses accessors and in general, it is going to differ. I suggest you to start with Red directly, as it will improve its GUI with each new release ...

      Delete
    2. You will be able to use a lot of what you learn, but not all. e.g. R2 has no reactivity, and event actors are more extensive in Red. Default action handlers are very close. In Red you'll use `panel` styles rather than the `guide` keyword in R2 VID, and you don't have things like `edge` facets or the effect pipeline in Red yet. If you stick to the basics, to get a feel for VID, that's a good place to start, but details (e.g. how face facets work) are different once you get beyond simple things like /text or /data for a face.

      Delete
  6. Great. Works on Wine+Linux too. Had to remove the "transparent" word for the clock to appear.

    ReplyDelete
  7. I love seeing updates on this blog. Please post more posts more often about your adventures in Red and the things you come up with!

    ReplyDelete
  8. "We could have used a simple on-change handler here, but react is so simple and versatile, that we can forget about events in many cases."

    What are the cases when we can't forget about events?

    ReplyDelete
    Replies
    1. A reaction can be triggered by different kind of sources, user events or direct changes made by the program itself. Sometimes, you want to attach an handler to only one specific source event, in which case, the event handler way is the simplest option.

      Delete
  9. We received a question in a comment that was written in Mandarin. As this is an English blog, we feel that we can only publish comments in English.

    The Red Team is multinational. Nenad comes from Paris, France and is now based in Xiamen, China.

    ReplyDelete
  10. Red [ needs: 'view]
    view [
    below
    button "NEW" [
    either (face/text = "NEW" )
    [ f1/text: "" f2/text: "" f3/text: "" face/text: "Save" ]
    [ print rejoin [ f1/text f2/text f3/text ] face/text: "NEW"]
    ]
    f1: field "f1"
    f2: field "f2"
    f3: field "f3"
    ]
    When the second time I press the "NEW" button,why didn't the fields empty.
    I'm not good at English,sorry.

    ReplyDelete
  11. It's not really practical to help you through blog comments. If you ask your question in the Red Google Group (https://groups.google.com/forum/#!forum/red-lang) or the Red Gitter chat (https://gitter.im/red/red) somebody may be able to help you.

    ReplyDelete