Четверг, 14.11.2019, 23:03
Главная | Регистрация | Вход Приветствую Вас Гость | RSS


Меню сайта


Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Тестування онлайн
тестування онлайн 


Социальные закладк

Движение. Упражнения

Пример 1. Создание кода прорисовки системы колец.

Вариант1.

void setup()

{

 size (400, 400);

 frameRate(1);

}

 

void draw()

{

  background(255);

  float m = 300;

  stroke(5);

 

// цикл до тех пор, пока значение m  - true

  while(m > 0)

{

 // Выберите случайный цвет из нашей палитры

    fill(random(255),random(255),random(255));

 

 ellipse(width/2,height/2,m,m);

 

    m  = m - 20;

 

  }

}

Вариант2.

size (400, 400);

  background(255);

  float m = 300;

  stroke(5);

  int x=(width/2);

  int y=(width/2);

       // цикл до тех пор, пока значение m  - true

  while(m > 0)

{

      // Выберите случайный цвет из нашей палитры

    fill(random(255),random(255),random(255));

 

    // ellipse(width/2,height/2,m,m);

ellipse(x,y,m,m);

    m  = m - 20;

println("x=   ",x,"   y=  ", y, "    m=   ",m);

 

  }

Задание. Установить отличие в работе кода вариантов.

Движение

Иллюзия движения на экране создается с помощью последовательности неподвижных изображений, сменяющих друг друга. Каждое изображение имеет небольшое отличие от другого. Эффект анимации достигается из-за инерционности зрения. Наш мозг воспринимает последовательность похожих изображений как движение.

Частота кадров

Processing “прокручивает” код в блоке draw()  60 раз в секунду для создания плавного движения. Переменная frameRate контролирует скорость выполнения программы.

ПРИМЕЧАНИЕ: Processing запускает код 60 раз в секунду, но если для запуска блока draw() требуется больше времени, чем 1/60 секунды, частота кадров снизится. Функция frameRate() определяет максимальную частоту кадров, но реальная частота кадров зависит от компьютера, на котором запущена ваша программа.

Скорость и направление

Для написания примеров кода с плавным движением мы используем тип данных float. Этот тип переменной сохраняет данные с дробной частью, что обеспечивает более высокое разрешение для работы с движением.

Например, когда мы используем:

  • тип int, самая маленькое расстояние, на которое может сместиться объект за один кадр, это один пиксель (1, 2, 3, 4,.),
  • но с типом float вы можете передвигать объекты на любое растояние (1.01, 1.01, 1.02, 1.03,.).

Пример1.  Передвигаем фигуру

В следующем примере значение переменной x возрастает и фигура перемещается слева направо:

PS! функция arc() имеет 6  параметров:

  • первый и второй параметр устанавливают положение,
  • третий и четвертый - определяют ширину и высоту,
  • пятый параметр устанавливает угол начала дуги, (в радианах по умолчанию) по часовой стрелке
  • шестой устанавливает конец дуги.

В процессинге заполнение фигур происходит по умолчанию, даже для незамкнутых фигур

int r = 40;// для запоминания значения ширины/высоты

float x = -r;//для хранения значения координаты

float z = 0.5;//шаг изменения значения координаты х от кадра к кадру

void setup() {

size(240, 120);

smooth();

ellipseMode(RADIUS);/* (х,у) -   центр эллипса (режим по умолчанию), ширина и высота – радиусы, а не диаметры */

}

void draw() {

background(0);

x += z; // Увеличить значение х

arc(x, 60, r, r, 0.52, 5.76);//рисуем часть эллипса

}

ellipse(x,y,width,height)

ellipseMode() меняет интерпритацию параметров эллипса.

Когда вы запустите этот код, вы заметите, что фигура выходит за правую границу окна, когда значение переменной x превышает его ширину.

Величина x по-прежнему растет, но фигура уже не видна.

Пример 2. Разворот

Существует множество альтернативных вариантов примера 2, вы можете реализовать их в соответствии с вашими предпочтениями. Для начала мы попробуем усовершенствовать код так, чтобы фигура возвращалась к левому краю окна после ухода за правый край. Здесь окно представляется как развернутый цилиндр, вокруг которого вращается фигура:

int r = 40;

float x = -r;

float z = 0.5;

void setup() {

size(240, 120);

smooth();

ellipseMode(RADIUS);

}

void draw() {

background(0);

x += z; // Увеличение x

if (x > width+r) { // Если фигура вышла за край окна,

x = -r; // она возвращается к левому краю

}

arc(x, 60, r, r, 0.52, 5.76);

println("x =    ", x);

}

В каждом блоке draw() код сравнивает величину x с шириной экрана (плюс радиус фигуры). Если она больше, x присваивается отрицательное значение и фигура продолжает перемещаться слева направо от левой границы окна.

Пример 3.  Фигура отскакивает от стенки 

В это примере, вместо возврата фигуры к левому краю, мы добавим к примеру 2 возможность изменять направление движения фигуры по достижении края окна. Для этого мы объявим переменную, в которую запишем направление движения. Фигура движется вправо при значении 1, влево - при значении -1:

int r = 40;

float x = 110;

float z = 0.5;

int direction = 1;

void setup() {

size(240, 120);

smooth();

ellipseMode(RADIUS);

}

void draw() {

background(0);

x += z * direction;

if ((x > width-r) || (x < r)) {

direction = - direction; // Flip direction }

if (direction == 1) {

arc(x, 60, r, r, 0.52, 5.76); // Фигура смотрит вправо

} else {

arc(x, 60, r, r, 3.67, 8.9); // Фигура смотрит влево

}

}

Когда фигура достигает края, код изменяет знак переменной direction, изменяя направление движения. Например, если к моменту достижения границы значение переменной было положительно, код меняет его на отрицательное.

Форма входа
Поиск
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Рейтинг@Mail.ru
    Copyright MyCorp © 2019
    Конструктор сайтов - uCoz