Monikulmio - MAOL

Mitkä ovat tähden koordinaattipisteet? Kootaan ne taulukkoon

Piste	x	y
A	250	50
B	300	150
C	400	150
D	350	250
E	400	350
F	300	350
G	250	450
H	200	350
I	100	350
J	150	250
K	100	150
L	200	150

Kuinka tähti voitaisiin ohjelmoida? Se onnistuu monikulmio-komenolla. Monikulmio komento alkaa beginShape(); komennolla ja loppuu endShape(CLOSE); komentoon. Tähän väliin voimme luetella monikulmioon tulevat pisteet vertex(x,y); komennoilla. Vertext(x,y)-komentoja voi olla kuinka paljon tahansa. Monikulmio työkalulla voitaisiin piirtää myös piste, viiva, kolmio ja nelikulmio. Ohjelma, joka piirtää kuvan mukaisen tähden on seuraava.

function setup() {
  createCanvas(500, 500); // Aseta ikkunan kooksi 500 x 500
  strokeWeight(3);        // Aseta viivan paksuudeksi 3
}

function draw() {
  background(255,255,0);  // Aseta taustaväriksi keltainen
  fill(255,0,0);          // Aseta täyttöväriksi punainen
  beginShape();           // Aloita monikulmio
    vertex(250,50);       // Piste A
    vertex(300,150);      // Piste B
    vertex(400,150);      // Piste C
    vertex(350,250);      // Piste D
    vertex(400,350);      // Piste E
    vertex(300,350);      // Piste F
    vertex(250,450);      // Piste G
    vertex(200,350);      // Piste H
    vertex(100,350);      // Piste I
    vertex(150,250);      // Piste J
    vertex(100,150);      // Piste K
    vertex(200,150);      // Piste L
  endShape(CLOSE);        // Lopeta monikulmio
}

Monikulmion liikuttelu hiirellä

Kuinka monikulmiota voitaisiin liikutella hiirellä? Koska on hieman hankalaa laittaa jokaiseen monikulmion pisteeseen (mouseX,mouseY) komentoja siten, että lisäksi vielä lasketaan muiden pisteiden etäisyys suhteessa ensimmäiseen valittuun pisteeseen. Onneksi tähän löytyy helpompi ratkaisu. Voit käyttää komentoa: translate(mouseX,mouseY); kuvioiden siirtelyyn. Komento itse asiassa siirtää origoa eli kaikkia kuvoita ikkunassa samaan aikaan. Joten on parempi laittaa sekä kuvio, että translate(mouseX,mouseY); komento komentojen push(); ja pop(); väliin. Komento push(); ottaa koordinaatiston muistiin ja komento pop(); palauttaa koordinaatiston muistista.

push();  
  translate(mouseX,mouseY);
  // Lisää tähän siirrettävä kuvio
pop();

Tehdään tästä ideasta kokonainen ohjelma eli piirretään nuoli ja siirretään sitä hiirellä. Ohjelman koodi on seuraavanlainen.

function setup() {
  createCanvas(600, 600);  // Ikkunan koko 600 x 600
  strokeWeight(3);         // Viivan paksuus 3
}

function draw() {
  background(255,255,0);               // Tyhjennä tausta ja väritä se
  fill(255,0,0);                       // Aseta punainen täyttöväri
  push();                              // Ota koordinaatisto muistiin
   translate(mouseX-200,mouseY-250);   // Siirrä koordinaatistoa hiiren avulla
   beginShape();                       // Aloita monikulmio
    vertex(100,200);
    vertex(200,200);
    vertex(200,150);
    vertex(300,250);
    vertex(200,350);
    vertex(200,300);
    vertex(100,300);
   endShape(CLOSE);                    // Lopeta monikulmio
  pop();                               // Palauta koordinaatisto muistista
}

Monikulmion pisteistä muodostuu nuoli. Nuolen keskipiste laskettuna ikkunan vasemmasta yläreunasta on 200 oikealle ja 250 alaspäin, niin siksi translate(mouseX,mouseY); komento kirjoitetaan muotoon translate(mouseX-200,mouseY-250); niin saadaan hiiri siirrettyä nuolen keskelle. Ilman tätä siirrosta nuoli olisi aina origossa. Ohjelman suoritus näyttää tältä.

Olisiko mahdollista arpoa taustaan ympyröitä ja samalla liikutella monikulmiota? Kyllähän se onnistuu, joudumme nyt luomaan uuden tason, johon arpominen suoritetaan. Muutetaan koodia seuraavasti.

var tausta; // Luodaan muuttuja taustatasoa varten
function setup() {
  createCanvas(600, 600);             // Ikkunan koko on 600 x 600
  tausta = createGraphics(600, 600);  // Luodaan taustataso, jonka koko on 600 x 600
  tausta.clear();                     // Tyhjennä taustataso
  strokeWeight(3);                    // Aseta viivan paksuus 3
}

function draw() {
  background(255,255,0);              // Tyhjennä tausta ja väritä se keltaiseksi
  
  // Taustataso
  tausta.fill(random(255), random(255), random(255), random(255));  // Arvotaan täyttöväri
  tausta.ellipse(random(width), random(height), 100, 100);          // Arvotaan ympyrä satunnaiseen paikkaan
  image(tausta, 0, 0);                                              // Sijoitetaan ympyrä taustatasolle
  
  // Ylempi taso 
  fill(255,0,0);                      // Aseta Punainen täyttöväri
  push();                             // Ota koordinaatisto muistiin
   translate(mouseX-200,mouseY-250);  // Siirrä koordinaatistoa
   beginShape();                      // Aloita monikulmio
    vertex(100,200);
    vertex(200,200);
    vertex(200,150);
    vertex(300,250);
    vertex(200,350);
    vertex(200,300);
    vertex(100,300);
   endShape(CLOSE);                    // Lopeta monikulmio
  pop();                               // palauta monikulmio muistista
}

Ohjelma toimii nyt seuraavasti.

Tunnistaudu

Etkö ole vielä jäsen?