acht ruiten en een vierkant.                                         terug naar de inleiding
Met de "s" toets stoppen de rotaties met iedere andere toets starten de rotaties weer.
                                                                   acht ruiten en een vierkant in fullscreen
 
de schets in p5.js maakt gebruik van objecten van de p5.js classes "Ruit" , "Rechthoek" en de superclass "Vormen"

 

 
  vorm = []; let ruitjes; let n; let x; rechth = true; zwartwit = false;
function setup() {
createCanvas(windowWidth, windowHeight);
 buttonR1 = createButton('reset');
 buttonR1.position(20,40);buttonR1.style('width','70px');
 buttonR1.mouseClicked(buttonR1Action);
 buttondp0 = createButton('dp 0');
 buttondp0.position(20,80);buttondp0.style('width','70px');
 buttondp0.mouseClicked(buttondp0Action);
 buttondp1 = createButton('dp 1a');
 buttondp1.position(20,120);buttondp1.style('width','70px');
 buttondp1.mouseClicked(buttondp1Action);
 buttondp2 = createButton('dp 1b');
 buttondp2.position(100,120);buttondp2.style('width','70px');
 buttondp2.mouseClicked(buttondp2Action);
 buttondp3 = createButton('dp 2a');
 buttondp3.position(20,160);buttondp3.style('width','70px');
 buttondp3.mouseClicked(buttondp3Action);
 buttondp4 = createButton('dp 2b');
 buttondp4.position(100,160);buttondp4.style('width','70px');
 buttondp4.mouseClicked(buttondp4Action);
 buttondp5 = createButton('dp 3a');
 buttondp5.position(20,200);buttondp5.style('width','70px');
 buttondp5.mouseClicked(buttondp5Action);
 buttondp6 = createButton('dp 3b');
 buttondp6.position(100,200);buttondp6.style('width','70px');
 buttondp6.mouseClicked(buttondp6Action);
 buttondp7 = createButton('dp 4a');
 buttondp7.position(20,240);buttondp7.style('width','70px');
 buttondp7.mouseClicked(buttondp7Action);
 buttondp8 = createButton('dp 4b');
 buttondp8.position(100,240);buttondp8.style('width','70px');
 buttondp8.mouseClicked(buttondp8Action);
 buttonx1 = createButton('x1');
 buttonx1.position(20,280);buttonx1.style('width','70px');
 buttonx1.mouseClicked(buttonx1Action);
 buttonx2 = createButton('x2');
 buttonx2.position(100,280);buttonx2.style('width','70px');
 buttonx2.mouseClicked(buttonx2Action);
 buttonRechth= createButton('vierkant aan/uit');
 buttonRechth.position(20,320);buttonRechth.style('width','120px');
 buttonRechth.mouseClicked(buttonRechthAction);
 buttonZW = createButton('zwart/wit');
 buttonZW.position(20,360);buttonZW.style('width','120px');
 buttonZW.mouseClicked(buttonZWAction);
 buttonRAU = createButton('ruitjes aan uit');
 buttonRAU.position(20,400);buttonRAU.style('width','120px');
 buttonRAU.mouseClicked(buttonRAUAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,440); buttonD.style('width','100px');
 buttonD.mouseClicked(buttonDAction);
  x = width/2; let y = height/2; n = height/5;
  let a = sqrt(2*n*n); let hn = sqrt(3*n*n/4);
  let alfa = 100; let sw = n/100; let sc = color(0);
  vorm[0] = new Ruit(n, 1, x-3*n/2, y-hn,  30, color(255, 255, 0, alfa),sw,sc);
  vorm[1] = new Ruit(n, 1, x+3*n/2, y-hn, -30, color(250, 110,100,alfa),sw,sc);
  vorm[2] = new Ruit(n, 1, x+3*n/2, y+hn,-150, color(251, 122, 99,alfa),sw,sc);
  vorm[3] = new Ruit(n, 1, x-3*n/2, y+hn, 150, color(0, 255, 0,   alfa),sw,sc);
  vorm[4] = new Ruit(n, 1, x-n,     y,     60, color(30, 247, 220,alfa),sw,sc);
  vorm[5] = new Ruit(n, 1, x+n,     y,    -60, color(247, 201, 30,alfa),sw,sc);
  vorm[6] = new Ruit(n, 1, x+n,     y,    240, color(178, 247, 50,alfa),sw,sc);
  vorm[7] = new Ruit(n, 1, x-n,     y,   -240, color(30, 176, 247,alfa),sw,sc);
  vorm[8] = new Rechthoek(a,a,0, x, y,     45, color(0, 200, 0,   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 < 8; i++){vorm[i].display();}
  if (rechth) {vorm[8].display()}
 
  if (ruitjes) {ruitjespap.display();
   for (let i = 0; i < 9; 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[5].dpRotRe(vorm[5]); vorm[4].dpRotLi(vorm[4]);
vorm[7].dpRotRe(vorm[7]); vorm[6].dpRotLi(vorm[6]);
}
}
 
function buttonR1Action(){setup();}
function buttondp0Action()
{for(let i = 0; i<8; i++) {vorm[i].d =1}}
function buttondp1Action()
{vorm[0].d=7; vorm[1].d=3; vorm[2].d=7; vorm[3].d=3;}
function buttondp2Action()
{vorm[4].d=5; vorm[5].d=1; vorm[6].d=5; vorm[7].d=1;}
function buttondp3Action()
{vorm[0].d=2; vorm[1].d=8; vorm[2].d=2; vorm[3].d=8;}
function buttondp4Action()
{vorm[4].d=6; vorm[5].d=4; vorm[6].d=6; vorm[7].d=4;}
function buttondp5Action()
{vorm[0].d=6; vorm[1].d=4; vorm[2].d=6; vorm[3].d=4;}
function buttondp6Action()
{vorm[4].d=2; vorm[5].d=8; vorm[6].d=2; vorm[7].d=8;}
function buttondp7Action()
{vorm[0].d=5; vorm[1].d=5; vorm[2].d=5; vorm[3].d=5;}
function buttondp8Action()
{vorm[4].d=7; vorm[5].d=3; vorm[6].d=7; vorm[7].d=3;}
function buttonx1Action()
{vorm[4].x=x-n; vorm[5].x=x+n;vorm[6].x=x+n;vorm[7].x=x-n;}
function buttonx2Action()
{vorm[4].x=x-2*n; vorm[5].x=x+2*n;vorm[6].x=x+2*n;vorm[7].x=x-2*n;}
function buttonRechthAction()
  {if (rechth){rechth = false;} else {rechth=true;}}
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit=true;}}
function buttonRAUAction()
  {if (ruitjes){ruitjes = false;} else {ruitjes=true;}}
function buttonDAction() {save('zeven_ruiten.png');}