Pallo ympyräradalla
Kuinka kiertoliike ympäri tehtäisiin? Käytännössä pitää tehdä kaksi asiaa. Ensin pitää siirtää origo ikkunan keskelle komennolla: translate(width/2, height/2); jonka jälkeen pyöritys onnistuu komennolla: rotate(radians(laskuri)); Jos laskuri kasvaa, niin pyöritys tapahtuu myötäpäivään. Jos laskuri pienenee, niin pyöritys tapahtuu vastapäivään. Tehdään tästä ohjelma.
var laskuri = 0; // Määritellään laskuri-muuttuja ja annetaan sille alkuarvo var nopeus = 2; // Määritellään nopeus-muuttuja ja annetaan sille alkuarvo var sade = 50; // Määritellään sade-muuttuja ja annetaan sille alkuarvo function setup() { createCanvas(600, 600); // Ikkunan koko 600 x 600 fill(0,100,200); // Täyttöväri sininen } function draw() { background(220); // Tyhjennä tausta ja väritä se harmaaksi translate(width/2,height/2); // Origo ikkunan keskelle line(-300,0,300,0); // Piirrä x-akseli line(0,-300,0,300); // Piirrä y-akseli laskuri = laskuri + nopeus; // Laskuri kasvaa eli myötäpäivään rotate(radians(laskuri)); // Pyöritä koordinaatistoa ellipse(200,0,2*sade,2*sade); // Piirrä ympyrä paikkaan (200,0) } |
Kun ajat ohjelman, niin se näyttää tältä.
Pyörivä liike ympyräradalla
Olisiko mahdollista laittaa ympyräradalla oleva kappale pyörimään kappaleen keskipisteen suhteen? Sehän onnistuu käyttämällä kahta peräkkäistä translate-komentoa, koska silloin voimme vaihtaa pyörityskeskipistettä. Käytännössä kannattaa laittaa jo toinen koordinaatiston siirto ja pyöritys push() ja pop() komentojen väliin, niin tällöin saamme tarvittaessa palautettua origon paikka takaisin ikkunan keskelle.
Eli ohjelma on seuraavanlainen.
var laskuri = 0; // Määritettään laskuri-muuttuja ja annetaan sille alkuarvo var nopeus = 2; // Määritellään nopeus-muuttuja ja annetaan sille alkuarvo function setup() { createCanvas(600, 600); // Ikkunan koko 600 x 600 fill(0,100,200); // Täyttöväri sininen } function draw() { background(220); // Tyhjennä tausta ja väritä se harmaaksi translate(width/2,height/2); // Siirrä origo ikkunan keskelle line(-300,0,300,0); // Piirrä x-akseli line(0,-300,0,300); // Piirrä y-akseli laskuri = laskuri + nopeus; // Kasvata laskuria nopeuden verran rotate(radians(laskuri)); // Pyöritä koordinaatistoa (liike ympyräradalla) push(); // Ota koordinaatisto muistiin translate(200,0); // Siirrä origo 200 px oikealle ikkunan keskeltä rotate(radians(-laskuri*5)); // Pyöritä koordinaatistoa vastapäivään 5-kertaisella nopeudella rect(-100,-25,200,50); // Piirrä suorakulmio pop(); // Palauta koordinaatisto muistista } |
Kun ajat ohjelman, niin ohjelman suoritus näyttää tältä.
Taidetta
Sovelletaan edellisen esimerkin ideaa käytäntöön.
var laskuri = 0; // Määritellään laskuri muuttuja ja annetaan sille alkuarvo var aSlider; // Määritellään muuttuja aSlider var bSlider; // Määritellään muuttuja bSlider function setup() { createCanvas(600, 600); // Ikkunen koko aSlider = createSlider(1, 20, 10); // Luodaan liukupalkki aSlider aSlider.position(20, 20); bSlider = createSlider(1, 200, 100); // Luodaan liukupalkki bSlider bSlider.position(440, 20); background(0); // Taustaväri musta noStroke(); // Ei reunaviivaa } function draw() { var a = aSlider.value(); // Määritellään muuttuja a ja sijoitetaan siihen arvo liukuplkilta aSlider var b = bSlider.value(); // Määritellään muuttuja b ja sijoitetaan siihen arvo liukuplkilta bSlider translate(width/2, height/2); // Origo ikkunan keskelle laskuri=laskuri+0.5; // Kasvatetaan laskuria 0.5:llä rotate(radians(laskuri)); // Ympyrä liike origon ympäri push(); // Ota koordinaatisto muistiin translate(200,0); // Siirrä origoa 200 px oikealle rotate(radians(laskuri*a)); // Pyöritä fill(255,255,0); // Keltainen täyttöväri ellipse(-b,0,10,10); // Piirrä keltainen piste fill(0,255,0); // Vihreä piste ellipse(b,0,10,10); // Piirrä vihreä piste pop(); // Palauta koordinaatisto muistista } function mousePressed() { // Kun painetaan hiiren painiketta background(0); // niin tyhjennä tausta ja väritä se mustaksi } |
Ohjelman suoritus näyttää tältä. Kokeile muuttaa liukupalkkeja, jonka jälkeen aloita piirtäminen alusta napsauttamalla hiiren painiketta.
Suorakulmio pyörii
Katsotaan vielä toista esimerkkiä. Tässä voit säätää liukupalkeilla suorakulmion muotoa ja pyörimisnopeutta. Pyöriessään suorakulmio luo taiteellisen kuvion.
var laskuri = 0; // Määritellään muuttuja laskuri ja annetaan sille alkuarvo var sade = 50; // Määritellään muuttuja sade ja annetaan sille alkuarvo var aSlider; // Määritellään muuttuja aSlider var bSlider; // Määritellään muuttuja bSlider var cSlider; // Määritellään muuttuja cSlider function setup() { createCanvas(600, 600); // UIkkunan koko aSlider = createSlider(1, 300, 200); //Luodaan liukupalkki aSlider aSlider.position(10, 20); bSlider = createSlider(1, 300, 200); //Luodaan liukupalkki bSlider bSlider.position(210, 20); cSlider = createSlider(1, 90, 1); //Luodaan liukupalkki cSlider cSlider.position(410, 20); background(0); // Tyhjennä taustaväri ja 1 noFill(); } function draw() { var x = aSlider.value(); // Määritellään muuttuja x ja luetaan siihen alkuarvo liukulapalkista aSlider var y = bSlider.value(); // Määritellään muuttuja y ja luetaan siihen alkuarvo liukulapalkista bSlider var nopeus = cSlider.value(); // Määritellään muuttuja y ja luetaan siihen alkuarvo liukulapalkista bSlider var R = random(255); // Määritellään muuttuja R ja arvoaan sille alkuarvo väliltä 0..255 var G = random(255); // Määritellään muuttuja G ja arvoaan sille alkuarvo väliltä 0..255 var B = random(255); // Määritellään muuttuja B ja arvoaan sille alkuarvo väliltä 0..255 stroke(R,G,B); // Aseta reunaviivan väri arvoon R,G,B translate(width/2,height/2); // Origo ikkunan keskelle laskuri = laskuri + nopeus; // Kasvata laskuria rotate(radians(laskuri)); // Pyöritä origon ympäri rect(-x,-y,2*x,2*y); // Piirrä suorakulmio origoon } function mousePressed () { // Kun painetaan jotain hiiren painiketta, niin silloin background(0); // Tyhjennä tausta ja väritä se mustaksi } |
Kun ajat ohjelman niin sen suoritus näyttää tältä