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 the second argument in the disc statement. What effect will this have?

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

3. Rename the variable y to x in both places. What difference will that make? Verify your answer by clicking on the box below.

After solving an exercise, it is recommended that you always examine the provided solution.

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

The disc statement has an optional fourth argument: color. If omitted, the disc is painted in the current global foreground color, which is initially white.

Note: In each of the exercises, make sure to include any changes made in the previous exercises, as each exercise builds upon the previous ones. When you have completed an exercise, always run the program to see the results.

Exercises:

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

   Solution

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

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

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

4. Insert this statement at the beginning of the loop's body: fillScr(/violet);

5. Change the println statement in the for loop to also print the value of variable i in each iteration.

    println "One iteration executed, ", i;

The line procedure draws a line. It can accept five arguments: line(x₁, y₁, x₂, y₂, color)

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

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

Exercises

1. Modify the second call of procedure disc to draw at coordinates (555, 444).

2. Modify the call of procedure line so that it connects the two 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 /// . This type of 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. Add a line connecting the fourth disc and the bottom point of the other lines.

line(480, 200, 350, 440);

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

An unusual pattern should be slightly visible, especially near the bottom of the triangle. This pattern is called moiré (moo-ah-rei).
[Run the program]

Experiment with different step values (the number 9) in the for loop to see how they affect the moire pattern. Try values like 3, 4, 6, or 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 point of the triangle.

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

2. Change the step of the loop to 30.

3. Inside the body of the for loop, add a red disc of radius 15 at the top end of each line.

    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);