Modulo Calculator
Clock Arithmetic
Modular arithmetic, sometimes called clock arithmetic, is a calculation that involves a number that resets itself to zero each time a whole number greater than 1, which is the mod, is reached. An example of this is the 24-hour digital clock, which resets itself to 0 at midnight. source
Another example is thinking of it in terms of pizza slices. The leftover slice is the modulo. Below is a breakdown of the equation using a calculator. source
Application for Modulo
Using modulo to position each flower by row and column, where the amount of flowers are represented by the dividend (input #1) and the number of columns of are represented by the divisor (input #2).
Let start without using the modulo. In pseudo-code (looping through i) = i * flowerSize + flowerOffsetSize
This would position the x axis of each flower over by approx. the width of the flower, resulting in one long row of all the flowers.
.attr('transform', (d, i) => `translate(${(i) * (flowerSize + gapSize) + (flowerSize / 2)}`);
(btw, code examples is using d3.js syntax to draw and position the flowers)
NOW WITH MODULO, we can position the x-axis of each flower over by the width of the flower, and then when the row is complete, reset the value of the x-axis . Thus we can start again drawing the flowers in the same position, but moved down along on the y-axis.
.attr('transform', (d, i) => `translate(${(i % divisor) * (flowerSize + gapSize) + (flowerSize / 2)}, ${Math.floor(i / divisor) * (flowerSize + gapSize) + (flowerSize / 2)})`);