p5. js повторение одной и той же функции

Question

Я изучаю p5. js, и я не совсем понимаю, как повторить мою функцию на оси Y, чтобы линии появлялись поверх других. Я понимаю, что мне нужно было бы создать объект класса, но все, что мне удалось сделать, это заморозить редактор XD. Не могли бы вы помочь мне понять, как заставить мою функцию повторяться с другой начальной точкой Y?

let walkers = []; // creation of an array 
this.xoff = 0; //changed to go outside of the walker class 
this.yoff = 0; //changed to go outside of the walker class
this.x = 0;
y = 200;

function setup() {
  createCanvas(600, 600);
  background(250);
  for (let i = 0; i < 10; i++) {  //mix array and class
    walkers[i] = new walker(y);
  }

}


function draw() {
  for (i = 0; i < walkers.length; i++) {  // consider the array lenght
    walker[i].acceleration(); // call the class and it's function
    walker[i].velocity();
    walker[i].update();
    walker[i].display();
  }

}

class walker {
  constructor(y) {  //divide the class in multiple function 
    this.y = y
  }


  acceleration() {
    this.accX = 0.1;
    this.accY = 0.1;
    this.px = this.x;
    this.py = this.y;
  }

  velocity() {
    this.velocityY = random(-20, 20);
    this.velocityX = 5;
  }

  update() {
    this.x = this.x + this.accX + this.velocityX * noise(this.xoff);
    this.y = this.y + this.accY + this.velocityY * noise(this.yoff);
  }

  display() {
    for (this.y < 200; this.y > 400; this.y + 20) {
      line(this.x, this.y, this.px, this.py);
    }
    this.xoff = this.xoff + 1;
    this.yoff = this.yoff + 100;
    this.px = this.x;
    this.py = this.y;
  }

}

Answer 1

Есть несколько ошибок в поведении вашего кода.

Вот несколько проблем:

• walkers это используемый массив: например, walkers[i].acceleration(); , а не walker[i].acceleration(); (то же самое верно и для остальных вызовов)
• инициализируйте переменные, если вы планируете их использовать (в противном случае использование математических операторов update () закончится с NaN : например this.x, this.xoff, this.yoff, et c.
• неясно, какое поведение движения вам нужно с положением, скоростью, ускорением, шумом Перлина и т.д. c. (которые, кстати, обновляются со странными приращениями ( this.yoff = this.yoff + 100;))

Код в основном зависает из-за этого:

for (this.y < 200; this.y > 400; this.y + 20) 

Непонятно, что вы там пытаетесь сделать: this.y < 200; this.y > 400 заставляет меня думать, что вы собираетесь для условия if, чтобы рисовать только линии между 200-400 пикселей по оси Y, однако this.y + 20 заставляет меня думать, что вы по какой-то причине хотите увеличить y?

Также неясно, почему x,xoff,yoff перемещено класс walker? Может быть некоторое понимание относительно классов, экземпляров и клавиши this. орд. Согласно соглашению об именах JS, имена class должны быть в заголовке.

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

Я рекомендую:

• вернуться к рисованию ручкой / бумагой, чтобы проработать свою идею, пока она не станет более ясной
• как вы достигнете этого, разбив сложные задачи на более мелкие шаги
• написание базовых c тестовых эскизов для каждого шага / компонента

Наконец, переносите по одному компоненту в основную программа, снова тестируя, поскольку компоненты взаимодействуют друг с другом. Обязательно ознакомьтесь с Руководством по программированию Кевина Воркмана .

FWIW, вот измененная версия вашего кода с настройкой, позволяющей установить начальную позицию y каждого Walker поверх каждого другое:

let walkers = []; // creation of an array 

y = 200;

function setup() {
  createCanvas(600, 600);
  background(250);
  for (let i = 0; i < 10; i++) {  //mix array and class
    // incrementally add 10 pixels to y so the initially lines start on top of each other
    walkers[i] = new Walker(y + (i * 10));
  }
}


function draw() {
  for (let i = 0; i < walkers.length; i++) {  // consider the array length
    // walkers, not walker
    walkers[i].acceleration(); // call the class and it's function
    walkers[i].velocity();
    walkers[i].update();
    walkers[i].display();
  }

}

class Walker {
  constructor(y) {  //divide the class in multiple function 
    this.y = y;
    // remember to init all variables you plan to use
    this.xoff = 0; //changed to go back inside of the walker class 
    this.yoff = 0; //changed to go back inside of the walker class
    this.x = 0;
  }

  acceleration() {
    this.accX = 0.1;
    this.accY = 0.1;
    this.px = this.x;
    this.py = this.y;
  }

  velocity() {
    this.velocityY = random(-20, 20);
    this.velocityX = 5;
  }

  update() {
    this.x = this.x + this.accX + this.velocityX * noise(this.xoff);
    this.y = this.y + this.accY + this.velocityY * noise(this.yoff);
  }

  display() {
    // what were you trying ?
    //for (this.y < 200; this.y > 400; this.y + 20) {
      line(this.x, this.y, this.px, this.py);
  //}
    this.xoff = this.xoff + 1;
    this.yoff = this.yoff + 1;
    this.px = this.x;
    this.py = this.y;
    // reset x, y to 0
    if(this.x > width){
      this.x = 0;
    }
    if(this.y > height){
      this.y = 0;
    }
    
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

Answer 2

Определенно проще будет сделать это с помощью класса. Создавайте различные функции внутри класса, которые отвечают за обновление, перемещение и т. Д. c. Вы также можете создать функцию отображения, в которой вы можете установить координату y, используя For l oop. Таким образом, будет очень легко продолжать изменять координату y.

Если вы хотите отображать несколько строк одновременно, выполните все вышеперечисленное, а также используйте массив для хранения координаты y. ординаты, а затем отобразите их в поле For l oop.

Сообщите мне, если вам понадобится помощь с фактическим кодом.