Основы построения графиков, иллюзий пространственных изображений и движения объектов
методическая разработка по информатике и икт по теме

Компьютерная графика: основы построения графиков, иллюзий пространственных изображений и движения объектов.

По программе Босовой Л. Л. в 6-ом классе предусмотрены дополнительные практические работы по теме «Алгоритмика» - это создания программок с использованием графических исполнителей средствами QBasic. Многим 6-классникам это понравилось, поэтому в 7 классе в продолжении этой темы и во имя поддержания интереса был организован кружок. На кружке мы стали дальше изучать компьютерную графику, затем расширили список, изучаемых тем: линейные алгоритмы, ветвление, циклы. Например, создавая программы, мы делали упор на математическое моделирования задачи, изучая ветвление, ребятам нравилось создавать тесты и анкеты и т.д.  В последние время стали также применять для составления алгоритмов язык программирования Turbo Pascal. Изучение нескольких языков одновременно позволяет с самого начала рассматривать язык программирования – как средство реализации алгоритма. Ученик больше думает о самом алгоритме. Учащиеся 6-7 класса легче осваивают и проще воспринимают несколько языков сразу. Сейчас в нашей школе есть кружок в 7-ом и 8-ом классе, а в 9-ом классе элективный курс по этой тематике.

В этой статье я хочу рассказать о темах компьютерной графики, которые мы изучали в 8-10 классе: основы построения графиков, иллюзий пространственных  изображений и движения объектов средствами QBasic (Turbo Pascal).

1.Построение графиков функций.

Построение графиков функций осуществляется с помощью цикла, телом которого является строка с оператором PSET (обычно) строящая функцию: PSET (x,y(x)).

Общая запись:

а) PSET (x*n+320,Y(X)*m+130)

n,m – увеличение по осям функции

320,130- сдвиг к центру экрана функции при разрешении 640х260

* В некоторых версиях координаты нужно записывать под INT (округлять).

б)  FOR x=k1 то k2 STEP V

k1, k2- интервал функции (на экране)

V- шаг построения функции (быстрота).

Примечание: особенности шага функций V заключается в том, что маленький шаг (дробный от 0,01 до 0,05) часто позволяет строить функцию непрерывно, т. е. не из отдельных точек. Большой шаг (более 0,05 и даже 0,1) позволяет быстрее вычерчивать функцию, зато график будет состоять из отдельных точек. Таким образом приходиться подбирать шаг V на практике и выбирать остальные параметры.

Построение графиков можно производить для демонстрации различных математических функций, с ограниченной областью определения, графики физических процессов и т. д. (см. ниже).

Пример программ:

а) «Демонстрация нескольких тригонометрических функций».

10 SCREEN 12

20 LINE (0, 240)-(640, 240)

30 LINE (320, 0)-(320, 520)

40 FOR x = 20 TO 0 STEP -.01

50 PSET (-x * 50 + 320, SIN(x) * 50 + 240), 4

60 PSET (x * 50 + 320, -SIN(x) * 50 + 240), 4

70 PSET (-x * 50 + 320, -SIN(x) * 50 + 240), 4

80 PSET (x * 50 + 320, SIN(x) * 50 + 240), 4

90 PSET (-x * 50 + 320, SIN(x + x) * 50 + 240), 14

100 PSET (x * 50 + 320, -SIN(x + x) * 50 + 240), 14

110 PSET (x * 50 + 320, SIN(x + x) * 50 + 240), 14

120 PSET (-x * 50 + 320, -SIN(x + x) * 50 + 240), 14

130 PSET (-x * 100 + 320, COS(x) * 100 + 240), 2

140 PSET (x * 100 + 320, -COS(x) * 100 + 240), 2

150 FOR i = 1 TO 700

160 NEXT i

170 PSET (x * 30 + 508, COS(x) * 200 + 240), 1

180 PSET (-x * 30 + 132, COS(x) * 200 + 240), 1

182 PSET (x * 30 + 508, SIN(x - 3.14 / 2) * 200 + 240), 1

183 PSET (-x * 30 + 132, SIN(x - 3.14 / 2) * 200 + 240), 1

190 NEXT x

200 GOTO 50 ‘выход из программы, если ещё не рассмотрен выход из примера б

б) «Сложная функция».

SCREEN 12

LINE (0, 240)-(640, 240), 15

LINE (320, 0)-(320, 480), 15

FOR x = -10 TO 10 STEP .001

 IF x <> 1 THEN

  y = (4 * x ^ 3) / (x ^ 3 - 1)

  PSET (x * 20 + 320, y * 20 + 240), 15

 END IF

NEXT

DO WHILE INKEY$ = ""

LOOP

г) «График i=Im sin(ω0 t +γ)  при Im =5A; ω0=100 π,γ=».

[i=5sin (100πt+) или i=5sin (314t+1.57)]

*по оси y-i , по x-t

SCREEN 12

LINE (0, 240)-(640, 240), 15

LINE (320, 0)-(320, 480), 15

FOR t = -10 TO 10 STEP .005

PSET (t * 20 + 320, (5 * SIN(314 * t + 1.57)) * 15 + 240), 15

NEXT t

DO WHILE INKEY$ = ""

LOOP

2. Построения статистических графиков.

Под статистическими графиками в данном случае понимается линия (чаще ломанная), которая показывает зависимость одной величины от другой, как и функция. В отличии от  обычной математической функции для этой зависимости нельзя чётко записать математическую пропорциональность в виде y=f(x). Таким образом, эта линия показывает статистические показания в наглядном виде.

Пример: «График-диаграмма температур» (без оформления).

DIM A(30)

DATA 1,-3,5,7,9,11,13,15,17,19,21,20,18,16,30

DATA 14,12,10,10,12,14,16,18,20,22,20,18,16,14,15,19

FOR I = I TO 30

READ A(I)

NEXT I

SCREEN 12

LINE (2, 0)-(2, 480)

LINE (2, 240)-(640, 240)

PSET (2, 130)

FOR I = 1 TO 30

LINE -(2 + 20 * I, 2 + 240 - 5 * A(I)) ‘*

PSET (2 + 20 * I, 2 + 240 - 5 * A(I))

NEXT I

DO WHILE INKEY$ = ""

LOOP

Примечание:

а) 20 и 5 – это увеличения!

б) * - соединительная линия, в которой 240-5*A(I) означает, что сдвинуть надо график к центру экрана и перевернуть

3.Движение графических объектов

Общее таких алгоритмов - цикл, телом, которого является объект построенный операторами графики сначала в заданный цвет, а затем в цвет фона экрана. За счет этого создается  иллюзия движения.

Примечание:

а) скорость движения подбирается величиной шага – STEP

б) цикл «движения» помещается в конце программы, которая строит рисунок, чертеж и т.д.

Блок-схема таких алгоритмов может выглядеть примерно так:

Основная программа

Вычерчив объекта (в цвет фона)

Вычерчив

 объекта

?

END

Примеры программ:

 а) «Движение точки».

SCREEN 2

20 FOR X = 1 TO 640

PSET (X, 130)

FOR i = 1 TO 10000 ‘*

NEXT i

PSET (X, 130), 0 '1

NEXT X

DO WHILE INKEY$ = ""

LOOP

Примечание: * - цикл  задержки (подбирается), в строке PSET (X, 130), 0 '1 в зависимости от цвета точка будет двигаться или будет происходить рисование линии.

б) «Движение прямоугольника по периметру экрана».

SCREEN 12

FOR X = 900 TO 1 STEP -10

LINE (X - 20, 1)-(X, 30), 8, BF

FOR i = 1 TO 30000

NEXT i

LINE (X - 10, 1)-(X, 30), 0, BF

NEXT X

FOR Y = 1 TO 480 STEP 10

LINE (1, Y)-(20, Y + 20), 8, BF

FOR i = 1 TO 30000

NEXT i

LINE (1, Y)-(20, Y + 10), 0, BF

NEXT Y

DO WHILE INKEY$ = ""

LOOP

4.Построение иллюзий пространственных изображений.

В основе иллюзий пространственных изображений лежит сдвиг по оси, или другой прямой, или вращение вокруг центра, или прямой какого-нибудь объекта.

Объектом обычно является фигура построенная операторами графики. (Может быть простая – построенная просто оператором LINE или CIRCLE например, а может быть и более сложная комбинация).

При сдвигах и вращении снова используются циклы. При вращении используется тот же принцип, что и при вращении движения точки по окружности.

Напомним:

Принцип (как и при движении по окружности) математический:

                      cos d – абсцисса (.) ед. окружности

                      sin d – ордината (.) ед. окружности.

PSET (cos(x)*n+320,sin(x)*m+130)  

CIRCLE(cos(x)n+320,sin(x)*m+130),R,C1,A,B,C»

Пример: «Вращение окружности вокруг центра (КАЛАЧ)».

SCREEN 12

20 FOR x=0 TO 2*3.14  STEP 0.3

CIRCLE (cos(x) *120+320,sin(x)*50+130),50,8,,,0.5

NEXT X

50 GOTO 20

Зачем  нужно   уметь работать в QBasic?

Алгоритмы в QBasic – это достаточно несложные по записи алгоритмы для 5-7 классов, по сравнению с другими  языками программирования, с другой стороны это полноценный язык программирования. Считаю, что с него можно начинать программировать, важным моментом является то, что поле для творчества учащихся огромное и особенно в графике. Ученики осваивают компьютерную графику и одновременно основные базовые алгоритмические структуры, а затем можно перейти к более серьезным алгоритмам и другим языкам.  

Приложения (работы, сделанные на уроках):

Примеры программ на Qbasic.

1. «Поймай шары»

1 SCREEN 12

2 PRINT "SPEED? (2000 - optimal)";

3 INPUT s

4 PRINT "HOW MUCH BALLS? (10-20 - optimal)"

12 INPUT e

13 CLS

14 c = 1

15 z = 15

16 x0 = 600

17 y0 = 40

18 CIRCLE (x0, y0), 10, z, 0, 6.2, .7

19 PAINT (x0, y0), z

20 FOR i = 1 TO e

30 x = INT(RND(1) * 10 + 1)

32 y = INT(RND(1) * 10 + 1)

40 x1 = x * 60

42 y1 = y * 40

45 IF i = 15 THEN i = 1

50 CIRCLE (x1, y1), 5, i

60 PAINT (x1, y1), i

70 CIRCLE (x0, y0), 5, z, 0, 6.2, .7

75 PAINT (x0, y0), z

76 y = c

80 DO UNTIL x0 = x1

90 IF x0 < x1 THEN GOSUB 1000 ELSE IF x0 > x1 THEN GOSUB 2000

95 FOR t = 1 TO s

96 NEXT t

100 LOOP

110 y = c

111 CLS

112 CIRCLE (x1, y1), 5, i

113 PAINT (x1, y1), i

140 DO UNTIL y0 = y1

150 IF y0 < y1 THEN GOSUB 3000 ELSE IF y0 > y1 THEN GOSUB 4000

185 FOR t = 1 TO s

186 NEXT t

190 LOOP

191 CLS

192 CIRCLE (x1, y1), 5, i

193 PAINT (x1, y1), i

200 z = i

210 c = c + 1

500 NEXT i

510 CLS

520 CIRCLE (300, 200), 150, z

530 PAINT (300, 200), z

540 LINE (200, 130)-(260, 130)

541 LINE (200, 130)-(215, 160)

542 LINE (260, 130)-(275, 160)

543 LINE (275, 160)-(215, 160)

544 LINE (400, 130)-(340, 130)

545 LINE (400, 130)-(385, 160)

546 LINE (340, 130)-(325, 160)

547 LINE (325, 160)-(385, 160)

548 PAINT (205, 135), z + 1, 15

549 PAINT (395, 135), z + 1, 15

550 FOR i = 250 TO 300

555 CIRCLE (300, i), 50, z + 1, 3.1, 6.2, .7

560 NEXT i

600 END

1000 IF y = 0 THEN GOSUB 6000

1010 x0 = x0 + 1

1030 CIRCLE (x0, y0), 10, z, 0, 6.2, .7

1040 PAINT (x0, y0), z

1042 PSET (x0 + 3, y0 + 3), z + 1

1044 PSET (x0 + 3, y0 - 3), z + 1

1050 IF y > 0 THEN y = y - 1

1100 RETURN

1500 STOP

2000 IF y = 0 THEN GOSUB 7000

2010 x0 = x0 - 1

2030 CIRCLE (x0, y0), 10, z, 0, 6.2, .7

2040 PAINT (x0, y0), z

2042 PSET (x0 - 3, y0 + 3), z + 1

2044 PSET (x0 - 3, y0 - 3), z + 1

2050 IF y > 0 THEN y = y - 1

2100 RETURN

2500 STOP

3000 IF y = 0 THEN GOSUB 8000

3010 y0 = y0 + 1

3020 CIRCLE (x0, y0), 10, z, 0, 6.2, 1.4

3030 PAINT (x0, y0), z

3042 PSET (x0 + 3, y0 + 3), z + 1

3044 PSET (x0 - 3, y0 + 3), z + 1

3040 IF y > 0 THEN y = y - 1

3100 RETURN

3500 STOP

4000 IF y = 0 THEN GOSUB 9000

4010 y0 = y0 - 1

4020 CIRCLE (x0, y0), 10, z, 0, 6.2, 1.4

4030 PAINT (x0, y0), z

4042 PSET (x0 + 3, y0 - 3), z + 1

4044 PSET (x0 - 3, y0 - 3), z + 1

4040 IF y > 0 THEN y = y - 1

4100 RETURN

4500 STOP

6000 CIRCLE (x0 - c - 10, y0), 10, 0, 0, 6.2, .7

6010 PAINT (x0 - c - 10, y0), 0

6014 CIRCLE (x0 - c, y0), 10, z, 0, 6.2, .7

6015 PAINT (x0 - c, y0), z

6020 RETURN

6500 STOP

7000 CIRCLE (x0 + c + 10, y0), 10, 0, 0, 6.2, .7

7010 PAINT (x0 + c + 10, y0), 0

7014 CIRCLE (x0 + c, y0), 10, z, 0, 6.2, .7

7015 PAINT (x0 + c, y0), z

7020 RETURN

7500 STOP

8000 CIRCLE (x0, y0 - c - 10), 10, 0, 0, 6.2, 1.4

8010 PAINT (x0, y0 - c - 10), 0

8014 CIRCLE (x0, y0 - c), 10, z, 0, 6.2, 1.4

8015 PAINT (x0, y0 - c), z

8020 RETURN

8500 STOP

9000 CIRCLE (x0, y0 + c + 10), 10, 0, 0, 6.2, 1.4

9010 PAINT (x0, y0 + c + 10), 0

9014 CIRCLE (x0, y0 + c), 10, z, 0, 6.2, 1.4

9015 PAINT (x0, y0 + c), z

9020 RETURN

9500 STOP

2. «Космические фантазии» (усовершенствованный «КАЛАЧ»)

10 SCREEN 12

20 FOR x = 0 TO 10 * 3.14 STEP .3

30 CIRCLE (COS(x) * 120 + 340, SIN(x) * 50 + 130), 50, 9, , , .5

40 NEXT x

50 FOR x = 0 TO 10 * 3.14 STEP .2

60 CIRCLE (COS(x) * 120 + 340, SIN(x) * 50 + 130), 50, 12, , , .5

70 NEXT x

215 FOR x = 0 TO 2 * 3.14 STEP .5

315 PSET (COS(x) * 200 + 320, SIN(x) * 50 + 210), 10

415 NEXT x

515 FOR y = 0 TO 2 * 3.14 STEP .5

615 PSET (COS(y) * 200 + 320, SIN(y) * 50 + 210), 1

715 NEXT y

800 FOR x = 0 TO 2 * 3.14 STEP .5

900 PSET (COS(x) * 200 + 120, SIN(x) * 50 + 110), 10

1000 NEXT x

1100 FOR y = 0 TO 2 * 3.14 STEP .5

1200 PSET (COS(y) * 200 + 120, SIN(y) * 50 + 110), 5

1300 NEXT y

1400 FOR x = 0 TO 2 * 3.14 STEP .5

1500 PSET (COS(x) * 200 + 250, SIN(x) * 50 + 150), 10

1600 NEXT x

1700 FOR y = 0 TO 2 * 3.14 STEP .5

1800 PSET (COS(y) * 200 + 250, SIN(y) * 50 + 150), 5

1900 NEXT y

2000 FOR x = 0 TO 2 * 3.14 STEP .5

2100 PSET (COS(x) * 250 + 250, SIN(x) * 50 + 250), 10

2200 NEXT x

2300 FOR y = 0 TO 2 * 3.14 STEP .5

2400 PSET (COS(y) * 250 + 250, SIN(y) * 50 + 250), 5

2500 NEXT y

2600 FOR x = 0 TO 2 * 3.14 STEP .5

2700 PSET (COS(x) * 300 + 250, SIN(x) * 50 + 300), 10

2800 NEXT x

2900 FOR y = 0 TO 2 * 3.14 STEP .5

3000 PSET (COS(y) * 300 + 250, SIN(y) * 50 + 300), 5

3100 NEXT y

3200 FOR x = 0 TO 2 * 3.14 STEP .5

3300 PSET (COS(x) * 600 + 250, SIN(x) * 50 + 300), 10

3400 NEXT x

3500 FOR y = 0 TO 2 * 3.14 STEP .5

3600 PSET (COS(y) * 660 + 250, SIN(y) * 50 + 300), 5

3700 NEXT y

3800 FOR x = 0 TO 2 * 3.14 STEP .5

3900 PSET (COS(x) * 300 + 250, SIN(x) * 50 + 400), 10

4000 NEXT x

4100 FOR y = 0 TO 2 * 3.14 STEP .5

4200 PSET (COS(y) * 300 + 250, SIN(y) * 50 + 400), 5

4300 NEXT y

4400 FOR x = 0 TO 2 * 3.14 STEP .5

4500 PSET (COS(x) * 400 + 500, SIN(x) * 50 + 70), 10

4600 NEXT x

4700 FOR y = 0 TO 2 * 3.14 STEP .5

4800 PSET (COS(y) * 400 + 500, SIN(y) * 50 + 70), 5

4900 NEXT y

10000 GOTO 10

3. «На море»

10 CLS

20 SCREEN 12

30 LINE (0, 0)-(640, 218), 11, BF    'небо

40 LINE (0, 218)-(640, 480), 9, BF   'море

50 FOR y = -37.68 TO 37.68 STEP .005

60 FOR u = 233 TO 480 STEP 20                 'волны

70 PSET (y * 10 + 320, SIN(y) * 10 + u), RND(3)

80 FOR I = 1 TO 10

90 NEXT I

100 NEXT u

110 NEXT y

120 FOR Q = 1 TO 15

130 CIRCLE (80, 75), 5 * Q, 12

140 NEXT Q

150 FOR w = 6 TO 80 STEP 10

160 PAINT (w + 1, 75), 14, 12

170 FOR e = 1 TO 1000000

180 NEXT e

190 NEXT w

200 FOR r = 11 TO 85 STEP 10

210 PAINT (w, 75), 12, 12

220 FOR t = 1 TO 100

230 NEXT t

240 NEXT r

250 PAINT (80, 75), 12               'солнце

260 FOR g = 550 TO 110 STEP -3

270 PSET (g, 290), 8

280 DRAW "f60; r150; e60; l270;"

290 PAINT (g + 60, 320), 7, 8

300 PSET (g + 134, 290), 6

310 DRAW "u70; r2; d70; l2;"

320 PAINT (g + 135, 231), 6

330 PSET (g + 136, 230), 12

340 DRAW "d20; r50; h10; e10; l50;"

350 PAINT (g + 140, 231), 12

360 FOR j = 1 TO 100000

370 NEXT j

380 PAINT (g + 60, 320), 9

390 PAINT (g + 135, 231), 9

400 PAINT (g + 140, 231), 9

410 NEXT g

420 PSET (110, 290), 8

430 DRAW "f60; r150; e60; l270;"

440 PAINT (170, 320), 7, 8

450 PSET (244, 290), 6

460 DRAW "u70; r2; d70; l2;"

470 PAINT (245, 231), 6

480 PSET (246, 230), 12

490 DRAW "d20; r50; h10; e10; l50;"

500 PAINT (250, 231), 12

510 FOR y = 6.28 TO 37.68 STEP .005

520 FOR u = 233 TO 480 STEP 20                 'волны

530 PSET (y * 10 + 320, SIN(y) * 10 + u), RND(3)

540 FOR I = 1 TO 10

550 NEXT I

560 NEXT u

570 NEXT y

580 FOR p = 20 TO 150 STEP 30

590 FOR o = 200 TO 630 STEP 10

600 PSET (o, p), 0

610 DRAW "f30; e30; l4; g26; h26; l4;"

620 PAINT (o + 3, p + 2), 0

630 FOR a = 1 TO 100000

640 NEXT a

650 PAINT (o + 3, p + 2), 11

660 NEXT o

670 NEXT p

680 FOR s = 630 TO 200 STEP -30

690 FOR d = 150 TO 20 STEP -15

700 PSET (s, d), 0

710 DRAW "f30; e30; l4; g26; h26; l4;"

720 PAINT (s + 3, d + 2), 0

730 FOR f = 1 TO 100000

740 NEXT f

750 PAINT (s + 2, d + 1), 11

760 NEXT d

770 NEXT s

780 PSET (220, 20), 0

790 DRAW "f30; e30; l4; g26; h26; l4;"

800 PAINT (223, 22), 0

810 PSET (280, 50), 0

820 DRAW "f30; e30; l4; g26; h26; l4;"

830 PAINT (283, 52), 0

Примеры программ на Turbo Pascal.

1.«Сетка».

program grafic;

   uses Graph,Crt;

   var Gd,Gm,i,j:Integer;

   var x,k:real;

   begin

    Gd := Detect;

    InitGraph(Gd, Gm, ' ');

    if GraphResult <> grOk then Halt(1);

    {setbkcolor(15);

    setcolor(14);

    for i:=1 to 63 do

       line(i*10,0,i*10,480);

    for j:=1 to 47 do

       line(0,j*10,640,j*10);

    setcolor(5);

    line(320,0,320,480);

    line(0,240,640,240);}

    setbkcolor(1);

    setcolor(2);

    k:=0;

    repeat

     x:=-6.28;

     repeat

      {if x=-6.28 then moveto(round(x*50+280+k*4),round(-sin(x)*150+300-k*3))

             else} circle(round(x*50+280+k*10),round(-sin(x)*150+300-k*3),5);

         x:=x+0.05;

     until x>=6.28;

     k:=k+1;

     until k>30;

    readln;

    CloseGraph;

  end.

2.«Идёт снег»

program Graf4;

  uses Graph,Crt;

  label 1;

  var x:array[1..500] of integer; y:array[1..500] of integer; r:array[1..500] of integer;

      Gd,Gm:Integer;

      j,i:Integer;

      c:word;

  begin

    Gd := Detect;

    InitGraph(Gd, Gm, ' ');

    if GraphResult <> grOk then Halt(1);

    setbkcolor(1);

    randomize;

    Setfillstyle(15,15);

    pieslice(100,480,20,160,50);

    pieslice(150,480,20,160,50);

    Bar(0,480,640,460);

    1: for j:=1 to 100 do begin

         setfillstyle(1,15);

         setcolor(15);

    for i:=1 to 500 do begin

         {c:=random(16);}

         x[i]:=random(640);

         y[i]:=random(440);

         r[i]:=random(5);

         pieslice(x[i],y[i],10,120,r[i]);

         end;

         delay(1000);

         Setfillstyle(1,1);

         setcolor(1);

         for i:=1 to 500 do

         begin

         pieslice(x[i],y[i],10,120,r[i]);

         end;

         for i:=1 to 500 do begin

         x[i]:=x[i]+1;

         y[i]:=y[i]+2;

         end;

         end;

         goto 1;

    readln;

    CloseGraph;

  end.

Курилов Игорь Анатольевич, учитель информатики

МБОУ СОШ №9 г.Нерчинска Забайкальского края