Logo

Developer learning path

Processing

Создание интерактивной анимации в Processing

Создание интерактивной анимации

74

#example

Пример 1: Рисование шаров и их взаимодействие.

                    
Ball b1, b2;

void setup() {
  size(400, 400);
  b1 = new Ball(50, 200, 30, color(255, 0, 0));
  b2 = new Ball(350, 200, 50, color(0, 0, 255));
}

void draw() {
  background(255);
  b1.update();
  b2.update();
  b1.display();
  b2.display();
}

class Ball {
  float x, y, speedX, speedY, r;
  color c;

  Ball(float x_, float y_, float r_, color c_) {
    x = x_;
    y = y_;
    speedX = random(-5, 5);
    speedY = random(-5, 5);
    r = r_;
    c = c_;
  }

  void update() {
    x += speedX;
    y += speedY;

    if (x - r < 0 || x + r > width) {
      speedX *= -1;
    }
    if (y - r < 0 || y + r > height) {
      speedY *= -1;
    }
  }

  void display() {
    fill(c);
    ellipse(x, y, r*2, r*2);
  }
}
                  

Пример 2: Создание игры "Змейка".

                    
int blockSize = 20;
int numBlocks;
boolean gameOver;
int score;

Snake snake;
Food food;

void setup() {
  size(400, 400);
  numBlocks = width / blockSize;
  snake = new Snake();
  food = new Food();
  gameOver = false;
  frameRate(10);
  textAlign(CENTER);
}

void draw() {
  background(255);
  if (gameOver) {
    textSize(32);
    fill(255,0,0);
    text("Game Over", width/2, height/2);
    textSize(24);
    fill(0);
    text("Score: " + score, width/2, height/2 + 40);
    return;
  }
  snake.update();
  snake.display();
  food.display();
  if (snake.eat(food)) {
    score++;
    snake.grow();
    food = new Food();
  }
  if (snake.collide()) {
    gameOver = true;
  }
}

class Snake {
  ArrayList<Block> blocks;
  int direction;

  Snake() {
    blocks = new ArrayList<Block>();
    blocks.add(new Block(numBlocks/2, numBlocks/2));
    direction = RIGHT;
  }

  void update() {
    for (int i = blocks.size()-1; i > 0; i--) {
      blocks.get(i).setLocation(blocks.get(i-1).getX(), blocks.get(i-1).getY());
    }
    switch (direction) {
      case UP: 
        blocks.get(0).move(0, -1);
        break;
      case DOWN:
        blocks.get(0).move(0, 1);
        break;
      case LEFT:
        blocks.get(0).move(-1, 0);
        break;
      case RIGHT:
        blocks.get(0).move(1, 0);
        break;
    }
  }

  void display() {
    for (int i = 0; i < blocks.size(); i++) {
      blocks.get(i).display();
    }
  }

  boolean eat(Food f) {
    if (blocks.get(0).collide(f)) {
      return true;
    }
    return false;
  }

  void grow() {
    Block lastBlock = blocks.get(blocks.size()-1);
    blocks.add(new Block(lastBlock.getX()-1, lastBlock.getY()));
  }

  boolean collide() {
    Block head = blocks.get(0);
    if (head.getX() < 0 || head.getX() >= numBlocks || head.getY() < 0 || head.getY() >= numBlocks) {
      return true;
    }
    for (int i = 1; i < blocks.size(); i++) {
      if (head.collide(blocks.get(i))) {
        return true;
      }
    }
    return false;
  }
}

class Block {
  int x, y;

  Block(int x_, int y_) {
    x = x_;
    y = y_;
  }

  void setLocation(int x_, int y_) {
    x = x_;
    y = y_;
  }

  void move(int dx, int dy) {
    x += dx;
    y += dy;
  }

  int getX() {
    return x;
  }

  int getY() {
    return y;
  }

  void display() {
    fill(0);
    rect(x*blockSize, y*blockSize, blockSize, blockSize);
  }

  boolean collide(Block b) {
    if (x == b.getX() && y == b.getY()) {
      return true;
    }
    return false;
  }

  boolean collide(Food f) {
    if (x == f.getX() && y == f.getY()) {
      return true;
    }
    return false;
  }
}

class Food {
  int x, y;

  Food() {
    x = int(random(numBlocks));
    y = int(random(numBlocks));
  }

  void display() {
    fill(255,0,0);
    rect(x*blockSize, y*blockSize, blockSize, blockSize);
  }

  int getX() {
    return x;
  }

  int getY() {
    return y;
  }
}

void keyPressed() {
  if (keyCode == UP && snake.direction != DOWN) {
    snake.direction = UP;
  } else if (keyCode == DOWN && snake.direction != UP) {
    snake.direction = DOWN;
  } else if (keyCode == LEFT && snake.direction != RIGHT) {
    snake.direction = LEFT;
  } else if (keyCode == RIGHT && snake.direction != LEFT) {
    snake.direction = RIGHT;
  }
}
                  

March 27, 2023

38

#description

Processing - это среда программирования на основе языка Java, предназначенная для создания графических и интерактивных приложений. Создание интерактивной анимации является популярной задачей, выполняемой в Processing.

Для создания интерактивной анимации вам понадобится знание основных конструкций и функций языка Processing. Необходимо также иметь представление о графическом интерфейсе пользователя (GUI) и понимание, как использовать мышь, клавиатуру и другие элементы для взаимодействия с пользователем.

Основные шаги для создания интерактивной анимации в Processing:

  1. Создайте общую структуру вашего приложения, включая настройки размера окна, фона, и т.д.
  1. Разработайте дизайн объектов, которые будут анимироваться, и нарисуйте их с помощью функций рисования в Processing.
  1. Определите границы анимируемых объектов и реализуйте функции, которые будут контролировать движение, вращение, масштабирование и другие анимационные эффекты.
  1. Создайте функции для взаимодействия с пользователем через мышь, клавиатуру и т.д. Они должны отвечать за изменение состояния анимированных объектов вследствие действий пользователя.
  1. Обновите экран с помощью функции «draw» для отображения анимации и взаимодействия с пользователем.

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

March 27, 2023

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

Если же непонятен весь вопрос, то нажмите на кнопки внизу, чтобы получить новый вариант объяснения, практические примеры или критически оценить сам вопрос.