Intro

A modulo calculation is used in many areas of computer science. In school it is often called “division with remainder”.

It consists of three parts: The dividend, the divisor and the remainder. The dividend is divided by the divisor. The remainder is what is when the division has an uneven result.

Processing

PFont font;
float fontSize = 116;
int dividend, divisor, remainder;

void setup() {
  size(800, 600);
  font = createFont("mono.otf", 1000);
}

void draw() {

  background(0);
  
  divisor = 8;
  dividend = frameCount - 1;

  String[] lines = {
    "dividend   " + dividend,
    "divisor    " + divisor,
    "remainder  " + (dividend % divisor)
  };
  

  textFont(font);
  float fontSize = 116;

  fill(#ffff00);
  textAlign(LEFT, TOP);
  textSize(fontSize);
  
  textLeading(fontSize * 0.9);
  text(dividend + " % " + divisor + " = " + (dividend % divisor), 25, 0);
  textSize(fontSize/2);
  textLeading(fontSize/2 * 0.9);
  
  for (int i = 0; i < lines.length; i++) {
    text(lines[i], 25, height/2 + i * 60);
  }
}

p5.js

let font;
let fontSize = 116;
let dividend, divisor;

function preload() {
  font = loadFont("mono.otf");
}

function setup() {
  createCanvas(800, 600);
  textFont(font);
}

function draw() {
  background(0);

  divisor = 8;
  dividend = frameCount - 1;

  let lines = [
    "dividend   " + dividend,
    "divisor    " + divisor,
    "remainder  " + (dividend % divisor)
  ];

  fill("#ffff00");
  textAlign(LEFT, TOP);
  
  textSize(fontSize);
  textLeading(fontSize * 0.9);
  text(dividend + " % " + divisor + " = " + (dividend % divisor), 25, 0);

  textSize(fontSize / 2);
  textLeading((fontSize / 2) * 0.9);

  for (let i = 0; i < lines.length; i++) {
    text(lines[i], 25, height / 2 + i * 60);
  }
}