p5 js использовать функцию l oop в основной области - PullRequest
Новая
       5

p5 js использовать функцию l oop в основной области

1 голос
/ 04 марта 2020

Итак, у меня есть этот самый базовый c пример в p5 js: 

var e = 1;

function setup() {
    window.canvas = createCanvas(200, 200);
}

function draw() {
    fill(255, 255, 0);
    ellipse(50 + e, 50, 30);
    e++;

    noLoop();
}

, если мы игнорируем noLoop() на секунду, этот код просто дублирует круг и делает его вперед вправо.

Теперь я пытаюсь контролировать количество воспроизводимых кадров, добавляя: 

function makeOneMove() {
    loop();
}

, поэтому всякий раз, когда я назову, например, makeOneMove() Как и в моем сценарии, я ожидаю, что он будет воспроизводить один кадр.

Но, к сожалению, я получаю эту ошибку:

Uncaught ReferenceError: l oop не определено

Итак, мой вопрос, как я могу использовать функции loop() или noLoop(), которые работают только в таких функциях p5, как setup или draw.

1 Ответ

3 голосов
/ 04 марта 2020

Чтобы сделать это кадр за кадром, вам нужно убедиться, что loop() используется в вашем setup() методе, например: 

var e = 1;

function setup() {
  createCanvas(200, 200);
  makeOneMove(); // call makeOneMove in `setup`
}

function makeOneMove() {
  loop();
}

function draw() {
  background(255); // used to remove the "trail" of circles (remove if trail is wanted)
  fill(255, 255, 0);
  ellipse(50 + e, 50, 30);
  e++;
  noLoop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Вместо того, чтобы контролировать, когда вызывается draw(), вы можете вместо этого контролировать значение e вне draw() и внутри makeOneMove(). Таким образом, поскольку draw() многократно вызывается снова и снова, он примет новое значение e и нарисует окружность в этой новой позиции смещения. Для демонстрации я добавил mouseClicked() метод, который будет вызывать makeOneMove() всякий раз, когда вы нажимаете: 

var e = 1;

function setup() {
  createCanvas(200, 200);
}

function makeOneMove() {
  e++;
}

function draw() {
  background(255); // used to remove the "trail" of circles (remove if trail is wanted)
  fill(255, 255, 0);
  ellipse(50 + e, 50, 30);
}

function mouseClicked() {
  makeOneMove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Для нескольких кругов / объектов это зависит от того, как вы представляете свои данные / объекты. Лучший способ для чего-то подобного - использовать объекты (например, создав Class) и изменить смещение (ie: значение e) для каждого объекта: 

class Circle {
  constructor(x, y, r, color) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
    this.offset = 1; // (circles own `e` value)
  }
}

var objects;

function setup() {
  createCanvas(200, 200);
  objects = [ // store all your onscreen objects in an array
    new Circle(50, 50, 30, color(255, 255, 0)), // original object you had
    new Circle(50, 100, 50, color(0, 255, 0))
  ]; 
}

function makeOneMove(objectIndex) {
  objects[objectIndex].offset++;
}

function draw() {
  background(255); // used to remove the "trail" of circles (remove if trail is wanted)
  for(const circle of objects) {// loop through all objects in your `objects` array
    // Draw the given object/circle
    fill(circle.color);
    ellipse(circle.x + circle.offset, circle.y, circle.r);
  }
}

function mouseClicked() {
  makeOneMove(0); // make object 0 in array move (for demo)
}

function keyPressed() {
  makeOneMove(1); // make object 1 in array move (for demo)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
...