A basic Random Composition

In this lesson you will learn how to program a composition of randomly arranged elements in Processing and p5.js. This allows you to generate an almost infinite range of motifs.

Processing

color bg = #f1f1f1;
color fg = #000000;

void setup() {
  size(900, 900);
  // frameRate(2);
  strokeCap(RECT);
}

void draw() {
  background(bg);

  // Circle

  float x = random(width);
  float y = random(height);
  float diameter = random(50, 300);

  noStroke();
  fill(fg);
  circle(x, y, diameter);

  // Line 1

  float x1 = random(width);
  float y1 = random(height);
  float x2 = random(width);
  float y2 = random(height);

  stroke(fg);
  strokeWeight(5);
  line(x1, y1, x2, y2);

  // Line 2

  float line2x1 = random(width);
  float line2y1 = random(height);
  float line2x2 = random(width);
  float line2y2 = random(height);

  stroke(fg);
  strokeWeight(150);
  line(line2x1, line2y1, line2x2, line2y2);
  
  saveFrame("out/####.png");
}

p5.js

let bg, fg;

function setup() {
  createCanvas(900, 900);
  // frameRate(2);
  strokeCap(SQUARE);
  
  bg = color('#f1f1f1');
  fg = color('#000000');
}

function draw() {
  background(bg);

  // Circle
  let x = random(width);
  let y = random(height);
  let diameter = random(50, 300);

  noStroke();
  fill(fg);
  circle(x, y, diameter);

  // Line 1
  let x1 = random(width);
  let y1 = random(height);
  let x2 = random(width);
  let y2 = random(height);

  stroke(fg);
  strokeWeight(5);
  line(x1, y1, x2, y2);

  // Line 2
  let line2x1 = random(width);
  let line2y1 = random(height);
  let line2x2 = random(width);
  let line2y2 = random(height);

  stroke(fg);
  strokeWeight(150);
  line(line2x1, line2y1, line2x2, line2y2);

  saveCanvas("out", "png");
}

Curated Output

It is worth investing time in curating the results. It is fascinating how concrete some of the motifs appear. Despite the strong abstraction, a closer look at the generated motifs reveals human bodies doing various activities.