David Stiller’s blog

Modulo is one of the multiplicative operators, a category whose members take two operands and perform a multiplication, division, or modulo operation on them.  Obviously, in this case the operation performed is modulo, so let’s take a look at what that means, especially since this operation can be useful in a number of unexpected ways. 

What it does

Modulo divides one number into another and returns the remainder, if any.  For example, 4 divided by 2 is 2, with no remainder; therefore, 4 modulo 2 equals 0.  Looking at that another way, 2 goes into 4 two times evenly.  The result of the modulo operation is zero because there is no remainder.

Here’s another.  10 modulo 7 is 3.  Why?  Because 7 goes into 10 once, with a remainder of 3.  To be clear, it makes no difference how many times one operand goes into the other.  The only thing modulo cares about is the remainder.  1,000 modulo 7 is 6 because 7 goes into 1,000 one hundred forty-two times (who cares?), with a remainder of 6.

5 mod 2 is 1 … because 5 / 2 leaves a remainder of 1
13 mod 2 is also 1 … because 13 / 2 leaves a remainder of 1

I think you get the idea.

How is this useful?

Telling odd or even

There are times you may want to know if a certain number is odd or even.  You might, for example, wish to alternate row colors in a table, making every odd row yellow.  Modulo tells you right away which is which:  if a number mod 2 equals zero, it’s even.

Consider the number 6.  Is 6 odd or even?  Common sense tells us it’s even.  6 mod 2 (that is, 6 % 2) equals 0, so evaluate that in an if statement …

var num:Number = 6;
  if (num % 2 == 0) {
    trace ("even");
  } else {
    trace ("odd");
}

Building grids

Modulo comes in handy if you need to stack items in columns and rows.  You might, for example, want to sort a number of movie clips (perhaps they represent icons) into rows of five.

The following sample code assumes you have a small movie clip (5×5 pixels, say) in your Library with a Linkage id of “square.”  Two variables, paddingX and paddingY, are used to position a dozen instances of this clip on the Stage.  These variables both start at zero, so the first clip is placed at the upper left corner (0,0).  After that, paddingX is increased by ten with each iteration.  If the number of this iteration mod 5 equals zero, we know the row contains five items, so paddingX is reset to zero and paddingY is increased by ten, which makes a new row.

var paddingX:Number = 0;
  var paddingY:Number = 0;
  for (var i:Number = 1; i <= 12; i++) {
    var mc:MovieClip = this.attachMovie ("square", mcSquare + i, i);
    mc._x = paddingX;
    mc._y = paddingY;
    paddingX += 10;
    if (i % 5 == 0) {
      paddingX = 0;
      paddingY += 10;
  }
}

Formatting time

There are twenty-four hours in a day, or two twelve-hour half-days.  Depending on your preference, you might refer to 15:00 o’clock as 3:00pm.  Hours are based on a duodecimal (base-12) system, which means they cycle at twelve, rather than at ten, like normal decimal counting.  Minutes and seconds are sexagesimal (base-60), which complicates things even more.  Common sense tells us that if we start with 1:45, we need to increment that 1 to a 2 when the 45 eventually becomes 60 (and, in turn, must reset that 60 back to 0).

You may already see the pattern, here.  If you have a known number of seconds — say, 124 seconds — you can find out how many minutes and seconds that is by first dividing the number by 60, then modding it by 60.

124 / 60 = 2.066666 minutes (just round that down)
124 % 60 = 4 seconds

Therefore, 124 seconds equals 2 minutes and 4 seconds.

P.S.  I’m a strong advocate of the ActionScript 2.0 Language Reference and often encourage people to head there first.  The thing about operators is that they’re usually just punctuation marks, which makes them a bit tougher to locate.  Best bet:  just search the word “operators” — you’ll see the whole list.

This entry was posted on Saturday, July 22nd, 2006 at 9:22 am and is filed under ActionScript 2.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.