Fikia / field guide
~25 min read
The field guide · companion to the lecture

Make things with code.

A working theory of creative coding after AI, at reading pace. For whenever you're ready to actually start.

01 · The field

What creative coding is, and isn't.

Creative coding is the practice of writing programs as expressive media rather than as tools for solving problems. The artifact is the point. A generative artwork, an interactive sculpture, an audiovisual piece, a tiny mathematical animation. The code is a means, the experience is the work.

It is not a new field. People have been making art with code since the 1960s, when artists like Vera Molnár, Manfred Mohr, and the loose group later called the Algorists used early mainframes to make plotter drawings that look uncannily contemporary. There is a half-century of practice behind every blob you see in your feed.

What changed recently is access. The web became the universal canvas, browsers got hardware-accelerated graphics, and tools like Processing and p5.js were built to make the medium teachable to artists rather than only to programmers. The community accreted: OpenProcessing, Genuary, the long-form generative art platforms, a thriving culture of plotter art, live coding venues called algoraves. The medium is wide.

The code is a brush. The screen is canvas, instrument, and stage at once.

And then, between roughly 2022 and now, the most stubborn barrier to entry (having to be fluent in a programming language before you could make anything) collapsed. That collapse is the reason for this guide.

02 · How LLMs actually work

You don't need the math. You need the mental model.

Most people use these tools without knowing what they are. That's fine, until it isn't. Here is the working model that will save you hours of confusion.

The core mechanism

A large language model is a next-word predictor. You give it some text. It produces a probability distribution over what word (more precisely, what token) comes next. It picks one, appends it, and repeats. That's the loop. Everything else you see ChatGPT or Claude do is built on that single behavior, scaled up enormously.

What "trained" means

The model learned by reading huge amounts of text (books, code, websites, conversations) and having its internal weights adjusted billions of times until its predictions matched what came next in the training data. It isn't retrieving answers from a database. It is pattern-matching at a scale that is genuinely hard to intuit. When you ask it to write a p5.js sketch, it has read thousands of p5.js sketches; it is recombining and adapting patterns it has seen.

The two knobs that matter

Context is everything you give the model to work with: your prompt, the prior conversation, any files you attach. The model has a finite context window (think: short-term memory). Bigger context, generally better results, up to a limit. Vague in, vague out.

Temperature controls how randomly it samples from its predictions. Low temperature (near 0) makes it pick the most likely next token every time: safer, more deterministic, useful for debugging. High temperature lets it pick less likely tokens: more surprising, more variation, useful for ideation. Most chat interfaces hide this knob, but you can effectively control it by asking: "give me five surprising variations" pushes it toward higher temperature behavior.

Why it hallucinates

The model is optimized to produce plausible-sounding next tokens. It is not optimized to produce true ones. When it doesn't know something, it will confidently produce something plausible-sounding anyway. This is not a bug to be fixed; it is the mechanism working as designed. Your defense is verifying anything that matters and treating confident-sounding specifics with skepticism.

For the curious

The model is a transformer, a stack of layers in which each token "attends" to every other token in the context, learning which words relate to which. The attention mechanism is what lets it handle long-range dependencies. None of this is necessary to use the tools well, but it is quietly beautiful if you want to read further: search "Attention Is All You Need" and "the illustrated transformer."

03 · Three modes

AI shows up in your workflow as three different things.

Most creatives encounter mode one and stop there. Mode three is where this gets genuinely new.

Mode I: AI as the one writing the code

Natural-language-to-sketch. Debugging an error you don't understand. Translating a Processing sketch to p5.js. Asking what a stranger's shader does line by line. This is the accessibility story: the wall of syntax disappears.

It works well because code is text and the model has read enormous amounts of it. It works especially well for the small, self-contained sketches that creative coding favors: a few hundred lines, no dependencies, runnable in a browser. Less well for large codebases, novel libraries, or anything obscure.

Use it for

Starting a sketch from a verbal description. Translating between languages. Explaining errors. Quick prototypes you might throw away. Learning what a piece of code does by reading it aloud with the model.

Mode II: AI as muse and variation engine

You bring intent and taste. The model brings breadth and speed. Ask for ten directions an idea could go, pick one, refine. Ask for five palettes that evoke "autumn rust." Ask what would happen if your flow field's noise function were replaced with a sine grid. The model is a tireless brainstorming partner that has no ego about its suggestions.

This mode is dangerous because it is intoxicating. You can spend hours generating variations and lose the thread of what you were actually making. The skill is curation: knowing what to keep, what to discard, and when to stop asking and commit.

Use it for

Getting unstuck. Exploring axes of variation. Sanity-checking aesthetic decisions. Finding adjacent ideas you wouldn't have arrived at alone.

Mode III: AI as material inside the artwork

The piece itself calls the model at runtime. A generative poem that writes a new line every minute. A photo collage that re-captions itself. An installation where the AI interprets what a webcam sees and responds with text or sound. The model isn't building the work. It is the work, or at least a load-bearing part of it.

This is the most artistically interesting frontier and the one most creatives haven't tried. It is also where the existing art-historical lineage of AI-as-medium lives: Memo Akten, Anna Ridler, Refik Anadol, Sougwen Chung. If you want to make work that couldn't have existed before, this is the mode to spend time in.

Use it for

Work where the unpredictability of the model is the point. Interactive pieces. Long-running generative systems. Anything where you want the artwork to surprise even you.

04 · Prompting

Most "AI is bad at creative coding" is actually "my prompt was bad."

A small kit of habits. Examples first, principles second, because that's how the model learns and how you will, too.

Bad
make me art
Good
a p5.js sketch: 200 circles on a dark background, sized by perlin noise, in a warm autumn palette, slow drift. one file, no external assets.
Why
Name the medium (p5.js), the count, the variables, the palette, the motion, the constraints. The model can't read your mind. Specificity converts.
Bad
fix my code, it doesn't work
Good
this p5.js sketch should draw circles but draws nothing. here is the code: [paste]. here is the browser console error: [paste]. what's wrong?
Why
Paste the actual code and the actual error verbatim. Don't paraphrase. The model is excellent at reading errors and weak at reading minds.
Bad
make this more interesting
Good
give me five ways to make this flow field feel more unsettling: varying the palette, the motion behavior, the density, the layering, and the timing. one paragraph each.
Why
Ask for a specific number of variations and name the axes of variation. This is how you turn the model into a real brainstorming partner instead of a yes-machine.
Bad
explain this shader
Good
walk me through this GLSL fragment shader line by line as if I've never seen GLSL. for each line, say what it does, why it's there, and what would happen if I removed it. [paste]
Why
Tell the model your level. Tell it the format you want (line-by-line). Tell it what good would look like. This works for any unfamiliar code.
Bad
make it look better
Good
the composition feels flat. propose three changes (one to color, one to spacing, one to motion) that would add visual hierarchy without changing the underlying algorithm.
Why
Critique requires criteria. Give the model the language of design (hierarchy, contrast, rhythm, weight) and it will critique in those terms.
One habit that changes everything

When the model's first answer isn't right, don't just say "no, try again." Tell it what was wrong with the previous answer and what you want instead. "The colors are too saturated; I want muted earth tones" beats "wrong, try again" by a wide margin.

05 · Debugging with AI

The skill that turns AI from toy into tool.

Anyone can prompt a sketch into existence. Getting it to do what you want is where most people stall. Here is the meta-skill.

Paste errors verbatim

Always. The exact text of the error message (line numbers, stack traces, browser warnings) is the highest-signal thing you can give the model. Paraphrasing destroys the information. If the error spans multiple lines, paste all of them.

Ask for line-by-line explanation

When the model gives you code you don't fully understand, paste it back and ask for an annotated walkthrough. Do this even for code that works. Especially for code that works. It is the fastest path from "I have a sketch" to "I understand the sketch."

Ask for three approaches before picking one

Before letting the model write a complex piece of code, ask: "what are three different ways to approach this, with the trade-offs of each?" Then you pick. This single habit prevents the most common AI-coding failure mode: getting locked into the first plausible approach when a better one existed.

Don't accept the first suggestion silently

If you can read the code, read it. If you can't, ask the model to explain it. The black-box-acceptance pattern is what people mean when they say "vibe coding": it gets you to "okay" fast and stalls there.

Know when to stop asking the model and start reading

If you've gone three rounds and it's not getting better, the bottleneck is usually that you don't yet know what good looks like. Step away. Read someone else's code on OpenProcessing. Come back with a sharper target.

A useful framing

Treat the model as a smart junior collaborator who has read everything but has never met you. It will hand you something reasonable on the first try. Your job is to push back, redirect, and ask better questions until what it produces matches what only you can see in your head.

06 · Tools, compared

Which AI for which job.

The honest snapshot, knowing it will shift. Pick by what you're doing, not by what's hyped.

ClaudeAnthropic · chat + artifacts
Best for creative coding sketches. The Artifacts feature renders p5.js, HTML, and React inline: you see your sketch run as the model writes it. Strong at longer code, careful about ambiguity, willing to ask clarifying questions. Default pick for the workflow in this guide.
ChatGPTOpenAI · chat + canvas
Broadest capability. Strong at code, image generation, and voice. Canvas mode is similar to Artifacts. Slightly more eager to please, which can mean it agrees with bad ideas. A solid alternative; many use it interchangeably with Claude.
GeminiGoogle · chat + workspace
Useful if you live in Google Workspace. Long context. Less battle-tested for creative coding workflows specifically, but improving fast. The image-and-text-together interactions can be useful for sketches that involve images.
CursorIDE for AI coding
Best when you have an actual project. A code editor that wraps Claude or GPT. Great for ongoing work with multiple files. Overkill for one-off sketches; transformative for serious projects.
GitHub Copilotautocomplete in your editor
The inline-suggestion model. Suggests as you type. Useful when you already know how to code and want speed; less useful for learning, because it bypasses the thinking.
v0 / Bolt / LovableUI-first generators
For web interfaces, not generative art. Excellent at scaffolding React components and full apps. Not the right tool for an algorithmic flow field; the right tool for a portfolio site that displays your flow fields.
Practical advice

Pick one and get fluent. Switching cost is high: each tool has its own quirks, prompting style, and surface. The differences between Claude and ChatGPT for creative coding are real but small. The difference between fluency in either and dabbling in three is enormous.

07 · The honest part

What this is bad at, and why it matters.

A guide that only sells the upside is hype. Here is what to watch for, especially this year.

↯ PITFALL 01
The AI aesthetic is real

Pieces made by prompting alone tend to converge on a recognizable look: smooth gradients, glowing particles, drifting smoke, the same purple-to-pink palette. Defaults are an aesthetic, and right now the defaults are loud. The way out is taste: clearer intent, opinionated constraints, willingness to override the model's first instincts. Make work that you recognize before anyone else does.

↯ PITFALL 02
The black box you can't open

If you can't read the code, you can't fix it past the first version. You will hit a wall: a bug the model can't fix, a feature you want that doesn't fit the structure, a performance problem you can't diagnose. Some understanding of what the code is doing is non-optional past the prototype stage. Plan for that earlier than you think you need to.

↯ PITFALL 03
The provenance question

These models were trained on enormous amounts of work, including art and code from people who weren't consulted. The legal and ethical questions around this are genuinely unsettled. You don't need to have the answer (nobody does), but you do need to have thought about it, especially if you are a working artist whose income depends on commissions or licenses.

↯ PITFALL 04
Taste does not autocomplete

The model will happily generate a thousand variations. It will not tell you which one to keep. It will not tell you when to stop. It will not tell you that the piece is finished. The decisions that make work yours (the editing, the restraint, the commitment to a single direction) are exactly the things the model cannot do. The barrier to entry collapsed; the bar for taste did not move. If anything, it got higher.

08 · Week one

Seven days. Specific moves.

If you take nothing else from this guide, take this. The fastest way to internalize the medium is to put hands on something every day for a week.

First sketch
Open editor.p5js.org. Ask any AI to write you a p5.js sketch from one sentence you write yourself. Run it. Don't change anything. Just look at it.
Three changes
Open yesterday's sketch. Change three things by hand (colors, count, motion, anything) without asking the AI. The point isn't the result; it's the muscle of editing code.
Read
Read Tyler Hobbs' essay on flow fields. It is the rare technical writing that doubles as art criticism. Notice how much of it is about aesthetic decisions, not code.
Try Hydra
Open hydra.ojack.xyz in a browser tab. Try the examples. Type one line, change one number. This is a different shape of creative coding: live, immediate, audiovisual.
Read others
Browse OpenProcessing. Find five sketches you like. Fork one. Read its code. Ask the AI to explain anything you don't understand line by line.
From scratch
Start a new sketch from a theme that matters to you. Use the AI as collaborator, not author. You make the decisions. It writes the parts you don't yet know how to write.
Post
Share one piece, anywhere. The point is not that it's good. The point is that you crossed the threshold from consumer to maker.
09 · Glossary

The vocabulary, in plain language.

Twelve terms you'll meet repeatedly. Two sentences each.

Sketch noun
A small, self-contained creative-coding piece. The default unit of work in p5.js and Processing: usually a single file, runnable on its own.
p5.js library
A JavaScript library for creative coding in the browser. The friendliest entry point: beginner-oriented, big community, runs anywhere you have a browser.
Processing language
The original creative-coding environment that p5.js is based on. Java-based, desktop-installed. Still widely used; many artists move between the two.
Three.js library
The dominant JavaScript library for 3D in the browser. What Bruno Simon's site is built with. Steeper learning curve than p5.js; capable of much more.
Shader noun
A tiny program that runs on the graphics card, computing a color for every pixel in parallel. Where the fastest, most pixel-dense creative coding happens.
Generative art noun
Art produced by a system that runs autonomously according to rules the artist defines. The interesting work is in designing the rules, not in any single output.
Flow field technique
An invisible grid of vectors that particles follow as they move. Produces the characteristic "wind through grass" look common in generative art. Tyler Hobbs wrote the essay on these.
Perlin noise function
A smooth, organic kind of random number invented by Ken Perlin for the original Tron. The backbone of most generative-art motion and texture. If something looks "naturally random," Perlin noise is probably under it.
Prompt noun
The text you give a language model to act on. Includes instructions, examples, constraints, and anything else you want in its context. Better prompts produce better outputs; this is the single highest-leverage skill.
Token noun
The unit of text a model actually operates on. Usually a word or word-fragment. Models predict the next token, not the next word, though for most purposes the distinction doesn't matter.
Context window noun
How much text a model can hold in memory at once. Modern models handle the equivalent of a small book. Once you exceed the window, the earliest content drops out.
Temperature parameter
A dial controlling randomness in the model's outputs. Low = predictable and conservative. High = surprising and varied. Hidden behind most chat interfaces but effectively controllable through prompting.
Hallucination noun
When the model produces something plausible-sounding but false. Not a bug: a consequence of how the mechanism works. Verify anything that matters.
Algorave noun
A live event where artists generate music and visuals by writing and editing code on stage, projected to the audience. The performance culture around live coding.
10 · Resources, annotated

Where to go after this.

Every link below earned its place. The annotation is what it's best for and when to reach for it.

Tools

Reading

Community & practice

AI as medium

The syntax wall just fell. The bar for taste just got higher.

Be early.

End of the field guide · Now make something