1 / 15
← →
Space
Swipe

Creative Coding with Generative AI

Zach Muhlbauer & Stefano Morello

CUNY AI Lab · New Media Lab · Teaching and Learning Center

Interactive Technology and Pedagogy Certificate Program

February 19, 2026 · 4:00 PM

Icebreaker

Describe an algorithm you already know

  • Write a routine in three steps or fewer
  • Rethink "rules executed by hand" as a kind of algorithm
    • If X then Y (conditional): "If it's raining, grab an umbrella; otherwise, wear sunglasses."
    • Repeat until done (loop): Wash the dishes step by step until the sink is empty.
    • First A then B (sequence): Preheat the oven, mix the batter, pour it into a pan, then bake.
Prompt
In three steps or less, describe something you do in your everyday life and frame it as a conditional, a loop, or a sequence.

Origins (1962-1965)

Bell Labs + first computer art

  • Historical roots of computer art during Bell Labs era
  • Mixed equations with pseudo-random variations
  • Generate order first; introduce disorder gradually
  • Moved from plotter demonstrations to public exhibitions

Vera Molnar

The "machine imaginaire"

  • Art as a set of rules plus "a hint of disorder"
  • Constrain a system; let chance disturb it
  • Treat constraints as principles for art-making
  • Drag the interruption zone to disrupt the grid

Creative Coding Today

Web browser as canvas

  • Frames the browser as a portable art canvas
  • Prefers portable, single-file artifacts
  • Keeps tools lightweight and portable
The web stack
  • HTML — foundation and walls; structure that holds everything up
  • CSS — paint, furniture, curtains; what makes it look like your place
  • JavaScript — light switches, doors, plumbing; parts that respond when you interact

Key Concept

The creative coding triangle

  • Rules / Randomness / Interpretation
    • Rules: constraints and logic you set (loops, grids, conditionals)
    • Randomness: surprises you invite in (random values, noise, chance)
    • Interpretation: curatorial choices you make (color, scale, what to keep, what to throw away)

Vibe Coding

Prompts as prototypes

  • "Vibe coding" attributed to Andrej Karpathy
  • Prototype with prompts, then test in browser
  • Generate fast; evaluate with your own eyes
  • "No-review" vs reviewed iteration
  • Adopt the mode that matches your goal

Behind the Scenes

How models learn to code

  • Trained on public code: GitHub, Stack OverflowSO, documentation
  • Learns patterns, not copy-paste
  • A prompt triggers pattern matching across training data
  • Output is probabilistic: same prompt can yield different results

(Vibe) Coding with Intention

Vibe → deliberate practice

  • Place AI-based coding on a continuum of control
  • One-shot → iterate → constrain
  • Decompose tasks to increase decision points (Xu et al., 2024)
  • Utilize constraints to foster more deliberate choices

Prompt Anatomy

Structure prompts for creative code

  • Assign a role (e.g. "creative coder")
  • Constrain the stack: Canvas + vanilla JavaScript
  • Set the style: monochrome, geometric, early-computer
  • Require motion + interaction: animation loop + input
  • Demand a runnable deliverable: single HTML only
Sample prompt:

Role: You are a creative coder.
Constraints: vanilla JS only; Canvas; full viewport; no external libraries.
Aesthetic: monochrome; geometric; early computer art.
Tech: requestAnimationFrame; mouse interaction.
Output: return single HTML only (no markdown/explanation).

Live Demo

CUNY AI Lab Sandbox (Open WebUI)

  1. Open: chat.ailab.gc.cuny.edu
  2. Create an account; await pending approval; then sign in
  3. Confirm you're in by posting a 👍 in the chat
  4. Choose a model: GLM 5 or Kimi K2.5 (MoE)

Optional model registry: ailab.gc.cuny.edu/models

CUNY AI Lab Sandbox interface showing the model picker (MoonshotAI: Kimi K2.5)

Activity 1 (10m)

Constrained Generation

  • Open the Configuration panel (right side)
  • Add a system prompt:
Role: You are a creative coding assistant.
Constraints: Follow constraints exactly as specified.
Output: Single HTML files with embedded CSS and JavaScript.
  • Try user prompts with specific limits:
  • "Create a rotating spiral using only triangles"
  • "Build a rain animation with exactly 4 colors"
  • "Make generative art that tiles like wallpaper"

Activity 2 (15m)

Iterate and Refine

  • Keep your previous result and refine it through conversation
  • Try follow-up prompts like:
  • "Add mouse interaction"
  • "Make the movement faster"
  • "Change the color palette to sunset tones"
  • Practice the back-and-forth refinement process
Example: "Keep the artifact, but add trails / change palette / add speed control UI."
Re-test each full HTML output.

Activity 3 (15m)

Parameter Exploration

  • Experiment with max tokens (response length) and temperature (randomness, 0.0-2.0)
  • Try the same prompt with different settings:
  • Temperature 0.1 (predictable) vs 1.8 (creative)
  • Max tokens 1024 (concise) vs 4096 (detailed)
  • How do these parameters change the AI's creative output?

Takeaways

Keep what's portable

  • Teach a progression: one-shot → iterate → constraints
  • Save prompts + parameters to reproduce results
  • Share artifacts as single-page HTML sketches
  • Treat curation as part of the creative act
Save the recipe
  • System prompt
  • Model + temperature + max tokens
  • The HTML file (with a date)

Resources

Links, citations, and prompts

Sources