☰ Contents · Computing

Graphics, animation and the final test

Lessons 65–67 · 3 lessons · N. I. Taylaqov (general editor), A. B. Akhmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatics and Information Technologies, Grade 10, 1st edition. “Extremum-Press”, Tashkent, 2017
65

Examples of graphic and animated applications

Textbook: pp. 149–153
GoalDraws a colour fade with Pixels and creates a bouncing-ball animation with a Timer: calculates coordinates, speed (dx, dy) and bouncing off a wall.
New words
colour fade: colours that change step by step from one to another · rang o‘tishianimation: the impression of motion made by redrawing a picture at small steps · animatsiyadirection (dx, dy): the change of x and y at each step · yo‘nalish (dx, dy)bounce: reversing the sign of dx or dy at a wall · qaytish
Explanation

With Pixels each dot can be given a colour separately. In the “colour fade” application a 256×100 Image is filled with two loops: for i := 0 to 255 do for j := 0 to 99 do Image1.Canvas.Pixels[i, j] := RGB(i, 0, 255 - i); – from left to right the amount of red grows and the amount of blue falls: the left edge is blue (0, 0, 255), the middle purple (127, 0, 128) and the right edge red (255, 0, 0). In all 256·100 = 25600 dots are drawn. Animation is redrawing the picture in small steps: the Timer (Interval = 50, that is 20 frames a second) each time erases the old ball with white, moves the centre from (x, y) to (x + dx, y + dy) and draws the new one. At a wall the direction is reversed: if x goes beyond the left or right border, dx := -dx; if y goes beyond the upper or lower border, dy := -dy. x, y, dx, dy are global variables and receive their initial values in OnCreate.

Worked examples
A ball: global var x, y, dx, dy: Integer; OnCreate: x := 20; y := 20; dx := 4; dy := 3; Timer1Timer: Image1.Canvas.Brush.Color := clWhite; Image1.Canvas.Pen.Color := clWhite; Image1.Canvas.Ellipse(x-11, y-11, x+11, y+11); x := x + dx; y := y + dy; if (x < 10) or (x > Image1.Width - 10) then dx := -dx; if (y < 10) or (y > Image1.Height - 10) then dy := -dy; Image1.Canvas.Brush.Color := clRed; Image1.Canvas.Pen.Color := clRed; Image1.Canvas.Ellipse(x-10, y-10, x+10, y+10); These lines are inside one procedure and run one after another each time the Timer fires.
Calculation: the Image is 300 wide, the ball radius is 10 and dx = 4. From x = 10 to the right limit 300–10 = 290 is 280 pixels; 280/4 = 70 steps, 70·50 ms = 3500 ms = 3.5 s. The speed is 4 pixels / 50 ms = 80 pixels/s. In a grey fade RGB(i, i, i): i = 0 gives black, i = 255 white and i = 128 grey.
Class activity

“The speed of the ball”: a group changes dx, dy and Interval, calculates the speed of the ball (pixels/s) in advance and checks it with a stopwatch.

Practice
1
Which colour is the point with i = 255 in RGB(i, 0, 255 - i)?
2
How many dots are in a 256×100 picture?
3
With dx = 5 and Interval = 50, how many pixels does the ball move horizontally in one second?
4
Why does dx := -dx; at a wall make the ball bounce back?