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

Содержание

Среда разработки Processing

Справочник языка Processing

Библиотеки

Примеры

Режимы программирования

Перевод: Максим Кузьмин

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

Описание

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

Пример

// Два объекта «ArrayLists» для хранения вершин двух фигур.
// Для этого примера нужно, чтобы в обеих фигурах
// было одинаковое количество вершин.
// То есть оба объекта ArrayList должны быть одинакового размера.
ArrayList<PVector> circle = new ArrayList<PVector>();
ArrayList<PVector> square = new ArrayList<PVector>();

// Еще один ArrayList для третьего комплекта вершин,
// который и будет нарисован на экране:
ArrayList<PVector> morph = new ArrayList<PVector>();

// Эта булева переменная будет контролировать, будем ли мы
// на старте программы превращаться из круга в квадрат или наоборот:
boolean state = false;

void setup() {
  size(640, 360);

  // Создаем круг при помощи векторов, направленных от центра:
  for (int angle = 0; angle < 360; angle += 9) {
    // Обратите внимание, что мы не начинаем с «0»,
    // чтобы соответствовать контуру круга: 
    PVector v = PVector.fromAngle(radians(angle-135));
    v.mult(100);
    circle.add(v);
    // Пока мы в «morph», давайте заполним его пустыми PVector:
    morph.add(new PVector());
  }

  // Квадрат – это несколько вершин и прямых линий.
  // Верхняя сторона квадрата:
  for (int x = -50; x < 50; x += 10) {
    square.add(new PVector(x, -50));
  }
  // Правая сторона квадрата:
  for (int y = -50; y < 50; y += 10) {
    square.add(new PVector(50, y));
  }
  // Нижняя сторона квадрата:
  for (int x = 50; x > -50; x -= 10) {
    square.add(new PVector(x, 50));
  }
  // Левая сторона квадрата:
  for (int y = 50; y > -50; y -= 10) {
    square.add(new PVector(-50, y));
  }
}

void draw() {
  background(51);

  // При помощи этой переменной будем следить,
  // как далеко вершины находятся от своей цели:
  float totalDistance = 0;
  
  // Проходим через каждую вершину:
  for (int i = 0; i < circle.size(); i++) {
    PVector v1;
    // Мы трансформируемся в круг или квадрат?
    if (state) {
      v1 = circle.get(i);
    }
    else {
      v1 = square.get(i);
    }
    // Считываем вершину, которую скоро нарисуем:
    PVector v2 = morph.get(i);
    // Движемся к цели:
    v2.lerp(v1, 0.1);
    // Проверяем, как далеко мы от цели:
    totalDistance += PVector.dist(v1, v2);
  }
  
  // Если все вершины находятся близко, 
  // переключаемся на другую фигуру:
  if (totalDistance < 0.1) {
    state = !state;
  }
  
  // Рисуем относительно центра:
  translate(width/2, height/2);
  strokeWeight(4);
  // Рисуем полигон, объединяющий в себе все вершины:
  beginShape();
  noFill();
  stroke(255);
  for (PVector v : morph) {
    vertex(v.x, v.y);
  }
  endShape(CLOSE);
}