無法實例化 p5.js 代碼（實例模式）

Question

更新：問題已解決。 這是工作的實例化代碼，以防有人需要幫助/參考： https://editor.p5js.org/Rod1C/sketches/iaKn9CKCS

我是 p5.js 的新手，一直在嘗試將多個草圖加載到 web 頁面上。 這當然是有問題的，因為我無法加載具有相同 function 名稱的不同 JavaScript 文件。 對於這類問題，p5 有一個叫做“實例模式”的東西。

我一直在嘗試“實例化”我的代碼，這基本上意味着在這種實例模式下編寫它，但是我不斷收到很多錯誤——這有點超出我的能力范圍！

這是我的工作 p5.js 代碼（未實例化）： https://editor.p5js.org/Rod1C/sketches/bXxGdhRPl

class Particle {

    constructor(l) {
        this.acceleration = createVector(0, 0);
        this.velocity = createVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));
        this.position = l ? l.copy() : createVector(Math.random()*(windowWidth*0.8), Math.random()*(windowHeight*0.7),);
        this.home = this.position.copy();
    }

    run() {
        this.update();
        this.display();
    }

    // Method to update position
    update() {
        this.acceleration.x = -0.01*(this.position.x - this.home.x);
        this.acceleration.y = -0.01*(this.position.y - this.home.y);
        this.velocity.add(this.acceleration);
        this.velocity.mult(0.9);
        this.position.add(this.velocity);
        //   lifespan -= 1.0;
    }

    // Method to display
     display() {
        noStroke();//stroke(255, lifespan);
        //fill(255, lifespan);
        var notblue = map(abs(this.velocity.mag()),0,5,27,255); 
        fill(notblue,27,27);
        ellipse(this.position.x, this.position.y, 15, 15);
    }
}

class ParticleSystem {
    constructor(position) {
        this.origin = position.copy();
        this.particles = [];
    }

    addParticle() {
        //this.particles.push(new Particle(this.origin));
        this.particles.push(new Particle());
    }

    run() {
        for (let i = this.particles.length-1; i >= 0; i--) {
            this.particles[i].run();
    //      if (p.isDead()) {
            //    particles.remove(i);
    //      }
        }
    }

    move_away_from(x, y){
        for (let i = 0; i < this.particles.length; i++) {
            let p = this.particles[i];
            let d = dist(x*0.5,y, p.position.x*0.5, p.position.y);
            if( d < 200 ){ 
                p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
                p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
            }
        }
    }
}

var ps;

function setup() {
    var canvas = createCanvas(windowWidth*0.7, windowHeight*0.7);
    ps = new ParticleSystem(createVector(width/2, 50));
    for (var i=0; i<1200; i++) {
        ps.addParticle();
    }

}

function draw() {
    background(255);
    ps.move_away_from(mouseX, mouseY);
    ps.run();
}

function windowResized() {
  resizeCanvas(windowWidth*0.8, windowHeight*0.7);
}

這就是我在實例化它方面所取得的進展，盡管正如你所看到的，我似乎處於死胡同，因為我似乎無法修復彈出的新錯誤： https://editor.p5js。 org/Rod1C/草圖/E0QS422xy

var sketch = function( p ) { 
class Particle {

    constructor(l) {
        this.acceleration = p.createVector(0, 0); 
        this.velocity = p.createVector(0,0); //random(-0.0001, 0.00001), random(-0.001, 0.0001));
        this.position = l ? l.copy() : createVector(Math.random()*(windowWidth*0.8), Math.random()*(windowHeight*0.7),);
        this.home = this.position.p.copy(); 
    }

    run() {
        this.p.update(); 
        this.p.display() ;
    }

    // Method to update position
    update() {
        this.acceleration.x = -0.01*(this.position.x - this.home.x);
        this.acceleration.y = -0.01*(this.position.y - this.home.y);
        this.velocity.p.add(this.acceleration);
        this.velocity.p.mult(0.9);
        this.position.p.add(this.velocity);
        //   lifespan -= 1.0;
    }

    // Method to display
     display() {
        p.noStroke();
         var notblue = map(abs(this.velocity.mag()),0,5,27,255); 
        p.fill(notblue,27,27);
        p.ellipse(this.position.x, this.position.y, 15, 15);
    }
}

class ParticleSystem {
    constructor(position) {
        this.origin = position.p.copy();
        this.particles = [];
    }

    addParticle() {
        //this.particles.push(new Particle(this.origin));
        this.particles.push(new Particle());
    }

    run() {
        for (let i = this.particles.length-1; i >= 0; i--) {
            this.particles[i].p.run();
         }
        }


    move_away_from(x, y){
        for (let i = 0; i < this.particles.length; i++) {
            let p = this.particles[i];
            let d = p.dist(x*0.5,y, p.position.x*0.5, p.position.y); }
            if( d < 200 ){ 
                p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
                p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
            }
        }
    }


var ps;

p.setup = function() {
    var canvas = p.createCanvas(p.windowWidth*0.7, p.windowHeight*0.7); 
    ps = new ParticleSystem(p.createVector(p.width/2, 50));
    for (var i=0; i<1200; i++) {
        ps.p.addParticle() }
    }


p.draw = function() {
    p.background(255); 
    ps.p.move_away_from(mouseX, mouseY);
    ps.p.run();
}

p.windowRecreateCanvasd = function() {
  p.recreateCanvasCanvas(windowWidth*0.8, windowHeight*0.7);

}
 };

var godspeed = new p5(sketch);

因此，如果有人能指出我正確的方向（告訴我我做錯了什么）或修復現有的錯誤，那就太好了！

注意：我知道我可以通過 iFrame 嵌入它們，但是這不適用於我正在尋找的效果。

Answer 1

您的代碼包含一些與您如何使用p變量相關的不一致之處。

p變量（我將其稱為sketch以使其更明顯）是對草圖本身的引用。 您可以將草圖視為包含來自 p5.js 庫的所有變量和函數。

這意味着無論何時您以前使用來自 p5.js 的變量或 function，在實例模式下，您都應該通過您的草圖變量 go。 我看到您仍在“全局”模式樣式中引用的一些內容：

• windowWidth應該是p.windowWidth
• windowHeight應該是p.windowHeight
• createVector()應該是p.createVector()
• map()應該是p.map()
• abs()應該是p.abs()

另一方面，當您處理不是來自 p5.js 的變量或 function 時，您不需要參考草圖。 具體來說，您要添加的一些東西p不需要它：

• this.p.update()應該是this.update()
• this.velocity.p.add()應該是this.velocity.add()
• ps.p.addParticle()應該是ps.addParticle()

這些不是詳盡的清單； 您可能還需要解決其他問題。

退后一步，我能給你的最好建議是分步進行。 嘗試從一個空白草圖開始，讓實例模式適用於一個較小的示例。 然后添加少量代碼（僅一兩行）並確保在繼續之前可以正常工作。 祝你好運。