Introduction to Punctual

Punctual is the next language we’re learning after Minitidal. We’re going to use Punctual to generate visual effects to complement the sound we’re creating with Tidal. You can use it to draw shapes, manipulate photos, and even animate effects in time with the music.

The first thing we’ll do is draw a single white square in the center of the screen.

Like always, start by going to the main Estuary site, and enter solo mode. Then, set a panel to Punctual and type the following then hit play:

rect [0,0] [0.5,0.5] >> video;

You should see, after a short delay, a small rectangle in the middle of the screen.

You can read this code as “put a rectangle at the center of the screen ([0,0]) and make its width and height a quarter of the total screen size (the screen ranges from -1 to 1 in both directions, making it a size of 2 total, so one quarter of that is 0.5) and then display it.”

The rectangle is white because, by default, operations like rect put full color in all three of the channels—red, green, and blue—making white. An easy way to change this is with multiplication, like so:

rect [0,0] [0.5,0.5] * [0.6, 0.2, 0.8] >> video;

This says that you want the final color to be 60% of max red, 20% of max green, and 80% of max blue. Without looking, can you guess what color that would be?

(Spoiler: it’s purple-pink, a fuchsia)

Now, let’s start talking about how to have something dynamic, that changes with time. This leads to our first oscillators. If you continue doing live-coding, music, or experimental visual art you’ll run into the idea of an oscillator all the time. Basically, what it means is something that cycles with time. Here we’ll use a sine wave as an oscillator to change how the rectangle moves across the screen.

rect [sin 1,0] [0.5,0.5] * [0.6, 0.2, 0.8] >> video;

If you try this you’ll see the rectangle sweep back and forth across the screen. You can change the number after the sin to make it sweep faster or slower. There’s a very special number you can put in there, though, called cps—which stands for “cycles per second”. If you use cps then the wave will be in sync with the beat that Tidal uses, which you can test by—in another panel—putting s "bd" and watch how they line up. If you want an even easier to watch example, try something like

rect [sin (cps*4),0] [0.5,0.5] * [0.6, 0.2, 0.8] >> video;

as your Punctual code and

s "cp*4"

as your Tidal code.

The next thing we’re going to do is learn how to use pictures in Punctual and a bit about more shapes.