Having trouble using instance mode

Question

I am getting errors when I used instance mode in my code. My mini game isn't showing up I am not sure where the error is coming from. It works fine without the instance mode but I need to use the instance mode so that I can reference this code in another file. I'm using this link as a reference. http://p5js.org/examples/instance-mode-instantiation.html

let sketch = function(p) {

    let blob;
    let blobs = [];
    let zoom = 1;
    let timer = 20;
    let hits = false;
    let score = 0;

    p.setup = function() {
        p.createCanvas(600, 600);
        blob = new Blob(0, 0, 64);
        for (let i = 0; i < 300; i++) {
            let x = p.random(-p.width,p.width);
            let y = p.random(-p.height,p.height);
            blobs[i] = new Blob(x, y, 15);
        }
    };

    p.draw = function() {
        p.background(0);

        p.translate(width/2, height/2);
        let newzoom = 64 / blob.r;
        p.zoom = p.lerp(zoom, newzoom, 0.1);
        p.scale(zoom);
        p.translate(-blob.pos.x, -blob.pos.y);

        for (var i = blobs.length-1; i >=0; i--) {
            blobs[i].show();
            if (blob.eats(blobs[i])) {
                blobs.splice(i, 1);
            }
        }

        if (frameCount % 60 == 0 && timer > 0) { // if the frameCount is divisible by 60, then a second has passed. it will stop at 0
            p.timer --;
        }

        if (timer == 0 && score >=250) {
            p.text("You Win", 0, 0);
            p.noLoop();
        }

        if (blob.eats){
            p.console.log("hit");
        }
        if (timer == 0 && score <= 250){
            p.text("You Lose", 0, 0);
            p.textSize(200);
            p.noLoop();
        }

        blob.show();
        blob.update();
    };
};
let myp5 = new p5(sketch);

class Blob {


     constructor(x, y, r) {
            this.pos = createVector(x, y);
  this.r = r; 
  this.vel = createVector(0,0);
    }
    show(p) {
        p.ellipse(this.pos.x, this.pos.y, this.r, this.r);
    }
    eats(other) {
      let d = p5.Vector.dist(this.pos, other.pos);
        if (d < this.r + other.r) {
      let sum = PI * this.r * this.r + PI * other.r * other.r;
      score ++;
      this.r = sqrt(sum / PI);
      //this.r += other.r;
      return true;
    } else {
      return false;
    }
  }

Answer 1

While width, height and frameCount are properties of the canvas, console is it not.

p.translate(width/2, height/2);
p.translate(p.width/2, p.height/2);

if (frameCount % 60 == 0 && timer > 0) {
if (p.frameCount % 60 == 0 && timer > 0) {

console.log("hit");
console.log("hit");

I don't know the implementation of Blob. but you have to passe the canvas object (p) to the show method and the let constructor.

The variable score can't be accessed in the class Blob

See the example, where I applied the suggested changes to your original code:

class Blob {
    constructor(p, x, y, r) {
        this.pos = p.createVector(x, y);
        this.r = r; 
        this.vel = p.createVector(0,0);
    }
    show(p) {
        p.ellipse(this.pos.x, this.pos.y, this.r, this.r);
    }
    eats(other) {
        let d = this.pos.dist(other.pos);
        if (d < this.r + other.r) {
            let sum = Math.pi * this.r * this.r + Math.pi * other.r * other.r;
            this.r = Math.sqrt(sum / Math.pi);
            //this.r += other.r;
            return true;
        } else {
            return false;
        }
    }
    update() {
        // ...
    }
}

let sketch = function(p) {
    let blob;
    let blobs = [];
    let zoom = 1;
    let timer = 20;
    let hits = false;
    let score = 0;

    p.setup = function() {
        p.createCanvas(600, 600);
        blob = new Blob(p, 0, 0, 64);
        for (let i = 0; i < 300; i++) {
            let x = p.random(-p.width,p.width);
            let y = p.random(-p.height,p.height);
            blobs[i] = new Blob(p, x, y, 15);
        }
    };

    p.draw = function() {
        p.background(0);

        p.translate(p.width/2, p.height/2);
        let newzoom = 64 / blob.r;
        p.zoom = p.lerp(zoom, newzoom, 0.1);
        p.scale(zoom);
        p.translate(-blob.pos.x, -blob.pos.y);

        for (var i = blobs.length-1; i >=0; i--) {
            blobs[i].show(p);
            if (blob.eats(blobs[i])) {
                score ++;
                blobs.splice(i, 1);
            }
        }

        if (p.frameCount % 60 == 0 && timer > 0) { 
          p.timer --;
        }

        if (timer == 0 && score >=250) {
            p.text("You Win", 0, 0);
            p.noLoop();
        }

        if (blob.eats){
            console.log("hit"); 
        }
        if (timer == 0 && score <= 250){
            p.text("You Lose", 0, 0);
            p.textSize(200);
            p.noLoop();
        }

        blob.show(p);
        blob.update();
    };
};
let myp5 = new p5(sketch)

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>