drafting perspective

let cArray = [];
let rArray = [];
let npoints, nrect;
let b;
function setup() {
  cnv = createCanvas(windowWidth, windowHeight);
  background(240, 240, 230);
  b = createButton("mix");
  b.position(10, 10);
  b.mousePressed(buttonP);
  npoints = int(random(1, 2));
  nrect = int(random(1, 4));
  fill(0);
  strokeWeight(0.2);
  for (let i = 0; i < npoints; i++) {
    cArray.push(
      new pPoint(random(30, width - 30), random(30, height - 30), 10)
    );
  }
  for (let i = 0; i < nrect; i++) {
    rArray.push(
      new structB(
        random(100, width - 100),
        random(100, height - 100),
        random(20, 100),
        random(20, 100),
        random(20, 50)
      )
    );
  }
  c1 = color(random(200, 250), random(200, 250), random(200, 250));
  c2 = color(random(20, 150), random(20, 150), random(20, 150));
  c3 = color(random(200, 250), random(200, 250), random(200, 250), 50);
}
function draw() {
  background(c1);
  stroke(c2);

  for (let i = 0; i < cArray.length; i++) {
    cArray[i].move();
  }
  for (let i = 0; i < rArray.length; i++) {
    rArray[i].move();
  }
  for (let i = 0; i < npoints; i++) {
    circle(cArray[i].x, cArray[i].y, cArray[i].d);
  }
  for (let i = 0; i < rArray.length; i++) {
    rArray[i].display();
  }
}

class pPoint {
  constructor(x, y, d) {
    this.x = x;
    this.y = y;
    this.d = d;
  }
  move() {
    if (dist(this.x, this.y, mouseX, mouseY) < this.d && mouseIsPressed) {
      this.x = mouseX;
      this.y = mouseY;
    }
  }
}

class structB {
  constructor(x, y, h, w, d) {
    this.x = x;
    this.y = y;
    this.h = h;
    this.w = w;
    this.d = d;
  }
  display() {
    fill(c3);
    rect(this.x, this.y, this.w, this.h);
    for (let i = 0; i < cArray.length; i++) {
      if (this.x > cArray[i].x) {
        triangle(
          this.x,
          this.y,
          this.x,
          this.y + this.h,
          cArray[i].x,
          cArray[i].y
        );
      }
      if (this.x + this.w < cArray[i].x) {
        triangle(
          this.x + this.w,
          this.y,
          this.x + this.w,
          this.y + this.h,
          cArray[i].x,
          cArray[i].y
        );
      }
      if (this.y > cArray[i].y) {
        triangle(
          this.x,
          this.y,
          this.x + this.w,
          this.y,
          cArray[i].x,
          cArray[i].y
        );
      }
      if (this.y + this.h < cArray[i].y) {
        triangle(
          this.x,
          this.y + this.h,
          this.x + this.w,
          this.y + this.h,
          cArray[i].x,
          cArray[i].y
        );
      }
    }
  }
  move() {
    if (dist(this.x, this.y, mouseX, mouseY) < 30 && mouseIsPressed) {
      this.x = mouseX;
      this.y = mouseY;
    }
  }
}

function buttonP() {
  npoints = int(random(1, 4));
  nrect = int(random(1, 10));
  cArray = [];
  rArray = [];
  for (let i = 0; i < npoints; i++) {
    cArray.push(
      new pPoint(random(30, width - 30), random(30, height - 30), 10)
    );
  }
  for (let i = 0; i < nrect; i++) {
    rArray.push(
      new structB(
        random(100, width - 100),
        random(100, height - 100),
        random(20, 100),
        random(20, 100),
        random(20, 50)
      )
    );
  }
  c1 = color(random(200, 250), random(200, 250), random(200, 250));
  c2 = color(random(20, 150), random(20, 150), random(20, 150));
  c3 = color(random(200, 250), random(200, 250), random(200, 250), 50);
}