C. Coming from p5.js and Processing

If you've sketched in p5.js or Processing, the model you know carries over whole. setup() runs once and draw() runs every frame. Shapes paint in the order you call them. The origin is the top-left corner, with y growing downward, and angles are radians. fill and stroke set the ink for everything drawn after them. Plenty of names survive unchanged too, from width and mouseX through translate, strokeWeight, noise, and map. Mostly the spelling changes.

This appendix is the dictionary for the rest, a page to look things up in. The tables map the calls you know onto their Ollin spellings. The sections after them cover what's different on purpose, and the habits to leave behind. Most entries point at the chapter that teaches them. The Swift language itself, with its types, let and var, and optionals, has its own pages. The Swift quick reference is a fast pass, and Appendix A is the gentle one.

Tables show p5.js names. Processing's are the same, except where a row says otherwise.

One sketch, twice

In p5.js:

function setup() {
  createCanvas(1080, 1080);
}

function draw() {
  background(255);
  fill("#2050C8");
  circle(width / 2, height / 2, 480 + sin(frameCount * 0.03) * 160);
}

The same sketch in Ollin:

import Ollin

final class Pulse: Sketch {
    override func draw() {
        background(.white)
        fill(Color(hex: 0x2050C8))
        drawCircle(width / 2, height / 2, 240 + sin(time * 1.8) * 80)
    }
}

Save it as Pulse.swift, run swift run OllinLive Pulse.swift, and it breathes like the original. Reading the two against each other shows most of what this appendix has to say:

• The sketch is a class. Global functions become methods you override on a Sketch subclass. Sketch state that lived in globals becomes properties on the class. Chapter 1 walks through every line of this.
• There is no createCanvas. The canvas is 1080 by 1080 unless you say otherwise. The size is a declaration rather than a call, spelled override var canvasSize: CanvasSize { .size(800, 600) }.
• drawCircle takes a radius. p5's circle() takes a diameter, which is why 480 became 240. A ported sketch that misses this draws every circle twice as big.
• Motion reads a clock. frameCount * 0.03 becomes time * 1.8. time is seconds since the sketch started, so the speed holds on any display. At 60 frames a second the two expressions match.
• Colors are values. fill("#2050C8") becomes fill(Color(hex: 0x2050C8)), a typed value you can store, mix, and pass around. Channels run 0...1, not 0 to 255.

The dictionary

The sketch and the loop

The loop is Chapter 1's subject, and the clock is Chapter 3's.

There's no windowWidth pair. The canvas has a fixed size you declare, and the window is a scaled preview of it. Canvas covers windowMode.

Shapes

Geometry calls take a draw prefix, and circular things take radii where p5 takes diameters.

The catalog runs well past p5's. It holds stars, rings, hearts, n-gons, and a few dozen more, all listed in Drawing.

Ink and color

Transforms and state

Randomness and noise

Two more have no p5 counterpart. signedNoise swings -1...1, so you drop the * 2 - 1. And noise(x, loop: t) comes back to its starting value, for seamless loops. Chapter 5 covers both.

Vectors

One difference changes how vector code reads. p5's vector methods change the vector in place, so a.add(b) alters a. Ollin's return new values and leave the inputs alone, so a + b reads like the math it does. Chapter 10 teaches vectors from the start.

Everyday math

Chapter 3 teaches map and lerp, Chapter 5 the noise, and Chapter 10 the vectors.

Text

Images, pixels, and data

Mouse and keyboard

Chapter 1 brings the mouse in, and Chapter 4 reads the keyboard.

The bigger machines

Each of these gets a chapter, so the table only points.

Many people who sketch in p5 learn forces and flocks from Daniel Shiffman's The Nature of Code. There you write the code for each system by hand. Four chapters here teach the same ground. Chapter 11 covers forces and a physics world, Chapter 12 steering and flocks, and Chapter 13 recursion and L-systems. Each starts by hand and moves on to Ollin's own types. Chapter 14 builds flow fields from the flowField helper.

Saving your work

Exporting is a run flag rather than a call in the sketch, so any sketch can render to a file without changing its code.

Different on purpose

let means a constant. JavaScript's let is Swift's var, and JavaScript's const is Swift's let. Swift sketches prefer let, because most values in draw() are computed fresh each frame. The Swift quick reference covers the rest of what changes.

Values have types. Positions are Vector2, colors are Color, and outlines are Shape. These are values you store and pass around, where p5 scatters loose numbers across calls. The compiler checks all of it before the sketch runs. A misspelled name or a wrong type stops at the save, not in the middle of a run.

Modes became labels and enums. There's no rectMode, ellipseMode, colorMode, or angleMode to set and later forget. The anchor is a label on the call, as in drawRect(center:width:height:). The color model is the initializer you pick, as in Color(hue:…). The constants are typed cases such as .pie, .round, and .add. A drawing can't be broken by a mode set three functions away.

Every sketch is already an instance. What p5 calls instance mode is the only mode. A sketch is a class, its state is properties, and nothing leaks between sketches. Inside the class you write particles, with no this. or self. in front.

The clock replaces the frame counter. time and deltaTime are seconds. Motion written against them holds its speed on a 60 Hz display and a 120 Hz one alike. frameCount is still there for counting frames, but it's the wrong unit for speed. Chapter 3 builds its motion on this.

The canvas wipes itself. In p5 the pixels persist, background() is the wipe, and leaving it out is the classic trails trick. Ollin clears every frame whether or not you call background, so a ported trails sketch loses its trails in silence. The opt-out is one call, noClear(), and Chapter 19 builds the long-exposure style on it.

Files, not browser tabs. The working loop is swift run OllinLive Pulse.swift, so you save the file and the running window swaps in the change. What you give up is the browser as the place you work. Sharing a sketch means exporting an artifact, such as a still, a video, a GIF, an SVG, or a page that plays in a browser. Chapter 41 covers each of them.

Habits to leave behind

• Balancing push() and pop() by hand. withState { } scopes the save and restore to a block, so the restore can't be forgotten or misplaced.
• Thinking in degrees. There's no angleMode. A full turn is .tau, and half a turn is .tau / 2. Fractions of a turn read better than either 90 or 1.5708.
• Animating with frameCount arithmetic. Reach for time. The bare numbers become units, such as turns per second or pixels per second, and they hold on any display.
• Mixing colors in RGB. Color.mix defaults to a perceptual space, so blue and yellow meet in an even neutral rather than a muddy olive. Chapter 2 shows the difference side by side.
• Hand-rolling grids from margins and nested loops. grid(columns: 12, rows: 8) hands you the cells and their centers in one loop, indices included. Chapter 6.
• Hardcoding a constant, re-running, hardcoding again. Declare it @Param and drag the parameter while the sketch runs. When the value feels right, make it the new default. Chapter 1.
• Writing pixel loops for effects. Blur, glow, and their relatives are GPU filters on layers, which Chapter 19 covers. Anything per-pixel you'd invent yourself becomes a short shade function, which Chapter 18 teaches.

Go deeper

• Chapter 1, Hello, Ollin: the toolchain, the live-reload loop, and the first sketch, from zero.
• The Swift quick reference: the language delta (types, optionals, closures) at speed; Appendix A is its narrative sibling.
• Drawing: the full shape catalog and ink state.
• Appendix D: everything Ollin ships, one line each, including what p5 has no function for.
• Examples/: working sketches to read and tweak, including Recreations, homages to works by artists such as Vera Molnár and Bridget Riley.

Contents · Previous: Appendix B, Just enough math, visually · Next: Appendix D, The complete toolbox