Lisätietoa
Painonappi
Kuinka voidaan rakentaa painonappi? Tähän tarvitaan neliö ja neliöhän voidaan piirtää komennolla rect(). Käytännössä meidän on tiedettävä, onko hiiri tämän neliön sisällä. Sen voi tutkia if-lauseella. Tehdään seuraavanlainen neliö.
Jotta ollaan neliön sisällä, niin x-koordinaatin on oltava nyt välillä 50…130. Eli x on suurempi kuin 50 ja x on pienempi kuin 130. Vastaavasti myös y-koordinaatin on välillä 50…130. Voimme kirjoittaa ehdon.
Jos (((x on suurempi kuin 50) JA (x on pienempi kuin 130))) JA
(( y on suurempi kuin 50) JA (y on pienempi kuin 130)))
Sama ehto ohjelmointikielessä olisi seuraava.
if (((x>50) && (x<130)) && ((y>50) && (y<130)))
Koska x ja y ovat hiiren koordinaatit, nyt saamme tietää, milloin hiiri on neliön sisällä. Kun lisäksi lisäämme toisen ehdon, joka tarkistaa onko hiiren vasenta painiketta painettu, niin meillä on painikkeen idea selvillä. Teemme siis kaksi sisäkkäistä ehtoa. Ohjelma painonapin luomiseksi on seuraava.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {
size(400,300); // Ikkunan koko
textSize(32); // Tekstin koko 32
}
void draw () {
int x = mouseX; // Lue hiiren x-koordinaatti
int y = mouseY; // Lue hiiren y-koordinaatti
background(255,255,255); // Valkea taustanväri
if (mousePressed == true) {
// Jos hiiren vasenta painiketta on painettu
if (((x > 50) && (x < 130)) && ((y > 50) && (y < 130))) {
//Jos hiiren koordinaatit alueen sisällä
fill(255,0,0); // Aseta punainen väri
text("Pohjassa",50,200); // Tulosta teksti: Pohjassa
}
} else { // Jos hiiren vasenta painiketta ei ole painettu
fill(255,255,0); // Aseta keltainen väri
}
rect(50,50,80,80); // Piirrä suorakulmio
}
Ensimmäinen ehto täyttyy, jos hiiren vasenta painiketta on painettu. Toinen ehto täyttyy, jos hiiren koordinaatit (x,y) on määritellyn alueen sisällä. Jos nämä molemmat ehdot täyttyvät, niin neliö vaihtaa väriä ja lisäksi tulostuu kommentti: Pohjassa. Mikäli toinen ehto ei täyty, niin tällöin palautetaan alkuperäinen väri. Alla on kuvattu ohjelman esimerkkiajo.
Kaksi painonappia (Kytkin)
Muutetaan ideaa siten, että meillä on kaksi painonappia: napp1 ja nappi2. Ja haluamme, että se painike jää pohjaan, mitä on hiirellä napsautettu. Lähdetään taas määrittelemällä painonappien koordinaatit. Ne ovat seuraavat.
Ensimmäisen painonapin sisäpuolinen alue saadaan ehdolla.
Jos (((x on suurempi kuin 50) JA (x on pienmpi kuin 130)) JA
((y on suurempi kuin 50) JA (y on pienempi kuin 130)))
Sama ohjelmointikielellä kirjoitettuna on.
if (((x>50) && (x<130)) && ((y>50) && (y<130)))
Toisen painonapin sisäpuolinen alue saadaan ehdolla.
Jos ((( x on suurempi kuin 150) JA (x on pienempi kuin 230)) JA
((y on suurempi kuin 50) JA (y on pienempi kuin 130)))
Sama ohjelmointikielellä kirjoitettuna on.
if (((x > 150) && (x<230)) && ((y>50) && (y<130)))
Sitten vielä tarvitsee tallentaa johonkin tieto siitä, onko painiketta painettu. Tämä onnistuu määrittelemällä boolean-tyyppisiä muuttujia nappi1, nappi2. Sovitaan, että arvo: true tarkoittaa sitä, että nappi on pohjassa ja arvo: false tarkoittaa sitä, että nappi ei ole pohjassa. Tehdään ohjelma siten, että kun hiiren vasenpainike on pohjassa ja hiiri on määritellyllä alueella, niin valittu nappi-muuttuja saa arvon true. Muut nappi-muuttujat saavat samalla arvon false.
Hiirellä valinnan lisäksi tarvitaan oma ehtolause sille mitä tapahtuu, kun nappi1 on valittu tai kun nappi2 on valittu. Jos nappi1 on valittu, niin piirretään ensimmäinen nappi punaiseksi ja toinen nappi keltaiseksi. Jos nappi2 on valittu, niin piirretään toinen nappi punaiseksi ja ensimmäinen nappi keltaiseksi. Alussa ei kumpikaan nappi ole valittuna, joten myös tämä vaihtoehto on tutkittava. Esimerkki ohjelmamme on seuraavanlainen.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
boolean nappi1 = false; // Oletuksena on, että
boolean nappi2 = false; // ei kumpaakaan nappia ole valittu
void setup () {
size(300,250); // Ikkunan koko
textSize(32); // Tekstin koko
}
void draw () {
int x = mouseX; // Lue hiiren vaakakoordinaatti
int y = mouseY; // Lue hiiren pystykoordinaatti
background(255,255,255); // Taustaväri valkoinen
if (mousePressed == true) { // Jos hiiren vasenta painettu
if (((x > 50) && (x < 130)) && ((y > 50) && (y < 130))) {
// Jos hiiri nappi1:n alueella
nappi1 = true; // Valitse nappi1
nappi2 = false; // Älä valitse nappi2:sta
}
if (((x > 150) && (x < 230)) && ((y > 50) && (y < 130))) {
// Jos hiiri nappi2:n alueella
nappi1 = false; // Älä valitse nappi1:stä
nappi2 = true; // Valitse nappi2
}
}
if (nappi1 == true) { // Jos nappi1 valittu
fill(255,0,0); // Aseta punainen väri
rect(50,50,80,80); // Piirrä nappi1
fill(255,255,0); // Aseta keltainen väri
rect(150,50,80,80); // Piirrä nappi2
fill(0,0,255); // Aseta sininen väri
text("Yksi",100,200); // Tulosta teksti: Yksi
}
if (nappi2 == true) { // Jos nappi2 valittu
fill(255,255,0); // Aseta keltainen väri
rect(50,50,80,80); // Piirrä nappi1
fill(255,0,0); // Aseta punainen väri
rect(150,50,80,80); // Piirrä nappi2
fill(0,0,255); // Aseta sininen väri
text("Kaksi",100,200); // Tulosta teksti: Kaksi
}
if ((nappi1 == false) && (nappi2 == false)) {
// Jos kumpaakaan nappia ei ole valittu
fill(255,255,0); // Aseta keltainen väri
rect(50,50,80,80); // Piirrä nappi1
rect(150,50,80,80); //Piirrä nappi2
}
}
Ohjelman esimerkkiajo näyttää tältä:
Lukujen syöttäminen hiiren avulla
//Ohjelman tehnyt: e-Oppi Oy
// 3.1.2018
String merkki ="0"; // Oletus merkki on 0
boolean n1 = false; // Oletuksena luvun syöttö salittu
void setup() {
size(600,300); // Ikkunan koko
textSize(20); // Tekstin koko
}
void draw () {
background(255); // Tyhjennä tausta
float luku;
text("Anna luku: ",10,100);
luku = syota_luku();
text(luku,120,100);
text("Luvun neliö on "+pow(luku,2),10,150);
text("Luvun neliöjuuri on "+sqrt(luku),10,200);
}
float syota_luku () {
int x = mouseX; // Lue hiiren paikka
int y = mouseY;
fill(50,200,200); // Lisää väri
rect(5,5,40,40,10); // Luodaan painonapit
rect(55,5,40,40,10);
rect(105,5,40,40,10);
rect(155,5,40,40,10);
rect(205,5,40,40,10);
rect(255,5,40,40,10);
rect(305,5,40,40,10);
rect(355,5,40,40,10);
rect(405,5,40,40,10);
rect(455,5,40,40,10);
rect(505,5,40,40,10);
rect(555,5,40,40,10);
textSize(30); // Tekstin koko 30
fill(0); // Tekstin väri musta
text("1",15,40); // Tulosta painonapeille tekstit
text("2",65,40);
text("3",115,40);
text("4",165,40);
text("5",215,40);
text("6",265,40);
text("7",315,40);
text("8",365,40);
text("9",415,40);
text("0",465,40);
text(",",515,40);
text("C",565,40);
if (mousePressed == true) { // Jos hiiren painike pohjassa
if ((y > 5) && (y < 45)) { // Jos pystysuuntainen paikka on välillä 5 < y < 45
if ((x > 5) && (x < 45)) { // Jos vaakasuuntainen paikka on välillä 5 < x < 45
fill(255,0,0); // Väritä punaisella
rect(5,5,40,40,10);
if (n1 == false) { // Jos n1:n arvo false, niin lisää yksi merkki
merkki = merkki+"1";
}
}
if ((x > 55) && (x < 95)) { // Jos vaakasuuntainen paikka on välillä 55 < x < 95
fill(255,0,0);
rect(55,5,40,40,10);
if (n1 == false) {
merkki = merkki+"2";
}
}
if ((x > 105) && (x < 145)) { // Jos vaakasuuntainen paikka on välillä 105 < x < 145
fill(255,0,0);
rect(105,5,40,40,10);
if (n1 == false) {
merkki = merkki+"3";
}
}
if ((x > 155) && (x < 195)) { // Jos vaakasuuntainen paikka on välillä 155 < x < 195
fill(255,0,0);
rect(155,5,40,40,10);
if (n1 == false) {
merkki = merkki+"4";
}
}
if ((x > 205) && (x < 245)) { // Jos vaakasuuntainen paikka on välillä 205 < x < 245
fill(255,0,0);
rect(205,5,40,40,10);
if (n1 == false) {
merkki = merkki+"5";
}
}
if ((x > 255) && (x < 295)) { // Jos vaakasuuntainen paikka on välillä 255 < x < 295
fill(255,0,0);
rect(355,5,40,40,10);
rect(255,5,40,40,10);
if (n1 == false) {
merkki = merkki+"6";
}
}
if ((x > 305) && (x < 345)) { // Jos vaakasuuntainen paikka on välillä 305 < x < 345
fill(255,0,0);
rect(305,5,40,40,10);
if (n1 == false) {
merkki = merkki+"7";
}
}
if ((x > 355) && (x < 395)) { // Jos vaakasuuntainen paikka on välillä 355 < x < 395
fill(255,0,0);
rect(355,5,40,40,10);
if (n1 == false) {
merkki = merkki+"8";
}
}
if ((x > 405) && (x < 445)) { // Jos vaakasuuntainen paikka on välillä 405 < x < 455
fill(255,0,0);
rect(405,5,40,40,10);
if (n1 == false) {
merkki = merkki+"9";
}
}
if ((x > 455) && (x < 495)) { // Jos vaakasuuntainen paikka on välillä 455 < x < 495
fill(255,0,0);
rect(455,5,40,40,10);
if (n1 == false) {
merkki = merkki+"0";
}
}
if ((x > 505) && (x < 545)) { // Jos vaakasuuntainen paikka on välillä 505 < x < 545
fill(255,0,0);
rect(505,5,40,40,10);
if (n1 == false) {
merkki = merkki+".";
}
}
if ((x > 555) && (x < 595)) { // Jos vaakasuuntainen paikka on välillä 555 < x < 595
fill(255,0,0);
rect(555,5,40,40,10);
if (n1 == false) {
merkki = "0";
}
}
n1 = true; // Tämä on nyt true, kunnes vapautat hiiren painikkeen
}
} else {
n1 = false; // Kun vapautat hiiren painikkeen, niin salli merkkien syöttö
}
fill(0); // Oletus tekstin väri on musta
textSize(20); // Oletus tekstin koko on 20
float luku = float(merkki); // Muuta syötetty merkkijono luvuksi
return luku; // Palauta syötetty luku
}
Ohjelman suoritus näyttää nyt tältä. Tässä C (= clear) painike on nollauspainike.
Jos siis haluat syöttää lukuja hiiren avulla, niin sinun on ensin ohjelmoitava jokaista numeroa varten oma painike. Painikkeista kannattaa tehdä oma aliohjelmansa eli arvon palauttava funktio, sillä se selkeyttää koodia.
Kaksi syöttökenttää
// Ohjelman tehnyt e-Oppi Oy
// 3.1.2018
String merkki ="0";
boolean n1 = false;
boolean nappi1 = true;
boolean nappi2 = false;
float luku1 = 0;
float luku2 = 0;
void setup() {
size(600,300); // Ikkunan koko
}
void draw () {
background(255); // Tyhjennä tausta
int x = mouseX;
int y = mouseY;
if (mousePressed == true) {
if ((x > 5) && (x < 45)) {
if ((y > 55) && (x < 95)) { // Valitse 1. kytkin
nappi1 = true;
nappi2 = false;
merkki="0";
}
if ((y > 105) && (x < 145)) { // Valitse 2. kytkin
nappi1 = false;
nappi2 = true;
merkki = "0";
}
}
}
if (nappi1 == true) { // Jos 1. kytkin on valittu
fill(255,0,0);
rect(5,55,40,40,10);
fill(200,200,200);
rect(200,55,300,35);
fill(50,200,200);
rect(5,105,40,40,10);
luku1 = syota_luku();
text(luku1,200,80);
}
if (nappi2 == true) { // Jos 2, kytkin on valittu
fill(50,200,200);
rect(5,55,40,40,10);
fill(255,0,0);
rect(5,105,40,40,10);
fill(200,200,200);
rect(200,105,300,35);
luku2 = syota_luku();
text(luku2,200,130);
}
textSize(20);
fill(0);
text("Anna 1. luku: ",60,80);
text("Anna 2. luku: ",60,130);
text(luku1+" + "+luku2+" = "+(luku1+luku2),60,180);
}
float syota_luku () {
int x = mouseX; // Lue hiiren paikka
int y = mouseY;
fill(50,200,200); // Lisää väri
rect(5,5,40,40,10); // Luodaan painonapit
rect(55,5,40,40,10);
rect(105,5,40,40,10);
rect(155,5,40,40,10);
rect(205,5,40,40,10);
rect(255,5,40,40,10);
rect(305,5,40,40,10);
rect(355,5,40,40,10);
rect(405,5,40,40,10);
rect(455,5,40,40,10);
rect(505,5,40,40,10);
rect(555,5,40,40,10);
textSize(30); // Tekstin koko 30
fill(0); // Tekstin väri musta
text("1",15,40); // Tulosta painonapeille tekstit
text("2",65,40);
text("3",115,40);
text("4",165,40);
text("5",215,40);
text("6",265,40);
text("7",315,40);
text("8",365,40);
text("9",415,40);
text("0",465,40);
text(",",515,40);
text("C",565,40);
if (mousePressed == true) { // Jos hiiren painike pohjassa
if ((y > 5) && (y < 45)) { // Jos pystysuuntainen paikka on välillä 5 < y < 45
if ((x > 5) && (x < 45)) { // Jos vaakasuuntainen paikka on välillä 5 < x < 45
fill(255,0,0); // Väritä punaisella
rect(5,5,40,40,10);
if (n1 == false) { // Jos n1:n arvo false, niin lisää yksi merkki
merkki = merkki+"1";
}
}
if ((x > 55) && (x < 95)) { // Jos vaakasuuntainen paikka on välillä 55 < x < 95
fill(255,0,0);
rect(55,5,40,40,10);
if (n1 == false) {
merkki = merkki+"2";
}
}
if ((x > 105) && (x < 145)) { // Jos vaakasuuntainen paikka on välillä 105 < x < 145
fill(255,0,0);
rect(105,5,40,40,10);
if (n1 == false) {
merkki = merkki+"3";
}
}
if ((x > 155) && (x < 195)) { // Jos vaakasuuntainen paikka on välillä 155 < x < 195
fill(255,0,0);
rect(155,5,40,40,10);
if (n1 == false) {
merkki = merkki+"4";
}
}
if ((x > 205) && (x < 245)) { // Jos vaakasuuntainen paikka on välillä 205 < x < 245
fill(255,0,0);
rect(205,5,40,40,10);
if (n1 == false) {
merkki = merkki+"5";
}
}
if ((x > 255) && (x < 295)) { // Jos vaakasuuntainen paikka on välillä 255 < x < 295
fill(255,0,0);
rect(355,5,40,40,10);
rect(255,5,40,40,10);
if (n1 == false) {
merkki = merkki+"6";
}
}
if ((x > 305) && (x < 345)) { // Jos vaakasuuntainen paikka on välillä 305 < x < 345
fill(255,0,0);
rect(305,5,40,40,10);
if (n1 == false) {
merkki = merkki+"7";
}
}
if ((x > 355) && (x < 395)) { // Jos vaakasuuntainen paikka on välillä 355 < x < 395
fill(255,0,0);
rect(355,5,40,40,10);
if (n1 == false) {
merkki = merkki+"8";
}
}
if ((x > 405) && (x < 445)) { // Jos vaakasuuntainen paikka on välillä 405 < x < 455
fill(255,0,0);
rect(405,5,40,40,10);
if (n1 == false) {
merkki = merkki+"9";
}
}
if ((x > 455) && (x < 495)) { // Jos vaakasuuntainen paikka on välillä 455 < x < 495
fill(255,0,0);
rect(455,5,40,40,10);
if (n1 == false) {
merkki = merkki+"0";
}
}
if ((x > 505) && (x < 545)) { // Jos vaakasuuntainen paikka on välillä 505 < x < 545
fill(255,0,0);
rect(505,5,40,40,10);
if (n1 == false) {
merkki = merkki+".";
}
}
if ((x > 555) && (x < 595)) { // Jos vaakasuuntainen paikka on välillä 555 < x < 595
fill(255,0,0);
rect(555,5,40,40,10);
if (n1 == false) {
merkki = "0";
}
}
n1 = true; // Tämä on nyt true, kunnes vapautat hiiren painikkeen
}
} else {
n1 = false; // Kun vapautat hiiren painikkeen, niin salli merkkien syöttö
}
fill(0); // Oletus tekstin väri on musta
textSize(20); // Oletus tekstin koko on 20
float luku = float(merkki); // Muuta syötetty merkkijono luvuksi
return luku; // Palauta syötetty luku
}
Kun ajat ohjelman, niin oletuksena on ylempi syöttökenttä valittuna. Nyt kun syötät luvun, niin luku tallentuu ensimmäiseen muuttujaan.
Kun seuraavaksi napsautat alempaa kytkintä, niin voit syöttää lukuja toiseen muuttujaan. Ohjelma näyttää syötettyjen lukujen summan reaaliaikaisesti.
Valikon tekeminen
// Ohjelman tehnyt: e-Oppi Oy
// 8.1.2018
boolean valikko = false; // Valikko oletuksena piilossa
boolean kytkin = true;
String kuvio = "";
void setup() {
size(600,400); // Ikkunan koko
textSize(20); // Tekstin koko
}
void draw () {
background(255);
int x = mouseX; // Lue hiiren paikka
int y = mouseY;
if (valikko == false) { // Jos valikko piilossa
fill(100,200,100);
rect(10,10,200,30); // Piirrä vain otsake
fill(0);
text("Kuvio",20,30);
}
if (valikko == true) { // Jos valikko näkyvissä
fill(100,200,100);
rect(10,10,200,30);
rect(20,40,190,30);
rect(20,70,190,30);
rect(20,100,190,30);
if ((y > 10) && (y < 40)) {
if ((x > 10) && (x < 210)) {
fill(200);
rect(10,10,200,30); // Otsake laatikko
} else {
fill(100,200,100);
rect(10,10,200,30);
}
}
if ((y > 40) && (y < 70)) {
if ((x > 20) && (x < 220)) {
fill(200);
rect(20,40,190,30); // Valikon 1. laatikko
if (mousePressed == true) {
valikko = false;
kuvio = "ympyrä";
}
} else {
fill(100,200,100);
rect(20,40,190,30);
}
}
if ((y > 70) && (y < 100)) {
if ((x > 20) && (x < 220)) {
fill(200);
rect(20,70,190,30); // Valikon 2. laatikko
if (mousePressed == true) {
valikko = false;
kuvio = "neliö";
}
} else {
fill(100,200,100);
rect(20,70,190,30);
}
}
if ((y > 100) && (y < 130)) {
if ((x > 20) && (x < 220)) {
fill(200);
rect(20,100,190,30); // Valiko 3. laatikko
if (mousePressed == true) {
valikko = false;
kuvio = "kolmio";
}
} else {
fill(100,200,100);
rect(20,100,190,30);
}
}
fill(0);
text("Kuvio",20,30); // Valikkoon tulevat tekstit (kun valikko näkyvissä)
text("Ympyrä",30,60);
text("Neliö",30,90);
text("Kolmio",30,120);
}
if (mousePressed == true) { // Jos hiiren painike pohjassa
if ((y > 10) && (y < 40)) {
if ((x > 10) && (x < 210)) {
if (kytkin == true) { // Jos kytkin on true (=ensimmäinen painallus)
if (valikko == false) { // Vaihda arvo aina päin vastaiseksi
valikko = true; // Valikko näkyvissä
} else {
valikko = false; // valikko piilossa
}
}
}
}
kytkin = false; // Jos pidät hiiren vasenta painiketta pohjassa
} else {
kytkin = true; // Jos et pidä hiiren vasenta painiketta pohjassa
}
fill(255,0,0); // Punainen
if (kuvio == "ympyrä") {
ellipse(400,200,200,200);
}
if (kuvio == "neliö") {
rect(300,100,200,200);
}
if (kuvio == "kolmio") {
triangle(300,300,400,100,500,300);
}
}
Ohjelma, luo valikon, joka näyttää tältä. Kun napsautat otsaketta: Kuvio (eli kytkintä), niin esille ilmestyy alivalikko (eli kolme painonappia). Kun liikutat hiirtä valikossa, niin suorakulmion väri muuttuu.
Kun lopuksi valitset valikosta komennon (esimerkiksi Neliö) napsauttamalla hiirellä sanan päällä, niin ohjelma piirtää neliön.
