STEM

Een klein tekenprogramma bouwen in Processing

Maak een programmavenster van 400 bij 400 pixels. Dat bepalen we met de functie size() in de setup()-functie.

void setup(){
   size(400,400);
}

Maak de achtergrond wit. Dit doen we door de waarden voor rood, groen en blauw op 255 te zetten:

void setup(){
   size(400,400);
   background(255,255,255);
}


Daarna tekenen we een zwarte cirkel in het middelpunt van het programmavenster. In functie fill() zetten we de RGB-waarden alle drie op 0. Dat levert zwart op. Om de cirkel te tekenen, gebruiken we de functie ellipse(). Die geven we vier waarden mee:

  • De x-positie (waar bevindt het middelpunt van de cirkel zich?): de helft van 400.
  • De y-positie (waar bevindt het middelpunt van de cirkel zich?: de helft van 400.
  • De horizontale straal.
  • De vertikale straal.
void draw(){
      fill(0,0,0);
      ellipse(200,200,40,40);
}


Processing tekent het scherm tientallen keren per seconde opnieuw. De cirkel blijft dus altijd netjes in het midden staan. Om een tekenprogramma te maken, doen we een kleine aanpassing. We laten de cirkel de muis volgen. 

void draw(){
      fill(0,0,0);
      ellipse(mouseX,mouseY,40,40);
}

Je kan met de muis nu het hele scherm 'vol' schilderen. Probleem is wel dat eens je klaar bent, je geen verschil meer merkt. We missen nog een functie om het scherm opnieuw leeg te maken. Daarvoor voegen we de functie keyPressed() toe. Daarbinnen kan je om het even welke toets van je toetsenbord gebruiken om er interactieve functies aan te koppelen. Als de "key" gelijk is aan "x", dan maken we het scherm leeg. 

void keyPressed(){
      if(key=='x'){
              clear();
              background(255,255,255);
      }
}

Je kan de afbeeldingen die je tekent ook bewaren met de functie saveFrame(). Als je dat in elk frame doet, krijg je een aardige reeks afbeeldingen op je opslagmedium. We voeren de functie enkel uit als we op de s-toets drukken.

void keyPressed(){
      if(key=='x'){
              clear();
              background(255,255,255);
      }
      if(key=='s'){
              saveFrame("###.png");
      }
}



Het resultaat:



Interessante links

www.processing.org

www.arduino.org

www.openprocessing.org

Cursusmultimedia

http://natureofcode.com/

Codevoorbeeld processing

void setup(){ 
  //grootte van het venster

size(400,400); //achtergrondkleur van het venster in RGB (waardes tussen 0 en 255) background(255,100,100);

} int kleur=0; void draw(){ fill(kleur); stroke(126); if(mouseX>10){ line(200, 200, mouseX, mouseY); //noStroke(); ellipse(mouseX,mouseY,10,10); } } void keyPressed(){ if (keyCode == UP) { kleur = 255; } else if (keyCode == DOWN) { kleur = 122; } else if (keyCode == LEFT) { kleur = 50; } if(key=='x'){ clear(); background(255,100,100); } };

Tweede codevoorbeeld

void setup(){
  //venster is 400px breed, 300 pixels hoog
  size(400,400);
  background(255,255,255);
}
void draw(){
 fill(0);
 ellipse(mouseX,mouseY,40,40);
}
void keyPressed(){
  if(key=='x'){
    clear();
  }
}

Voorbeeld Processing

void setup(){ 
     size(400,400);
     background(255,255,255);
}
void draw(){ 

       if(mouseX>10){ 
                stroke(random(255),random(255),random(255));
                line(200, 200, mouseX, mouseY);                  fill(random(255),random(255),random(255));
                ellipse(mouseX,mouseY,10,10);
          }
}

home