p5. js контролирует количество кадров, которые я играю - PullRequest
Новая
       3

p5. js контролирует количество кадров, которые я играю

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

Я хочу контролировать количество вызовов draw(), в основном позволяет себе представить, что у меня есть этот базовый c код: 

var e = 1;

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

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

и я хочу сделать функцию moveOneStep() это будет активировано draw() один раз, поэтому давайте предположим, что я делаю a для l oop 5 раз, тогда рисование будет вызвано 5 раз, и круг переместится на 5 шагов (пикселей) вправо,

как это можно сделать?

Ответы [ 2 ]

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

Хотите ли вы исправить частоту кадров в своем коде или вызвать функцию draw() за определенное время c? Если это так, я не думаю, что вы можете, потому что функция draw, как упомянуто в документации

, функция draw () непрерывно выполняет строки кода, содержащиеся в ее блоке, пока программа не будет остановлено или noL oop () называется

Но если вы хотите зафиксировать частоту кадров, вы можете вызвать frameRate(number) в функции setup (). Итак, теперь, если вы хотите, чтобы draw() вызывался 30 раз в секунду (или 30 к / с для игровой ссылки), ваш код будет выглядеть следующим образом. 

var e = 1;

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

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

Проверьте документацию для дальнейших ссылок.

Счастливого кодирования ^^.

0 голосов
/ 07 марта 2020

Вместо того, чтобы контролировать количество звонков draw, вы можете контролировать, что происходит внутри draw.

Чтобы использовать draw таким образом, который позволяет взаимодействовать с пользователем и хорошо работает с библиотекой p5 js, вы можете прослушивать взаимодействие с пользователем с помощью метода keyPressed и записывать, что пользователь говорит системе делать. Вернувшись к методу draw, вы можете обновить позиции и затем сделать эскиз.

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

Вот простой пример, который позволяет пользователю перемещать окружность с помощью клавиш a, s, d, w или клавиш со стрелками вверх, вниз, влево и вправо. 

var xPos = 0;
var yPos = 0;
var moveRightCount = 0;
var moveLeftCount = 0;
var moveUpCount = 0;
var moveDownCount = 0;

function setup() {
    window.canvas = createCanvas(200, 200);
}
function keyPressed() {
   if (keyCode === RIGHT_ARROW || keyCode === 68) {
    moveRightCount+=1;
  } else if (keyCode === LEFT_ARROW || keyCode === 65) {
    moveLeftCount+=1;
  } else if (keyCode === DOWN_ARROW || keyCode === 83) {
    moveDownCount+=1;
  }else if (keyCode === UP_ARROW || keyCode === 87) {
    moveUpCount+=1;
  } else if (keyCode === 70){
    
   // console.log(keyCode);
}

function draw() {
  background(255);
  if (moveRightCount > 0){
    xPos++;
    moveRightCount--;
  }
  if (moveLeftCount > 0){
    xPos--;
    moveLeftCount--;
  }
  if (moveUpCount > 0){
    yPos--;
    moveUpCount--;
  }
  if (moveDownCount > 0){
    yPos++;
    moveDownCount--;
  }
    fill(255, 255, 0);
    ellipse(50 + xPos, 50 + yPos, 30);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

Теперь, если у вас есть метод с именем moveOneStep(), он может настроить соответствующий счетчик движений, и при вызове draw в соответствии с frameRate изображение будет переехал. Скажем, мы вызываем moveOneStep() в al oop, который выполняется 5 раз, изображение будет перемещено на одну позицию за выполнение draw 5 раз.

...