Interaction Design History Spring 2026 | Week 7 | April 20, 2026

1. Quick Starters (Copy & Paste)

The easiest way to see drawing in action is to drop one of these one-liners into a new program. Because they target $this, they automatically scale and position themselves relative to your program's physical or virtual bounding box.

# Draw a colored outline around your program
Wish $this is outlined blue

# Add a simple text label in the center
Wish $this is labelled "hello there"

# Add a large title above the program
Wish $this is titled "My Program"

2. Titles & Labels

Folk includes a set of grammatical rules (title.folk and decorations) to quickly annotate your programs without manually calculating coordinates.

# Displays large text anchored above the top edge
Wish $this is titled "Main Interface"

# Add a centered label directly on the program
Wish $this is labelled "Status: Active"

3. Images, GIFs, & Sprites

Folk can load and display external assets natively. It supports fetching directly from a local path (~/folk-images/) or over http/https.

# Display a standard image, automatically scaled to the program's geometry
Wish $this displays image "https://folk.computer/_media/logo.png"

# Load an animated GIF
Wish $this displays gif "my_animation.gif"

Sprites (sprites.folk)

You can animate sprite sheets by declaring the number of frames and columns.

# Animates a sprite sheet at 60fps
Wish $this draws sprite "character_run.png" with \
    frames 8 columns 4 fps 30

4. Paths, Lines, & Circles

When you need exact control over vertices, you must drop down to a lower-level context using When $this has resolved geometry /geom/, which gives you access to the exact coordinate space. Coordinates are measured in meters relative to your program.

Solid Lines

When $this has resolved geometry /geom/ {
    # Draw a set of connected points (a stroke)
    Wish to draw a line onto $this with \
        points {{0.0 0.0} {0.1 0.1} {0.2 0.0}} \
        color "green" width 0.01
}

# You can also mix in high-level commands
Wish $this is outlined gold

Dashed Lines

When $this has resolved geometry /geom/ {
    # Draw a dashed line
    Wish to draw a dashed line onto $this with \
        points {{-0.1 0.05} {0.1 0.05}} \
        color "blue" width 0.01 dashlength 0.02
}

Circles

Circles can be drawn as outlines or solid filled shapes.

Arguments: center (or x and y), radius, thickness, color, filled (boolean)

When $this has resolved geometry /geom/ {
    # Draw a circle outline
    Wish to draw a circle onto $this with \
        center {0.05 0.05} radius 0.03 thickness 0.005 color "green"

    # Draw a solid, filled circle
    Wish to draw a circle onto $this with \
        x 0.15 y 0.05 radius 0.03 thickness 0 color "hotpink" filled true
}

5. AprilTags & Custom Pipelines

Folk allows you to dynamically render computer-vision tags directly to the display, which is highly useful for projecting tracked objects.

API: Wish to draw an AprilTag onto $this with ...

When $this has resolved geometry /geom/ {
    # Draw tag ID 42 in a 0.1 x 0.1 meter square
    Wish to draw an AprilTag onto $this with \
        id 42 corners {{0 0} {0.1 0} {0.1 0.1} {0 0.1}}
}

6. Interactions: Pointing

You can create interactive programs that detect when they are physically pointing at another program on the table.

First, declare a Wish for your program to project a pointer in a specific direction (up, down, left, right) with a certain length (in meters). The system will automatically draw a "whisker" line on the table. When that whisker overlaps with another program, Folk emits a points ... at claim that you can react to!

# 1. Project a 0.2 meter (20cm) pointer to the right of this program
Wish $this points "right" with length 0.2

# 2. React when the pointer hits another program (which we'll call /target/)
When $this points "right" at /target/ & \
     /target/ has resolved geometry /geom/ {
    Wish to draw a circle onto $target with \
        center {0.05 0.05} radius 0.02 thickness 0 color "red" filled true
}

Wish $this is outlined blue