使用相同的变量绘制多个类

Question

我想我对 classes 和封装的理解还不够好，因为当我绘制垂直线时和横向class同时，它们相互影响，改变了它们的绘制方式。但是，当我一次画一个 class 时，它就可以正常工作。我不明白为什么会这样，因为它们是两个独立的 classes 并且它们中包含的变量不应该在外部访问？

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

}


}

Answer 1

@ggorlen 的评论给了你一些非常好的建议。这是代码中的样子。

封装的思想意味着你的 class 不应该改变 class 之外的任何变量。您的 Vertical 和 Horizontal class 都在修改相同的全局变量 xx 和 yy。这就是他们互相干扰的原因。我这样做是为了让他们每个人都有自己的坐标 this.x 和 this.y.

在 p5.js draw() 函数内部调用 new Horizontal() 意味着您会在每个动画帧上获得 Horizontal class 的新实例。但是我们希望我们的 classes 知道他们的 last-used 位置。因此，我在 setup() 函数中创建了一个 Horizontal 实例和一个 Vertical 实例。它们都从 (0,0) 开始，并在每个动画帧上垂直或水平移动 50px。

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/p5@1.4.1/lib/p5.js"></script>

使用相同的变量绘制多个类

drawing multiple classes with same variables

javascript

oop

p5.js

使用相同的变量绘制多个 类

drawing multiple classes with same variables

javascript

oop

p5.js

使用相同的变量绘制多个类