rendering shapes.                        terug naar de inleiding                     ga naar de animatie

Lijnen vanuit het middelpunt, vierkantjes en rechthoeken in de 4 kwadranten, die zich at random onder hoeken van 45 graden aaneenrijgen

De toetsfuncties                                ga ook naar de animatie op openprcessing

toets "5" start het aaneenrijgen van de cirkels en vierkantjes

Het aaneenrijgen stopt door n = 0 te maken

 

Shape lijnM;      //start in het middelpunt
Shape vierkKw1;   //vierkant in het eerste kwadrant
Shape cirkelKw2;  //cirkel in het tweede kwadrant 
Shape vierkKw3;   //vierkant in het derde kwadrant
Shape cirkelKw4;  //cirkel in het vierde kwadrant
float n;
 
void setup() { 
 // size(1600,900);
    size(960, 540); 
 // fullScreen();  
  float x = width/2;  
  float y =height/2;  
  n = height/15; 
 
  lijnM = new Shape(x, y, n);
  // x en y zijn de start middelpunten van de cirkels en vierkanten
  // en het beginpunt van de lijnen, n is de diameter
  vierkKw1  = new Shape(x+6.5*n, y-4*n, n);
  cirkelKw2 = new Shape(x-6.5*n, y-4*n, n); 
  vierkKw3  = new Shape(x-6.5*n, y+4*n, n);
  cirkelKw4 = new Shape(x+6.5*n, y+4*n, n); 
 
 // background(#E6FBFF);
    background(0);
} 
void draw() { 
  frameRate(4);
  lijnM.stappen();     //lijn in het middelpunt
  lijnM.displayL();
  
  vierkKw1.stappen();  //vierkant in het eerste kwadrant
  vierkKw1.displayR();
  
  cirkelKw2.stappen(); //cirkel in het tweede kwadrant 
  cirkelKw2.displayE();
 
  vierkKw3.stappen(); 
  vierkKw3.displayR(); //vierkant in het derde kwadrant
 
  cirkelKw4.stappen(); //cirkel in het vierde kwadrant
  cirkelKw4.displayE();
 } 
 
void keyPressed() {
  
  if (key == 's') {
    noLoop();
  }
  if (key == 'r') {   
    loop();
  }
  if (key == 'c') {
    setup();
  }
  
  if (key == '1') {
   vierkKw1.l  = 0;
 }
  
  if (key == '2') {
   cirkelKw2.l = 0;
 }
  
  if (key == '3') {
   vierkKw3.l  = 0;
 }
  
  if (key == '4') {
   cirkelKw4.l = 0;
 }
  
  if (key == '5') {
   vierkKw1.l  = n;
   cirkelKw2.l = n;
   vierkKw3.l  = n;
   cirkelKw4.l = n;
  }
}

 

class Shape { 
  float x;  float y; float l;
  float x1; float y1;
  float x2; float y2;
  Shape(float x_, float y_, float l_) { 
    x1 = x_; y1 = y_;
    //bij het starten bevinden de lijn , cirkel en rechthoek in het startpunt
    //x1 en y1 zijn de beginwaarden 
    //x2 en y2 zijn de nieuw waarden van x en y
    x2 = x1; y2 = y1;
    l = l_;
  }
  
  void displayL() { 
    line(x1, y1, x2, y2); 
    x1 = x2; y1 = y2;
  }
  
  void displayE() { 
    fill(random(0,255), random(0,255), random(0,255),100);
    ellipse(x2, y2, l, l); 
  }
 
void displayR() { 
    rectMode(CENTER);
    noFill();
    rect(x2, y2, l, l); 
  }
  
void stappen() {  
    int keuze = int(random(8));  //random(8) geeft  8 waarden terug 0 t/m 7 dus niet het getal 8
    //Afhankelijk van de random keuze worden x en y waarden gekozen
    //met hoeken 0, 45 , 90 , 135 , 180 , 225 , 270 , 315 graden
    if (keuze == 0) {        
      strokeWeight(3);
      stroke(255, 0, 0); 
      x2 = x2 + l;    //x en y bewegen zich beide in + l richting
      y2 = y2 + l;    //dus 45 graden in 4e kwadrant
    } else if (keuze == 1) { // hor --> re 
      x2 = x2 + l;
    } else if (keuze == 2) { // 45 gr --> re boven dus het eerste kwadrant 
      x2 = x2 + l; 
      y2 = y2 - l;
    } else if (keuze == 3) { // vert --> boven, dus de y als omhoog
      strokeWeight(3);
      stroke(0,255,0); 
      y2 = y2 - l;
    } else if (keuze == 4) { //45 gr --> li boven dus het tweede kwadrant
      strokeWeight(2);
      stroke(0, 0, 255); 
      y2 = y2 - l; 
      x2 = x2 - l;
    } else if (keuze == 5) {  // hor --> links 
      x2 = x2 - l;
    } else if (keuze == 6) {  // 45 gr --> li onder dus het derde kwadrant
      strokeWeight(1);
      stroke(255, 0, 0);     
      x2 = x2 - l; 
      y2 = y2 + l;
    } else if (keuze == 7) {  // vert --> beneden 
      y2 = y2 + l;
  }  
 
    //Dankzij constrain zie je een randje van 15 px
    x2 = constrain(x2, 0+15, width-15); 
    y2 = constrain(y2, 0+15, height-15);
  }
}