Tehdään ohjelma, joka piirtää 255 kappaletta pystyviivoja siten, että viivan väri vaihtuu sinisestä punaiseksi. Määritellään tässä muuttuja a, joka saa alkuarvon 0. Silmukkaan toistetaan niin kauan kuin a on pienempi kuin 255, kun a:ta kasvatetaan aina yhdellä laskurin a++ avulla. Ohjelma on seuraavanlainen.
function setup() {
createCanvas(255, 255); // Ikkunan koko on 255 x 255
}
function draw() {
background(0); // Tyhjennä tausta
for (var a= 0; a <= 255; a++) { // Silmukka, jossa a = 0,1,2,...,255
stroke(a,0,255-a); // Aseta reunaviivan väri. Alussa väri on (0,0,255) ja lopussa (255,0,0)
line(a,0,a,255); // Piirrä pystyviiva pisteestä (a,0) pisteeseen (a,255)
} // For-silmukan lopetusmerkki
}
|
Nyt kun ajat ohjelman niin se näyttää tältä.
Oletko koskaan miettinyt kuinka piirto-ohjelmissa saadaan liukuväri seuraamaan hiirtä? Jotta liukuväri seuraisi hiirtä, niin meidän pitää tietää missä kulmassa kulma hiiri (mouseX, mouseY) on suhteessa aloituspisteeseen ja kuinka kaukana hiiri (mouseX,mouseY) on aloituspisteestä. Tehdään ohjelma jossa origo on ikkunan keskellä, jolloin aloituspiste on (width/2,height/2).
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
strokeWeight(2); // Viivan paksuus 2 (sopiva arvo kokeiltu)
}
function draw() {
background(220); // Tyhjennä tausta ja väritä se harmaaksi
translate(width/2,height/2); // Origo ikkunan keskelle
var kulma = atan2(mouseY-height/2, mouseX-width/2); // Laske viivan ja x-akselin välinen kulma
var etaisyys = dist(width/2,height/2,mouseX,mouseY); // Laske ikkunan keskipisteen ja hiiren välinen etäisyys
rotate(kulma); // Pyöritä kulman verran
for (var a= 0; a <= 255; a++) { // silmukka, jossa a = 0,1,2,3,...255
stroke(a,0,255-a); // Muuta väriä (0,0,255):sta (255,0,0):aan
line(a*etaisyys/255,-600,a*etaisyys/255,600); // Piirrä pystyviivoja pisteestä (0,0) pisteeseen (etaisyys,0)
}
}
|
Komennolla: dist(width/2,height/2,mouseX,mouseY); saadaan selville keskipisteen (width/2,height/2) ja hiiren (mouseX,mouseY) välinen etäisyys. Liukuvärin pitää mennä alkupisteestä (width/2, height/2) tähän loppupisteeseen (mouseX,mouseY). Koska liukuväri eli muuttuja a saa arvoja 0:sta 255:een, niin tällöin voimme ajatella liukuvärin loppupisteen olevan pisteessä (etaisyys, 0), joka on x-akselin piste. Huomaa: etaisyys = a*etaisyys/255, missä a saa maksimissaan arvon 255. X-akselia voimme pyörittää rotate(kulma) komennolla, kunhan vain tiedämme mikä on suoran ja x-akselin välinen kulma. Tämä kulma saadaan selville atan2()-funktion avulla. Koska tangentti määritellään suorakulmaisessa kolmiossa vastainen sivu jaettuna viereinen sivu, niin komento on kirjoitettava muodossa: atan2(mouseY-height/2, mouseX-width/2); eli ensin pystymuutos ja vasta sitten vaakamuutos. Funktio atan2() antaa suoran ja x-akselin väsien kulman radiaaniasteina, siksi komentoon rotate(kulma) ei enää tarvita radians()-komentoa. Alla oleva kuva havainnollistaa asiaa. Käytännössä kulman arvot vaihtelevat -180 ja 180 välillä. 0°:tta on idässä, 90°:tta on etelässä, 180°:tta on lännessä ja -90°:tta on pohjoisessa.
Nyt kun ajat ohjelman, niin se toimii seuraavasti.
Säteittäinen liukuväri eli liukuväri ympyrässä
Kuinka voisimme tehdä ohjelman, joka piirtää sisäkkäisiä ympyröitä, jossa samalla ympyrän väri muuttuu? Jos piirtäisimme ensin pienen ympyrän ja vasta lopuksi ison ympyrän, niin iso ympyrä peittäisi alleen kaikki pienemmät ympyrät. Meidän on ensin piirrettävä isoin ympyrä ja vasta viimeisenä pienin ympyrä. Tämä tarkoittaa käytännössä sitä että joudumme tekemään for-silmukan jossa arvot pienenevät. Tehdään ohjelma, joka piirtää 36 kappaletta sisäkkäisiä ympyröitä for-silmukan avulla isommasta ympyrästä pienempään. Ohjelma on seuraava.
function setup() {
createCanvas(500, 500); // Ikkunan koko
}
function draw() {
background(0); // Tyhjennä tausta
for (var a= 36; a > 0; a--) { // For-silmukka, missä a = 36,35,34,...,1
fill(a*7,0,255); // Väri saa arvoja (252,0,255) arvoon (7,0,255)
ellipse(250,250,a*20,a*20); // Piirretään ympyrä ikkunan keskelle, jossa halkaisija menee arvosta 720 arvoon 20.
} // Lopeta for-silmukka
}
|
Luomme for-silmukan, missä määrittelemme muuttuja a, joka saa alkuarvon 36. Laitamme nyt ehdon, että toista for-silmukkaa niin kauan kun a on suurempi kuin nolla. Kun laitamme laskurin muotoon a–, niin a:n arvot laskevat koko ajan eli 36,35,34,33,…. Kun a saa arvon 0, niin ehto ei enää ole voimassa ja silmukan toisto lopetetaan. Koska muuttuja a on myös ellipse(250,250,a*20,a*20)-komennossa, niin ympyrän koko muuttuu samalla kun a:n arvot muuttuvat. Samalla tavalla voimme muuttaa värin arvoa a:n avulla. Lopputuloksen pitäisi näyttää tältä.
