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>