Simple Graphics

This program draws multiple white circles. Each circle has a radius of 15.
[Run the program]

The circle statement has the form:
circle(x, y, radius)

Exercises:

1. In the first row of circles, change the radius to 25.
[Run the program]

2. In the second row of circles, change the radius to 30.

The given program contains an error.

It is impossible for the automatic verifier to always find out what exactly is wrong. This is such a case, and the error report is not very helpfull.

Some exercises must be difficult. If all of them could just be easily solved, then the exercises would be boring, and they would lack educational value. A lot can be learned from a difficult exercise, escpecially when the solution is peeked at only after a few minutes of sincere effort.

Exercise:

1. Try to correct the error.

Inside an expression, a forward slash symbol denotes a division operation. Therefore, 20 /darkorange means: 20 divided by “darkorange”, which makes no sense.

Hint: the arguments must be separated by a comma (,).

If you are unable to solve an exercise, then it is fine to look at the solution. But, be sure to make a good effort. In this exercise, try reading the provided hint again.

    disc(x, 200, 20, /darkorange);

[Run the program]

2. Insert the statement println "x: ", x; just above the disc statement.
[Run the program]

The step of the for loop equals -50, and the initial value (800) is greater than the bounding value (100). This causes the discs to be drawn from right to left.
[Run the program]

Exercises:

1. Insert the statement println "x: ", x; just above the disc statement.
[Run the program]

2. Change the program so that the discs are drawn farther apart.

After you have solved an exercise, it is recommended to always examine the provided solution.

Note: Sometimes there can be multiple correct answers, so the provided solution may not match exactly with your solution.

for #x=800..100 -=75

The source code of demonstrational programs uses programming concepts that are not immediately explained.
[Run the program]

Important:
You should not analyze demonstrational programs because they contain unexplained features which might be too hard to understand.

This demonstrational program visualizes the screen's coordinate system.

The x-coordinate increases to the right, and the y-coordinate increases downwards. The coordinates are written as a pair (x,y).

The top left corner of the screen is at coordinates (0,0).

This program draws 4 red discs.
[Run the program]

The text after symbols /// is a comment. Comments are ignored by the computer.

The disc statement accepts 4 arguments:
disc(x, y, radius, color)

Exercise 1:

Draw a yellow disc in the middle of red discs. The yellow disc should touch all 4 red discs.

disc(500, 400, 50, /yellow);

Exercise 2:

Draw a green disc touching the rightmost red disc from the right side.

disc(700, 400, 50, /green);

The given program begins with a multiline comment. A multiline comment begins with the symbols /* and it is ended by symbols */. The contents of multiline comments are ignored by the computer.

To draw a vertical line of discs, the second coordinate (commonly named y ) of the disc statement is changing.

Exercises:

1. What happens when you change the first argument (i.e. the value 300) in the disc statement? Try several values in the range from 0 to 700.

2. Switch over the first and the second argument of the disc statement. Can you guess what difference will that make?

    disc(y, 300, 20, /red);

3. If you change the name of the variable y to x, in both places, what difference would that make? Verify your answer by clicking on the box below.

After you have solved an exercise, it is recommended to always examine the provided solution.

The fillScr statement fills the entire screen with the given color.

The optional fourth argument of the disc statement is color. The color can be ommited from the disc statement, in which case the disc is painted in the global foreground color. The global foreground color is intitially the white color.

Exercises:

1. Change the program so that the disc is painted in green color.

    disc(480, 360, i*5, /green);

2. Insert the statement println "This program draws a growing disc"; just below the fillScr statement.

3. Insert the statement println "One iteration executed"; just above the disc statement.

4. Insert the statement fillScr(/violet); as the first statement in the body of the for loop.

5. Change the println statement in the for loop so that it also prints out the value of variable i in each iteration.

    println "One iteration executed, ", i;

The line procedure draws a line.

The line procedure can accept 5 arguments:
line(x₁, y₁, x₂, y₂, color)

Arguments are sometimes called parameters. The last parameter, color, can be omitted.

This program contains two calls of procedure disc, and one call of procedure line. A procedure call causes an execution of the procedure.

Exercises

1. Modify the second call of procedure disc so that the disc is drawn at coordinates (555, 444).

2. Modify the call of procedure line so that the line connects both discs.

    line(70, 90, 555, 444, /yellow);

This program draws three discs and one line.
[Run the program]

Single-line comments can also be written after symbols << . That kind of a comment is the same as the one after symbols /// .

Exercise 1

Draw a line connecting the red disc and the purple disc.

line(300, 200, 300, 500);

Exercise 2

Draw a brown disc so that the discs form a square.

disc(600, 500, 20, /brown);

Exercise 3

Draw the remaining two sides of the square.

line(300, 500, 600, 500);
line(600, 200, 600, 500);

This program draws four discs and three lines.
[Run the program]

Exercise

1. Draw a line connecting the fourth disc and the bottom tip of the other lines.

line(480, 200, 350, 440);

In this example, a for loop is used to draw a bunch of lines that form a triangle.

A strange pattern should be slightly visible, mostly near the bottom of the triangle. This pattern is called moire (moo-ah-rei).
[Run the program]

Try changing the step of the for loop (the number 9) to see how it affects the moire pattern. For example, you can try out values 3, 4, 6, and 12.

The linep procedure has the form:
linep( [pointA], [pointB] )

Exercises:

The disc procedure has the form:
disc(x, y, radius, color)

1. Draw an orange disc of radius 20 at the bottom tip of the triangle.

    disc(450, 650, 20, /orange);

2. Change the step of the loop to 30.

3. Draw a red disc of radius 15 at the tip of every line.

Hint: inside the body of the for loop, insert only one new statemet, above the sleepMs statement. The coordinates of disc centers are (i, 100).

    disc(i, 100, 15, /red);

This program draws a red disc and a row of yellow discs.
[Run the program]

Exercise:

Draw orange lines connecting the center of the red disc with each of the yellow discs.

Hint: inside the body of the for loop, insert only one new line procedure call, for example above the sleepMs statement. The line procedure accepts 5 arguments. The first two arguments are coordinates of one line endpoint. The next two arguments are coordinates of the other line endpoint. The final, fifth argument is the line color.

If you can't solve this exercise, take a peek at the solution. You don't have to solve every exercise by yourself. A lot can be learned by simply reading the solution and applying it.

line(300, 100, i, 500, /orange);

This program draws two lines of discs simultaneously. The discs are 50 pixels apart.
[Run the program]

Exercise:

Draw lines connecting centers of disc pairs.

If you cannot solve this exercise, then first examine the hints carefully one by one. Make a good effort. If you still cannot solve the exercise, take a look at the solution.

This program draws a bunch of lines. The top line ends move rightward, while the bottom line ends move leftward.
[Run the program]

To accomplish the movemement leftward, a subtraction operation was performed in the third argument of the line procedure call.

Exercise:

Draw discs at the ends of each line. The radius of discs should be 10 pixels.

This program draws, again, an upside-down triangle consisting of spaced lines exhibiting a slight moire effect.
[Run the program]

Exercises:

1. What happens when you change the second argument (the number 100) of the line procedure call? Try out values 400, 200, 0, and 500.

2. What happens when you change the fourth argument of the line procedure call? Try out various values in the range from 0 to 700.

3. Change the program so that the triangle of lines is displayed upside-down.

    line(x, 650, 450, 100);