Koordinaatisto

Valitaan ensisijaiseksi ohjelmointiympäristöksi P5js-editori, joka löytyy osoitteesta: https://editor.p5js.org/
Toinen vaihtoehto koodin tekemiseen löytyy osoitteesta: https://www.openprocessing.org/sketch/create , jossa on mahdollista tehdä sekä p5js, että Processing-koodia. Nämä ohjeet on tehty P5.js-ohjelmointikielelle. Myös muilla ohjelmointikielillä voitaisiin koodausta tehdä, mutta sen selvittäminen jääköön lukijan omaksi tehtäväksi.

Aloitetaan esimerkistä. Tehdään ohjelma, joka tulostaa tekstin ”Tervetuloa ohjelmoimaan” ikkunaan, jonka koko on 500 px x 500 px. Laitetaan tekstin fonttikooksi 50 px. Kuvassa on esitetty koordinaatisto, jonka mukaan ohjelmointi suoritetaan.

P5.js-koodi

// Tämä on kommentti
function setup() {
  createCanvas(500, 500); 
  textSize(50);           
}
function draw() {
  background(220);            
  text("Tervetuloa",50,100);  
  text("ohjelmoimaan", 50,200); 
}

Ohjelma toimisi ilman funktioita setup() – ja draw (), mutta kirjoitamme koodia käyttäen kuitenkin näitä funktioita. setup ()-funktio suoritetaan ohjelmassa vain kerran ja sinne laitetaan, niin kuin nimikin jo kertoo, ohjelman suorituksen aikana olevat pysyvät asetukset. Draw()-funtio on vastaavasti ikuisessa silmukassa ja se mahdollistaa vuorovaikutuksen luomisen. Draw ()-funktiota voitaisiin nimittää pääohjelmaksi, jonne yleensä kaikki komennot kirjoitetaan. Kun kirjoitat koodia, niin kirjoita yksi komento yhdelle riville. Komentoja voidaan selkeyttää esimerkiksi sisentämällä. Tarvittaessa lisää ohjelmaan myös kommentteja.

Katsotaan vielä läpi, mitä kukin komento (eli funktio) tekee.

Kun suoritat ohjelman, niin se tulostaa seuraavaa.

Tutki seuraavaa:

• Kokeile muuttaa komentoon: textSize(50); eri luku: 20, 100 tai 150, Mitä havaitset?
• Kokeile muuttaa komentoon: background(220); eri luku: 0, 50, 100, 150, 200, 240 tai 255. Mitä havaitset?
• Kokeile muuttaa komento: background(220); muotoon: background(mouseX); Mitä havaitset?
• Kokeile muuttaa komento: background(220); muotoon: background(255,0,0); Mitä havaitset?
• Kokeile muuttaa komento: text(”Tervetuloa”, 50,100); muotoon: text(”Nyt”,100,50); Mitä havaitset?
• Kokeile muuttaa komento: text(”Tervetuloa”, 50,100); muotoon: text(”Yes”,mouseX, mouseY); Mitä havaitset?
• Jos kirjoitat komennon: textSize(50); muotoon textSize(mouseX); Niin mitä huomasit? Miksi? Kokeile siirtää textSize(mouseX); komento void draw () -lohkon sisälle eli siellä kaarisulkeiden { } sisälle. Mitä huomasit? Miksi?

Katsotaan vielä toista esimerkkiä. Tehdään seuraava ohjelma.

function setup() {
  createCanvas(400, 400); // Ikkunan koko on 400 x 400
  textSize(40);           // Asetetaan teksin kooksi 40
}

function draw() {
  background(0);                  // Taustaväri musta
  fill(255);                      // Teksin väri eli täyttöväri on valkea
  text("6 + 3 = "+(6+3),20,50);   // Tulosta tekstiä
  text("6 - 3 = "+(6-3),20,100);
  text("6 * 3 = "+(6*3),20,150);
  text("6 / 3 = "+(6/3),20,200);
  text("Huomio: 6 + 3 = "+6+3,20,250);
}

Kun ajat ohjelman, niin lopputulos näyttää tältä.

Kun katsotaan koodia, niin ohjelma tulostaa kaiken mikä on lainausmerkkien ” ” sisällä. Mutta entä jos lukujen ympärillä ei ole lainausmerkkejä? Tällöin ohjelma laskee luvut keskenään. Jos lukujen välissä on plus-merkki, niin luvut lasketaan yhteen. Plus-merkkiä käytetään myös erottimena, joka erottaa luvut ja lainausmerkkien välissä olevan tekstin toisistaan. Kun katsot ensimmäistä ja viimeistä tulostusriviä, niin huomaat, että laskutoimitukset pitää aina laittaa sulkujen ( ) sisäpuolelle tai muuten luvut ovat erillisiä merkkejä, jotka kirjoitetaan peräkkäin. Jos haluat varmistaa, että luvut lasketaan, niin käytä sulkuja laskutoimitusten ympärillä. Muutoin on vaarana, että luvut käsitellään peräkkäisinä merkkeinä. Kerto- ja jakolaskut ohjelma osaa laskea, mutta ongelma koskee lähinnä yhteen ja vähennyslaskua. Tällä kurssilla riittää, jos osaat peruslaskutoimitukset.