Instantiating object in p5.js instance mode

Question

I'm trying to instantiate an object on p5.js instance mode, however I've got lots of errors on the object's properties and functions.

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

When I try to run these code I've got the error:

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

I have this error for every function inside the object Dado. When I tested the code but in p5.js global mode I didn't get these errors.

Answer 1

The function random as well as the calls to stroke , fill , and ellipse are all trying to use global versions of functions that p5 gives you.

To use these in instance mode, move your Dado definition into the sketch function and use the p instance passed into the function:

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