Уроки 65–67 · 3 урока · Н. И. Тайлаков (общий редактор), А. Б. Ахмедов, М. Д. Пардаева, А. А. Абдуганиев, У. М. Мирсанов. Информатика и информационные технологии, 10 класс, 1-е издание. «Extremum-Press», Ташкент, 2017
65
Примеры графических и анимационных приложений
Учебник: с. 149–153
ЦельРисует плавный переход цвета с помощью Pixels и создаёт анимацию прыгающего мяча с Timer: вычисляет координаты, скорость (dx, dy) и отскок от стены.
Новые слова
плавный переход цвета: цвета, постепенно изменяющиеся от одного к другому · rang o‘tishiанимация: впечатление движения, создаваемое перерисовкой картинки маленькими шагами · animatsiyaнаправление (dx, dy): изменение x и y на каждом шаге · yo‘nalish (dx, dy)отскок: изменение знака dx или dy на противоположный у стены · qaytish
Объяснение
С помощью Pixels каждой точке можно задать цвет отдельно. В приложении «Плавный переход цвета» Image размером 256×100 заполняется двумя циклами: for i := 0 to 255 do for j := 0 to 99 do Image1.Canvas.Pixels[i, j] := RGB(i, 0, 255 - i); – слева направо количество красного растёт, а синего убывает: левый край синий (0, 0, 255), середина фиолетовая (127, 0, 128), а правый край красный (255, 0, 0). Всего рисуется 256·100 = 25600 точек. Анимация – это перерисовка картинки маленькими шагами: Timer (Interval = 50, то есть 20 кадров в секунду) каждый раз стирает старый мяч белым цветом, перемещает центр из (x, y) в (x + dx, y + dy) и рисует новый. У стены направление меняется на противоположное: если x выходит за левую или правую границу, dx := -dx; если y выходит за верхнюю или нижнюю границу, dy := -dy. x, y, dx, dy – глобальные переменные, и начальные значения они получают в OnCreate.
Примеры
Мяч: глобально 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); Эти строки находятся в одной процедуре и выполняются одна за другой при каждом срабатывании Timer.
Вычисление: Image имеет ширину 300, радиус мяча – 10, а dx = 4. От x = 10 до правого предела 300–10 = 290 – 280 пикселей; 280/4 = 70 шагов, 70·50 мс = 3500 мс = 3,5 с. Скорость равна 4 пикселя / 50 мс = 80 пикселей/с. В сером переходе RGB(i, i, i): i = 0 даёт чёрный, i = 255 – белый, а i = 128 – серый.
Работа в классе
«Скорость мяча»: группа изменяет dx, dy и Interval, заранее вычисляет скорость мяча (пикселей/с) и проверяет её секундомером.
Упражнения
1
Какого цвета точка при i = 255 в RGB(i, 0, 255 - i)?
Красного
2
Сколько точек в картинке 256×100?
25600
3
При dx = 5 и Interval = 50 на сколько пикселей мяч смещается по горизонтали за одну секунду?
100
4
Почему dx := -dx; у стены заставляет мяч отскочить назад?
Знак шага меняется: если x рос, теперь он уменьшается.