在 p5.js 实例模式下实例化对象

Question

我试图在 p5.js 实例模式下实例化一个对象，但是我在对象的属性和函数上遇到了很多错误。

var sketch1 = function(p){

    var dados = [];

    p.setup = function(){
        var canvas = p.createCanvas(640, 480);
        canvas.parent('area-sketch');

        p.button = p.createButton('Rolar dado');
        p.button.position(p.width, p.height);
        p.button.parent('area-sketch');
        p.button.mouseClicked(p.rolaDado);
    };

    p.draw = function(){
        if(dados.length>0){
            for(var i=0;i<dados.length;i++){
                dados[i].show();
            }
        }
    };

    p.rolaDado = function(){
        var total=0;
        if(dados.length>0){
            for(var i=0;i<dados.length;i++){
                dados[i].shuffle();
                total+=dados[i].getValor();
            }

            return(total);
        }
    };

    p.limpaDados = function(){
        dados = [];
    };

    p.criaDados = function(num){
        for(var i=0;i<num;i++){
            dados.push(new Dado());
        }
    };

    p.limpaTela = function(){
        p.clear();    
    };
};

var mesa_dados = new p5(sketch1);

function Dado(){   

    this.lado = 80;
    this.x = random(1,width-this.lado);
    this.y = random(1,height-this.lado);

    this.type = 6;

    this.show = function(){
        stroke(0,0,0);
        p.fill(255,255,255);

        p.rect(this.x,this.y, this.lado, this.lado);

        switch(this.type){
            case 1:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 2:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                break;
            case 3:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 4:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                break;
            case 5:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 6:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.5, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.5, 10, 10);
                break;
        }

    }

    this.clear = function(){

    }

    this.shuffle = function(){
        this.type = ceil(random(0,6));
    }

    this.shufflePos = function(){
        times = 100;
        speed = 50;
        this.xdirection = random(-1,1);
        this.ydirection = random(-1,1);
    }

    this.getValor = function(){
        return(this.type);
    }
}

当我尝试运行这些代码时出现错误：

Uncaught ReferenceError: random is not defined at new Dado (dado.js:4) at p5.p.criaDados (sketch.js:41)

对象 Dado 中的每个函数都有这个错误。当我在 p5.js 全局模式下测试代码时，我没有遇到这些错误。

Answer 1

函数 random 以及对 stroke、fill 和 ellipse 的调用都试图使用 p5 为您提供的函数的全局版本。

要在实例模式下使用这些，请将您的 Dado 定义移动到草图函数中并使用传递到函数中的 p 实例：

var sketch1 = function(p){

    // existing sketch code...

    function Dado(){   

    this.lado = 80;
    this.x = p.random(1,width-this.lado);
    this.y = p.random(1,height-this.lado);

    this.type = 6;

    this.show = function(){
        p.stroke(0,0,0);
        p.fill(255,255,255);

        p.rect(this.x,this.y, this.lado, this.lado);

        switch(this.type){
            case 1:
                p.fill(0,0,0);
                p.ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 2:
        // Rest of Dado etc...
}; // end of sketch1

在 p5.js 实例模式下实例化对象

Instantiating object in p5.js instance mode

javascript

object

instance

p5.js

mode