Yleistä

Tässä ohjeessa tutustut Processing-ohjelman perusteisiin ja teet samalla hauskan piirustusohjelman. Ohje toimii niin Processing-IDE:ssä kuin vaikka openprocessing.org tai Sketchpad.cc sivuilla

Ohjelmoiminen

1. Aloita ohjelmoiminen kirjoittamalla void setup-komento (katso esimerkkikoodi alta) ja sen sisälle komento size-komento, joka määrittelee piirtustusohjelmamme ikkunan koon. Esimerkissä sen kooksi on asetettu 500(leveys)*500(korkeus) pikseliä.
2. Pistä size-komennon alle, seuraavalle riville vielä komento background, joka kertoo minkä värinen ikkuna on. Esimerkissä sivun väriksi on asetettu valkoinen, eli numero 255. (Processing käyttää kaikista väreistä kuvanmuokkaus-ohjelmistostakin tuttuja RGB (red,green,blue)arvoja, jotka vaihtelevat välillä 0-255.
3. Tämän jälkeen kirjoita void draw-komento, joka aloittaa itse piirustusohjelman koodin.
4. Kirjoita ellipse-komento, joka piirtää ympyrän. Ellipse-komennossa on neljä arvoa sisällä. Niistä kaksi ensimmäistä asettavat ympyrän X ja Y -arvot ja kaksi viimeistä ympyrän leveyden ja korkeuden. Esimerkkikoodissa,ympyrän sijainti on sidottu hiiren sijaintiin komennoilla mouseX ja mouseY. Lisätietoa komennoista: mouseX, mouseY, ellipse. 
   

   Piirto-ohjelman koodi kokonaisuudessaan. (Klikkaa isommaksi)

5. Seuraavaksi voit kokeilla painaa play-nappia ja testata ohjelmaa.
6. Seuraavaksi voimme alkaa muokata piirto-ohjelmaa mielenkiintoisemmaksi. Näytämme tässä muutaman idean, mutta ohjelmaa voi myös jatkaa pidemmälle, ideoita voi saada vaikka selailemalla Processingin referenssi sivustoa.
7. Kirjoita ennen ellipse-komentoa, komento fill(255,0,0); tämä komento värittää ympyrän punaiseksi. fill-komennossa on kolme tai neljä arvoa: kolme ensimmäistä kertovat värin, eli RGB (red, green, blue)-arvot. Kun ensimmäinen arvo on 255 ja muut 0 niin silloin väri on aivan punainen. Voit myös kokeilla omia värejäsi kirjoittamalla eri numeroita noiksi kolmeksi arvoksi. Neljäs, vapaaehtoinen arvo on läpinäkyvyys joissa 0 on täysin läpinäkyvä.
   

   Piirto-ohjelman muokattu koodi

8.  Voit taas kokeilla ohjelmaa ja katsoa että kaikki toimii. Tämän jälkeen voimme muokata piirrettävien pallojen väriä vielä lisää Random-komennolla. Random-komento nimensä mukaisesti valitsee satunnaisluvun asettamaltamme skaalalta. Esimerkiksi komento random(0,255); asettaa arvoksi minkä vain luvun väliltä 0-255.
9. Muokkaa fill-komentoa vastaavaksi: fill(random(0,255), random(0,255), random(0,255)); tämä komento antaa jokaiselle eri värille arvon 0:n ja 255:n väliltä. Kokeile!
10. Tämän jälkeen muokkaame ympyrän kokoa. Muokkaa ellipse-komennoksi seuraava: ellipse(mouseX, mouseY, mouseY/5, mouseX/5); Tämä komento ottaa ympyrän kooksi hiiren sijainnin arvon (Eli jos ikkunamme koko on 500*500 niin jonkun arvon 0:n ja 500:n väliltä.) Tämän jälkeen komento myös jakaa tuon hiiren arvon viidellä, jottei ympyrästä tulisi liian suuria. Kokeile! 
11.  Piirustusohjelmamme on nyt valmis. Voit tietenkin jatkaa muokkausta. Katso lisäideoita Mitä Seuraavaksi osiosta!

Tässä koodi kokonaisuudessaan:

/* Yksinkertainen piirustusohjelma Processingilla. */

void setup() {
size(500,500);
//size(500, 500); // Tämä koodi kertoo ohjelman ikkunan koon (500*500 pikseliä)
background(255);
}

void draw () {
fill(random(0, 255), random(0, 255), random(0, 255)); //fill-komento täyttää alla olevat muodot valitulla värillä
ellipse(mouseX, mouseY, mouseY/5, mouseX/5); /*ellipse-komento piirtää ympyrän, ensimmäiset
kaksi arvoa kertovat sijainnin mihin ympyrä piirretään ja kaksi viimeistä ympyrän koon*/
}

Mitä seuraavaksi?

Piirto-ohjelmalla voit hyvin testata Processingin erilaisia komentoja, sekä tutustua ohjelmointiin paremmin. Tässä pari ideaa:

1. Kokeile muuttaa piirto-ohjelmaa niin että se piirtää neliöitä ympyrän sijaan
2. Kokeile muuttaa piirrettävän muodon kokoa satunnaiseksi
3. Kokeile läpikuultavia värejä
4. Jos ohjelmointi on jo tutumpaa kokeile tehdä monimutkaisempi piirustusohjelma: esimerkiksi eri näppäimiä painamalla piirtoohjelman väri, tai piirretävä muoto muuttuu.