Animasjon

Vi vil ha en sirkel som beveger seg fram og tilbake på tegningen. Vi lager følgende konstruksjon

/*
 Animasjon av en kule (sirkel)
*/
// senter og radius for kula
float xPos;
float yPos;
float radius;
// Hvor langt skal den gå mellom hver uttegning
float steg;
void setup(){
  size(200,100);
  stroke(0,0,0);
  radius=20;
  xPos=radius;
  yPos=height/2;
  steg=2;
  // antall steg (frames) i sekundet
  frameRate(30);
}
void draw(){
  // hvit bakgrunn (fjern forrige sirkelen)
  background(255,255,255);
  
  // tegn kula
  fill(255,0,0);
  ellipse(xPos,yPos,2*radius,2*radius);
  
  // hvis den har nådd en av
  // kantene så må den snu
  if((xPos+radius > width)||(xPos-radius < 0)){
    steg=-steg;
  }
  // flytt den før neste uttegning
  xPos=xPos+steg;
  
}

Det er to ting vi kan spille på for å justere animasjonen slik at den blir så rask og glatt vi vil ha den:

• variabelen step som sier hvor mye vi skal flytte sirkelen hver gang
• framerate som sier hvor mange ganger vi skal gjøre det i sekundet.

Vi flytter sirkelen en lengde, step, mellom hver uttegning. Vi må endre retning når vi har nådd en av kantene. Sjekken på om vi har nådd kanten har vi laget med en if-setning. Tegnert || angir eller, så det vi skriver er altså etter følgende mønster:

if(betingelse1 er oppfyllt) eller (betingelse2 er oppfyllt){ 
    så skal vi gjøre dette
 }