Schets met roterende hoeken.                      terug naar de inleiding
met toets "s" stoppen de rotaties met iedere andere toets starten de rotaties weer

                                                                              naar de roterende hoeken in fullscreen

 

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


let vorm = []; let ruitjes; let h = 0;
let sliderCreeren = true; let rond = true;
function setup() {
  buttonR1 = createButton('reset 0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);let rond = false;
  buttonR2 = createButton('reset 45');
  buttonR2.position(100,40);buttonR2.style('width','70px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset 90');
  buttonR3.position(20,80);buttonR3.style('width','70px');
  buttonR3.mouseClicked(buttonR3Action);
  buttonR4 = createButton('reset 135');
  buttonR4.position(100,80);buttonR4.style('width','80px');
  buttonR4.mouseClicked(buttonR4Action);
  button0 = createButton('dp 0');
  button0.position(20,120);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 1');
  button1.position(100,120);button1.style('width','70px');
  button1.mouseClicked(button1Action);
  button2 = createButton('dp 2');
  button2.position(20,160);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 3');
  button3.position(100,160);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(20,200);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 5');
  button5.position(100,200);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 6');
  button6.position(20,240);button6.style('width','70px');
  button6.mouseClicked(button6Action);
  button7 = createButton('dp 7');
  button7.position(100,240);button7.style('width','70px');
  button7.mouseClicked(button7Action);
 
  buttonZw = createButton('zwart');
  buttonZw.position(20,280);buttonZw.style('width','70px');
  buttonZw.mouseClicked(buttonZwAction);
 
  buttonBl= createButton('blauw');
  buttonBl.position(100,280);buttonBl.style('width','70px');
  buttonBl.mouseClicked(buttonBlAction);
 
  if (sliderCreeren) {
  sliderSW = createSlider(0, 70, 10, 1);
  sliderSW.position(20, 310); sliderSW.style('width', '100px');
}
  sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
  buttonRC = createButton('random kleur');
  buttonRC.position(20,340);buttonRC.style('width','100px');
  buttonRC.mouseClicked(buttonRCAction);
  buttonRondAU = createButton('rond aan/uit');
  buttonRondAU .position(20,380);buttonRondAU .style('width','100px');
  buttonRondAU .mouseClicked(buttonRondAUAction);
  buttonRuitAU = createButton('ruitjes aan/uit');
  buttonRuitAU.position(20,420);buttonRuitAU.style('width','100px');
  buttonRuitAU.mouseClicked(buttonRuitAUAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,460);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  let x = width/2;let y = height/2;let n = height/14;
  let a = sqrt(2*n*n);  let alpha = 100; let c = color(138,135,232);
  ruitjespap = new Ruitjes(n , x ,y);
  vorm[0] = new Hoek_n2n(n, 4, x,      y,      0+h, color(245,220,27,alpha),1,c);
  vorm[1] = new Hoek_n2n(n, 4, x,      y,    180+h, color(27,188, 45,alpha),1,c);
  vorm[2] = new Hoek_n4n(n, 4, x-1.5*a,y-a/2,-90+h, color(168,245,27,alpha),1,c);
  vorm[3] = new Hoek_n4n(n, 4, x+1.5*a,y-a/2, 90+h, color(245,138,177,alpha),1,c);
  vorm[4] = new Hoek_n3n(n, 6, x+a,    y+a,    0+h, color(168,245,27, alpha),1,c);
  vorm[5] = new Hoek_n3n(n, 2, x-a,    y+a,    0+h, color(245,138,177,alpha),1,c);
}
 
function draw() {
  //  background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
  strokeSlider();
 for (let i = 0; i < 6; i++){vorm[i].display();}
 
 if (key == 's' || key =='S') { }
else
{
  vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
  vorm[4].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
  vorm[0].yDownUp(); vorm[1].yUpDown();
}
  if (ruitjes){
    ruitjespap.display();
    for(let i = 0; i < 6; i++){vorm[i].dpAan();}
  }
}
 
function windowResized() {
  resizeCanvas(windowWidth,windowHeight);
}
 
function buttonR1Action(){h = 0;setup();}
function buttonR2Action(){h =45;setup();}
function buttonR3Action(){h =90;setup();}
function buttonR4Action(){h =135;setup();}
 
function button0Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=4;vorm[3].d=4;vorm[4].d=6;vorm[5].d=2;}
function button1Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=0;vorm[3].d=0;vorm[4].d=6;vorm[5].d=2;}
function button2Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=8;vorm[3].d=8;vorm[4].d=6;vorm[5].d=2;}
function button3Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=4;vorm[3].d=4;vorm[4].d=4;vorm[5].d=4;}
function button4Action()
 {vorm[0].d=6; vorm[1].d=6;vorm[2].d=2;vorm[3].d=6;vorm[4].d=1;vorm[5].d=7;}
function button5Action()
 {vorm[0].d=0; vorm[1].d=0;vorm[2].d=5;vorm[3].d=3;vorm[4].d=8;vorm[5].d=8;}
function button6Action()
 {vorm[0].d=8; vorm[1].d=4;vorm[2].d=7;vorm[3].d=1;vorm[4].d=2;vorm[5].d=6;}
function button7Action()
 {vorm[0].d=2; vorm[1].d=2;vorm[2].d=1;vorm[3].d=0;vorm[4].d=2;vorm[5].d=8;}
 
function buttonRCAction()
 {for (let i = 0; i< 6; i++)
 {vorm[i].c = color(random(0,200),random(0,255),random(0,255),100);
  vorm[i].sc = color(random(0,200),random(0,255),random(0,255),100);}}
function buttonZwAction(){for (let i = 0; i< 6; i++)vorm[i].sc = color(0);}
function buttonBlAction(){for (let i = 0; i< 6; i++)vorm[i].sc = color(138,135,232);}
function strokeSlider() {let sliderwaarde = sliderSW.value();
  for (let i = 0; i< 6; i++){vorm[i].sw = sliderwaarde;}}
function buttonRondAUAction()
{if (rond){strokeJoin(ROUND);rond = false;}
 else{strokeJoin(MITER);rond = true;}}
function buttonRuitAUAction()
 {if(ruitjes){ruitjes=false;}else{ruitjes=true;}}
function buttonDAction(){save('zes_hoeken.png');}