Superclass "Curven"    onder deze class staat de class "Ruitjes".                        terug naar de inleiding

 

 

class Curven { 
  constructor(xa1, ya1, xa2, ya2, xa3, ya3, xa4, ya4, 
  xc1, yc1, xc2, yc2, xc3, yc3, xc4, yc4, xc5, yc5, xc6, yc6) 
  { 
 
  this.xa1 = xa1; this.ya1 = ya1; this.xa2 = xa2; this.ya2 = ya2; 
  this.xa3 = xa3; this.ya3 = ya3; this.xa4 = xa4; this.ya4 = ya4; 
  this.xc1 = xc1; this.yc1 = yc1; this.xc2 = xc2; this.yc2 = yc2; 
  this.xc3 = xc3; this.yc3 = yc3; this.xc4 = yc4, this.xc5 = yc5; 
  this.xc6 = xc6; this.yc6 = yc6; 
 
  this.ya1snelhUp = 2; this.ya1snelhDown = 2; 
  this.xa1snelhRe = 2; this.xa1snelhLi = 2; 
 
  this.ya2snelhUp = 2; this.ya2snelhDown = 2; 
  this.xa2snelhRe = 2; this.xa2snelhLi =  2; 
 
  this.ya3snelhUp = 2; this.ya3snelhDown = 2; 
  this.xa3snelhRe = 2; this.xa3snelhLi =  2; 
 
  this.ya4snelhUp = 2; this.ya4snelhDown = 2; 
  this.xa4snelhRe = 2; this.xa4snelhLi =   2; 
 
  this.xya1snelhReBo = 2;this.xya1snelhReOn = 2; 
  this.xya1snelhLiBo = 2;this.xya1snelhLiOn = 2; 
 
  this.xya2snelhReBo = 2;this.xya2snelhReOn = 2; 
  this.xya2snelhLiBo = 2;this.xya2snelhLiOn = 2; 
 
  this.xya3snelhReBo = 2;this.xya3snelhReOn = 2; 
  this.xya3snelhLiBo = 2; this.xya3snelhLiOn = 2; 
} 
 
ya1Up() { 
//let ysnelhUp = 1; 
 this.ya1 = this.ya1 - this.ya1snelhUp; 
 if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
 this.ya1snelhUp = this.ya1snelhUp * -1; 
 } 
} 
 
ya1Down() { 
 this.ya1 = this.ya1 + this.ya1snelhDown; 
 if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
 this.ya1snelhDown = this.ya1snelhDown * -1; 
 } 
} 
 
 xa1Re() { 
  this.xa1 = this.xa1 + this.xa1snelhRe; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xa1snelhRe = this.xa1snelhRe * -1; 
 } 
} 
 
 xa1Li() { 
  this.xa1 = this.xa1 - this.xa1snelhLi; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xa1snelhLi = this.xa1snelhLi * -1; 
 } 
} 
 
  ya2Up() { 
//let ysnelhUp = 1; 
  this.ya2 = this.ya2 - this.ya2snelhUp; 
  if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
  this.ya2snelhUp = this.ya2snelhUp * -1; 
 } 
} 
 
  ya2Down() { 
  this.ya2 = this.ya2 + this.ya2snelhDown; 
  if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
  this.ya2snelhDown = this.ya2snelhDown * -1; 
 } 
} 
 
 xa2Re() { 
  this.xa2 = this.xa2 + this.xa2snelhRe; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xa2snelhRe = this.xa2snelhRe * -1; 
 } 
} 
 
 xa2Li() { 
  this.xa2 = this.xa2 - this.xa2snelhLi; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xa2snelhLi = this.xa2snelhLi * -1; 
  } 
 } 
 
 ya3Up() { 
//let ysnelhUp = 1; 
 this.ya3 = this.ya3 - this.ya3snelhUp; 
 if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
 this.ya3snelhUp = this.ya3snelhUp * -1; 
 } 
} 
 
 ya3Down() { 
 this.ya3 = this.ya3 + this.ya3snelhDown; 
 if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
 this.ya3snelhDown = this.ya3snelhDown * -1; 
 } 
} 
 
xa3Re() { 
 this.xa3 = this.xa3 + this.xa3snelhRe; 
 if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
 this.xa3snelhRe = this.xa3snelhRe * -1; 
 } 
} 
 
xa3Li() { 
 this.xa3 = this.xa3 - this.xa3snelhLi; 
 if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
 this.xa3snelhLi = this.xa3snelhLi * -1; 
 } 
} 
 
ya4Up() { 
//let ysnelhUp = 1; 
this.ya4 = this.ya4 - this.ya4snelhUp; 
if ((this.ya4 > height/2) || (this.ya4 < -height/2)) { 
this.ya4snelhUp = this.ya4snelhUp * -1; 
 } 
} 
 
ya4Down() { 
this.ya4 = this.ya4 + this.ya4snelhDown; 
if ((this.ya4 > height/2) || (this.ya4 < -height/2)) { 
this.ya4snelhDown = this.ya4snelhDown * -1; 
 } 
} 
 
xa4Re() { 
this.xa4 = this.xa4 + this.xa4snelhRe; 
if ((this.xa4 > width/2) || (this.xa4 < -width/2)) { 
this.xa4snelhRe = this.xa4snelhRe * -1; 
 } 
} 
xa4Li() { 
this.xa4 = this.xa4 - this.xa4snelhLi; 
if ((this.xa4 > width/2) || (this.xa4 < -width/2)) { 
this.xa4snelhLi = this.xa4snelhLi * -1; 
 } 
} 
 
xya1ReBo() { 
this.xa1 = this.xa1 + this.xya1snelhReBo; 
if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
this.xya1snelhReBo = this.xya1snelhReBo * -1; 
} 
this.ya1 = this.ya1 - this.xya1snelhReBo; 
if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
this.xya1snelhReBo = this.xya1snelhReBo * -1; 
} 
} 
xya2ReBo() { 
this.xa2 = this.xa2 + this.xya2snelhReBo; 
if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
this.xya2snelhReBo = this.xya2snelhReBo * -1; 
} 
this.ya2 = this.ya2 - this.xya2snelhReBo; 
if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
this.xya2snelhReBo = this.xya2snelhReBo * -1; 
} 
} 
 
xya3ReBo() { 
this.xa3 = this.xa3 + this.xya3snelhReBo; 
if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
this.xya3snelhReBo = this.xya3snelhReBo * -1; 
} 
this.ya3 = this.ya3 - this.xya3snelhReBo; 
if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
this.xya3snelhReBo = this.xya3snelhReBo * -1; 
} 
} 
 
xya1LiBo() { 
this.xa1 = this.xa1 - this.xya1snelhLiBo; 
if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
this.xya1snelhLiBo = this.xya1snelhLiBo * -1; 
} 
this.ya1 = this.ya1 - this.xya1snelhLiBo; 
if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
this.xya1snelhLiBo = this.xya1snelhLiBo * -1; 
} 
} 
 
xya2LiBo() { 
this.xa2 = this.xa2 - this.xya2snelhLiBo; 
if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
this.xya2snelhLiBo = this.xya2snelhLiBo * -1; 
} 
this.ya2 = this.ya2 - this.xya2snelhLiBo; 
if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
this.xya2snelhLiBo = this.xya2snelhLiBo * -1; 
} 
} 
 
xya3LiBo() { 
this.xa3 = this.xa3 - this.xya3snelhLiBo; 
if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
this.xya3snelhLiBo = this.xya3snelhLiBo * -1; 
} 
this.ya3 = this.ya3 - this.xya3snelhLiBo; 
if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
this.xya3snelhLiBo = this.xya3snelhLiBo * -1; 
} 
} 
 
xya1LiOn() { 
this.xa1 = this.xa1 - this.xya1snelhLiOn; 
if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
this.xya1snelhLiOn = this.xya1snelhLiOn * -1; 
} 
this.ya1 = this.ya1 + this.xya1snelhLiOn; 
if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
this.xya1snelhLiOn = this.xya1snelhLiOn * -1; 
} 
} 
 
xya2LiOn() { 
this.xa2 = this.xa2 - this.xya2snelhLiOn; 
if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
this.xya2snelhLiOn = this.xya2snelhLiOn * -1; 
} 
this.ya2 = this.ya2 + this.xya2snelhLiOn; 
if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
this.xya2snelhLiOn = this.xya2snelhLiOn * -1; 
} 
} 
 
xya3LiOn() { 
this.xa3 = this.xa3 - this.xya3snelhLiOn; 
if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
this.xya3snelhLiOn = this.xya3snelhLiOn * -1; 
} 
this.ya3 = this.ya3 + this.xya3snelhLiOn; 
if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
this.xya3snelhLiOn = this.xya3snelhLiOn * -1; 
} 
} 
 
xya1ReOn() { 
this.xa1 = this.xa1 + this.xya1snelhReOn; 
if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
this.xya1snelhReOn = this.xya1snelhReOn * -1; 
} 
this.ya1 = this.ya1 + this.xya1snelhReOn; 
if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
this.xya1snelhReOn = this.xya1snelhReOn * -1; 
} 
} 
 
xya2ReOn() { 
this.xa2 = this.xa2 + this.xya2snelhReOn; 
if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
this.xya2snelhReOn = this.xya2snelhReOn * -1; 
} 
this.ya2 = this.ya2 + this.xya2snelhReOn; 
if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
this.xya2snelhReOn = this.xya2snelhReOn * -1; 
} 
} 
 
xya3ReOn() { 
this.xa3 = this.xa3 + this.xya3snelhReOn; 
if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
this.xya3snelhReOn = this.xya3snelhReOn * -1; 
} 
this.ya3 = this.ya3 + this.xya3snelhReOn; 
if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
this.xya3snelhReOn = this.xya3snelhReOn * -1; 
} 
} 
}
 
Class "Ruitjes" in p5.js voor het maken van het ruitjespapier als achtergrond
 
 

//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); 
 } 
}