0

    I am having problems with p5 js.
I am trying to add two ellipse objects that spin around the circumference of a circle. The code below represents the constructor function of the object :

function Obj(){
    this.ang = TWO_PI;
    this.x = w/2 + cos(ang)*r;
    this.y = h/2 + sin(ang)*r;
    this.fil = 255;
    this.size = 28;
    this.show = function(){
        noStroke();
        fill(this.fil);
        ellipse(this.x,this.y,this.size,this.size);
    }
    this.update = function(){
            this.ang+=.02;
    }
} 


And this is the main file :

let w = innerWidth;
let h = innerHeight;
let xd = [];
let r = 200;
function setup() {
  createCanvas(w, h);
  for (let i = 0; i < 2; i++)
    xd[i] = new Obj();
}
function draw(){
  background(0,70,80);
  noFill();
  strokeWeight(7);
  stroke(255);
  ellipse(w/2, h/2, r*2, r*2);
  xd[0].update();
  xd[0].show();
}

The problem is that it says that ang is not defined even though i did clearly define it with this.ang = TWO_PI;. And if I declare it in the main file and in setup() I say ang = TWO_PI; the object stays in place. Can anyone help ?

Thank you.

1 Answers1

1

The problem in the constructor function in this code, it should be like this :

this.x = w/2 + cos(this.ang)*r;
this.y = h/2 + sin(this.ang)*r;

Because you are using a property from the constructor function itself

Shorbagy
  • 496
  • 3
  • 3