Close menu
Close menu

Tunnistaudu

Kirjaudu

Etkö ole vielä jäsen?

Liity jäseneksi

Ympyräliike

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ä