POLYU SCHOOL OF DESIGN · SD2112 · WEEK 02 · LECTURE + WORKSHOP

Rules that make things.

Week 2 — machine A, p5.js, and a machine that writes rules.

SD2112 · WEEK 02

Today

01 Last week, in your words

02 Machine A: rules

03 Instructions as art

04 Rules make pictures

05 Rules that grow

06 p5.js: a sketchbook that runs

07 Specs, and prompts for coding

08 Exercise: one spec, one twist

01

Last week, in your words

THE CLOUD · THE WORRIES · THE CUPS

01 · LOGISTICS · MULTIPLE CHOICE

Before we start: what do you have with you?

A A laptop

B A tablet

C Only a phone

D Nothing today

ClassPoint · multiple choice — answer on the projector

01 · YOUR WORRIES · AND THE WEEK THAT ANSWERS THEM

You worried about five things.

CHEATING

Allowed, disclosed, yours.

The rule from week 1 stands: use any model, say which one, and answer for what it made. Week 11 is about authorship: who made Belamy?

LOSING SKILLS

Five small makes.

Weeks 2 to 6: one thing a week where your hand stays on the rule. Today is the first.

COPYRIGHT

Week 11.

Datasets, LoRAs, the Thaler cases, and what a court calls transformative.

JOBS

Weeks 8 and 12.

The designer's turn: what is left for you when the model makes the artefact. Curator, briefer, guardrail-setter.

BEING LIED TO

Weeks 4 and 9.

Hallucination and sycophancy in week 4. Bias, data and privacy in week 9.

01 · THE CUPS · THE WALL

Your prompts were rules. The model had the examples.

A hundred first cups: white, ceramic, a handle. Nobody typed "handle". Your prompt was a rule, and the model pulled every cup back to its average. Today we look at the rules side on its own.

Machine A: write the rule. Machine B: show the examples. This week is the left half; next week the right.

01 · THE WALL · 87 FIRST CUPS, THEN THE 60 THAT SHIPPED

Every cup the room uploaded last week. The top rows are the average: white, ceramic, a handle, a wooden table, and nobody asked for any of it. The bottom rows are what a prompt with a rule in it does.

01 · THE SEMESTER

Where we are

1 · What is AI?

WEEK 1

Two ways to teach a machine

WEEK 2

Rules that make things: code, chance, generative art

WEEK 3

Learning from examples: concepts, neurons, Move 37

2 · AI for the creative process

WEEK 4

Language machines: LLMs, prompts, agents

WEEK 5

Image machines: diffusion, CLIP, mediation

WEEK 6

Sound machines: music, voice, spectrograms

Mid-term

WEEK 7

Mid-term quiz · project pitches · teams · reflection due

3 · AI inside products

WEEK 8

AI as design material: use vs incorporate

WEEK 9

Data, bias and privacy

WEEK 10

Recommendation systems and the feed

4 · The designer's turn

WEEK 11

Curating outputs and datasets · authorship

WEEK 12

Language as an interface: chatbots and agents

Showcase

WEEK 13

Poster fair · final quiz

02

Machine A

SYMBOLIC AI · 1956 – TODAY · IF THIS, THEN THAT

02 · A RULE

If this, then that. Nothing else.

A rule is a condition and a consequence. A computer is a machine that follows rules exactly, forever, without judgement (Turing, 1936). Newell and Simon, 1976: intelligence is symbols plus search, which means rules applied to rules.

Symbolic AI: knowledge written down as rules, applied by a program. Exact, explainable, and it has never heard of the Tulip chair.

02 · IMMANUEL KANT · 1781 · ANALYTIC, SYNTHETIC

Two kinds of true.

Kant, 1781: an analytic judgement is true by the meaning of its words. "A brother is a male sibling." Nothing new is learned.

A synthetic one adds what the words did not contain. "Kevin and Bob are brothers." You have to go and look.

Machine A is analytic through and through: it unpacks what its rules already contain, faster than we can, and nothing else.

Analytic or synthetic? All bachelors are unmarried. All bachelors are wealthy. All mammals are animals. If it is cloudy it might rain. 2 + 2 = 4.

Immanuel Kant, by Johann Gottlieb Becker, 1768. Public domain, Wikimedia Commons.

02 · ALAN TURING · 1950 · THE IMITATION GAME

Can machines think? Ask a better question.

"I propose to consider the question, Can machines think?" Turing, 1950. Thinking is too vague to test, so he swaps the question for a game.

• An interrogator types questions to two hidden players, a person and a machine. If the interrogator cannot tell which is which, the machine has done well.
• The test looks at behaviour, never at the insides. It is our week-1 definition of intelligence turned into an experiment.
• ELIZA, sixteen years later, is the first program people mistook for a person. Two slides on, its insides.

A. M. Turing, "Computing Machinery and Intelligence", Mind 59 (236), October 1950. doi:10.1093/mind/LIX.236.433

02 · SIXTY YEARS OF MACHINE A

Rules were the first AI.

1956 · DARTMOUTH

AI gets its name.

McCarthy, Minsky, Shannon and Rochester spend a summer on "making machines use language, form abstractions and concepts". Newell and Simon bring the Logic Theorist: a program that proves theorems.

1966 · ELIZA

Two hundred rules pass for a therapist.

Weizenbaum's script finds a keyword and turns the sentence around. "I am sad" becomes "How long have you been sad?" His secretary asked him to leave the room so she could talk to it in private.

1972 – 1986 · EXPERT SYSTEMS

Rules run a business. Then the winter.

MYCIN: about 600 rules diagnose blood infections as well as Stanford's specialists. XCON: 10,000 rules configure every computer DEC sells. Then it ends: someone has to write, and maintain, every single rule.

02 · ELIZA · 1966 · ELIZABOT.JS BY N. LANDSTEINER, 2005

A rule that feels like a person.

// ELIZA, 1966: Weizenbaum's DOCTOR script, running as he wrote it.
// A rule: a keyword, its rank, then for each shape of sentence the
// answers. * matches anything; (2) says what the second * matched.
const rules = [
  ["remember", 5, [
    ["* i remember *", ["Do you often think of (2) ?",
                        "Why do you remember (2) just now ?"]],
    ["* do you remember *", ["Did you think I would forget (2) ?",
                             "What about (2) ?"]]]],
  ["computer", 50, [
    ["*", ["Do computers worry you ?",
           "Why do you mention computers ?"]]]],
  ["xnone", 0, [                      // when nothing else matches
    ["*", ["I'm not sure I understand you fully.",
           "Please go on."]]]],
];
function setup() {
  noCanvas();
  elizaKeywords.unshift(...rules);   // yours go first
  chat(new ElizaBot());             // the screen on the right
}

Weizenbaum's script, whole: the strongest keyword wins, the sentence is taken apart and put back in an answer. Talk to it, add a rule, press Run · edit it live.

Open the live sketch › — type, then enter

02 · THE DEAL

Exact. Explainable. Brittle.

EXACT

Same input, same output.

A rule does the same thing every time. Even chance can be made repeatable: give the die a seed and the same picture comes back, on any machine, forever.

EXPLAINABLE

You can point at the line that decided.

Every output has a reason you can read. When a rule-based product does something strange, you can find out why. Machine B cannot say why. Next week.

BRITTLE

Nothing outside the rule can happen.

The definition does not know beanbags exist. Every new case needs a new rule, written by hand. That bottleneck ended the expert-systems boom.

02 · YOU ALREADY WRITE RULES

Every designer already writes machine A.

THE GRID

Snap to 8 px.

Columns, gutters, a spacing scale: a rule you set once, and every screen obeys it.

THE BREAKPOINT

Narrower than 600 px? One column.

An if-then you have written, in words, for a developer to execute.

THE SYSTEM

One button, every state.

Tokens, variants, auto layout: a rule-based machine that makes every button in the product.

THE SPEC

Redlines, briefs, handoffs.

A rule written in words for a human to execute. Today you write one for a machine, and then for a machine that writes machines.

02 · QUESTION · SHORT ANSWER · YOUR ANSWERS

Write a rule for drawing a house.

One sentence. A stranger who has never seen a house must be able to follow it.

ClassPoint · short answer — see what the room answered

03

Instructions as art

1959 – 1971 · SCORES, EVENTS, WALL DRAWINGS

03 · LA MONTE YOUNG · COMPOSITION 1960 #10 · TO BOB MORRIS

Draw a straight line and follow it.

03 · THE EVENT SCORE

The score is the work. Anyone can execute it.

GEORGE BRECHT · 1959

Drip Music

"A source of dripping water and an empty vessel are arranged so that the water falls into the vessel." Performed with a ladder and a jug, with a tap, with a pipette. The rule survives every execution.

YOKO ONO · 1964

Grapefruit

A book of instructions. "Painting to be stepped on: leave a piece of canvas or finished painting on the floor or in the street." Some cannot be executed at all. They are still pieces.

JOHN CAGE · 1951 – 1960

Chance inside rules

Music of Changes: every note decided by coin tosses on the I Ching. Water Walk: a score of timed actions with a bathtub, performed on live television. The rule decides where chance is allowed in.

03 · TINGUELY · MOMA GARDEN · 17 MARCH 1960

A machine whose rule was to destroy itself.

Homage to New York: bicycle wheels, motors, a piano, a weather balloon, built in the museum garden. Switched on, it was meant to end itself in about half an hour.

• It failed properly: the fire brigade put it out. The rule ran; the execution surprised its author.
• On the playlist with Cage, Kaprow and the Illiac Suite: watch the four before week 3.

Watch on YouTube ›

03 · KAPROW · 1967 · PASADENA 2008 · BERLIN 2015

Instructions executed by strangers, decades later.

Fluids, 1967. The whole score: "During three days, about twenty rectangular enclosures of ice blocks (measuring about 30 feet long, 10 wide and 8 high) are built throughout the city. Their walls are unbroken. They are left to melt."

• Kaprow called every re-execution a reinvention. Each one is the piece.
• The spec is the artwork. The execution is delegated, and it is still the work.

Watch on YouTube ›

"The idea becomes a machine that makes the art."

Sol LeWitt, Paragraphs on Conceptual Art, Artforum, June 1967

03 · SOL LEWITT · SPLAT · 2001 · CAIXAFORUM BARCELONA

A wall drawing: LeWitt wrote the instruction and signed a certificate; assistants drew it on this wall, and can draw it again on any other. Photo: Ardfern, 2014, CC BY-SA 3.0, Wikimedia Commons.

03 · SOL LEWITT · WALL DRAWINGS · CENTRE POMPIDOU-METZ · 2012

Lines on a black wall, drawn by hand from a written rule five years after his death: the drawing needs the rule, not the artist. Photo: Jean-Pierre Dalbéra, CC BY 2.0, Wikimedia Commons.

03 · SOL LEWITT · WALL DRAWING 118 · 1971 · THE WHOLE WORK

On a wall surface, any continuous stretch of wall, using a hard pencil, place fifty points at random. The points should be evenly distributed over the area of the wall. All of the points should be connected by straight lines.

03 · WALL DRAWING 118 · EXECUTED BY A PYTHON SCRIPT, TODAY

Fifty points. 1,225 lines. Any wall.

Every execution is the work. The drafters decide what the words left open: the pencil, the wall, what "random" means. A museum buys the instructions and a certificate; the drawing is made again, by other hands, each time it is shown.

The same forty-five words, executed by a program instead of five art students. LeWitt: "Each person draws a line differently and each person understands words differently."

03 · VERA MOLNÁR · 1959 – 1976

She executed her algorithms by hand for nine years.

Machine imaginaire: from 1959 Molnár wrote procedures, a grid, a rule, a small dose of chance, and executed them herself, on paper, step by step, before she had access to a computer.

• 1968: her first plotter. The rule did not change. The executor did.
• (Dés)ordres, 1974: nested squares in a grid, and a small chance that any corner is nudged. Find the disorder.

A spec written for a machine that does not exist yet is still a spec.

After Molnár: nested squares, every corner nudged with a small probability. Our execution, her rule.

04

Rules make pictures

STUTTGART 1965 · BENSE · NEES · NAKE · THE PLOTTER

04 · MAX BENSE · INFORMATION AESTHETICS

Beauty, measured. Art, generated.

Birkhoff, 1933: aesthetic measure = order ÷ complexity. Bense, Stuttgart, 1950s: if beauty is information, it can be programmed.

• February 1965: Georg Nees shows plotter drawings in Bense's seminar gallery. Bense calls it artificial art. The first computer art exhibition, anywhere.
• A painter asks Nees whether the machine could draw the way he does. Nees: "Yes, if you tell me how you draw."

November 1965: Nake and Nees, Galerie Niedlich. This one hangs in the V&A.

Frieder Nake, Hommage à Paul Klee 13/9/65 Nr.2, 1965. Zuse Graphomat Z64 plotter, programmed in ALGOL.

04 · GEORG NEES · SCHOTTER · C. 1968

One rule. One random number.

Twelve columns, twenty-two rows of squares. Each square is moved and turned by a random amount, and the amount grows with the row.

• Row 0: a perfect grid. Row 21: gravel. Schotter means gravel.
• The rule decides everything except two numbers per square. Chance is kept on a leash; the picture is order turning into disorder.

The sliders are the rule's two numbers: how much disorder, how many rows.

After Nees: our execution of his rule. Siemens 4004, ALGOL, Zuse Graphomat; the original print is 28 × 22 cm.

Open the live sketch › — click = new dice

04 · 1982 · 10 PRINT CHR$(205.5+RND(1)); : GOTO 10

One coin toss. Two states. No memory.

const s = 40;                    // the cell: 40 px
let heads;                       // the coin: a slider
function setup() {
  createCanvas(800, 480); noLoop();
  heads = createSlider(0, 1, 0.5, 0.05, 'heads');
}
function draw() {
  background(255); stroke(0); strokeWeight(3);
  for (let y = 0; y < height; y += s)   // row by row
    for (let x = 0; x < width; x += s) { // cell by cell
      if (random() < heads.value())   // the coin toss
        line(x, y, x + s, y + s);     // heads: ╲
      else
        line(x + s, y, x, y + s);     // tails: ╱
    }
}

One line of Commodore 64 BASIC, 1982: one of two diagonals, chosen by a coin toss, forever. Every cell is a fresh toss; none knows about the others · edit it live.

Open the live sketch › — click = new dice

04 · FRIEDER NAKE · WALK-THROUGH-RASTER · SERIES 2, 1–4 · 1966

Look first. What repeats? What never happens? Four prints from one program: ALGOL 60 on a Zuse Graphomat Z64. Victoria and Albert Museum, E.955-2008.

04 · WALK-THROUGH-RASTER · THE RULE IN FOUR STEPS

Four states. The cell above decides.

A grid, drawn column by column, top to bottom. Every cell is one of four things: empty, a bar, a cap, or both (10 PRINT had two). Two rules decide: a bar is more likely near the diagonal, and a cap can only be drawn under an empty cell, so a cell remembers one thing about the one above it. The empty space flows up and to the right, and every field of caps has gaps.

Nake, Walk-Through-Raster, series 2.1–4, 1966. Our reading of his rule: two yes/no decisions per cell, and one fact carried from the cell above.

04 · WALK-THROUGH-RASTER · WATCH THE WALK

The raster fills up, column by column.

Left: the raster filling up, top to bottom, then the next column. Empty cells are tinted: watch the empty space flow up and to the right. Right: the four states and how many of each so far. Drag the cap chance: at 0 only bars; at 1, a cap under every empty cell.

Open the live sketch › — click = new dice

04 · WALK-THROUGH-RASTER · THE RULE, IN TWENTY LINES

Two loops, two decisions, one fact carried down.

const n = 30;                        // the raster: 30 x 30
let capChance;                       // a slider
function setup() {
  createCanvas(600, 600); noLoop();
  capChance = createSlider(0, 1, 0.8, 0.05, 'cap chance');
}
function draw() {
  background(255); stroke(0); strokeWeight(1.6);
  let g = width / (n + 2);
  for (let w = 0; w < n; w++) {      // column by column
    let above = false;               // was the cell above empty?
    for (let h = 0; h < n; h++) {    // top to bottom
      let x = (w + 1) * g, y = (h + 1) * g;
      let bar = random(n - 1) >= abs(w - h);  // the diagonal
      let cap = h > 0 && above && random() < capChance.value();
      if (bar) line(x, y, x, y + g);            // a bar: |
      if (cap) line(x, y, x + g, y);            // a cap: ¯
      above = !bar && !cap;          // what the cell below sees
    }
  }
}

Our execution, after Nake. "above" carries one fact from cell to cell: was the cell above empty? That line is the whole texture · edit it live.

Open the live sketch › — click = new dice

04 · HILLER & ISAACSON · UNIVERSITY OF ILLINOIS · 1957

A computer writes a string quartet.

The Illiac Suite: the ILLIAC makes random notes and keeps the ones that pass the rules of counterpoint. Generate and test: the oldest move in symbolic AI.

• The fourth movement chooses each note from the one before it: a chain. Nake's cells, nine years later, each decided by the one above.
• On the playlist. Sixteen minutes, four experiments, one machine.

Watch on YouTube ›

05

Rules that grow

FRACTALS · L-SYSTEMS · PARAMETERS

05 · HELGE VON KOCH · 1904 · A FRACTAL

Replace every line with four. Then do it again.

One rule, applied to its own output: cut a line in three, turn the middle third into a peak, and do the same to each of the four new lines. Four times: 256 lines. Forever: a curve of infinite length that fits in your hand, the same at every scale. Its dimension is log 4 ÷ log 3 = 1.26: more than a line, less than a surface.

Mandelbrot, The Fractal Geometry of Nature, 1982: coastlines, clouds and ferns are rules like this one. Nobody could draw the twentieth generation before computers.

05 · KOCH · IN P5.JS

A rule that calls itself.

let times;                          // how many times
function setup() {
  createCanvas(900, 300); noLoop();
  times = createSlider(0, 6, 4, 1, 'times');
}
function koch(x1, y1, x2, y2, n) {      // the rule
  if (n == 0) { line(x1, y1, x2, y2); return; }
  let dx = (x2 - x1) / 3, dy = (y2 - y1) / 3;
  let ax = x1 + dx, ay = y1 + dy;       // one third
  let bx = x1 + 2 * dx, by = y1 + 2 * dy;  // two thirds
  let px = ax + dx / 2 + dy * .866;     // the peak: the
  let py = ay + dy / 2 - dx * .866;     // middle, turned 60°
  koch(x1, y1, ax, ay, n - 1);          // again, on each
  koch(ax, ay, px, py, n - 1);          // of the four
  koch(px, py, bx, by, n - 1);
  koch(bx, by, x2, y2, n - 1);
}
function draw() {
  background(255); stroke(0);
  koch(40, 240, 860, 240, times.value());  // n times
}

koch() draws a line, or replaces it with four shorter koch()s. The slider is how many times; it plays by itself until you touch it. Try turning 60° into 90° · edit it live.

Open the live sketch › — plays on its own

05 · BENOÎT MANDELBROT · 1980 · THE SAME RULE AT EVERY SCALE

A zoom into the Mandelbrot set. One rule per point, z → z² + c, and a colour for how long it holds. Nobody had seen this before a computer drew it. Animation: Wikimedia Commons, public domain.

05 · MANDELBROT · IN P5.JS

One rule per pixel. Count how long it holds.

let steps;                          // how long we wait: a slider
let cx = -0.6, cy = 0, w = 3;       // the window: centre, width
function setup() {
  createCanvas(600, 400); pixelDensity(1); noLoop();
  steps = createSlider(10, 400, 60, 10, 'steps');
}
function draw() {
  let n = steps.value(); loadPixels();
  for (let px = 0; px < width; px++)
    for (let py = 0; py < height; py++) {
      let a = cx + (px - width / 2) * w / width;   // the point c
      let b = cy + (py - height / 2) * w / width;
      let x = 0, y = 0, k = 0;                     // z starts at 0
      while (x * x + y * y < 4 && k < n) {         // z = z² + c
        let t = x * x - y * y + a; y = 2 * x * y + b; x = t; k++;
      }
      let v = k == n ? 0 : 255 * sqrt(k / n);   // how soon it left
      let i = 4 * (px + py * width);
      pixels[i] = v * .3; pixels[i+1] = v * .6; pixels[i+2] = v;
      pixels[i+3] = 255;
    }
  updatePixels();
}

For every pixel, c is the point and z starts at 0: z = z² + c, again and again. Black: it never leaves. Blue: how soon it left. Click to zoom in, twice as close each time · edit it live.

Open the live sketch › — click = zoom in

05 · LINDENMAYER · 1968

The same trick grows a plant.

Rewrite every F with the rule, then rewrite the result, and again: four generations from one line. Lindenmayer, a biologist, wrote it for algae. The brackets are branches.

F → F[+F]F[-F]F, turn 25.7°. Lindenmayer 1968; Prusinkiewicz & Lindenmayer, The Algorithmic Beauty of Plants, 1990.

05 · PARAMETRIC DESIGN

Machine A, with sliders.

A rule with numbers left open is a design space. Change a number, get a design; every one obeys the rule.

• Grasshopper, 2007: architecture as a graph of rules. A tower is a rule and a hundred numbers.
• The MIT Media Lab identity, 2011: one algorithm, forty thousand logos, one per person.
• Nervous System, Kinematics dress, 2014: a rule folds itself around a body.

The twelve chairs from week 1 are the same idea: chair(seat, back, angle, legs).

Week 1: one function, twelve chairs. Parametric design is a rule you can ship.

05 · VARIABLE FONTS · 2016

One font, one number.

A letter is a rule with a parameter. Type designers have written machine A for a century: hinting, kerning, optical sizes. A variable font puts the number in your hands. This is Inter, the typeface of these slides, along its weight axis.

Inter Variable, wght 100 to 900. OpenType 1.8, 2016: Adobe, Apple, Google and Microsoft, together for once.

05 · WHERE WE ARE

A rule is a design. The execution can be delegated.

AFTER THE BREAK · P5.JS · THEN A MACHINE THAT WRITES RULES

Break. Ten minutes.

06

p5.js

A SKETCHBOOK THAT RUNS · INSIDE THESE SLIDES

06 · PROCESSING → P5.JS

Code as a sketchbook.

1999: John Maeda's Design By Numbers at the MIT Media Lab: a language small enough for designers.

• 2001: Casey Reas and Ben Fry, Maeda's students, make Processing, "a software sketchbook".
• 2013: Lauren McCarthy starts p5.js: Processing for the browser. Nothing to install: today it runs inside these slides.
• Why it is here: the whole rule fits on one screen, and the picture is instant.

Ten points at random, all connected: twenty lines of p5.js. Next slide.

06 · ANATOMY

setup() runs once. draw() runs the rule.

let pts = [];                        // the points
function setup() {
  createCanvas(600, 600);
  noLoop();                          // draw once
  roll();
}
function roll() {                    // the rule: ten points
  pts = [];
  for (let i = 0; i < 10; i++) {
    pts.push([random(600), random(600)]);    // chance
  }
}
function draw() {
  background(255); stroke(0);
  for (let a of pts) {               // every pair
    for (let b of pts) {
      line(a[0], a[1], b[0], b[1]);
    }
  }
  fill(0); for (let p of pts) circle(p[0], p[1], 6);
}

(0,0) is the top-left corner; y grows downwards; random(600) is a number between 0 and 600. Change 10 to 30, press Run. Then one 600 to 200, and see what breaks · edit it live.

Open the live sketch › — click = new dice

06 · RANDOM() · RANDOMSEED()

Same rule, three seeds.

random(600) is a number between 0 and 600, different every run. randomSeed(1) loads the die: the same picture every run, on every machine. Where you call random() is where the rule lets go; everything else is the rule.

Three runs of the ten-point sketch with randomSeed(1), (2) and (3). Change the seed, keep the rule: a new picture that is still yours.

06 · SCHOTTER · IN P5.JS

A grid is two loops. Disorder is one number.

const cols = 12, rows = 22, s = 30;  // Nees's numbers
let disorder, seed = 1968;           // the one number: a slider
function setup() {
  createCanvas(400, 700); noLoop();
  disorder = createSlider(0, 2, 1, 0.05, 'disorder');
}
function draw() {
  background(255); noFill(); stroke(0);
  randomSeed(seed);                  // the same dice every time
  for (let r = 0; r < rows; r++) {   // rows
    let k = r / (rows - 1) * disorder.value();
    let d = k * s / 2, a = k * PI / 4;  // shift, turn
    for (let c = 0; c < cols; c++) { // columns
      push();
      translate(20 + s * (c + .5), 20 + s * (r + .5));
      translate(random(-d, d), random(-d, d)); // chance
      rotate(random(-a, a));                   // chance
      square(-s / 2, -s / 2, s);
      pop();
    }
  }
}

Twenty lines. The outer loop walks the rows, the inner loop the columns; k grows from 0 to 1 down the picture and scales the shift and the turn. The slider is the number · edit it live.

Open the live sketch › — click = new dice

06 · CHANGE ONE NUMBER

The same rule. Which one is yours?

This is the whole craft of the weekly challenge: write one rule, then find the one number that makes it yours.

Left: Nees's numbers. Middle: the disorder tripled. Right: eight rows instead of twenty-two. Nothing else changed.

07

Prompts for coding

MACHINE B WRITES MACHINE A · SPEC → CODE → PICTURE

07 · THE SPEC IS THE DESIGN

One spec. Three executors.

LeWitt's drafters; you, in the editor; a language model on genai.polyu.edu.hk. Same words, delegated execution, and never quite what you meant. Machine B writes machine A, and machine A does exactly what it is told.

A language model is not a rule: the same prompt gives different code every time. The code it writes is a rule: the same seed gives the same picture every time.

07 · ANATOMY OF A SPEC

Five things a rule must say.

WHAT

The rule, in one sentence.

Like LeWitt: an object, a count, an action. "A grid of squares, each moved and turned by a random amount that grows with its row."

CHANCE

Where the die is thrown.

Say exactly what is random and how much. "Up to half a cell and 45 degrees in the last row, nothing in the first."

NUMBERS

Canvas, counts, sizes, colours.

Give them, or say "choose". A model that has to guess guesses the average: 400 × 400, pastel, particles.

CONSTRAINTS

The rules about the rule.

Plain p5.js. No libraries. Draw once. A seed, so it repeats. Nothing you did not ask for.

OUTPUT

What to hand back.

The whole sketch, nothing else. Then: "describe the rule this code follows in one sentence", a check that it understood.

07 · THE TEMPLATE

A prompt that is a spec.

Copy it, fill the brackets, paste it into a language model on genai.polyu.edu.hk. Paste what comes back into the editor on the sketch slide (59) and press Run.

• Rule first, constraints last: models obey the end of a prompt more than the middle.
• One rule per prompt. Two ideas are two sketches.

Keep the spec. When the code drifts, paste the spec again, not the code.

Write a p5.js sketch.
 
RULE: [one sentence: what is drawn, how many, how they relate to each other]
 
CHANCE: [what is random, and how much: a range]
 
NUMBERS: canvas 600 x 600, white background, black stroke 1 px. [sizes, counts, colours]
 
CONSTRAINTS: plain p5.js, no libraries. Draw once (noLoop). randomSeed(1). Nothing I did not ask for.
 
OUTPUT: the whole sketch.js and nothing else. Then, in one sentence, the rule the code follows.

07 · WHAT GOOD LOOKS LIKE

Fifty points, all connected, from forty-five words.

const n = 50;                          // fifty points
let pts = [];
function setup() {
  createCanvas(800, 500);              // a wall
  stroke(0); noLoop();
  randomSeed(118);
  roll();
}
function roll() {                      // evenly distributed:
  pts = [];                            // one point per cell of
  let cols = 10, rows = 5;             // a 10 x 5 grid, at
  let w = width / cols, h = height / rows;   // random inside it
  for (let i = 0; i < n; i++) {
    let c = i % cols, r = floor(i / cols);
    pts.push([c * w + random(w), r * h + random(h)]);
  }
}
function draw() {
  background(255);
  for (let a of pts)                   // all connected
    for (let b of pts)
      line(a[0], a[1], b[0], b[1]);
}