haritu, hezkuntza digital kritikoa sustatzeko kultura eta teknologia laborategia da.

1// Bideojoko txiki bat processing p5js-ekin egiten

  • Noiz sortu zen

    2020-11-30

  • Noiz eguneratu zen

    2021-01-22

Processing kode askeko programazio lengoaia eta programatzeko interfaze bat da, arte bisualentzako 2001ean garaturikoa. Javan oinarrituta dago. John Maedak STEAM gure hezkuntzan gero eta gehiago entzuten den akronimoan arte A sartzea lortu zuen pertsonaren lan taldeko Ben Fry eta Csey Reas garatu zuten. MIT-eko Media Labeko Estetika eta Konputazio Taldean lan egiten zeudelarik.

Processing sortu zen artistak, eta ikus entzunetan lan egiten zuten diseinatzaileak, … kodearekin harremana ez zuten zenbait jendek kodea sorkuntza baliabide bezala ulertu zezaten eta eskuragarri izan zezaten.

Guk proiektu hau OpenProcessing plataforman egin dugu, arrazoia, webean partekatzeko aukera dugula. Baina helburua mantentzen dugu, programaziora urbildu.

Programa bat sortzeko honako estruktura egin ohi da, OpenProcessinf plataforman horrela egituratzen delarik:

  1. Aldagaiak ezarri
  2. Programa martxan jarriko duena esan, bakarrik behin exekutatuko dena // void setup (), function setup ()
  3. Programa egingo duena esan // void draw (), function draw ()

OpenProcessing plataformak p5.js bidez programatzen da, hau da processing web girora egokitzen duen lengoaia, eta void barik  function erabiltzen da eta horrela geratuko litzateke oinarrizko egitura:

function setup()
{
}
function draw()
{
}

Eta honekin hasiko ginateke 🙂

Gure proiektua pong modukoa izango da, pilota bat jo, eta jausi ez dadi ekiditea.

1.- Aldagaiak ezarri

Aldagai bat gure programetan informazioa gorde eta jasotzea baimentzen digun baliabidea da. Aldagai bakoitza datu berezi bat gorde dezake. Beraz aldagai batek bi ezaugarri ditu: izena eta datu mota.

float pilotaX = 300;
float pilotaY = 100;
float noraX = 5;
float noraY = 4;

float // zenbaki hamartarra datu mota adierazten du, datu mota ugari daude: int, float,…

PilotaX //  pilotaren kokapena X ardatzean, izen bat da.

float pilotaX = 300; // Esan nahi duena da pilota X ardatzean 300 posizioan hasiko dela, eta aldagai honekin bere posizioa kontrolatuko dugula programan zehar.

OpenProcessing plataforman datu mota ez da zehaztu behar ordea, izenarekin nahikoa. Beraz horrela geratuko ziren gure aldagaiak:

ballX = 300; // pilotaren kokapena x ardatzean. 300 puntuan hasiko delarik.
ballY = 100; // pilotaren kokapena y ardatzean. 100 puntuan hasiko delarik.
dirX = 5; // pilotaren norabidea x ardatzean. 5 puntuan hasiko delarik.
dirY = 4; // pilotaren norabidea y ardatzean. 4 puntuan hasiko delarik.

2.- Programa hasterakoan martxan jarriko dena

function setup() {
createCanvas(600, 400); // pantailaren tamaina 600 pixel zabalera eta 400 pixel altuera
}

3.- Programa egingo duena

background(255, 255, 255); // pantailaren kolorea margotu zuriz (rgb sisteman, zuria 255 a hiru koloretan jarriz lortzen da)pilotaren arrastroa ezabatzeko
ellipse(ballX, ballY, 20, 20); // pilota margotzen dugu x eta y posizioan aldatuko da (horregatik aldagaiak jarri ditugu) 20 pixeleko diametroarekin, beraz generatiboa da, denbora guztian dago sortzen
rect(mouseX, 380, 80,20); // laukia sortzen dugu, honen x posizioa arratoiaren araberakoa izango da (aldagai hau ez da deklaratu behar, processing-en txertatuta dago), y posizioa finkoa eta zabalera 80 pixelekoa altuera 20 pixelekoa
fill(0, 0, 0); // pilota eta laukia beltzez margotuko ditugu

// y ardatzean pasatuko dena programatuko dugu orain
// ————————————————-

if (ballY >= 400) // pilota lurra ukitzen badu alderantzizko aldera joan behar du
{
dirY = -4;
ballY += dirY;
}

else if (ballY <= 0) // pilota, ordea, sabaia ukitzen badu, lurrerantz joan behar du
{
dirY = 4;
ballY += dirY;
}

else if (ballY >= 380 && ballX >= mouseX && ballX <= mouseX+80) // pilota ordea, laukiarekin jo bada gorantz joan (-) eta 4 norantzara
{
dirY = -4;
ballY += dirY;
}

else // goikoren bat ez bada suertatzen (lurra ukitu, sabaia ukitu edo laukia ukitu) pilotaren posizioa, y norabidean mugitzen egongo da.
{
ballY += dirY;
}

// X ardatzean pasatuko dena programatuko dugu orain
// ————————————————-

if (ballX <= 0) // pilota eskerreko horma ukitzen badu eskuinera joan behar du
{
dirX = 4;
ballX += dirX;
}

else if (ballX >= 600) // pilota eskuineko horma ukitzen badu eskerrera joan behar du
{
dirX = -4;
ballX += dirX;
}

else // pilotak ez badu goiko bietatik ezer egiten ordea, x direkzioaren arabera mugituko da
{
ballX += dirX;
}
}