drawing multiple classes with same variables-CodePudding

I think i dont understand classes and encapsulation well enough, because when i draw the vertical and horizontal class at the same time, they influence each others, and change the way they draw. But when i draw one class at a time it works as intendet. I dont understand why this is going on, because they are two seperate classes and the variables contained in them should not be accesed outside?

let spacing = 50;
let xx = 0;
let yy = 0;

function setup() {
  createCanvas(1500, 1500);
  background(0);
}

function draw() {
  let hori = new Horizontal()
  let vert = new Vertical()


 hori.drawit();
 vert.drawit();
}

class Vertical{
  constructor(){
  }
  
  drawit(){
  if (random(1) < 0.5) {
    fill(55, 24, 25)
    stroke(155);
    rect(yy random(15),xx random(20), random(10), random(100));
  } else {
    rect(yy,xx, random(20), random(10));
  }
  xx = xx   spacing;
  if (xx > width) {
    xx = 0;
    yy = yy   spacing;
  }

}
}

class Horizontal{
  constructor(){
  }
  drawit(){
  if (random(1) < 0.5) {
    fill(55, 24, 25)
    stroke(155);
    rect(yy random(15),xx random(20), random(10), random(100));
    //line(xx, yy, xx   spacing, yy   spacing);
  } else {
    rect(yy,xx, random(20), random(10));
  }
  yy = yy   spacing;
  if (yy > width) {
    yy = 0;
    xx = xx   spacing;
  }

}


}

CodePudding user response：

@ggorlen's comment gave you some really great advice. Here's how that looks in code.

The idea of encapsulation means that your class should not change any variables outside of the class. Your Vertical and Horizontal classes were both modifying the same global variables xx and yy. That's why they are interfering with each other. I made it so that they each have their own coordinates this.x and this.y.

Calling new Horizontal() inside of the p5.js draw() function means that you get a new instance of the Horizontal class on every animation frame. But we want our classes to be aware of their last-used positions. So I am creating one single Horizontal instance and one single Vertical instance in the setup() function. They both start at (0,0) and move over by 50px, vertically or horizontally, on each animation frame.

const spacing = 50;

let hori;
let vert;

function setup() {
  createCanvas(1500, 1500);
  background(0);
  hori = new Horizontal(0, 0);
  vert = new Vertical(0, 0);
}

function draw() {
  fill(55, 24, 25);
  stroke(155);
  hori.drawit();
  vert.drawit();
}

class Vertical {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  drawit() {
    if (random(1) < 0.5) {
      rect(this.x   random(15), this.y   random(20), random(10), random(100));
    } else {
      rect(this.x, this.y, random(20), random(10));
    }
    this.y = this.y   spacing;
    if (this.y > height) {
      this.y = 0;
      this.x = this.x   spacing;
    }
    if (this.x > width) {
      this.x = 0;
    }
  }
}

class Horizontal {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  drawit() {
    if (random(1) < 0.5) {
      rect(this.x   random(15), this.y   random(20), random(10), random(100));
    } else {
      rect(this.x, this.y, random(20), random(10));
    }
    this.x = this.x   spacing;
    if (this.x > width) {
      this.x = 0;
      this.y = this.y   spacing;
    }
    if (this.y > height) {
      this.y = 0;
    }
  }
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>