Creative Coding — Level 1: Beginner

Abstract: This beginner creative coding course requires no prior programming experience. Working entirely in the browser with p5.js, students explore shapes, color, loops, randomness, and time to create their first generative compositions. The course builds directly on the three existing mini-courses (Data Art, Amazigh Patterns, Arabic Typography) as entry points and optional extensions. The capstone project is a documented generative sketch inspired by a cultural motif or dataset. Outline: p5.js setup → Shapes & color → Loops & repetition → Randomness & variation → Time & animation → Portfolio project.

Learning Objectives

By the end of this course, students will be able to:

1. Explain (Bloom: remembering/understanding) what creative coding is and what distinguishes it from classical application development.
2. Create (creating) a functional p5.js sketch in the browser with shapes, colors and intentional composition.
3. Apply (applying) for loops to generate repetitive compositions with variation.
4. Use (applying) random() and noise() to introduce controlled variations.
5. Animate (applying) a composition with frameCount, sin() and mouse/keyboard events.
6. Produce (creating) a documented capstone project shareable online.

Before Starting — The Existing Mini-Courses as Entry Points

Three free mini-courses are available and constitute ideal thematic introductions before or during this course:

• Data Art: Giving Form to the Invisible — transforming data into pattern with p5.js. To follow before or during Module 4 (randomness + variation).
• Generative Amazigh Patterns — grids, symmetries, repetition. To follow before or during Module 3 (loops).
• Arabic Typography in Motion — text as animated form. To follow before or during Module 5 (animation).

These mini-courses are complementary, not prerequisites. You can go through them in any order.

Module 1 — Discovering p5.js (2h)

Concept

p5.js is a JavaScript framework created in 2013 by Lauren Lee McCarthy. It allows drawing, animating and interacting in the browser — without installation, without server, just an HTML file or the online editor.

Documentation: https://p5js.org/reference/ Online editor (recommended to start): https://editor.p5js.org

Two functions, one world:

`javascript function setup() { createCanvas(600, 400); // creates a 600×400 pixel surface background(30); // very dark gray background (0=black, 255=white) }

function draw() { // runs ~60 times per second ellipse(300, 200, 80, 80); // circle at center } `

Coordinate system: origin (0,0) at top left. X to the right. Y downward.

Colors: by default RGB (0–255). fill(255, 0, 0) = red. stroke(0) = black outline. noStroke() = no outline.

Lab 1.1 — My First Sketch

Steps:

1. Open https://editor.p5js.org (free account recommended to save)
2. Replace the existing code with:

`javascript function setup() { createCanvas(600, 400); background(30); noLoop(); // don't animate for now }

function draw() { fill(255, 200, 50); noStroke(); ellipse(300, 200, 120, 120); } `

1. Click "Run" ▶
2. Modify: change color, size, position
3. Add a second circle of another color

Mini-exercise: Draw 3 shapes (ellipse, rect, triangle) of different colors. Each shape must "express" something about your personal palette.

Module 2 — Shapes, Color, Composition (2h)

Concept

The basic shapes in p5.js: javascript ellipse(x, y, w, h); // ellipse centered at (x,y) rect(x, y, w, h); // rectangle top-left corner (x,y) rect(x, y, w, h, r); // rectangle with rounded corners (radius r) line(x1, y1, x2, y2); // line segment triangle(x1,y1, x2,y2, x3,y3); arc(x, y, w, h, start, stop); // arc between two angles (radians) point(x, y); // point

HSB color mode (more intuitive for artists): javascript colorMode(HSB, 360, 100, 100, 100); // H = hue (0-360), S = saturation (0-100), B = brightness (0-100), A = alpha (0-100) fill(30, 85, 95); // saturated orange fill(200, 40, 80); // desaturated blue

Composition: divide the canvas into zones, use proportions, think negative space.

Lab 2.1 — Geometric Composition

Steps:

1. Create an 800×800 canvas
2. Define a palette of 4 colors in HSB
3. Compose a scene with at least 5 different shapes, 3 different sizes
4. Use noStroke() on some shapes and strokeWeight(3) on others
5. Export the image: saveCanvas('composition', 'png') called in setup()

Mini-exercise: Recreate in p5.js a pattern you drew by hand in Lab 1.1. Compare the two — what does code allow that drawing doesn't (and vice versa)?

Module 3 — Loops and Repetition (2h)

Concept

The for loop generates repeated shapes with controlled variation. It is one of the most powerful techniques in creative coding.

`javascript // 10×10 grid of circles let columns = 10; let rows = 10; let size = width / columns;

for (let col = 0; col < columns; col++) { for (let row = 0; row < rows; row++) { let x = col size + size / 2; let y = row size + size / 2; fill((col 36) % 360, 80, 90); // hue varies by column ellipse(x, y, size 0.8, size * 0.8); } } `

Variation in the loop: changing size, color, position as a function of col and row. This is the difference between a mechanical grid and a composition with structure.

Lab 3.1 — Grid with Variation

Steps:

1. Create an 8×8 grid of geometric shapes
2. Vary 2 properties according to position in the grid (e.g. size decreases toward the bottom, hue varies left to right)
3. Add rectMode(CENTER) to center rectangles
4. Experiment: what happens if you multiply indices by functions (sin, cos)?

javascript // Size modulated by sin let d = size * 0.3 + sin(col * 0.8 + row * 0.5) * size * 0.3; ellipse(x, y, d, d);

Mini-exercise: From your grid, find 3 different parameters to modulate to obtain 3 distinct visual atmospheres. Save all 3 versions.

Module 4 — Randomness and Controlled Variation (2h)

Concept

random(min, max) returns a random value between min and max. Each execution, values change.

randomSeed(n) fixes the seed — same seed = same result. Essential for the reproducibility of a work.

noise(t) returns continuous, smooth values (Perlin noise). Neighboring values are close — ideal for the natural.

javascript // Comparison: random vs noise for (let i = 0; i < 200; i++) { let x = random(width); // random jumps let x2 = noise(i * 0.05) * width; // smooth progression }

map(value, min1, max1, min2, max2): transform one interval to another. Fundamental for calibrating parameters.

javascript // Bar height proportional to a 0-1 value let h = map(noise(i * 0.1), 0, 1, 20, height * 0.8);

Lab 4.1 — Reproducible Random Composition

Steps:

1. Create 50 randomly placed ellipses (random)
2. Fix the seed (randomSeed(42)) — verify that the sketch is identical on each reload
3. Parameterize size and color also with random
4. Create a second mode with noise — compare the two aesthetics
5. Find the seed that produces the most interesting composition

Mini-exercise: Create 3 compositions identical in structure but different in seed. Which do you prefer and why? Document the seed number of your chosen composition.

Module 5 — Time, Animation and Interaction (2h)

Concept

In creative coding, time is a dimension of drawing.

frameCount: number of frames since start. Each frame = a call to draw().

sin(frameCount * speed): oscillation between -1 and 1 at a frequency controlled by speed.

javascript // Pulsing size let d = 100 + sin(frameCount * 0.05) * 40; ellipse(width/2, height/2, d, d);

Erasing vs. trace:

• background() in draw(): resets the screen each frame → clean animation
• background() with transparency or absent: shapes accumulate → traces

javascript // Trace: semi-transparent background background(0, 10); // RGB + alpha

Mouse events: javascript mouseX, mouseY // current position mouseIsPressed // button held function mousePressed() {... } // click function keyPressed() {... } // keyboard key

Lab 5.1 — Interactive Animation

Steps:

1. Animate 3 shapes with sin() oscillations of different frequencies
2. Make mouseX control a parameter (color, speed, size)
3. With mousePressed(): toggle between renewed background mode and trace mode
4. With keyPressed(): save a frame (saveCanvas()) on pressing 's'

Mini-exercise: Find 2 different behaviors depending on the speed of the mouse cursor. What happens if you accelerate movement vs. move the mouse slowly?

Module 6 — Final Composition and Export (2h)

Concept

From exploration to a presentable project: three steps.

1 — Choose a concept: what idea guides the composition? (A pattern, a dataset, a feeling, a homage)

2 — Frame the parameters:

• Final resolution: createCanvas(2400, 2400) + pixelDensity(1) for high resolution
• Defined and coherent color palette
• Fixed seed or documented variation

3 — Document:

• Concept description (3 sentences)
• Tools used
• Seed if applicable
• Process: what did you try before arriving at this result?

Export: `javascript // In setup() — static high-resolution version function setup() { pixelDensity(2); // 2× screen resolution createCanvas(1200, 1200); noLoop(); randomSeed(137); noiseSeed(137); }

function keyPressed() { if (key === 's') saveCanvas('my-sketch', 'png'); } `

Lab 6.1 — Finalization and Documentation

Steps:

1. Choose your favorite sketch from Labs 1–5
2. Improve the composition (colors, balance, readability)
3. Fix the seed (if random)
4. Write the short documentation (see §Project)
5. Export in high resolution + share on OpenProcessing (https://openprocessing.org)

Capstone Project — "First Generative Composition"

Brief

Create an original generative composition with p5.js, inspired by a cultural motif, a dataset or a visual phenomenon that is meaningful to you.

Constraints

• Technology: p5.js (web editor or local)
• The composition must use at least: 1 loop, 1 source of variation (random or noise), 1 form of animation or interaction
• Reproducible: fixed seed OR documented variation
• No imported images — everything generated by code

Deliverables

1. .js file or OpenProcessing link (functional sketch)
2. Short documentation (1 page): concept, palette, key parameters, seed, process
3. 3 PNG exports: the same composition with 3 different seeds (or 3 states)
4. Presentation (5 min): show the sketch, explain 3 creative decisions

Evaluation Rubric

Readings & Resources

• p5.js reference: https://p5js.org/reference/
• p5.js online editor: https://editor.p5js.org
• The Coding Train (p5.js video tutorials): https://www.youtube.com/c/TheCodingTrain
• OpenProcessing (share/explore sketches): https://openprocessing.org

→ Next level: Creative Coding — Level 2 → Custom workshop for your school or team: Book a 30-min call — free