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
"s" toets stopt en de "r" toets start de animatie, de "c" toets is de clear toets
toets "1" stopt het aaneenrijgen van de vierkantjes in het eerste kwadrant
toets "2" stopt het aaneenrijgen van de cirkels in het tweede kwadrant
toets "3" stopt het aaneenrijgen van de vierkantjes in het derde kwadrant
toets "4" stopt het aaneenrijgen van de cirkels in het vierde kwadrant
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;
}
}
De class "Shape" De stappen methode (regel 31) zorgt dat de vormen at random verschillende hoeken maken
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);
}
}