CODEWITHSUNDEEP
p5.js
James
James

Reputation: 1475

Problems, using p5.js width and height methods inside an object

Hello I'm having trouble understanding where and where not I can use p5.js methods. In this codepen, 

var bubble = {
  x: 200,
  y: 200,
  display: function() {
    stroke(255);
    strokeWeight(4);
    noFill();
    ellipse(this.x, this.y, 24, 24);
  },
  move: function() {
    this.x = this.x + random(-1, 1);
    this.y = this.y + random(-1, 1);
  }
}

function setup() {
  createCanvas(600, 400);

}

function draw() {
  background(0);
  bubble.display();
  bubble.move();
  ellipse(width/2,height/2,50,50)
}

If I replace the x and y values inside my 'bubble' object with, for example, 'width/2' and 'height/2' - console prints 'width' is not defined? If I use the same method inside the draw() function it works fine. I'm guessing this is a scoping problem? But not sure how to get around it. Many thanks.

Upvotes: 1

Views: 330

Answers (1)

HReynaud
HReynaud

Reputation: 54

var bubble = {
  init : function(){
   this.x = width/2;
   this.y = height/2;
  },
  display: function() {
    stroke(255);
    strokeWeight(4);
    noFill();
    ellipse(this.x, this.y, 24, 24);
  },
  move: function() {
    this.x = mouseX;
    this.y = mouseY;
  }
}

I can't tell you why it doesn't work, i can't figure it out, but here is a working solution

Upvotes: 1

Related Questions