Simple Graphics

This program draws multiple white circles. Each circle has a radius of 20.

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

Exercise:

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. Try to correct it.

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

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

Inside an expression, a forward slash symbol signifies a division operation. Therefore, 20 /darkorange means: 20 divided by 'darkorange'.

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

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

After correcting the error and running the program, add a statement println "x: ", x; just above the disc statement. Then try out the new 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.

After running and examining the program, add a statement println "x: ", x; just above the disc statement. Then try out the new program.

Exercise:

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

Run this demonstrational program first.

The source code of demonstrational programs uses programming concepts that are not immediately explained.

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 disc function 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 text after symbols << is called a comment. Comments are ignored by the computer.

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

Exercise 1:

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

Exercise 2:

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.

Exercise 3:

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

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

The optional fourth argument of the disc function is color. The color can be ommited from the disc function call, in which case the disc is painted in the default foreground color, which is white.

Exercises:

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

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

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

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

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

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

The line function draws a line.

The line function 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 function disc, and one call of function line. A function call causes an execution of the function.

Exercises

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

2. After that, modify the call of function line so that the line connects both discs.

This program draws three discs and one line.

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.

Exercise

Draw a line connecting the fourth disc and 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 visible. This pattern is called moire (moo-ah-rei).

After running 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 function has the form:
linep( [pointA], [pointB] )

Exercises:

The disc function 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, add only one new statemet, above the sleepMs statement. The coordinates of disc centers are (i, 100).

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

This program draws a red disc and a row of yellow discs. Run the program. [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, add only one line function call, for example above the sleepMs statement. The line function 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.

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

This program draws two lines of discs simultaneously. The discs are 50 pixels apart.

Exercise:

Draw lines connecting centers of disc pairs.

If you cannot solve this exercise because it is too hard, 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.

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

Exercise:

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

Run the program.

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

What happens when you change the fourth argument of the line function call? Try out various values in the range 0 - 700.

Exercise:

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

    line(x, 650, 450, 100);