Creating the Cutout Shapes

Let’s begin by crafting our cutout shapes!
In this lesson, we’ll use the curveVertex()-function to create organic forms. These shapes will serve as the building blocks for our generative collages.

Processing

void setup() {
  size(900, 900);
  frameRate(1);
}

void draw() {
  background(#ffffff);

  fill(0);
  noStroke();

  translate(width/2, height/2);

  float mag = 500;

  beginShape();
  for (int i = 0; i < 6; i++) {
    float x = random(-mag, mag);
    float y = random(-mag, mag);

    curveVertex(x, y);
  }

  endShape(CLOSE);
}

p5.js (by Yassine Boudriga)

function setup() {
  createCanvas(900, 900);
  frameRate(1);
}

function draw() {
  background('#ffffff');
  
  fill(0);
  noStroke();

  translate(width/2, height/2);

  let mag = 500;
  
  beginShape();
  for(let i = 0; i < 6; i++){
    let x = random(-mag,mag);
    let y = random(-mag,mag);

    curveVertex(x,y);
  }

  endShape(CLOSE);
}