Category: Update

Eve-style clock demo in Red, livecoded!

18 July, 2016 | By Nenad Rakocevic

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):

Blue Clock

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

    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. ;-)


Don’t just wait for new blog entries; join us on Gitter

Chat with the team, keep up with the latest design issues, and be part of a great community
Join Us
We're on a Mission to Fight Software Complexity Join us! →