Попытка понять и заставить классы работать на p5.js - PullRequest
Новая
       9

Попытка понять и заставить классы работать на p5.js

0 голосов
/ 06 января 2019

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

Используя онлайн-ресурсы, я попытался настроить фоновый класс на основе функции, как показано в коде. Я использую онлайн редактор p5.js для кода, найденного здесь: https://editor.p5js.org

function setup() {
  createCanvas(900, 700);
  const a = new treeBackground(1,1)

}

function draw() {
  a.draw()
}

class treeBackground {

  constructor(bg, diam) {
    this.bg = bg;
    this.diam = diam;
  }

  draw() {
    this.bg = createGraphics(width, height);
    this.bg.beginShape();
    this.bg.noStroke();
    for (this.diam = 1.5 * width; this.diam > 0.5 * width; this.diam -= 20) {
        bg.fill(map(this.diam, 0.5 * width, 1.5 * width, 255, 210));
        bg.ellipse(width / 2, height / 2, this.diam, this.diam);
    }
    this.bg.endShape();

  }

}

Никаких ошибок не должно быть, и в области эскиза должен отображаться холст с серым фоном.

1 Ответ

0 голосов
/ 06 января 2019

Происходит несколько вещей:

  • Как отметил saucel, поскольку a упоминается в разных местах, его необходимо определить в общей области (например, как глобальная переменная).
  • Также bg должно быть this.bg в draw. Он также должен быть инициализирован только один раз, поэтому его, вероятно, следует перенести в конструктор. Похоже, что переданные аргументы diam и bg на самом деле не используются, поэтому их следует удалить.
  • beginShape и endShape используются для создания фигур в сочетании с функциями vertex, curveVertex, bezierVertex и quadraticVertex. Поскольку вы здесь этого не делаете, они не нужны.
  • Наконец, createGraphics создает закадровый рендер. Чтобы показать его на экране, вы можете использовать функцию image.

Все вместе, это выглядит так: 

var a;
function setup() {
  createCanvas(900, 700);
  a = new treeBackground();
}

function draw() {
  a.draw();
}

class treeBackground {

  constructor() {
    this.bg = createGraphics(width, height);
  }

  draw() {
    this.bg.noStroke();
    for (this.diam = 1.5 * width; this.diam > 0.5 * width; this.diam -= 20) {
        this.bg.fill(map(this.diam, 0.5 * width, 1.5 * width, 255, 110)); // changed this to make the gradient more pronounced
        this.bg.ellipse(width / 2, height / 2, this.diam, this.diam);
    }
    image(this.bg, 0, 0);
  }

}
<script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
...