Modulo (%) – the designer’s best friend

I became a programmer because I was a lazy designer. That is lazy as in “Why create fifty animations that are almost the same”, not “bah – good enough, customer isn’t going to care”. I want top results with as little effort as possible. So actionscript was the way to cut down on unwieldy timelines.

The downside of not having a programming degree is that a few of the useful concepts and methods remain obscured in a corner. As with modulo. For those of you with a maths degree, just skip down a few paragraphs. Designers – bear with me.

Modulo is a maths operator like multiply and divide are. It is most similar to divide as it returns the remainder from an integer division. Quick example: 13 % 10 = 3 because 13 can be divided once by 10 with three remaining. 23 % 10 is also three as 23 can be divided twice by 10 with three remaining.

So why should I care, the designer asks, this is all very interesting, but what practical value does it have? One scenario is my contribution to this mini challenge from Apt, although SIN is probably better in that case. I’ve used it most when laying out n-objects in a grid to calculate x-position. As % returns the remainder, you can multiply count and x-step and do a modulo on total width.

An example:

function placeItems():void {
  var numItems:int=45;
  var xstep:int=15;
  var ystep:int=15;
  var totalWidth:int=150;
  var item:MovieClip;
  for (var i:int = 0; i<numItems; i++) {
    item.x = (i*xstep)%totalWidth;
    item.y = Math.floor((i*xstep)/totalWidth)*ystep;


function createAnItem():MovieClip {
  var item:MovieClip = new myItem();
  return item;

Which results in this if you have a blue square in the library exported to actionscript as ‘myItem’


All the magic is in the last two lines of the for…next loop, it places items in a grid without needing help counters.
Look at item.x = (i*xstep)%totalWidth. It multiplies item count with distance between items and does a modulo on total width. I.e., if i*step is 330, 330%150 = 30. Combined with stepping y down with whole multiplies, we get a nice grid. Y value – if i*step is 330, it gives  2.2 when divided by total width, lose the decimal and we know it in row 2.

It’s super easy to change parameters. Set x/y-step or total width and you’re done. Just keep total width divisible by x-step, else the gird gets staggered.

Anyone else with good examples of modulo for layout?


3 Responses to “Modulo (%) – the designer’s best friend”

  1. 1 hp.
    May 19, 2009 at 11:42 am

    And if you want to distribute in three dimensions:
    (example in cpp but the concept works for any language)

    static const int SIDES = 5;
    static const int NUM_PARTICLES = SIDES*SIDES*SIDES;

    Particle particles[NUM_PARTICLES-1];

    for (int n=0; n<NUM_PARTICLES; n++) {
    particles[n].position.x = 150 * (n%SIDES);
    particles[n].position.y = 150 * (int)((n/SIDES)%SIDES);
    particles[n].position.z = 150 * (int)(n/(SIDES*SIDES));

    • May 19, 2009 at 11:48 am

      Exactly! Modulo removes the need to track lines and positions with variabels, which means cleaner and more easily maintainable code. Probably faster too. But it’s an odd little operator so it takes some time getting used to.

  2. 3 Banned in Boston
    June 9, 2009 at 4:45 pm

    // And for the ever-popular ‘alternating row colors’ effect, here’s some *pseudo* code:

    for (var i:int = 0; i < Items.count; i++)
    var item = Items[i];
    if (i % 2 == 0)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

May 2009
« Apr   Jun »



%d bloggers like this: