hoeken rechthoeken driehoeken animatie.                             terug naar de inleiding 

                                                                     animatie 1 in fullscreen                    animatie 2 in fullscreen

De schets maakt gebruik van objecten van de classes   Hoek_n4n,   Rechthoek,    Drieh_an,   Ruitjes en de superclass Vormen

 
let hoek = []; let vierkant = []; let driehoek = [];
let zwartwit = false; let startStop = true; let ruitjes = false;
 
function setup() {
  createCanvas(windowWidth, windowHeight);
 
  let x = width/2; let y  = height/2;
//let n = height/15; let a = n;
  let n = height/20; let a  = sqrt(2*n*n);
  const alfa = 100;  const sw = n/35; const sc = color(0); const dp = 4;
 
  buttonZW = createButton('zwart/wit');
  buttonZW.position(10,30);buttonZW.style('width','120px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonSS = createButton('start/stop rotatie');
  buttonSS.position(10,60);buttonSS.style('width','120px');
  buttonSS.mouseClicked(buttonSSAction);
  buttonRuitAU = createButton('ruitjes aan/uit');
  buttonRuitAU.position(10,90);buttonRuitAU.style('width','120px');
  buttonRuitAU.mouseClicked(buttonRuitAUAction);
  button0 = createButton('dp 0');
  button0.position(10,120);button0.style('width','50px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 1');
  button1.position(10,150);button1.style('width','50px');
  button1.mouseClicked(button1Action);
  button2 = createButton('dp 2');
  button2.position(10,180);button2.style('width','50px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 3');
  button3.position(10,210);button3.style('width','50px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(10,240);button4.style('width','50px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 5');
  button5.position(10,270);button5.style('width','50px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 6');
  button6.position(10,300);button6.style('width','50px');
  button6.mouseClicked(button6Action);
  button7= createButton('dp 7');
  button7.position(10,330);button7.style('width','50px');
  button7.mouseClicked(button7Action);
  button8= createButton('dp 8');
  button8.position(10,360);button8.style('width','50px');
  button8.mouseClicked(button8Action);
  buttonD = createButton('downloaden');
  buttonD.position(10,390);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
 
  hoek[0] = new Hoek_n4n(n, dp, x+2*a, y-5*a/2, 180, color(242,125,146, alfa),sw,sc);
  hoek[1] = new Hoek_n4n(n, dp, x+6*a, y-5*a/2, 180, color(242,200,125, alfa),sw,sc);
  hoek[2] = new Hoek_n4n(n, dp, x+2*a, y-5*a/2,   0, color(180,111,196, alfa),sw,sc);
  hoek[3] = new Hoek_n4n(n, dp, x+6*a, y-5*a/2,   0, color(226,125,242, alfa),sw,sc);
 
  hoek[4] = new Hoek_n4n(n, dp, x+2*a, y+5*a/2, 180, color(242,237,125, alfa),sw,sc);
  hoek[5] = new Hoek_n4n(n, dp, x+6*a, y+5*a/2, 180, color(242,125,135, alfa),sw,sc);
  hoek[6] = new Hoek_n4n(n, dp, x+2*a, y+5*a/2,   0, color(125,242,137, alfa),sw,sc);
  hoek[7] = new Hoek_n4n(n, dp, x+6*a, y+5*a/2,   0, color(242,233,125, alfa),sw,sc);
 
  hoek[8]  = new Hoek_n4n(n, dp, x-2*a, y-5*a/2, 180, color(64,242,185, alfa),sw,sc);
  hoek[9]  = new Hoek_n4n(n, dp, x-6*a, y-5*a/2, 180, color(36,211,78,  alfa),sw,sc);
  hoek[10] = new Hoek_n4n(n, dp, x-2*a, y-5*a/2,   0, color(194,8,252,  alfa),sw,sc);
  hoek[11] = new Hoek_n4n(n, dp, x-6*a, y-5*a/2,   0, color(255,93,193, alfa),sw,sc);
 
  hoek[12] = new Hoek_n4n(n, dp, x-2*a, y+5*a/2, 180, color(93,226,242, alfa),sw,sc);
  hoek[13] = new Hoek_n4n(n, dp, x-6*a, y+5*a/2, 180, color(102,242,93, alfa),sw,sc);
  hoek[14] = new Hoek_n4n(n, dp, x-2*a, y+5*a/2,   0, color(125,242,137,alfa),sw,sc);
  hoek[15] = new Hoek_n4n(n, dp, x-6*a, y+5*a/2,   0, color(226,125,242, alfa),sw,sc);
 
  vierkant[0]  = new Rechthoek(n*2,n*2, 0, x-6*a, y-5*a/2, 45, color(125,242,233, alfa),sw,sc);
  vierkant[1]  = new Rechthoek(n*2,n*2, 0, x-4*a, y-5*a/2, 45, color(242,125,125, alfa),sw,sc);
  vierkant[2]  = new Rechthoek(n*2,n*2, 0, x-2*a, y-5*a/2, 45, color(179,224,120, alfa),sw,sc);
  vierkant[3]  = new Rechthoek(n*2,n*2, 0, x,     y-5*a/2, 45, color(144,242,125, alfa),sw,sc);
  vierkant[4]  = new Rechthoek(n*2,n*2, 0, x+6*a, y-5*a/2, 45, color(120,154,224, alfa),sw,sc);
  vierkant[5]  = new Rechthoek(n*2,n*2, 0, x+4*a, y-5*a/2, 45, color(242,125,125, alfa),sw,sc);
  vierkant[6]  = new Rechthoek(n*2,n*2, 0, x+2*a, y-5*a/2, 45, color(242,125,229, alfa),sw,sc);
 
  vierkant[7]  = new Rechthoek(n,n, 0, x-6*a, y, 45, color(125,242,233, alfa),sw,sc);
  vierkant[8]  = new Rechthoek(n,n, 0, x-4*a, y, 45, color(144,242,125, alfa),sw,sc);
  vierkant[9]  = new Rechthoek(n,n, 0, x-2*a, y, 45, color(144,242,125, alfa),sw,sc);
  vierkant[10] = new Rechthoek(n,n, 0, x,     y, 45, color(144,242,125, alfa),sw,sc);
  vierkant[11] = new Rechthoek(n,n, 0, x+2*a, y, 45, color(252,167,8,   alfa),sw,sc);
  vierkant[12] = new Rechthoek(n,n, 0, x+4*a, y, 45, color(252,167,8,   alfa),sw,sc);
  vierkant[13] = new Rechthoek(n,n, 0, x+6*a, y, 45, color(8,252,205,   alfa),sw,sc);
 
  vierkant[14] = new Rechthoek(n*2,n*2, 0, x-6*a, y+5*a/2, 45, color(121,222,78, alfa),sw,sc);
  vierkant[15] = new Rechthoek(n*2,n*2, 0, x-4*a, y+5*a/2, 45, color(8,252,205,  alfa),sw,sc);
  vierkant[16] = new Rechthoek(n*2,n*2, 0, x-2*a, y+5*a/2, 45, color(125,242,233,alfa),sw,sc);
  vierkant[17] = new Rechthoek(n*2,n*2, 0, x,     y+5*a/2, 45, color(242,125,125,alfa),sw,sc);
  vierkant[18] = new Rechthoek(n*2,n*2, 0, x+2*a, y+5*a/2, 45, color(125,242,233,alfa),sw,sc);
  vierkant[19] = new Rechthoek(n*2,n*2, 0, x+4*a, y+5*a/2, 45, color(8,252,205,  alfa),sw,sc);
  vierkant[20] = new Rechthoek(n*2,n*2, 0, x+6*a, y+5*a/2, 45, color(204,151,216,alfa),sw,sc);
 
  driehoek[0] = new Drieh_an(n, 0, x-6*a, y-5*a, 180, color(8,252,205,  alfa),sw,sc);
  driehoek[1] = new Drieh_an(n, 0, x-2*a, y-5*a, 180, color(242,125,125,alfa),sw,sc);
  driehoek[2] = new Drieh_an(n, 0, x+2*a, y-5*a, 180, color(8,252,205,  alfa),sw,sc);
  driehoek[3] = new Drieh_an(n, 0, x+6*a, y-5*a, 180, color(204,151,216,alfa),sw,sc);
 
  driehoek[4] = new Drieh_an(n, 0, x-6*a, y+5*a, 0, color(180,111,196,alfa),sw,sc);
  driehoek[5] = new Drieh_an(n, 0, x-2*a, y+5*a, 0, color(8,252,205,  alfa),sw,sc);
  driehoek[6] = new Drieh_an(n, 0, x+2*a, y+5*a, 0, color(242,125,125,alfa),sw,sc);
  driehoek[7] = new Drieh_an(n, 0, x+6*a, y+5*a, 0, color(8,252,205,  alfa),sw,sc);
 
  driehoek[8]  = new Drieh_an(n*2, 0, x-8*a, y-5*a/2,  90, color(8,252,205,  alfa),sw,sc);
  driehoek[9]  = new Drieh_an(n*2, 0, x-8*a, y+5*a/2,  90, color(242,125,125,alfa),sw,sc);
  driehoek[10] = new Drieh_an(n*2, 0, x+8*a, y-5*a/2, -90, color(242,222,103,alfa),sw,sc);
  driehoek[11] = new Drieh_an(n*2, 0, x+8*a, y+5*a/2, -90, color(151,216,210,alfa),sw,sc);
  ruitjespap = new Ruitjes(n, x,y);
}
 
function draw() {
  if (zwartwit) {background(0)}
   else {clear(); background('rgba(255,255,255, 0)');}
 
  for (let i=0; i<16; i++) {hoek[i].display();}
  for (let i=0; i<21; i++) {vierkant[i].display();}
  for (let i=0; i<12; i++) {driehoek[i].display();}
 
  if (ruitjes){ruitjespap.display();
     for (let i=0; i<16; i++) {hoek[i].dpAan();}
     for (let i=0; i<21; i++) {vierkant[i].dpAan();}
     for (let i=0; i<12; i++) {driehoek[i].dpAan();}}
 
  if (startStop) {
  hoek[0].stappenLi(hoek[0]);   hoek[1].stappenRe(hoek[1]);
  hoek[2].stappenLi(hoek[2]);   hoek[3].stappenRe(hoek[3]);
  hoek[4].stappenLi(hoek[4]);   hoek[5].stappenRe(hoek[5]);
  hoek[6].stappenLi(hoek[6]);   hoek[7].stappenRe(hoek[7]);
  hoek[8].stappenLi(hoek[8]);   hoek[9].stappenRe(hoek[9]);
  hoek[10].stappenLi(hoek[10]); hoek[11].stappenRe(hoek[11]);
  hoek[12].stappenLi(hoek[12]); hoek[13].stappenRe(hoek[13]);
  hoek[14].stappenLi(hoek[14]); hoek[15].stappenRe(hoek[15]); }
  else {  }
}
 
  function windowResize() {
  resizeCanvas(windowWidth, windowHeight);
}
  function buttonZWAction(){if(zwartwit){zwartwit   = false;} else {zwartwit =true;}}
  function buttonSSAction(){if(startStop){startStop = false;} else {startStop=true;}}
  function buttonRuitAUAction(){if(ruitjes){ruitjes = false;} else {ruitjes  =true;}}
 
  function button0Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 0;}}
  function button1Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 1;}}
  function button2Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 2;}}
  function button3Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 3;}}
  function button4Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 4;}}
  function button5Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 5;}}
  function button6Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 6;}}
  function button7Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 7;}}
  function button8Action() {for(let i = 0; i< 16; i++) {hoek[i].d = 8;}}
  function buttonDAction(){save('hoek_drieh_rechth.png');}