Make it Interesting with Loops!

If you are new to programming then loops might seem confusing. Don't worry though, playing around with a simple script and seeing the result on the canvas can make it seem like a piece of cake. We are going to use a for loop which will go over some lines of code inside the curly brackets { } until a condition is met. It is petty common to use 'i' as the variable that increases or decreases in a loop. The for loop has 3 parts that are seperated by semi-colons.

for (i=1; i<6; i++) { }

  • The first part sets i (or any variable) to its starting value
  • The second part is the condition that must be true to keep looping
  • The last part is the change to the variables, usually i is incremented
<!DOCTYPE HTML>
<html>
<head>
<title>Loops</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>

var can = document.getElementById("canvas");
var ctx = can.getContext('2d');

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 200, 200);

ctx.fillStyle = "white";
for (var i=1; i<6; i++) {
  ctx.fillRect(i*30, 50, 15, 50);
}

</script>
</body>
</html>


You might notice that we now have a head section with a title in our HTML (lines 3-5). This puts the title of our page in the tab at the top. Everything else is similar to before except we now have a loop in lines 17-19.

  • Line 17 This is the loop that will run the following code as long as i is less than 6. It starts with i=1 so it will loop 5 times, increasing by 1 each time
  • Line 18 Draws the rectangles, we multiply i * 30 for our x position so the rectangles will move across the screen as i gets larger
  • Line 19 The curly brackets determine what is included in the loop. This closing curly bracket signals that the for loop should increment i and evaluate the condition i<6 to determine if it will loop again

So I made some boxes.. Now What?

Hopefully you copied that code into your text editor and ran it. Then if you changed the condition to some other number to see what would happen then you are on the right track. Try these ideas to experiment more with the for-loop.

  • What happens if you multiply the y-position by i?
  • What if you multiply the height and width by i?
  • Draw more rectangles or other shapes inside the loop.
  • Can you make the symbol for a full strength signal (rising bars)?

Nested Loops

You can do a lot with loops, but you can do twice as much with a loop inside a loop. For 2D graphics it makes sense to use a nested loop (loop inside a loop). You might want to cover the screen in some way and you need a loop to go across the screen and another loop to go down the screen. For example, think about making a checker board.

<!DOCTYPE HTML>
<html>
<head>
<title>Loops</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>

var can = document.getElementById("canvas");
var ctx = can.getContext('2d');

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 200, 200);

ctx.fillStyle = "white";
for (var i=1; i<9; i++) {
  for (var j=1; j<9; j++) {
    if ((i+j)%2 == 0) ctx.fillRect(j*20,i*20,20,20);
  }
}

</script>
</body>
</html>


You can see that we have a second loop that operates with the variable j. It is helpful to indent code that is nested to keep it organized. Both of the for-loops go from 1 to 8. This time we use an if statement that checks to see if a rectangle should be drawn or not. The way it works is i and j are added, then we use %2 to check if the sum is even or odd. The % symbol is the modulus operator, it performs a division and returns the remainer. In other words, it divides the sum of i and j by 2. If there is a remainer it is odd. The end result is that the boxes are displayed every other one and they are staggered each row to create checkers.

Will this Crazy Command Work?

Hopefully you still have the F12 Developer's Tools open. Many times it is helpful to test out a command as you are considering it. The console will let you access the data from your current page and also let you run any other JavaScript code you wish. If you have never used the modulus operator before then try it out in the console. Type something like 7%2, or 8%3. It can be difficult to remember all the syntax (correct spelling and usage) of commands. Try running commands on the console to see if they work or not before incorporating them into your script.