Flevopink

 superclass  "Vormen"  in p5.js                        terug naar de inleiding

Vormen,  te gebruiken met de p5.js schetsen en de p5.js classes. Onder dit script staat de class "Ruitjes" tbv het ruitjespapier als achtergrond.van een schets

 

class Vormen { 
  constructor(x, y, hoek) { 
    this.x = x; this.y = y; this.hoek = hoek; 
 
    this.ysnelhUp = 2; this.ysnelhDown = 2; 
    this.xsnelhReLi = 2; this.xsnelhLiRe = 2; 
    this.xsnelhRe = 2; this.xsnelhLi = 2; 
  } 
 
  dpAan() { 
   push(); 
   translate(this.x, this.y); 
   stroke(255,0,0); 
   strokeWeight(8); 
   point(0,0); 
   strokeWeight(1); 
   stroke(0); 
   pop(); 
  } 
 
  yUpDown() { 
  this.y = this.y - this.ysnelhUp; 
  if ((this.y > height) || (this.y < 0)) { 
  this.ysnelhUp = this.ysnelhUp * -1; 
   } 
} 
 
 yDownUp() { 
 this.y = this.y + this.ysnelhDown; 
 if ((this.y > height) || (this.y < 0)) { 
 this.ysnelhDown = this.ysnelhDown * -1; 
  } 
} 
 
  xLiRe() { 
    this.x = this.x - this.xsnelhLiRe; 
    if ((this.x > width) || (this.x < 0)) { 
    this.xsnelhLiRe = this.xsnelhLiRe * -1; 
  } 
} 
 
  xReLi() { 
    this.x = this.x + this.xsnelhReLi; 
    if ((this.x > width) || (this.x < 0)) { 
    this.xsnelhReLi = this.xsnelhReLi * -1; 
  } 
} 
 
 xRe() { 
  this.x = this.x + this.xsnelhRe; 
  if (this.x > width) { 
  this.x = 0; 
 } 
} 
 xLi() { 
   this.x = this.x - this.xsnelhLi; 
   if (this.x < 0) { 
   this.x = width; 
 } 
} 
 
 dpRotRe(obj) { 
   obj.hoek = obj.hoek + 0.5; 
   if (obj.hoek >= 360) obj.hoek= 0; 
  } 
 
  dpRotLi(obj) { 
    obj.hoek = obj.hoek - 0.5; 
    if (obj.hoek <= -360) obj.hoek= 0; 
   } 
 
  dpRotReS(obj) { 
    obj.hoek = obj.hoek + 2; 
    if (obj.hoek >= 360) obj.hoek= 0; 
    } 
 
  dpRotLiS(obj) { 
    obj.hoek = obj.hoek - 2; 
    if (obj.hoek <= -360) obj.hoek= 0; 
  } 
}

 

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