1) Tee seuraava ohjelma Processing-kielessä.

// copywright: TR, 2017
int a = -550; // Laskurin alkuarvo
void setup () {
     size(600,600); // Ikkunan koko
     strokeWeight(5); // Viivan paksuus
     frameRate(10); // Animaation nopeus
}
void draw () {
     background(0,100,255); // Sininen taivas
     translate(300,300); // Origo ikkunan keskelle 
     a=a+10; // Laskuri kasvaa, liiku oikealle
     fill(50,255,0); // Vihreä täyttöväri
     rect(-300,40,600,400); // Maa
     auto(a,0); // Piirrä auto paikkaan (a,0)
     // Jos auto oikeassa reunassa
     if (a > 550) { a = -550; } // Siirrä auto vasempaan reunaan
     // saveFrame(a+".png");
     // Kun tallennat, niin poista kommentti-merkit
}

void auto(int x,int y) {
     pushMatrix(); // Koordinaatisto muistiin
     translate(x,y); // Liikuta autoa
     fill(255,0,255); // Magneta täyttöväri
     beginShape(); // Auton kori
          vertex(-200, 0);
          vertex(-100, -100);
          vertex(50, -100);
          vertex(100, 0);
          vertex(200, 0);
          vertex(220,100);
          vertex(-200,100);
     endShape(CLOSE); // Lopetetaan auton kori
     fill(255,255,0); // Keltainen täyttöväri
     beginShape(); // Takaikkuna
          vertex(-180, 0);
          vertex(-100, -80);
          vertex(-80, -80);
          vertex(-80, 0);
     endShape(CLOSE); // Lopetetaan takaikkuna
     beginShape(); // Etuikkuna
          vertex(-60, 0);
          vertex(-60, -80);
          vertex(40, -80);
          vertex(80, 0);
     endShape(CLOSE); // Lopetetaan etuikkuna 
     fill(0); // Musta täyttöväri
     ellipse(-120,100,100,100); // Takarengas
     ellipse(120,100,100,100); // Eturengas
     fill(100); // Harmaa täyttöväri
     ellipse(-120,100,50,50); // Takarenkaan keskiö
     ellipse(120,100,50,50); // Eturenkaan keskiö
     popMatrix(); // Koordinaatisto muistista
}

Liikuteltavasta kohteesta kannattaa aina tehdä oma aliohjelmansa, jota on helppo liikutella laskurin avulla. Koko auto liikkuu kerralla translate(x,y); komennolla.

2) Tallenna ohjelma (PC) ja testaa se ensin.

3) Lisää void draw ( )-lohkon loppuun komento: saveFrame(a+".png"); Kun ajat ohjelman, niin animaation ruudut tallennetaan samaan paikkaan kuin on tallennettu ohjelmakin. Kun katsot kansiota, jonne ohjelma on tallennettu, niin sinun pitäisi nähdä automaattisesti tallennetut kuvat.


4) Aukaise GIMP ja avaa kaikki kuvat komennolla: TIEDOSTO | AVAA TASOINA. Painaa SHIFT näppäin pohjaan, niin voit valita kaikki kuvat yhdellä kertaa. Eli napsauta tällöin kerran hiiren vasemmalla painikkeella ensimmäisessä ja viimeisessä kuvassa. Kuvat aukeavat samaan kuvaan kukin eri tasolle. Tarvittaessa ota tallennus GIMP:n omassa tallennusmuodossa.

5) Lopuksi ota komento: TIEDOSTO | EXPORT AS ja anna tiedostolle nimi, esimerkiksi: auto.gif. Huomio: Loppupääte gif- on pakollinen tieto. Kuittaa Vie-painikkeella.

6) Laita ruksi kohtaan: As animation. Aseta tauko ruutujen välissä, esimerkiksi 1000 ms on yksi sekunti. Oikea arvo löytyy kokeilelemalla. Laita kohtaan: Ruutujen poistotapa, jos määrittelemätön: Ruutu per taso (korvaa). Laita lisäksi ruksit kohtiin: Use delay entered above for all frames ja Use disposal entered above for all frames. Paina lopuksi Vie-painiketta.

Koostettu animaatio GIF-muodossa näyttää tältä.


Processing-ohjelmoinnissa voi myös tehdä 3D-animaatioita. Tässä vielä toinen esimerkki Processing-ohjelmoimalla tehdystä animaatiosta.