在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);
    }
}

當我嘗試運行這些代碼時，出現錯誤：

未捕獲的ReferenceError：在p5.p.criaDados（sketch.js：41）的新Dado（dado.js：4）上未定義random

我在對象Dado中的每個函數都有此錯誤。 當我測試代碼但在p5.js全局模式下時，沒有出現這些錯誤。

Answer 1

函數random以及對stroke ， fill和ellipse的調用都試圖使用p5給您的函數的全局版本。

要在實例模式下使用它們，請將Dado定義移至sketch函數中，並使用傳遞給函數的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