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.
Get acquainted with our visual programming environment.
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.
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.
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.
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;
}
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.
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.
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;
}
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.
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.
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);
}
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.
Write some kind of entertaining graphical program yourself.
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.
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.