Блог

У меня есть эскиз в глобальном режиме, который отлично работает, и сейчас я переношу его в другой документ в режиме экземпляра, поскольку он находится рядом с эскизом 3D / WEBGL.

Всякий раз, когда я нажимаю, чтобы отправить новый экземпляр Pulse(), я получаю «Не удается прочитать свойство ‘0’ из undefined» в ответ, поступающий из цикла for() в draw(). Как я уже сказал, это отлично работает в глобальном режиме, так что, должно быть, здесь просто неправильный синтаксис, но я не могу найти никаких примеров использования объектов в режиме экземпляра p5. Я понятия не имею, почему он не может считывать данные из массива или почему он не может нажимать.

Я был очень неуверен в синтаксисе при переходе к массиву объектов в p5.js Режим экземпляра. Я также пробовал варианты s.pulse.push (new s.Pulse()) и s.pulse.s.push(new s.Pulse()), но они возвращали ошибки нажатия. Приведенный ниже код, кажется, подталкивает, но массив просто не может быть прочитан.

Любая помощь была бы отличной, спасибо.

 var twoDee = function(s) {
var cnv;
var cnvWidth, cnvHeight;
var pulsesAmount;
var pulses = [];

s.setup = function() {
    s.cnvWidth = s.windowWidth;
    s.cnvHeight = document.getElementById('sketch-wrap-bleed-bottom').offsetHeight;
    s.cnv = s.createCanvas(s.cnvWidth, s.cnvHeight, s.P2D);
    s.cnv.parent("sketch-wrap-bleed-bottom");
    s.pulsesAmount = 0;
}

s.draw = function() {
    s.background(40);
    for (var i = 0; i < s.pulsesAmount; i  ) {
        s.pulses[i].move(); // problem here
        s.pulses[i].display();
    }

    s.noFill();
    s.stroke(255);
    s.ellipse(s.mouseX, s.mouseY, 30, 30);
}

s.Pulse = function() {
    this.size = 20;
    this.grow = 0.5;
    this.xPos = s.width/2   200;
    this.yPos = s.height/2;
    this.opacity = 255;

    this.move = function() {
        this.size  = this.grow;
        this.opacity = map(this.size, 0, 60, 255, 0);
    }

    this.display = function() {
        s.noFill();
        s.strokeWeight(2);
        s.stroke(242, 202, 102, this.opacity);
        s.translate(this.xPos, this.yPos);
        s.ellipse(0, 0, this.size, this.size);
        s.translate(-this.xPos, -this.yPos);
    }
}

s.mousePressed = function() {
    s.pulsesAmount  = 1;
    s.pulses = s.push(new s.Pulse());
}
  

}

Вам нужно использовать s переменную только для материалов, которые поступают из P5.js , как mouseX или setup() функция.

Для вещей, которые вы объявляете, таких как переменные pulses и pulsesAmount , вы не используете s переменную. Итак, ваш for цикл должен выглядеть следующим образом:

 for (var i = 0; i < pulsesAmount; i  ) {
    pulses[i].move();
    pulses[i].display();
}
  

Редактировать: После того, как вы исправили эту проблему, у вас все еще есть другая проблема. Эта строка не имеет смысла:

 pulses = s.push(new Pulse());
  

Пожалуйста, проконсультируйтесь с P5.js обратитесь к, чтобы лучше понять, что делает push() функция. Это не имеет ничего общего с массивами.

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

 s.append(pulses, new Pulse());
  

После исправления этого у вас все еще будут некоторые другие проблемы (например, не использование s переменной для доступа к map() функции), но это должно помочь вам двигаться в правильном направлении.