"WebglRuitjes" en "Ruitjes"

class "WEBGLRuitjes" voor het maken van het ruitjespapier terug naar de inleiding

Hier is het midden van het canvas het punt (0,0)

onder deze class staat de class "Ruitjes" voor p5.js met het (0,0) punt links boven

 
  class WEBGLRuitjes {
 constructor(n, x, y) {
 this.x = x; this.y = y; this.n = n;
 }
 
 display() {
 strokeWeight(1);
 stroke(0);
 // horizontale lijntjes vanuit het midden
 for (let i = 0; i < height/2; i = i + this.n) {
   line(-width/2, i, width/2, i);   //naar beneden
   line(-width/2, -i, width/2, -i); //naar boven
}
 //verticale lijntjes vanuit het midden
 for (let i = 0; i < width/2; i = i + this.n) {
   line(i,-height/2, i, height/2);    //naar rechts
   line(-i, height/2, -i, -height/2); //naar links
 }
//rode assenstelsel
 strokeWeight(2);
 stroke(255, 0, 0);
 line(-width/2, 0, width/2, 0);
 line(0, -height/2, 0,height/2);
 
//om de 5 vakjes een controle puntje plaatsen
//punten in x richting
stroke(0);
strokeWeight(10);
for (let k = 0; k < width; k = k+5) {
   point(this.n*k, 0);
   point(-this.n*k, 0);
}
//punten in y richting
for (let k = 0; k < height; k = k+5) {
   point(0, this.n*k);
   point(0,-this.n*k);
}
strokeWeight(1);
stroke(0);
 }
}

class "Ruitjes" voor p5.js met het (0,0) punt links boven

 
 //constructor argumenten:
//n = grootte van de ruitjes, x = 0 punt x as, y = nulpunt y as
 
class Ruitjes {
 constructor(n, x, y) {
 this.x = x;
 this.y = y;
 this.n = n;
 }
 
 display() {
 strokeWeight(1);
 stroke(0);
 // horizontale lijntjes
 for (let i = 0; i < height/2; i = i + this.n) {
    line(0,height/2+i,width, height/2+i); //naar beneden
    line(0,height/2-i,width, height/2-i); //naar boven
 }
 
 //verticale lijntjes
 for (let i = 0; i < width/2; i = i + this.n) {
    line(width/2+i,0, width/2+i,height); //naar rechts
    line(width/2-i,0, width/2-i,height); //naar links
 }
 
 //rode assenstelsel
 strokeWeight(2);
 stroke(255, 0, 0);
 line(0, height/2, width, height/2);
 line(width/2, 0, width/2, height);
 //om de 5 vakjes een controle puntje plaatsen
 //punten in x richting
 stroke(0);
 strokeWeight(10);
 for (let k = 0; k < width; k = k+5) {
    point(width/2+this.n*k,  height/2);
    point(width/2-this.n*k,  height/2);
 }
 //punten in y richting
 for (let k = 0; k < height; k = k+5) {
    point(width/2,  height/2+this.n*k);
    point(width/2,  height/2-this.n*k);
 }
 strokeWeight(1);
 stroke(0);
  }
 }

Flevopink