8.3 Simulaatiot
Simulaatiot
Simulaatio on animaatio, jossa itse voi vaikuttaa animaation tapahtumiin. Simulaation ohjaus voi tapahtua joko näppäimillä tai hiirellä. Tässä kappaleessa tutkimme valmiita simulaatioita. Nämä simulaatiot voi käydä koska tahansa, kun käsiteltävää asiaa käydään matematiikassa. Siksi tässä kappaleessa ei ole tuntitehtäviä.
Simulaation idea
Simulaatio on sellainen animaation muoto, jossa voimme omalla toiminnallamme vaikuttaa animaation kulkuun. Jos voisimme muuttaa laskurin arvoa, esimerkiksi liikuttamalla hiirtä, niin silloin saisimme luotua simulaation.
Luodaan ensin animaatiota varten liukupalkki, jossa hiiren avulla liikutetaan punaista neliötä. Neliö voidaan luoda komennolla: rect(a,0,50,50);, missä käytetään muuttujaa a ilmaisemaan neliön paikkaa vaakasuunnassa. Tehdään ohjelma, jossa muuttujalla x1 on ilmaistu hiiren vaakasuuntainen paikka ja muuttujalla y1 on ilmaistu hiiren pystysuuntainen paikka.
Kun hiiren paikka x1 on suurempi kuin a, silloin kasvatetaan laskuria a ja, kun hiiren paikka x1 on pienempi kuin a, silloin pienennetään laskuria a. Simulaatio saadaan aikaiseksi luomalla liukupalkki, jota ohjataan seuraavalla ohjausrakenteella.
int x1 = mouseX; // Selvitä hiiren vaakakoordinaatti
int y1 = mouseY; // Selvitä hiiren pystykoordinaatti
if (mousePressed == true) {
if ((y1 > 0) && (y1 < 50)) {
if (x1 > a) { // Jos hiiri on oikealla puolen
a++; // niin kasvata laskuria
}
if (x1 < a) { // Jos hiiri on vasemmalla puolen
a--; // niin pienennä laskuria
}
}
}
Ajatellaan, että ikkunan leveys on 400 ja että laskuri voisi saada arvoja väliltä [0, 400]. Komento mouseX lukee hiiren vaakasuuntaisen koordinaatin arvon. Jos hiiren koordinaatin arvo on suurempi kuin laskurin arvo, niin silloin kasvatamme laskuria. Jos hiiren koordinaatin arvo on pienempi kuin laskurin arvo, niin silloin pienennämme laskuria. Jos hiiren koordinaatin arvo on sama kuin laskurin arvo, niin silloin emme tee mitään. Voimme helposti luoda ohjelman, jolla voimme muuttaa laskurin arvoa. Ohjelmaan kannattaa piirtää neliö, joka liikkuu, niin käyttäjä näkee laskurin muuttumisen. Kokonainen ohjelma on seuraava.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
int a = 200; // Laskurin alkuarvo (ikkunan keskellä)
void setup () {
size(400,400); // ikkunan koko
stroke(0); // Musta viivan väri
textSize(20); // Tekstin koko 20
}
void draw() {
background(255); // Tyhjennä tausta
fill(255,255,0); // Keltainen täyttöväri
rect(0,0,400,50); // Piirrä keltainen suorakulmio
fill(255,0,0); // Punainen täyttöväri
rect(a,0,50,50); // Piirrä punainen neliö
int x1 = mouseX; // Selvitä hiiren vaakakoordinaatti
int y1 = mouseY; // selvitä hiiren pystykoordinaatti
if (mousePressed == true) {
if ((y1 > 0) && (y1 < 50)) {
if ((x1 > a) && (a < 350)) { // Jos hiiri on oikealla puolen
a++; // niin kasvata laskuria
}
if ((x1 < a) && (a > 0)) { // Jos hiiri on vasemmalla puolen
a--; // niin pienennä laskuria
}
}
}
fill(0); // Musta tekstin väri
text("Laskuri ="+a,20,200); // Tulosta laskuri
}
Laskurin arvon skaalaaminen sopivaksi
Koska ikkunan leveys on 400, niin laskuri vaihtelee välillä [0, 350]. Haluamme skaalata nämä arvot välille [-10, 10]. Kuinka se onnistuu? Nyt voimme käyttää map()-funktiota lukuarvon a skaalaamiseen välille [-10, 10].
Komento muuttaa muuttujan a arvon, joka vaihtelee välillä [0,350] asteikolle [-10,10]. map()-funktion arvo sijoitetaan muuttujalle x2. Kokonainen ohjelma on seuraavanlainen.
int x2 = round(map(a,0,350,-10,10));
Komento muuttaa muuttujan a arvon, joka vaihtelee välillä [0,350] asteikolle [-10,10]. map()-funktion arvo sijoitetaan muuttujalle x2. Kokonainen ohjelma on seuraavanlainen.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
int a = 200; // Laskurin alkuarvo (ikkunan keskellä)
void setup () {
size(400,400); // ikkunan koko
stroke(0); // Musta viivan väri
textSize(20); // Tekstin koko 20
}
void draw() {
background(255); // Tyhjennä tausta
fill(255,255,0); // Keltainen täyttöväri
rect(0,0,400,50); // Piirrä keltainen suorakulmio
fill(255,0,0); // Punainen täyttöväri
rect(a,0,50,50); // Piirrä punainen neliä
int x1 = mouseX; // Selvitä hiiren vaakakoordinaatti
int y1 = mouseY; // selvitä hiiren pystykoordinaatti
if (mousePressed == true) {
if ((y1 > 0) && (y1 < 50)) {
if ((x1 > a) && (a < 350)) { // Jos hiiri on oikealla puolen
a++; // niin kasvata laskuria
}
if ((x1 < a) && (a >0)){ // Jos hiiri on vasemmalla puolen
a--; // niin pienennä laskuria
}
}
}
fill(0); // Musta tekstin väri
text("Laskuri ="+a,20,150); // Tulosta laskuri
int x2 = round(map(a,0,350,-10,10));
text("Skaalattu arvo x = "+x2,20,200);
if (x2 < 0) {
text("Laskettu arvo: f("+x2+") = 3\u00B7("+x2+") = "+3*x2,20,250);
} else {
text("Laskettu arvo: f("+x2+") = 3\u00B7"+x2+" = "+3*x2,20,250);
}
}
Ohjelman suoritus näyttää tältä.
