无法实例化 p5.js 代码（实例模式）

Posted 2023-02-22

【中文标题】无法实例化 p5.js 代码（实例模式）

【英文标题】：Trouble instantiating p5.js code (instance mode)

【发布时间】：2020-02-23 04:45:13

【问题描述】：

更新：问题已解决。这是工作实例化代码，以防有人需要帮助/参考：https://editor.p5js.org/Rod1C/sketches/iaKn9CKCS

我是 p5.js 的新手，一直在尝试将多个草图加载到网页上。这当然是有问题的，因为我无法加载具有相同函数名称的不同 javascript 文件。对于这类问题，p5 有一个叫做“Instance Mode”的东西。

我一直在尝试“实例化”我的代码，这基本上意味着在这种实例模式下编写它，但是我不断收到很多错误 - 这有点超出我的能力范围！

这是我的工作 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/sketches/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 将它们嵌入，但这不适用于我正在寻找的效果。

【参考方案1】：

您的代码包含一些与您使用 p 变量的方式相关的不一致之处。

p 变量（我将其称为sketch 以使其更明显）是对草图本身的引用。您可以将草图视为包含来自 p5.js 库的所有变量和函数。

这意味着任何时候你以前使用来自 p5.js 的变量或函数，在实例模式下你应该检查你的草图变量。我看到一些您仍在“全局”模式样式中引用的内容：

windowWidth 应该是 p.windowWidth windowHeight 应该是 p.windowHeight createVector() 应该是 p.createVector() map() 应该是 p.map() abs() 应该是 p.abs()

另一方面，当您处理并非来自 p5.js 的变量或函数时，您确实不需要引用草图。具体来说，您添加了一些不需要 p 的东西：

this.p.update() 应该是 this.update() this.velocity.p.add() 应该是 this.velocity.add() ps.p.addParticle() 应该是 ps.addParticle()

这些不是详尽的列表；您可能还需要解决其他问题。

退后一步，我能给您的最佳建议是分步进行。尝试从一个空白草图开始，让实例模式适用于一个较小的示例。然后添加少量代码（仅一两行）并确保在继续之前可以正常工作。祝你好运。