Flevopink

 

float diameter; 
float angle = 0; 
 
void setup(){ 
        size(640, 360); 
        diameter = 300; 
        noStroke(); 
        fill(255,0,250); 
} 
 
void draw(){ 
    background(0); 
 
  // Hier beginnen we met een for loop 
  // for ( start ; einde ; iteratie ) 
    for( int x = 50; x < 600; x += 10 ){ 
 
        float offset = x*11; // offset zorgt ervoor dat elke individuele ellipse anders beweest 
        float d1 = 10 + (sin(angle+offset) * diameter/2) + diameter/2; // variable voor de 
 
        stroke(x/2,255,x/2); 
        noFill(); 
    // ellipse (x positie, y positie, diameter, diameter) 
        ellipse(x,200,d1,d1); 
 
    } // einde for loop 
 
    angle += 0.04; // 
 
} 
 
/* 
animatie voorbeeld die wij hebben gebruikt: 
https://processing.org/examples/sine.html 
 
for loop voorbeelden: 
https://processing.org/reference/for.html 
 
Ellipse: 
https://processing.org/reference/ellipse_.html 
 
Kleuren: 
https://processing.org/reference/fill_.html 
https://processing.org/reference/stroke_.html 
https://processing.org/reference/noFill_.html 
https://processing.org/reference/noStroke_.html 
 
 
Wat je verder kan doen met dit voorbeeld: 
 
+ gebruikt x positie informatie om de kleur te veranderen 
+ maak meerdere variables met sin() zoals d1, gebruikt die bijv. voor de y positie 
+ speel met groottes, en verander waardes van variables, zoals de diameter 
 
+ nested for loop 
kijk bij de for loop voorbeelden hoe je bijv. een grid van ellipses kan maken die veranderen 
 
 
 
Tips voor jullie eind kunstwerk: 
+ handig is om uit te schrijven of te tekenen wat je wilt maken en wat voor functies daarbij zouden horen. 
+ begin met een leeg programma waarin alleen de setup() + draw() functies staan 
+ vanuit hier bouw je op, eerst de basis elementen zoals grootte van de canvas ( size() ) en achtergrond kleur 
+ start bijv. met een ellipse te tekenen 
+ check altijd als je iets toevoegd of het werkt, in het begin maak je sneller typfoutjes of vergeet je een ; 
+ save zo nu en dan je programma en dupliceer deze om verder aan te werken. 
+ maak screenshot wat je aan het doen bent. 
+ maak het soms makkelijk voor jezelf om comments neer te zetten in je code, soms vergeet je wat precies wat is. 
+ je vind heel veel informatie op de processing.org website, vooral bij reference, tutorials en examples. Neem de tijd om examples uit te proberen. 
 
*/

 


 
float diameter; 
float angel = 0; 
float d1; 

 
void setup() 
{ 
 fullScreen(); 
 //size(640, 360); 
 diameter = height - 10; 
 noStroke(); 
} 

 
void draw() 
{ 
 background(0); 
 for ( int x = width/2*-1; x < width*1.5; x += width/100) { 
 float offset = x; 
 stroke(x/4, 0, x*1.5*-1+width); 
 strokeWeight(10); 
 noFill(); 
 d1 = 10 + (sin(angel+offset) * diameter/2) + diameter/2; 
 ellipse(x, height/2, d1/2, d1*0.7); 
 } 
 angel += +0.025; 
}