P5.js-ohjelmointi on melkein samanlaista kuin Processing-ohjelmointi. Aluksi Processing kielestä tehtiin JavaScript-kirjasto: processing.js, joka yrittää olla täysin samanlainen kuin alkuperäinen Javalla koodattu Processing-kieli. Kuitenkin JavaScriptissä on paljon omia ominaisuuksia, joten haluttiin tehdä Processing-kielestä toinen versio, joka seuraa enemmän JavaScriptin kehitystä, kuin Javan kehitystä. Täten syntyi P5.js-kirjasto, joka pyörii millä tahansa web-selaimella.
Netissä toimiva editori on osoitteessa: https://editor.p5js.org/
Ohjeita löytyy osoitteesta: https://p5js.org/
Aukaise editori ja kirjoita sinne seuraava koodi.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0,0,255);
fill(0,255,0);
rect(100,100,200,200);
fill(255,255,0);
textSize(50);
text("MOI",150,200);
}
|
Kun olet kirjoittanut koodin valmiiksi, niin paina lopuksi punaisen ympyrän näköistä painiketta, jossa on valkea kolmio, niin näet ohjelman suorituksen oikean puoleisessa ikkunassa.
Koodi on muuten samanlaista kuin Processing-kielessä, mutta void-sanan tilalla on function-sana. Samoin size-komento on muuttunut muotoon CreateCanvas. P5.js-ohjelmointiympäristössä voit luoda oman tunnuksen, jolloin voit tallentaa oman koodin tähän ympäristöön. Siellä onnistuu myös koodin jakaminen linkkinä tai upotuskoodilla eteenpäin. P5.js ympäristössä voi myös kirjoittaa puhdasta JavaScriptiä.
Tietysti voisi kysyä, että entä jos kirjoittaisi suoraan JavaScript-koodia P5JS-editoriin. No, sehän onnistuu eli sama ohjelma JavaScript-koodilla näyttäisi tältä. Kokeile kirjoittaa se p5js-editoriin.
var canvas = document.getElementById("canvas");
canvas.setAttribute('width', 400);
canvas.setAttribute('height', 400);
var komento = canvas.getContext("2d");
document.getElementById("canvas").style.backgroundColor="Blue";
komento.fillStyle = "Green";
komento.fillRect(100,100,200,200);
komento.fillStyle = "Yellow";
komento.font = '50px Arial';
komento.fillText('MOI', 150, 200);
|
Sen lisäksi ota auki index.html tiedosto ja lisää tänne <body> ja </body> tagien väliin html-komento:
<canvas id="canvas"></canvas> |
index.html tiedoston saat auki, kun napsautat ikkunan vasemmassa reunassa olevaa väkästä.
Helppo huomata, että puhdas JavaScript ei ole aivan niin selkeää kuin p5.js. Komennot ovat paljon pidempiä. Pitkissä komennoissa tulee helposti kirjoitusvirheitä, joka hidastaa koodin kirjoittamista. Kuten tämä esimerkki osoitti, niin on parempi koodata aluksi P5JS-komennoilla, koska se soveltuu paremmin aloittelijalle. JavaScriptiin voi siirtyä myöhemminkin, koska samalla pitäisi käydä myös html-koodia ja css-tyylitiedostoja. Tästä saisi helposti rakennettua ohjelmointipolun itselle. Esimerkiksi: Scartch -> P5.js -> JavaScript / HTML / CSS
Huomioita
- P5.js sopii aloittelijalle. Koodi on selkeää ja yksikertaista.
- Voi käyttää rinnan Processing-ohjelmoinnin kanssa.
- Hyvä yhteensopivuus ja laajennettavuus.
- Aktiviinen yhteisö. Ohjeita ja esimerkkejä on löydettävissä helposti.
- Tulevaisuus näyttää lupaavalta, koska JavaScript on ohjelmointikieli, jota käytetään Internetissä.
- Helppo laajentaa JavaScriptiin tarvittaessa ja muihin web-tekniikoihin (html ja css). Ohjelmointiympäristöä ei tällöin tarvitse vaihtaa.