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

onder deze class staat de class "WEBGLRuitjes"

 
 

//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 
 } 
 
 strokeWeight(2); 
 stroke(255, 0, 0); 
 //rode assenstelsel 
 line(0, height/2, width, height/2); 
 line(width/2, 0, width/2, height); 
 stroke(0); 
 strokeWeight(10); 
 //om de 5 vakjes een controle puntje plaatsen 
 for (let k = 0; k < height; k = k+5) { 
 point(this.x-k*this.n,  this.y); 
 point(this.x+k*this.n,  this.y); 
 point(this.x,  this.y-k*this.n); 
 point(this.x,  this.y+k*this.n); 
   } 
 strokeWeight(1); 
 stroke(0); 
 } 
}
 
 
class  "WEBGLRuitjes"  voor het maken van het ruitjespapier voor schetsen in de WEBGL mode
 
 

class WEBGLRuitjes { 
 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(-width/2, +i, width/2, +i); //naar beneden 
 line(-(width/2), -i, width/2, -i); //naar boven 
 } 
 
 //verticale lijntjes 
 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 
 } 
 
 strokeWeight(2); 
 stroke(255, 0, 0); 
 //rode assenstelsel 
 line(-width/2, 0, width/2, 0); 
 line(0, -height/2, 0,height/2); 
 stroke(0); 
 } 
}