Simple Graphics

This program draws multiple white circles. The circles have a radius of 15.
[Run the program]

The circle procedure is used to draw circles. Its form is:
circle(x, y, radius)

Exercises:

1. Change the radius to 25 in the first row of circles.
   [Run the program]

2. Change the radius to 30 in the second row of circles.

The given program contains an error.

The error report may not be very helpful, as the automatic verifier can't always identify the exact problem.

Challenging exercises are a crucial part of learning. They provide valuable learning experiences, even if they're difficult.

Exercise:

1. Try to correct the error.

Inside an expression, a symbol / denotes division. Therefore, 20 /darkorange means “20 divided by darkorange”, which does not make sense.

If the exercise is too challenging, it's okay to look at the solution. First, try to solve it on your own, and if needed, consider reading the hint for additional guidance.

    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 is -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. Increase the spacing between the discs.

After solving an exercise, it's a good idea to review it by comparing to the the provided solution.

Note that there may be multiple correct solutions, so the provided solution might not match exactly with your solution.

for #x=800..100 -=75

This program is for demonstration purposes only.
[Run the program]

Important:
Do not analyze this program in detail, as it contains features that will be explained later.

This program visualizes the screen's coordinate system.

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

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

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

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

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

Exercise 1:

Draw a yellow disc in the middle of the red discs. It should touch all four 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 program starts with a multiline comment, which begins with /* and ends with */. The computer ignores the contents of multiline comments.

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

Exercises:

1. Change the first argument (300) in the disc statement. Try several values between 0 and 700.

2. Swap over the first and second arguments in the disc statement. Can you guess what difference will it make?

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

3. Rename the variable y to x in both places. What difference will it 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.

   Solution

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

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

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

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

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 call of procedure line , 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 a triangle consisting of spaced lines exhibiting a slight moire effect.
[Run the program]

Exercises:

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

2. What happens when you change the second 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(450, 650, x, 100);