Esimerkki: Suorakulmion piirtäminen hiiren avulla
Suorakulmio voidaan piirtää hiiren avulla seuraavalla ohjelmalla.
Ohjelma toimii siten, että kun hiiren painiketta ei ole painettu, niin tällöin piirretään 10x10 neliö hiiren liikkeiden mukaan eli neliö toimii kursorina. Kun hiiren painike on painettu pohjaan, niin tällöin piirretään suorakulmio, jonka koko määräytyy muuttujien leveys ja korkeus avulla. Suorakulmion aloituspiste määräytyy silloin kun painetaan hiiren vasen painike pohjaan. Koska aloituspiste ei saa muuttua, kun painetaan hiiren vasen painike pohjaan, sitä varten tarvitaan boolean-tyyppinen muuttuja piirra. Kun piirra-muuttuja saa arvon false, niin tällöin asetetaan piirrettävän suorakulmion nurkkapiste x ja y tämän hetkisestä hiiren paikasta. Kun piirra-muuttuja saa arvon true, niin tällöin piirretään suorakulmio, jonka nurkkapiste pysyy nyt muuttumattomana x ja y. Piirrettävän suorakulmion koko saadaan kasvamaan korkeuden ja leveyden mukaan, jotka lasketaan hiiren nykyisen aseman ja muuttujiin x ja y tallennetun aloituspaikan erotuksena. Kopioi koodi ja kokeile se käytännössä.

Kun painat hiiren painikkeen pohjaan ja liikutat hiirtä, suorakulmion koko kasvaa aloituspaikasta. Aloituspaikka on suorakulmion vasemmassa yläreunassa. Lopetuspaikka määräytyy hiiren liikkeiden mukaan ja se on suorakulmion oikeassa alareunassa, jos liikutat hiirtä samaan suuntaan.
// Ohjelman tehnyt: e-Oppi Oy
// 30.1.2017
int x, y, leveys, korkeus; // Tarvittavat muuttujat
boolean piirra = false; // Aseta oletuksena piirra-muuttujalle arvo epätosi (kursori tila)
void setup() {
size(600,600); // Ikkunan koko
fill(0,0,255); // Täyttöväri sininen
noStroke(); // Ei reunaviivaa
}
void draw() {
background(255,255,0); // Tyhjentää taustan ja värittää sen keltaiseksi
// If-lause, jonka avulla saadaan suorakulmion koko, kun hiiren painiketta painettu
if (mousePressed == true ) { // Jos hiiren painiketta painettu
piirra = true; // Tällöin aseta piirra-muuttujalle arvo tosi
leveys = mouseX-x; // Laske suorakulmion leveys alkupisteestä
korkeus = mouseY-y; // Laske suorakulmion korkeus alkupisteestä
} else { // Jos hiiren painiketta ei ole painettu
piirra = false; // Tällöin aseta piirra-muuttuja arvoon; epätosi
}
// If-lause, jonka avulla piirretään suorakulmio tai kursori
if (piirra == true) { // Kun arvo on tosi, niin silloin
rect(x,y,leveys,korkeus); // Piirrä suorakulmio
} else { // Kun arvo epätosi, niin silloin
x = mouseX; // Aseta neliön alkupiste hiiren tämänhetkisestä paikasta
y = mouseY;
rect(x,y,10,10); // Piirrä pieni neliö osoittamaan hiiren paikkaa
}
}
Ohjelma toimii siten, että kun hiiren painiketta ei ole painettu, niin tällöin piirretään 10x10 neliö hiiren liikkeiden mukaan eli neliö toimii kursorina. Kun hiiren painike on painettu pohjaan, niin tällöin piirretään suorakulmio, jonka koko määräytyy muuttujien leveys ja korkeus avulla. Suorakulmion aloituspiste määräytyy silloin kun painetaan hiiren vasen painike pohjaan. Koska aloituspiste ei saa muuttua, kun painetaan hiiren vasen painike pohjaan, sitä varten tarvitaan boolean-tyyppinen muuttuja piirra. Kun piirra-muuttuja saa arvon false, niin tällöin asetetaan piirrettävän suorakulmion nurkkapiste x ja y tämän hetkisestä hiiren paikasta. Kun piirra-muuttuja saa arvon true, niin tällöin piirretään suorakulmio, jonka nurkkapiste pysyy nyt muuttumattomana x ja y. Piirrettävän suorakulmion koko saadaan kasvamaan korkeuden ja leveyden mukaan, jotka lasketaan hiiren nykyisen aseman ja muuttujiin x ja y tallennetun aloituspaikan erotuksena. Kopioi koodi ja kokeile se käytännössä.

Kun painat hiiren painikkeen pohjaan ja liikutat hiirtä, suorakulmion koko kasvaa aloituspaikasta. Aloituspaikka on suorakulmion vasemmassa yläreunassa. Lopetuspaikka määräytyy hiiren liikkeiden mukaan ja se on suorakulmion oikeassa alareunassa, jos liikutat hiirtä samaan suuntaan.