Getting Started with Beta 6

Daz
Cyril Live Coding
6 min readMay 10, 2016

--

Beta 6 is the current version of the Cyril runtime. It’s open source, and available on GitHub. Currently it only builds on OSX, but we’re working hard to change that. You can get pre-built binary for OSX from the GitHub repo release page.

I didn’t pay to join Apple’s developer program (sorry), so you will get a warning if you try to run Cyril:

To get past this warning you need to double-click/command-click the icon and select “Open” from the drop down menu:

You will then get a different warning message, which will let you “Open” Cyril…

You may want to try different beta versions. If you’re interested, more information is available in the GitHub issue queue regarding what’s in each version. I’ll assume you’re using Cyril Beta 6 for this guide.

Press COMMAND + f to go full screen, press COMMAND + q to exit.

When you start Cyril you will see an (almost) blank screen like this. The cursor is up in the top left corner, and in the middle at the top you’ll see the buffer indicators. The current buffer is underlined in white.

Hello, world!

Here is a very simple example of a Cyril program. It just draws a box in the middle of the screen:

box

This is an example of an operation called box being run with it’s default parameters. Many operations have a default mode of operation if you don’t provide the values for the options.

The above program is exactly the same as the following program:

box 1, 1, 1

In this example the options are explicitly stated. This draws the same box, with dimensions 1x1x1. I.e. It has a width of 1, a height of 1 and a depth of 1. You can vary the values to produce different size boxes. For example, to draw a taller box, you could run this program:

box 1, 2, 1

What’s Going On?

Cyril provides a scriptable 3D engine. It compiles your program into a format it understands, and uses it to draw your visuals. Cyril runs at 60 frames per second (if it can). It runs your program to draw each frame. You can use variables that change each frame to animate your visuals. If your Cyril program is doing lots of work, then the framerate will be reduced.

Moving Things Around

You can move around the screen using the move and rotate commands. When you enter one of these commands every command after it is affected. The next example demonstrates this. It draws a box, moves to the right and then draws another box:

box
move 2, 0, 0
box

Cyril programs start in the center of the screen. This program draws a box there and then moves 2 places to the right and draws another box. You can also rotate the current drawing location as well, for example:

box
rotate 45
box

This program draws a box, then rotates 45 degrees and draws another box. The final instruction to understand in moving around is the scale instruction. This is like a zoom in or zoom out function. It affects many of the other instructions like box and move in that is changes the scale on which they operate. For example, if you draw a box, move right, scale down by 0.5, then draw another box your second box will be half the size:

box
move 1, 0, 0
scale 0.5
box

Basic Animation

Cyril has many ways to animate objects you create. The most basic way to do this is to access the provided variables TIME and FRAME. Assuming you run with the default setting, and your program is not too complex, then your program will get executed once every 1/60th of a second, or 60 times per second.

Each time your program runs you can do something slightly different by making use of the TIME and FRAME variables. These change each time your program runs. The TIME variable stores the number of milliseconds since the program started, and the FRAME variable stores the number of frames that have happened since the program started.

You can use these as options to any of the Cyril instructions. As an example, lets draw a box that gets bigger as time ticks by. As the time variable increases by 1 per millisecond it is going to get big very quickly, so we reduce it’s effect by dividing the number:

scale TIME / 1000
box

Eventually this gets too big to display. How about rotating instead:

rotate TIME / 10
box

See the full language reference for more commands.

Multiple Workspaces

Cyril contains 10 text buffers where you can create programs. You can switch between the using COMMAND + 1, COMMAND + 2, COMMAND + 3, etc. I.e. pressing command plus the number of buffer you want to switch to. You can also TAB between the buffers.

You can hide the text editor by pressing COMMAND + a. This is useful if you want to view the full effect of the visuals you’ve created, or if you’re using an external editor to edit the programs (see below).

To run a program press COMMAND + r. If there are any errors in your program it will fail to run. You’ll see a red indicator, like this…

Have you made a typo? Are there any extra non-Cyril characters? Did you miss-spell a function or command? Have you got the same number of push and pop operations? Have you got enough ‘end’ commands to match all blocks of code?

If the program looks OK, then Cyril will add it to the running program list and the text buffer indicator will go white, like this…

Cyril can not detect all possible bugs. You can break things if your program does something crazy like try to loop an infinite number of times.

External Editor

To use an external editor with Cyril, hide the text buffers (with COMMAND + a) then go to the ‘/data’ folder and edit the text files directly in your favorite app. Cyril will detect when you save the files and automatically load them.

Now What?

Full language reference.

It’s early days for Cyril. Join us on Twitter or in the issue queue at GitHub.

You can see a few old example videos on Vimeo. Also, check out Cyril Patterns, a website setup by Cyril user Dan Hett with examples that help learn the basics.

--

--

Daz
Cyril Live Coding

Geocities Developer Expert. Keywords: Angular, TypeScript, JavaScript, Cyril Live Coding, Functional Programming