De schets maakt gebruik van de p5.js  classes Hoek_n3n,    Hoek_n4n,   Drieh_nh90   en  de superclass  Vormen

 

let vorm = []; let h = 0; let ruitjes = false;
function setup() {
 buttonR = createButton('reset');
 buttonR.position(20,30);buttonR.style('width','50px');
 buttonR.mouseClicked(buttonRAction);
 buttonR45 = createButton('reset 45');
 buttonR45.position(20,60);buttonR45.style('width','70px');
 buttonR45.mouseClicked(buttonR45Action);
 buttonR90 = createButton('reset 90');
 buttonR90.position(20,90);buttonR90.style('width','70px');
 buttonR90.mouseClicked(buttonR90Action);
 button0 = createButton('dp 0');
 button0.position(20,120);button0.style('width','50px');
 button0.mouseClicked(button0Action);
 button1 = createButton('dp 1');
 button1.position(20,150);button1.style('width','50px');
 button1.mouseClicked(button1Action);
 button2 = createButton('dp 2');
 button2.position(20,180);button2.style('width','50px');
 button2.mouseClicked(button2Action);
 button3 = createButton('dp 3');
 button3.position(20,210);button3.style('width','50px');
 button3.mouseClicked(button3Action);
 button4 = createButton('dp 4');
 button4.position(20,240);button4.style('width','50px');
 button4.mouseClicked(button4Action);
 button5 = createButton('dp 5');
 button5.position(20,270);button5.style('width','50px');
 button5.mouseClicked(button5Action);
 button6 = createButton('dp 6');
 button6.position(20,300);button6.style('width','50px');
 button6.mouseClicked(button6Action);
 button7 = createButton('dp 7');
 button7.position(20,330);button7.style('width','50px');
 button7.mouseClicked(button7Action);
 button8 = createButton('dp 8');
 button8.position(20,360);button8.style('width','50px');
 button8.mouseClicked(button8Action);
 buttonD = createButton('downloaden');
 buttonD.position(20,390);buttonD.style('width','110px');
 buttonD.mouseClicked(buttonDAction);
 buttonRAU = createButton('ruitjes aan uit');
 buttonRAU.position(20,420);buttonRAU.style('width','110px');
 buttonRAU.mouseClicked(buttonRAUAction);
 createCanvas(windowWidth,windowHeight);
 let x = width/2; let y = height/2; let n = height/17;
 let alpha = 100;let sw = n/40 ;   let sc = color(0);
 
 vorm[0] = new Drieh_nh90(3*n,6*n,0,5,x-3*n,y+n,180+h,color(200,0,100,alpha),sw,sc);
 vorm[1] = new Drieh_nh90(3*n,6*n,1,1,x+3*n,y+n,180+h,color(0,255,0,alpha),  sw,sc);
 vorm[2] = new Hoek_n3n(n, 8, x-2*n, y-4*n,      45+h,color(255,255,0,alpha),sw,sc);
 vorm[3] = new Hoek_n3n(n, 8, x+2*n, y-4*n,     -45+h,color(255, 0,58,alpha),sw,sc);
 vorm[4] = new Hoek_n4n(n, 8, x-3*n, y+n,       135+h,color(140,255,0,alpha),sw,sc);
 vorm[5] = new Hoek_n4n(n, 8, x+3*n, y+n,      -135+h,color(0, 0, 255,alpha),sw,sc);
 vorm[6] = new Drieh_nh90(2*n,4*n,0,5,x-2*n,y-4*n,180+h,color(200,100,0,alpha),sw,sc);
 vorm[7] = new Drieh_nh90(2*n,4*n,1,1,x+2*n,y-4*n,180+h,color(0,100,200,alpha),sw,sc);
 ruitjespap = new Ruitjes(n,x,y);
}
 
function draw() {
 clear()
 background('rgba(255,255,255, 0)');
 for (let i = 0; i < 8; i++){vorm[i].display();}
 
 if (ruitjes) {ruitjespap.display();
   for (let i = 0; i < 8; i++) {vorm[i].dpAan();}};
 
  if (key == 's' || key == 'S') { }
   else
 {
 vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
 vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
 vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
 vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
 }
}
function buttonRAction()  {h=0; setup()}
function buttonR45Action(){h=45;setup()}
function buttonR90Action(){h=90;setup()}
function button0Action()
  {vorm[0].d = 5;vorm[1].d = 1;for(let i = 2; i < 6; i++){vorm[i].d = 8;}
   vorm[6].d = 5;vorm[7].d = 1;}
function button1Action()
  {vorm[0].d = 4;vorm[1].d = 2;for(let i = 2; i < 6; i++){vorm[i].d = 7;}
   vorm[6].d = 4;vorm[7].d = 2;}
function button2Action()
  {vorm[0].d = 3;vorm[1].d = 3;for(let i = 2; i < 6; i++){vorm[i].d = 6;}
   vorm[6].d = 3;vorm[7].d = 3;}
function button3Action()
  {vorm[0].d = 2;vorm[1].d = 4;for(let i = 2; i < 6; i++){vorm[i].d = 5;}
   vorm[6].d = 2;vorm[7].d = 4;}
function button4Action()
  {vorm[0].d = 1;vorm[1].d = 5;for(let i = 2; i < 6; i++){vorm[i].d = 4;}
   vorm[6].d = 1;vorm[7].d = 5;}
function button5Action()
  {vorm[0].d = 2;vorm[1].d = 4;for(let i = 2; i < 6; i++){vorm[i].d = 1;}
   vorm[6].d = 2;vorm[7].d = 4;}
function button6Action()
  {vorm[0].d = 0;vorm[1].d = 6;for(let i = 2; i < 6; i++){vorm[i].d = 1;}
   vorm[6].d = 0;vorm[7].d = 6;}
function button7Action()
  {vorm[0].d = 5;vorm[1].d = 1;vorm[2].d = 2;vorm[3].d = 4;
   vorm[4].d = 1;vorm[5].d = 4;vorm[6].d = 5;vorm[7].d = 1;}
function button8Action()
  {vorm[0].d = 1;vorm[1].d = 7;vorm[2].d = 3;vorm[3].d = 4;
   vorm[4].d = 5;vorm[5].d = 2;vorm[6].d = 2;vorm[7].d = 6;}
function buttonRAUAction()
  {if (ruitjes){ruitjes = false;} else {ruitjes = true;}}
function buttonDAction(){save('hoeken_driehoeken.png');}