Curriculum: page 2, pictures

The previous page told you exactly, literally what to do, without leaving you any choices. We apologize for this shameless suppression of your artistic self. Now that you know the basics, the course material will be less linear, with more room for experimentation.

Open the picture playground

Goal

Get acquainted with our visual programming environment.

Instructions

Open the playground page in a new tab.

Rejoice.

Next, read the first part of the JavaScript program.

Randomly play around with the content of the drawing function. Change some numbers and colors, render again. Now read the text below the program and add some new shapes.

Explanation

What we are going to do is get a feel for programming concepts by applying them to something easily observable: graphics. The linked page defines a number of convenient drawing operations for us, and invites you to experiment with them.

At the bottom of the program there are a number of lines starting with two slashes (//). These are called comments. They clarify the program, but are not actually part of it. You can write anything you want in a comment, the computer won't even look at it.

Your programs, as entered into the sandbox page, don't run in a vacuum. We have, for the purpose of this course, defined a number of simple functions for performing graphics operations, as described at the bottom of the example, and your program may refer to those.

The function drawing() part defines a function named drawing. We'll see more about function definitions in a few steps, but this one is special, in that it is executed when the script is rendered. Thus, it is the place where the statements that produce your drawing go.

The loop

Goal

Learn what a loop is, and how to express them in JavaScript.

Problem statement: we want to draw twenty dots, without writing circle(x, y, something) twenty times.

Instructions

Open this link to get a drawing function containing this program:

color("red");
var column = 0;
while (column < 20) {
  circle(column * 10, 0, 4);
  column = column + 1;
}

Explanation

A program, when not otherwise instructed, will simply execute its statements from top to bottom. The great thing about making a computer work for us is that it can take repetetive tasks of our hand. Thus, we don't want to write circle(0, 0, 4); circle(10, 0, 4); etc to draw our dots.

The word while can be used to create a special kind of statement that is called a loop. It consists of a condition (column < 20) and a body (the part between the braces). A loop does not obey the usual top-down order of execution. It will continue executing the body as long as the condition holds true.

The braces around the two statements inside the loop are used to group them together—they make clear that these statements both belong to the loop body. You have probably noticed that some space is added in front of these, to make it clear that they are part of a block. This is done to help readability of the program, but isn't strictly required.

The example code uses a variable to track its progress. The column variable starts at zero, and is moved forward by one every time the loop body executes. A loop condition is a normal expression, and the < symbol is a normal operator that compares two expressions and returns a value that indicates whether the one to the left is smaller than the one to the right. Thus, we can expect the loop body to be executed exactly twenty times—first with column at zero, then at one, and so on until nineteen. When it reaches twenty, the condition no longer holds, and the program continues below the loop (which is the end of our example).

There are a few more things you might need to know about the < operator. The value it produces is not a number or a string, but a new type, called boolean. There are only two values of this type, called true and false. There are similar operators for checking whether a value is greater than (>) or equal to (==) to some other value.

Exercise: try to write a program that prints a 20-by-20 grid of dots, instead of just a line. You'll need two loops, and two counter variables (one for columns, one for rows). Hint: you may put a loop inside another loop.

When trying out programs in the sandbox, keep an eye on the console. When the computer can't make sense of your program, it will output (more or less informative) messages there. When nothing happens after pressing 'Render', chances are you mistyped something.

Conditional execution

Goal

Next, we want to draw every other dot in our lines of dots in a different color. The even ones should be black, the odd ones grey.

In order to do this, we will learn about conditional statements.

Instructions

Here is the program that, when put inside the drawing function, does what we want, and is available here:

var column = 0;
while (column < 20) {
  if (column % 2 == 0) {
    color("black");
  } else {
    color("gray");
  }
  circle(column * 10, 0, 4);
  column = column + 1;
}

Explanation

The first new concept introduced here is the % operator. This is pronounced 'remainder'. It is not a very important operator, but it is useful here. What it does is divide the value on the left by the one on the right, and give us the remainder of that division. Thus, column % 2 == 0 is a way to check whether column is even—if it is, then the remainder of dividing it by two will be zero.

But the important new concept introduced here is the if/else statement. Like a loop, it accepts a condition. If the condition is true, it will execute the statement coming after it. Otherwise, it will execute the statement that follows the else word.

The else part can be left off to indicate that nothing at all should happen when the condition does not hold.

Exercise: extend the example program to draw every third dot 10 units higher than the others. Hint: define a variable height and set its value inside of a conditional.

Functions

Goal

Now consider that we want to draw a smiley in multiple, specific places. We could repeat the six statements needed to draw one such shape several times, but again, what we're trying to do here is to make the computer work for us.

We are about to learn how to define new functions to perform useful operations for us.

Instructions

This is the smiley function:

function smiley(x, y) {
  moveTo(x, y);
  color("yellow");
  circle(0, 0, 50);
  color("black");
  circle(-20, 10, 7);
  circle(20, 10, 7);
  lineWidth(3);
  path("g -20 -10 q 20 -10 0 -50 c");
  goBack();
}

You can put it in your code next to the drawing function, and change that function to call it, as shown here:

function drawing() {
  smiley(0, 0);
  smiley(-100, 20);
  smiley(100, 50);
}

Explanation

A function is, in effect, a shorthand for a piece of code. You define it with the function word as shown above. This produces a variable with the given name (smiley, in this case) that refers to the chunk of code. The words after the function's name—(x, y)—are the parameters to the function. These are given a value when the function is used. For example smiley(0, 0) will run the function's body with both x and y holding the value zero.

One thing to be aware of is that variables defined inside functions (including their parameters), are local to that function. So if you have another function that also has a parameter called x, such as circle, that function's x and the one in smiley are separate variables, and do not interfere with each other. Mentions of x in smiley refer to that function's x, and mentions in other functions refer to whichever variable happens to be called x in that function.

Exercise: define a function smileySquadron draws five smileys next to each other by using a while loop. Once it works, use it to draw a whole lot of smileys.

Free-form

Goal

Write some kind of entertaining graphical program yourself.

Instructions

Here are some tools to help you get started:

Math.random() can be used to produce a random (unpredictable) number between zero and one. Thus, Math.random() * 10 produces a number between zero and ten, and so on.

setInterval(func, n) is a way to run a function every n milliseconds. If you combine it with the clear function to clear the screen, you can produce an animation. You can find a demonstration here.

The moveTo, rotate, scale, and goBack functions defined in the playground, when combined with functions that call themselves, make it very easy to define hierarchical, fractal drawing. See this tree for an example.

Explanation

Doing is the best way to learn. Go nuts. Think of something elaborate. Ask the coaches for help when you are unsure how to go about something.

And on

→ To the third page.