De driehoeken in fullscreen , in p5.js

Tip: stop de rotaties en selecteer reset met een voor ingestelde hoek. mbv de dpr en dps knoppen verschillende afbeeldingen maken

 
vorm = []; let s = 0; let h = 0; let zwartwit = false;
let sliderR; let sliderS; let sliderCreeren = true;
 
function setup() {
  buttonR1 = createButton('reset 0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  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);
  button1r = createButton('dpr=1');
  button1r.position(20,120);button1r.style('width','70px');
  button1r.mouseClicked(button1rAction);
  button1s = createButton('dps=1');0
  button1s.position(100,120);button1s.style('width','70px');
  button1s.mouseClicked(button1sAction);
  button2r = createButton('dpr=2');
  button2r.position(20,160);button2r.style('width','70px');
  button2r.mouseClicked(button2rAction);
  button2s = createButton('dps=2');
  button2s.position(100,160);button2s.style('width','70px');
  button2s.mouseClicked(button2sAction);
  button3r = createButton('dpr=3');
  button3r.position(20,200);button3r.style('width','70px');
  button3r.mouseClicked(button3rAction);
  button3s = createButton('dps=3');
  button3s.position(100,200);button3s.style('width','70px');
  button3s.mouseClicked(button3sAction);
  button4r = createButton('dpr=4');
  button4r.position(20,240);button4r.style('width','70px');
  button4r.mouseClicked(button4rAction);
  button4s = createButton('dps=4');
  button4s.position(100,240);button4s.style('width','70px');
  button4s.mouseClicked(button4sAction);
  button5r = createButton('dpr=5');
  button5r.position(20,280);button5r.style('width','70px');
  button5r.mouseClicked(button5rAction);
  button5s = createButton('dps=5');
  button5s.position(100,280);button5s.style('width','70px');
  button5s.mouseClicked(button5sAction);
 
  button6r = createButton('dpr=6');
  button6r.position(20,320);button6r.style('width','70px');
  button6r.mouseClicked(button6rAction);
 
  button6s = createButton('dps=6');
  button6s.position(100,320);button6s.style('width','70px');
  button6s.mouseClicked(button6sAction);
  button0r = createButton('dpr=0');
  button0r.position(20,360);button0r.style('width','70px');
  button0r.mouseClicked(button0rAction);
  button0s = createButton('dps=0');
  button0s.position(100,360);button0s.style('width','70px');
  button0s.mouseClicked(button0sAction);
 
  if (sliderCreeren) {
  sliderR = createSlider(0, 200, 100, 2);
  sliderR.position(20, 390); sliderR.style('width', '80px');
  sliderS = createSlider(0, 200, 100, 2);
  sliderS.position(20, 420); sliderS.style('width', '80px');
}
  sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,450);buttonZW.style('width','120px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,480);buttonD.style('width','120px');
  buttonD.mouseClicked(buttonDAction);
 
createCanvas(windowWidth, windowHeight);
let x = 0; let y = 0; s = 0;
let dps = 3; //draaipunt van de stilstaande driehoeken
let dpr = 3; //draaipunt van de roterende driehoeken
let x2 = width/2; let y2 = height/2;
let n = height/6; let a = sqrt(2*n*n); let sw = height/500;
let alpha = 100; //heeft geen zin omdat de alfa van de slider instellingen wordt gebruikt
vorm[0] = new Drieh_an(n, dpr, x,    y-a, 180+h, color(255,0,0,   alpha),sw,color(0));
vorm[1] = new Drieh_an(n, dpr, x,    y-a,   0+h, color(200,0,100, alpha),sw,color(0));
vorm[2] = new Drieh_an(n, dpr, x+a,    y, -90+h, color(200,200,5, alpha),sw,color(0));
vorm[3] = new Drieh_an(n, dpr, x+a,    y,  90+h, color(200,200,50,alpha),sw,color(0));
vorm[4] = new Drieh_an(n, dpr, x,    y+a,   0+h, color(200,0,50,  alpha),sw,color(0));
vorm[5] = new Drieh_an(n, dpr, x,    y+a, 180+h, color(200,0,50,  alpha),sw,color(0));
vorm[6] = new Drieh_an(n, dpr, x-a,    y,  90+h, color(100,200,50,alpha),sw,color(0));
vorm[7] = new Drieh_an(n, dpr, x-a,    y, -90+h, color(100,200,50,alpha),sw,color(0));
vorm[8] = new Drieh_an(n, dpr,x-a/2,y-a/2, 135+h,color(100,200,100,alpha),sw,color(0));
vorm[9] = new Drieh_an(n, dpr,x+a/2,y-a/2,-135+h,color(100,200,100,alpha),sw,color(0));
vorm[10] = new Drieh_an(n,dpr,x+a/2,y+a/2, -45+h,color(100,200,50, alpha),sw,color(0));
vorm[11] = new Drieh_an(n,dpr,x-a/2,y+a/2,  45+h,color(100,200,50, alpha),sw,color(0));
 
vorm[12] = new Drieh_an(n, dps, x2,   y2-a,180+h, color(255,0,0, alpha),   sw, color(0));
vorm[13] = new Drieh_an(n, dps, x2,   y2-a,  0+h,color(200,0,100,alpha),   sw, color(0));
vorm[14] = new Drieh_an(n, dps, x2+a, y2,  -90+h, color(200,200,50,alpha), sw, color(0));
vorm[15] = new Drieh_an(n, dps, x2+a, y2,   90+h, color(200,200,50,alpha), sw, color(0));
vorm[16] = new Drieh_an(n, dps, x2,   y2+a,  0+h, color(200,0,50,  alpha), sw, color(0));
vorm[17] = new Drieh_an(n, dps, x2,   y2+a,180+h, color(200,0, 50, alpha), sw, color(0));
vorm[18] = new Drieh_an(n, dps, x2-a, y2,   90+h, color(100,200,50,alpha), sw, color(0));
vorm[19] = new Drieh_an(n, dps, x2-a, y2,  -90+h, color(100,200,50,alpha), sw, color(0));
vorm[20] = new Drieh_an(n, dps, x2-a/2,y2-a/2, 135+h,color(100,200,100,alpha),sw,color(0));
vorm[21] = new Drieh_an(n, dps, x2+a/2,y2-a/2,-135+h,color(100,200,100,alpha),sw,color(0));
vorm[22] = new Drieh_an(n, dps, x2+a/2,y2+a/2, -45+h,color(100,200,50, alpha),sw,color(0));
vorm[23] = new Drieh_an(n, dps, x2-a/2,y2+a/2,  45+h,color(100,200,50, alpha),sw,color(0));
}
 
function draw() {
//background('#E6FBFF');
if (zwartwit) {background(0)}
   else {clear(); background('rgba(255,255,255, 0)');}
 alfaR();
 alfaS();
 push();
 translate(width/2, height/2);
 //de roterende driehoeken
   if (key == 's'|| key == 'S'){  } else {
     s = s - 0.5;
     rotate(radians(s));
     if (s < -360) {s = 0;}
   }
 pop();
 // Het draaiende canvas,rotate wordt 2 keer aangeroepen.
 // Als 's' is ingedrukt stopt het draaien in de rotatie stand s
 push();
 translate(width/2, height/2);
 rotate(radians(s));
 for (let i = 0; i < 12; i++) {vorm[i].display();}
 pop();
 // de stilstaande driehoeken
 for (let i = 12; i < 24; i++){vorm[i].display();}
}
 
function buttonR1Action(){h = 0;setup();}
function buttonR2Action(){h =45;setup();}
function buttonR3Action(){h =90;setup();}
function buttonR4Action(){h =135;setup();}
 
function button1rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 1;}}
function button1sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 1;}}
function button2rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 2;}}
function button2sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 2;}}
function button3rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 3;}}
function button3sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 3;}}
function button4rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 4;}}
function button4sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 4;}}
function button5rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 5;}}
function button5sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 5;}}
function button6rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 6;}}
function button6sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 6;}}
function button0rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 0;}}
function button0sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 0;}}
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit=true;}}
function buttonDAction() {save('vierentwintig_driehoeken.png');}
 
function alfaR(){let sliderAlfa = sliderR.value();
vorm[0].c = color(255,0,0,sliderAlfa);    vorm[1].c = color(200,0,100,sliderAlfa);
vorm[2].c = color(200,200,50,sliderAlfa); vorm[3].c = color(200,200,50,sliderAlfa);
vorm[4].c = color(200,0,50,sliderAlfa);   vorm[5].c = color(200,0,50,sliderAlfa);
vorm[6].c = color(100,200,50,sliderAlfa); vorm[7].c = color(100,200,50,sliderAlfa);
vorm[8].c = color(100,200,100,sliderAlfa);vorm[9].c = color(100,200,100,sliderAlfa);
vorm[10].c =color(100,200,50,sliderAlfa);vorm[11].c = color(100,200,50,sliderAlfa);}
 
function alfaS(){let sliderAlfa = sliderS.value();
vorm[12].c = color(255,0,0,sliderAlfa);    vorm[13].c = color(200,0,100,sliderAlfa);
vorm[14].c = color(200,200,50,sliderAlfa); vorm[15].c = color(200,200,50,sliderAlfa);
vorm[16].c = color(200,0,50,sliderAlfa);   vorm[17].c = color(200,0,50,sliderAlfa);
vorm[18].c = color(100,200,50,sliderAlfa); vorm[19].c = color(100,200,50,sliderAlfa);
vorm[20].c = color(100,200,100,sliderAlfa);vorm[21].c = color(100,200,100,sliderAlfa);
vorm[22].c = color(100,200,50,sliderAlfa); vorm[23].c = color(100,200,50,sliderAlfa);}