The usage of modulo: How can I correctly implement it?


#1

In my way of learning P5.js I enountered the ‘Modulo’ function. I did some reading into it, but I fail to understand HOW I should be looking at it and using it.

I have a number ‘generator’ that generates the number 1 to 100. Our task is: For every multiplication with 5 (5, 10, 15…) a name should appear and we were asked to use modulo.

I understand that you use the ‘%’ to divide 2 numbers, but fail to understand out how I can properly use it.

Any explanation that can be given would be appreciated!

var gooi = 0;


function setup () {
    createCanvas (300, 1500); 
    noLoop();
}

function draw () {
    
    textSize(12);
    
    // i = hoogte van tekst plaatsing
        for (i = 0; i < 1000; i += 10) {

        gooi += 1;
  
        text( '(' + gooi + ')' + ' ' + 'gegooid: ' + gooi, 10, (i + 20));
        }
}

#2

!(i % 5) && print(name);

Processing.org/reference/modulo.html


#3

@GoToLoop

So if I understand correctly, you use the remainder for your calculations?

like in the example of 52.1 % 10, your remainder is 2.1 and you use that?


#4

AFAIK, your loop for (i = 0; i < 1000; i += 10) { generates only whole values for the variable i.

!(i % 5) && print(name); won’t work if i is a fractional value!


#5

a practical app for use
modulo and floor to make a GRID
in a one line FOR loop

// https://discourse.processing.org/t/scalable-grid-with-rectangles/7256
int x = 10, y = x, w = 20, h = w;
int grid = 24, many = grid*grid;

void setup() {
  size(500, 500);
  stroke(0, 0, 200);
  fill(0,200,0);
}

void draw() {
  background(200,200,0);
  for (int i = 0; i < many; i++)  rect(x+(i%grid)*w, y+(floor(i/grid))*h, w, h); 
}


#6

A very common use of modulo in Processing is to perform an action every nth frame.

So, if I wanted to do something every 7 frames:

int step = 7;
void draw(){
  if(frameCount%step == 0){
    print(frameCount, " ");
  }
}