Colors & Shapes

Master the basics of drawing and coloring shapes in p5.js to create visual game elements.

Basic Shapes

Circle

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

function draw() {
  background(220);
  
  // circle(x, y, diameter)
  circle(200, 200, 100);
}

Rectangle

// rect(x, y, width, height)
rect(150, 150, 100, 50);

// Square (width = height)
rect(150, 150, 100, 100);

Line

// line(x1, y1, x2, y2)
line(100, 100, 300, 300);

Triangle

// triangle(x1, y1, x2, y2, x3, y3)
triangle(200, 100, 150, 200, 250, 200);

Ellipse (Oval)

// ellipse(x, y, width, height)
ellipse(200, 200, 150, 100);

Breaking it down

• All shapes use pixel coordinates
• (0, 0) is the top-left corner
• X increases going right
• Y increases going down

Fill Colors

Color the inside of shapes:

function draw() {
  background(220);
  
  // Red circle
  fill(255, 0, 0);
  circle(100, 200, 80);
  
  // Green circle
  fill(0, 255, 0);
  circle(200, 200, 80);
  
  // Blue circle
  fill(0, 0, 255);
  circle(300, 200, 80);
}

Breaking it down

• fill(red, green, blue) - RGB color values (0-255)
• fill() affects all shapes drawn after it
• Each color channel goes from 0 (none) to 255 (max)
• Mixing colors: (255, 255, 0) = yellow

Stroke (Outline) Colors

Color the outline of shapes:

function draw() {
  background(220);
  
  // Blue outline, red fill
  stroke(0, 0, 255);
  fill(255, 0, 0);
  circle(200, 200, 100);
}

Breaking it down

• stroke(red, green, blue) - Sets outline color
• Applied separately from fill
• Affects all shapes drawn after it

No Fill / No Stroke

Remove fill or stroke:

function draw() {
  background(220);
  
  // Outline only (no fill)
  noFill();
  stroke(0);
  circle(150, 200, 80);
  
  // Fill only (no outline)
  fill(255, 0, 0);
  noStroke();
  circle(250, 200, 80);
}

Breaking it down

• noFill() - Makes shape transparent inside
• noStroke() - Removes the outline
• Useful for clean, flat designs

Stroke Weight (Thickness)

Change outline thickness:

function draw() {
  background(220);
  
  // Thin line
  strokeWeight(1);
  line(100, 100, 300, 100);
  
  // Medium line
  strokeWeight(5);
  line(100, 150, 300, 150);
  
  // Thick line
  strokeWeight(10);
  line(100, 200, 300, 200);
}

Breaking it down

• strokeWeight(pixels) - Sets thickness in pixels
• Default is 1 pixel
• Affects all strokes drawn after it

Transparency (Alpha)

Make colors see-through:

function draw() {
  background(220);
  
  // Solid red
  fill(255, 0, 0, 255);
  circle(150, 200, 100);
  
  // Semi-transparent blue (overlaps red)
  fill(0, 0, 255, 150);
  circle(250, 200, 100);
}

Breaking it down

• Fourth parameter is alpha (transparency)
• 255 = fully opaque (solid)
• 0 = fully transparent (invisible)
• 150 = semi-transparent (see-through)

Color Modes

RGB (Default)

fill(255, 0, 0);  // Red

HSB (Hue, Saturation, Brightness)

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

function draw() {
  background(220);
  
  // Hue: 0-360 (color wheel)
  // Saturation: 0-100 (grayness to pure color)
  // Brightness: 0-100 (darkness to lightness)
  fill(0, 100, 100);    // Red
  circle(100, 200, 80);
  
  fill(120, 100, 100);  // Green
  circle(200, 200, 80);
  
  fill(240, 100, 100);  // Blue
  circle(300, 200, 80);
}

Breaking it down

• colorMode(HSB) - Switch to HSB mode
• Hue = color type (0-360 like a rainbow wheel)
• Saturation = how colorful (0 = gray, 100 = vibrant)
• Brightness = how light (0 = black, 100 = bright)
• Easier for color animations and variations

Gradients (Manual)

p5.js doesn't have built-in gradients, but you can create them:

function draw() {
  background(220);
  
  // Horizontal gradient
  for (let x = 0; x < width; x++) {
    // Color changes from 0 to 255 across width
    let r = map(x, 0, width, 0, 255);
    stroke(r, 0, 255 - r);
    line(x, 0, x, height);
  }
}

Breaking it down

• map(value, start1, stop1, start2, stop2) - Converts ranges
• Draw many lines with gradually changing colors
• Creates smooth color transition

Shape Modes

Rectangle Mode

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

function draw() {
  background(220);
  
  // Default: CORNER (x,y is top-left)
  rectMode(CORNER);
  fill(255, 0, 0);
  rect(100, 100, 80, 60);
  
  // CENTER (x,y is center)
  rectMode(CENTER);
  fill(0, 255, 0);
  rect(250, 130, 80, 60);
}

Ellipse Mode

// Default: CENTER
ellipseMode(CENTER);
ellipse(200, 200, 100, 80);

// CORNER (like rectangles)
ellipseMode(CORNER);
ellipse(200, 200, 100, 80);

Common Patterns

Flashing Colors

function draw() {
  background(220);
  
  // Flash between red and blue every 30 frames
  if (frameCount % 60 < 30) {
    fill(255, 0, 0);
  } else {
    fill(0, 0, 255);
  }
  
  circle(200, 200, 100);
}

Color Based on Position

function draw() {
  background(220);
  
  // Color changes with mouse position
  let r = map(mouseX, 0, width, 0, 255);
  let b = map(mouseY, 0, height, 0, 255);
  
  fill(r, 0, b);
  circle(mouseX, mouseY, 50);
}

Pulsing Effect

let size = 50;
let growing = true;

function draw() {
  background(220);
  
  // Pulse between 50 and 150
  if (growing) {
    size = size + 2;
    if (size >= 150) growing = false;
  } else {
    size = size - 2;
    if (size <= 50) growing = true;
  }
  
  fill(255, 0, 0);
  circle(200, 200, size);
}

Rainbow Wheel

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

function draw() {
  background(220);
  
  // Draw 12 colored circles in a wheel
  for (let i = 0; i < 12; i++) {
    let angle = (i / 12) * 360;
    let hue = angle;
    
    fill(hue, 80, 90);
    
    let x = 200 + cos(radians(angle)) * 100;
    let y = 200 + sin(radians(angle)) * 100;
    circle(x, y, 40);
  }
}

Named Colors

p5.js supports some color names:

fill('red');
fill('blue');
fill('green');
fill('yellow');
fill('orange');
fill('purple');
// ... and more!

Hex Colors

Use hex color codes:

fill('#FF0000');  // Red
fill('#00FF00');  // Green
fill('#0000FF');  // Blue
fill('#FFAA00');  // Orange

Tips & Tricks

1. Color Picker - Use online color pickers to find RGB values
2. Consistent Style - Pick a color palette and stick to it
3. Contrast - Make sure text is readable against backgrounds
4. Alpha for Trails - Low alpha backgrounds create motion trails
5. HSB for Rainbows - HSB makes animated color changes easier

Common Color Combinations

// Classic Game Boy Green
fill(155, 188, 15);

// Retro Purple/Pink
fill(255, 0, 255);

// Health Bar Red
fill(220, 20, 60);

// Coin Gold
fill(255, 215, 0);

// Night Sky
background(25, 25, 112);

Related p5.js Functions

• fill() - Set fill color
• stroke() - Set stroke color
• noFill() - Remove fill
• noStroke() - Remove stroke
• strokeWeight() - Set stroke thickness
• colorMode() - Change color system (RGB/HSB)
• background() - Set background color
• map() - Convert value ranges (useful for colors)

Common Gotchas

⚠️ Color persists - fill() affects all shapes until changed
⚠️ Order matters - Set color BEFORE drawing the shape
⚠️ RGB vs HSB - Don't mix modes without switching with colorMode()
⚠️ Alpha with stroke - Use 4th parameter: stroke(r, g, b, alpha)
⚠️ 255 not 100 - RGB uses 0-255, not percentages

Try It Yourself

Experiment with these ideas:

• Create a simple character using basic shapes
• Make a button that changes color when hovered
• Draw a rainbow using a loop with HSB colors
• Create a health bar that changes from green to red
• Make a pulsing effect for collecting items

Ready to add text to your games? Check out the Text & Fonts guide! ✏️