Creating a class out of small 10print program

Question

I wanted to take this little 10print program (credit to codingtrain) and turn into a class but ran into this weird problem: the OOP version is not working, while the non OOP is going all the way down.

It's the same code so why is it not working, this is a real mystery to me? All of the variables are encapsulated in the class and refrenced with the "this." keyword so why it is acting differently?

let xx = 0;
let yy = 0;
let spacing = 20;

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

function draw() {
  stroke(255);
  if (random(1) < 0.5) {
    fill(2, 24, 242)
    line(xx, yy, xx + spacing, yy + spacing);
  } else {
    line(xx, yy + spacing, xx + spacing, yy);
  }
  xx = xx + spacing;
  if (xx > width) {
    xx = 0;
    yy = yy + spacing;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

let tenPrint;

function setup() {
  createCanvas(500, 500);
  tenPrint = new Tenprint();
}

function draw() {
  tenPrint.drawit();
}

class Tenprint {
  constructor() {
    this.xx = 0;
    this.yy = 0;
    this.spacing = 20;
  }
  drawit() {
    stroke(55);
    if (random(1) < 0.5) {
      fill(2, 24, 242)
      line(this.xx, this.yy, this.xx + this.spacing, this.yy + this.spacing);
    } else {
      line(this.xx, this.yy + this.spacing, this.xx + this.spacing, this.yy);
    }
    this.xx = this.xx + this.spacing;
    if (this.xx > this.width) {
      this.xx = 0;
      this.yy = this.yy + this.spacing;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>