How to Generate Random Fill Values in OpenProcessing

Random Fill Values in OpenProcessing: The Complete Guide

OpenProcessing makes creative coding accessible. But when you want your sketches to look less static and more alive, you'll need to use random values for your fill colors. Here's how to do it right.

Basic Random Fill Syntax

The random() function in p5.js (which powers OpenProcessing) generates random numbers. You can use it directly inside fill() to create unpredictable colors.

Single Number: Grayscale Randomness

Passing one argument to fill() gives you shades of gray:

fill(random(255));
ellipse(50, 50, 80, 80);

This picks a random grayscale value between 0 and 255. Every time the draw loop runs, you get a different shade.

Three Numbers: Full RGB Color

Most of the time you want actual colors. Three arguments to fill() set red, green, and blue values:

fill(random(255), random(255), random(255));
rect(20, 20, 60, 60);

Each color channel gets its own random value. The result is essentially every color imaginable, including some ugly ones.

Controlling the Randomness

Raw random values can be chaotic. Here's how to tame them.

Setting a Range

The random() function accepts a min and max value:

// Random red only (high red, no blue or green)
fill(random(150, 255), 0, 0);

// Vibrant colors only (avoiding dark/muddy)
fill(random(100, 255), random(100, 255), random(100, 255));

This is useful when you want random variations within a specific palette rather than the full spectrum.

Using Variables for Consistency

If you want a shape to keep the same random color across frames, store the value:

let myColor;

function setup() {
  myColor = color(random(255), random(255), random(255));
}

function draw() {
  fill(myColor);
  ellipse(width/2, height/2, 100, 100);
}

Without this, your shape would flicker through different colors every frame.

Random Alpha Values

Add a fourth parameter to fill() for transparency:

fill(random(255), random(255), random(255), random(255));
ellipse(40, 40, 50, 50);
fill(random(255), random(255), random(255), random(50, 150));
ellipse(60, 60, 50, 50);

Alpha goes from 0 (invisible) to 255 (fully opaque). Limiting the range keeps things readable.

HSB Mode: Easier Color Control

RGB is not intuitive for picking related colors. Switch to HSB mode:

colorMode(HSB, 360, 100, 100, 100);

fill(random(360), random(50, 100), random(50, 100));
// Hue: full spectrum
// Saturation: medium to high (avoiding gray)
// Brightness: medium to high (avoiding black)

In HSB mode, the first number is the hue (color wheel position), second is saturation (how colorful vs gray), third is brightness. This makes it much easier to generate random colors that actually look good together.

Generating Random Palettes

For more controlled color schemes, generate a palette and pick from it:

let palette = [
  color(255, 180, 100),
  color(100, 200, 150),
  color(80, 120, 200),
  color(200, 100, 150)
];

fill(random(palette));
rect(30, 30, 50, 50);

Use random() with an array to pick a random color from your curated selection. This gives you aesthetic control while maintaining variation.

Common Mistakes to Avoid

• Calling random() inside draw() without storage: Your shapes will flicker wildly. Store values in setup() or use frame-based seeding.
• Forgetting colorMode: Default is RGB 0-255. If you switch to HSB, your ranges change completely.
• Random alpha at full range: Values from 0-255 will often create nearly invisible shapes. Stick to 100-255 for practical opacity.
• NoStroke conflicts: If your shapes aren't visible, check if noStroke() was called earlier in your code.

Quick Reference Table

Getting Started: Random Color Generator

Copy this complete sketch to see random fills in action:

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

function draw() {
  background(40);
  
  // Random RGB circles
  fill(random(255), random(255), random(255), 200);
  ellipse(100, 100, 80, 80);
  
  // Random HSB circles
  colorMode(HSB, 360, 100, 100, 100);
  fill(random(360), 80, 90, 200);
  ellipse(300, 300, 80, 80);
  
  // Click to regenerate
  if (mouseIsPressed) {
    // Just keep running, values change each frame
  }
}

Hit play and watch the colors. Click and hold to see the flickering effect when random() runs every frame.

When to Use Random Fills

Random fill colors work well for:

• Particle systems with varied colors
• Generative art that changes each run
• Background variations in games
• Data visualizations with categorical colors
• Abstract art sketches

They don't work well for UI elements, text, or anything that needs to remain consistent across sessions.

Final Notes

Random fills are one of the simplest ways to add visual interest to OpenProcessing sketches. Start with the basic RGB approach, then move to HSB when you want better control over your color relationships. Store values outside draw() when you need consistency, and use arrays when you want curated randomness.