Cat hungry.png
Здравствуйте! Собираем деньги на перевод материалов по электронике(https://www.allaboutcircuits.com/education/). Реквизиты указаны здесь.

Processing:Примеры/Трансформация

Материал из Онлайн справочника
Перейти к: навигация, поиск


Перевод: Максим Кузьмин (Cubewriter)
Перевел 2686 статей для сайта.

Контакты:

Проверка/Оформление/Редактирование: Мякишев Е.А.


Ambox content.png Черновик


Описание[1]

Трансформация одной фигуры в другую при помощи интерполяции вершин.

Пример

  1. // Два объекта «ArrayLists» для хранения вершин двух фигур.
  2. // Для этого примера нужно, чтобы в обеих фигурах
  3. // было одинаковое количество вершин.
  4. // То есть оба объекта ArrayList должны быть одинакового размера.
  5. ArrayList<PVector> circle = new ArrayList<PVector>();
  6. ArrayList<PVector> square = new ArrayList<PVector>();
  7.  
  8. // Еще один ArrayList для третьего комплекта вершин,
  9. // который и будет нарисован на экране:
  10. ArrayList<PVector> morph = new ArrayList<PVector>();
  11.  
  12. // Эта булева переменная будет контролировать, будем ли мы
  13. // на старте программы превращаться из круга в квадрат или наоборот:
  14. boolean state = false;
  15.  
  16. void setup() {
  17.   size(640, 360);
  18.  
  19.   // Создаем круг при помощи векторов, направленных от центра:
  20.   for (int angle = 0; angle < 360; angle += 9) {
  21.     // Обратите внимание, что мы не начинаем с «0»,
  22.     // чтобы соответствовать контуру круга:
  23.     PVector v = PVector.fromAngle(radians(angle-135));
  24.     v.mult(100);
  25.     circle.add(v);
  26.     // Пока мы в «morph», давайте заполним его пустыми PVector:
  27.     morph.add(new PVector());
  28.   }
  29.  
  30.   // Квадрат – это несколько вершин и прямых линий.
  31.   // Верхняя сторона квадрата:
  32.   for (int x = -50; x < 50; x += 10) {
  33.     square.add(new PVector(x, -50));
  34.   }
  35.   // Правая сторона квадрата:
  36.   for (int y = -50; y < 50; y += 10) {
  37.     square.add(new PVector(50, y));
  38.   }
  39.   // Нижняя сторона квадрата:
  40.   for (int x = 50; x > -50; x -= 10) {
  41.     square.add(new PVector(x, 50));
  42.   }
  43.   // Левая сторона квадрата:
  44.   for (int y = 50; y > -50; y -= 10) {
  45.     square.add(new PVector(-50, y));
  46.   }
  47. }
  48.  
  49. void draw() {
  50.   background(51);
  51.  
  52.   // При помощи этой переменной будем следить,
  53.   // как далеко вершины находятся от своей цели:
  54.   float totalDistance = 0;
  55.  
  56.   // Проходим через каждую вершину:
  57.   for (int i = 0; i < circle.size(); i++) {
  58.     PVector v1;
  59.     // Мы трансформируемся в круг или квадрат?
  60.     if (state) {
  61.       v1 = circle.get(i);
  62.     }
  63.     else {
  64.       v1 = square.get(i);
  65.     }
  66.     // Считываем вершину, которую скоро нарисуем:
  67.     PVector v2 = morph.get(i);
  68.     // Движемся к цели:
  69.     v2.lerp(v1, 0.1);
  70.     // Проверяем, как далеко мы от цели:
  71.     totalDistance += PVector.dist(v1, v2);
  72.   }
  73.  
  74.   // Если все вершины находятся близко,
  75.   // переключаемся на другую фигуру:
  76.   if (totalDistance < 0.1) {
  77.     state = !state;
  78.   }
  79.  
  80.   // Рисуем относительно центра:
  81.   translate(width/2, height/2);
  82.   strokeWeight(4);
  83.   // Рисуем полигон, объединяющий в себе все вершины:
  84.   beginShape();
  85.   noFill();
  86.   stroke(255);
  87.   for (PVector v : morph) {
  88.     vertex(v.x, v.y);
  89.   }
  90.   endShape(CLOSE);
  91. }

См.также

Внешние ссылки

  1. processing.org - Morph