roterende achthoeken in fullscreen

De schets maakt gebruik van objecten van de p5.js classes  Vhoek_n8,     en objectmethodes van de superclass  Vormen

de schets in p5.js

 

 let vorm = []; let n; let x; let y;
let ruitjes = false; let ruitjespap;
function setup() {
 buttonR = createButton('reset');
 buttonR.position(20,40);buttonR.style('width','70px');
 buttonR.mouseClicked(buttonRAction);
 button0 = createButton('x,y');
 button0.position(20,80);button0.style('width','70px');
 button0.mouseClicked(button0Action);
 button1 = createButton('x +-n/2');
 button1.position(20,120);button1.style('width','70px');
 button1.mouseClicked(button1Action);
 buttonh1 = createButton('x +-n');
 buttonh1.position(20,160);buttonh1.style('width','70px');
 buttonh1.mouseClicked(buttonh1Action);
 buttonh2 = createButton('y +-n/2');
 buttonh2.position(20,200);buttonh2.style('width','70px');
 buttonh2.mouseClicked(buttonh2Action);
 buttonRuit= createButton('ruitjes aan/uit');
 buttonRuit.position(20,240);buttonRuit.style('width','140px');
 buttonRuit.mouseClicked(buttonRuitAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,280);buttonD.style('width','120px');
 buttonD.mouseClicked(buttonDAction);
 
 createCanvas(windowWidth, windowHeight);
  x = width/2; y = height/2; n = height/7;
  let alfa = 50; let sw = n/100; let sc = color(0);
  vorm[1] = new Vhoek_n8(n, 1, x, y, 0, color(100,0, 50, alfa),sw,sc);
  vorm[2] = new Vhoek_n8(n, 2, x, y, 0, color(200,100,0, alfa),sw,sc);
  vorm[3] = new Vhoek_n8(n, 3, x, y, 0, color(0, 255, 0, alfa),sw,sc);
  vorm[4] = new Vhoek_n8(n, 4, x, y, 0, color(255, 0,200,alfa),sw,sc);
  vorm[5] = new Vhoek_n8(n, 5, x, y, 0, color(255, 0,200,alfa),sw,sc);
  vorm[6] = new Vhoek_n8(n, 6, x, y, 0, color(0, 255, 0, alfa),sw,sc);
  vorm[7] = new Vhoek_n8(n, 7, x, y, 0, color(200, 100,0,alfa),sw,sc);
  vorm[8] = new Vhoek_n8(n, 8, x, y, 0, color(100, 0, 50,alfa),sw,sc);
  vorm[9] = new Vhoek_n8(n, 9, x, y, 0, color(100, 0, 50,alfa),sw,sc);
  vorm[10] = new Vhoek_n8(n,10,x, y, 0, color(100, 0, 50,alfa),sw,sc);
  ruitjespap = new Ruitjes(n , x, y);
}
 
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
  if (ruitjes) {ruitjespap.display();
  for (let i=1; i<11; i++) {vorm[i].dpAan();}}
 
  for (let i=1; i<11; i++) {vorm[i].display();}
  if (key == 's' || key == 'S') {  }
else {
  vorm[1].dpRotLi(vorm[1]); vorm[8].dpRotRe(vorm[8]);
  vorm[2].dpRotRe(vorm[2]); vorm[7].dpRotLi(vorm[7]);
  vorm[3].dpRotLi(vorm[3]); vorm[6].dpRotRe(vorm[6]);
  vorm[4].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
  }
}
function buttonRAction(){setup();}
function button0Action()
 {for(let i=1; i<9; i++){vorm[i].x=x; vorm[i].y=y;}}
function button1Action()
 {vorm[1].x = x-n/2; vorm[2].x = x+n/2; vorm[3].x = x-n/2; vorm[4].x = x+n/2;
  vorm[5].x = x-n/2; vorm[6].x = x+n/2; vorm[7].x = x-n/2; vorm[8].x = x+n/2;}
function buttonh1Action()
 {vorm[1].x = x-n; vorm[2].x = x+n; vorm[3].x = x-n; vorm[4].x = x+n;
  vorm[5].x = x-n; vorm[6].x = x+n; vorm[7].x = x-n; vorm[8].x = x+n;}
function buttonh2Action()
 {vorm[1].y=y-n/2; vorm[2].y=y+n/2; vorm[3].y=y-n/2; vorm[4].y=y+n/2;
  vorm[5].y=y+n/2; vorm[6].y=y-n/2; vorm[7].y=y+n/2; vorm[8].y=y-n/2;}
function buttonRuitAction(){if(ruitjes){ruitjes = false;} else {ruitjes = true;}}
function buttonDAction(){save('tien_achthoeken.png');}