Creative Coding for Beginners

Published February 1, 2024 | 11 min read

You don't need a mathematics degree to create beautiful, interactive art with code. p5.js and Processing make creative coding accessible to everyone. In this guide, we'll explore how to start creating visual art, animations, and interactive experiences—no heavy math required.

What is Creative Coding?

Creative coding is using code as a medium for artistic expression. Instead of drawing with a brush, you describe shapes, colors, and movement with code. The computer executes your instructions to create visual art. It's painting with algorithms.

Creative coding is accessible, rewarding, and surprisingly simple. Many artists with no programming background learn it and create stunning work within weeks.

Why p5.js?

p5.js is a JavaScript library designed for artists and designers. It's built on the foundation of Processing, an older (but still relevant) Java-based creative coding platform. p5.js brings creative coding to the web, making it accessible everywhere.

Key advantages:

Simple, beginner-friendly syntax
Works in any modern browser
Excellent documentation and examples
Active community support
Great for learning and prototyping

Getting Started

Set up p5.js in an HTML file:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    body { margin: 0; padding: 0; background: #0a0a0f; }
  </style>
</head>
<body>
  <script>
    function setup() {
      createCanvas(800, 600);
    }

    function draw() {
      background(10);
      fill(0, 240, 255);
      circle(mouseX, mouseY, 50);
    }
  </script>
</body>
</html>

That's it. A circle follows your mouse. You just created interactive art in 10 lines of code.

Understanding the p5.js Flow

Two core functions structure p5.js sketches:

setup(): Runs once when the sketch starts. Use it to initialize your canvas size and set up variables.

draw(): Runs repeatedly (60 times per second by default). This is where your animation happens.

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

function draw() {
  // This code runs 60 times per second
  background(220);
  fill(255, 0, 0);
  circle(200, 200, 100);
}

Basic Shapes

p5.js provides simple functions for common shapes:

// Set fill and stroke colors
fill(0, 240, 255);      // cyan fill
stroke(255, 0, 110);    // magenta outline
strokeWeight(3);        // line thickness

// Shapes
circle(x, y, diameter);
rect(x, y, width, height);
triangle(x1, y1, x2, y2, x3, y3);
ellipse(x, y, width, height);
line(x1, y1, x2, y2);

// No fill
noFill();
stroke(100);
circle(200, 200, 50);

// No stroke
noStroke();
fill(255);
rect(100, 100, 100, 100);

Variables and Animation

Animate objects by changing their position over time:

let x = 0;
let speed = 3;

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

function draw() {
  background(10);

  // Update position
  x += speed;

  // Wrap around screen
  if (x > width) {
    x = 0;
  }

  // Draw circle at new position
  fill(0, 240, 255);
  circle(x, 200, 50);
}

Now we have a moving circle. Simple! Extend this pattern to multiple objects, add physics, randomness, or interactions.

User Interaction

p5.js provides variables and functions for detecting user input:

function draw() {
  background(10);

  // Mouse position
  fill(0, 240, 255);
  circle(mouseX, mouseY, 50);

  // Check if mouse is pressed
  if (mouseIsPressed) {
    fill(255, 0, 110);
  }

  // Draw rectangle based on mouse
  rect(mouseX - 25, mouseY - 25, 50, 50);
}

// Triggered when mouse is clicked
function mousePressed() {
  console.log('Click at:', mouseX, mouseY);
}

// Triggered when a key is pressed
function keyPressed() {
  if (key === 'r') {
    background(255, 0, 0);
  }
}

Creating a Generative Pattern

Combine randomness and loops to create interesting patterns:

function setup() {
  createCanvas(400, 400);
  background(10);
}

function draw() {
  // Create a grid of random circles
  let spacing = 30;

  for (let x = spacing; x < width; x += spacing) {
    for (let y = spacing; y < height; y += spacing) {
      let size = random(5, 25);
      let c = random(255);

      fill(c, 0, 255 - c);
      circle(x + random(-spacing / 4, spacing / 4),
              y + random(-spacing / 4, spacing / 4),
              size);
    }
  }

  // Redraw every few seconds for new patterns
  if (frameCount % 180 === 0) {
    background(10);
  }
}

Color and Visual Style

p5.js offers multiple color modes. Use RGB, HSB (Hue-Saturation-Brightness), or named colors:

// RGB (0-255 for each)
fill(255, 0, 0);  // red

// HSB (Hue: 0-360, Saturation: 0-100, Brightness: 0-100)
colorMode(HSB);
fill(0, 100, 100);  // red in HSB

// Use a color palette
let palette = [
  color(0, 240, 255),    // cyan
  color(255, 0, 110),    // magenta
  color(255, 214, 10),   // yellow
];

fill(random(palette));
circle(x, y, 50);

// Transparency
fill(0, 240, 255, 100);  // 100 = semi-transparent

Transform Functions

Rotate and translate objects for more complex shapes:

function draw() {
  background(10);

  let angleStep = TWO_PI / 8;  // divide circle into 8 parts
  let radius = 100;

  for (let i = 0; i < 8; i++) {
    let angle = angleStep * i;
    let x = width / 2 + cos(angle) * radius;
    let y = height / 2 + sin(angle) * radius;

    fill(0, 240, 255);
    circle(x, y, 30);
  }
}

Text and Debugging

Add text to your canvas for labels or debug information:

function draw() {
  background(10);

  fill(255);
  textSize(16);
  text('X: ' + mouseX + ' Y: ' + mouseY, 10, 20);

  // Frame rate (how many times draw() runs per second)
  text('FPS: ' + frameRate().toFixed(1), 10, 50);
}

Working with Sound

p5.js includes sound capabilities:

let osc;  // oscillator

function setup() {
  createCanvas(400, 400);
  osc = new p5.Oscillator();
  osc.start();
}

function draw() {
  background(10);

  // Frequency based on mouse position
  let freq = map(mouseX, 0, width, 100, 1000);
  osc.freq(freq);

  // Amplitude (volume) based on mouse position
  let amp = map(mouseY, 0, height, 0, 0.5);
  osc.amp(amp);
}

Saving and Exporting

p5.js can save your creations:

// Save canvas as image
if (keyIsPressed && key === 's') {
  saveCanvas('mySketch', 'png');
}

// Save frame as animation frame
// Combine with a gif library for animated output

Going Beyond Basics

Once comfortable with fundamentals, explore:

Object-oriented programming (classes for reusable components)
Arrays and loops for managing many objects
Vectors for more complex movement patterns
3D sketches with createCanvas(width, height, WEBGL)
Exporting to WebGL for better performance
Combining with other libraries for audio, physics, or 3D

Resources and Community

p5.js has an amazing community and excellent documentation:

Official site: p5js.org (tutorials, reference, examples)
Community contributions: Hundreds of example sketches
Forum: Friendly community for questions and feedback
Books: "Coding Train" by Daniel Shiffman is excellent for beginners

Conclusion

Creative coding opens a new way of thinking. You're not just writing code; you're expressing ideas visually. Start simple—a moving circle, a random pattern, an interactive response. Then build complexity iteratively. The joy of creative coding is immediate feedback: change a number, see the result. That cycle of idea → code → visual → iteration is powerful and addictive. Start coding creatively today.

📚 Get Started

Getting Started with p5.js

The Nature of Code by Daniel Shiffman