Rhythmic Patterns

In this lesson, I’ll show you how to use the modulo operator to create rhythmic patterns. For this simple example, I will demonstrate this with a series of rectangles, with every nth rectangle being larger than the others.

Processing

void setup() {
  size(1200, 600);
  rectMode(CENTER);
  noStroke();
  frameRate(3);
}

void draw() {
  background(0);

  int tilesX = 32;
  float mag = width * 0.4;

  translate(width/2, height/2);

  int modulo = frameCount;

  for (int i = 0; i < tilesX; i++) {
    float x = map(i, 0, tilesX-1, -mag, mag);

    if (i % modulo == 0) {
      rect(x, 0, 10, 500);
    } else {
      rect(x, 0, 10, 70);
    }
  }
}

p5.js

function setup() {
  createCanvas(600, 300);
  rectMode(CENTER);
  noStroke();
  frameRate(3);
}

function draw() {
  background(0);

  let tilesX = 32;
  let mag = width * 0.4;

  translate(width/2, height/2);

  let modulo = frameCount;

  for (let i = 0; i < tilesX; i++) {
    let x = map(i, 0, tilesX-1, -mag, mag);

    if (i % modulo == 0) {
      rect(x, 0, 5, 250);
    } else {
      rect(x, 0, 5, 30);
    }
  }
}