Simple Graphics [1/14]
Simple Graphics
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.
Solution
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.
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.
Solution
Append the following statement to the program:
disc(500, 400, 50, /yellow);
Exercise 2:
Draw a green disc touching the rightmost red disc from the right side.
Solution
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.
Answer
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.
2. Add a statement println "This program draws a growing disc"; just below the fillScr statement.
3. Move the println statement just above the disc drawing statement.
4. Move the fillScr statement just above the println statement.
5. Change the 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(x1, y1, x2, y2, 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.
After running the program, modify the second call of function disc so that the disc is drawn at coordinates (555, 444).
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.
Solution
line(300, 200, 300, 500);
Exercise 2
Draw a brown disc so that the discs form a square.
Solution
disc(600, 500, 20, /brown);
Exercise 3
Draw the remaining two sides of the square.
Solution
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.
Solution
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.
Exercise:
Draw an orange disc of radius 20 at the bottom tip of the triangle.
Solution
disc(450, 650, 20, /orange);
This program draws a red disc and a row of yellow discs. Run the program. [F8:Run]
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.
Hint 2
The coordinates of each line endpoint must be the same as coordinates of disc centers. Disc center coordinates are given in the program's source code.
Solution
Insert this statement above the sleepMs statement:
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.
Hint 1
Since the lines connect disc centers, the line function call has to use the same coordinates as the disc function calls.
Hint 2
The disc function has the form:
disc(x, y, radius, color)
The line function has the form:
line(x1, y1, x2, y2)
Solution
Just above the sleepMs statement, insert: line(i, 100, i, 700);
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.
Hint 1
Since the lines connect disc centers, disc function calls have to use the same coordinates as given in the the line function call.
Hint 2
The disc function has the form:
disc(x, y, radius)
The line function has the form:
line(x1, y1, x2, y2)
Solution
Just above the sleepMs statement, insert: disc(i, 100, 10); disc(960-i, 700, 10);
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 (i.e. the last argument) of the line function call? Try out various values in the range 0 - 700.
Exercise 1:
Change the program so that the triangle of lines is
displayed upside-down.
Solution
line(x, 650, 450, 100);
Exercise 2:
Move the orange disc to the peak of the triangle.
<< F2:Prev - - F4:Next >>