Info Draft Processing suomeksi

Listat


Voimme laittaa monenlaisia asioita muuttujaan: numeron, murtoluvun, tekstin lauseen tai vaikka kokonaisen kuvan. Mutta vaikka muuttujat voivat teoriassa sisältää minkä tahansa tyypin arvon, ne voivat sisältää vain yhden näistä arvoista kerrallaan. Joissain tapauksissa olisi mukavaa ryhmittää joukko asioita yhteen, jolloin ne olisivat ainakin jonkinlaisessa yksittäisessä oliossa. Tästä syystä on keksitty erityinen muuttujatyyppi, listat.

Listoja käytetään tallentamaan ennalta määrätty joukko tietoa tai olioita yhdessä muuttujassa. Sen sijaan että loisit 20 muuttujaa tallentamaan 20 erilaista arvoa, voit luoda yhden säilön näille 20 arvolle ja käsitellä niitä yksi kerrallaan. 

Luo lista

Jos käytämme peruselementtejä, kuten numeroita, on hyvin helppo tehdä lista:

 

int[] numerot = {90,150,30};

Aaltosulut tarkoittavat, että sisällä ei ole vain yksittäinen kokonaisluku, vaan kokonainen lista kokonaislukuja, joiden sisällä on useampia arvoja. Niinpä voimme täyttää tämän listan aaltosulkeiden sisällä olevilla arvoilla.

Tietokone luo tarpeeksi muistipaikkoja, jotta jokaiselle arvolle löytyy sopiva laatikko: 

Tästä syystä käytämme sanaa int, koska Processingin täytyy tietää jokaisen listan laatikon arvo. Jos ne olisivat kuvia, jokainen listan solu tarvitsisi paljon enemmän tilaa.

Luo tyhjä lista


Tämä suoran luomisen menetelmä ei toimi epätavallisempien elementtien, kuten äänien tai kuvien kanssa.


Yleensä
lista julistetaan seuraavasti: tyyppi [] LISTA NIMI= new LISTAN TYYPPI [KOHTEIDEN MÄÄRÄ LISTASSA ]. Esimerkki alla luo kolmen kokonaisluvun listan. Ole tarkkana, kun luomme listan. Tämä on sarja tyhjiä laatikoita: ne eivät sisällä arvoa.  

int[] numerot = new int[3]; 

 illustration_creation_liste

Kokonainen lista

Arvojen sijoittaminen listaan toimii samalla tavalla kuin arvon laittaminen muuttujaan. Täytyy olla myös tarkennus, mihin sijaintiin listalla arvo lisätään.

numerot[0] = 90;
numerot[1] = 150;
numerot[2] = 30;

Nämä arvot numeroidaan automaattisesti arvosta 0 arvoon listan pituus miinus yksi.

Listan sisällön käyttö

Listan elementin käyttö on samanlaista kuin muuttujan käyttö. Määrittelet vain kyseisen elementin sijainnin listalla:

 

println( numerot[0] );

Huomaa, että tietokone aloittaa sijainnista 0, ei 1. Jos kutsumme arvoa numerot[2], Processing antaa meille kolmannen sijainnin arvon eikä toisen sijainnin arvoa. Processingin muisti toimii seuraavaksi: nollas ensin, sitten ensimmäinen, toinen jne. Nollas arvo on listan alussa.

Tässä esimerkissä käytämme silmukkaa laskeaksemme kaikkien aiemmin julistettujen elementtien summan: 

int[] numerot = new int[3];

numerot[0] = 90;
numerot[1] = 150;
numerot[2] = 30;

int summa = 0;

for (int i = 0; i < 3; i++) {
    summa = summa + numerot[i];
}

println(summa);

Tämän ohjelman pitäisi näyttää seuraava ulostulo konsolissasi, Processing-ikkunan alaosassa:

processing_listes_console_1

Ensin loimme muuttujan, joka sisältää kaikkien arvojen summan. Se alkaa arvosta nolla.

Tämän jälkeen lisäämme silmukan, joka toistaa itsensä kolme kertaa, ja lisäämme joka kerralla seuraavan arvon summaan. Tässä näemme läheisen suhteen, joka on olemassa listan ja for () -silmukan välillä. Arvo i voi kulkea listan arvojen läpi yksitellen, aloittaen arvosta nolla, siirtyen arvoon 1 ja sen jälkeen arvoon 2.

Kuvat seuraavat toisiaan

Yksi tapa käyttää listoja on kuvien tuominen Processingiin. Oletetaanpa, että tahdomme tuoda viisi kuvaa Processingiin. Kun emme käytä listoja, voimme kirjoittaa jotain tällaista: 

PImage kuva1;
kuva1 = loadImage("kuva_1.png");
image(kuva1,0,0);

PImage kuva2;
kuva2 = loadImage("kuva_2.png");
image(kuva2,50,0);

PImage kuva3;
kuva3 = loadImage("kuva_3.png");
image(kuva3,100,0);

PImage kuva4;
kuva4 = loadImage("kuva_4.png");
image(kuva4,150,0);

PImage kuva5;
kuva5 = loadImage("kuva_5.png");
image(kuva5,200,0);

Äärimmillään tämä esimerkki on hallittavissa, mutta kirjoitusvirheitä tulee helposti. Jopa kirjoittaessani näitä rivejä tähän kirjaan tein paljon kirjoitusvirheitä tai unohdin muuttaa edelliseltä riviltä kopioimani tekstin.

Parempi tapa kirjoittaa tämä esimerkki on listojen käyttö: 

PImage[] kuvat = new PImage[5];

kuvat[0] = loadImage("kuva_0.png");
kuvat[1] = loadImage("kuva_1.png");
kuvat[2] = loadImage("kuva_2.png");
kuvat[3] = loadImage("kuva_3.png");
kuvat[4] = loadImage("kuva_4.png");

image( kuvat[0], 0, 0);
image( kuvat[1], 50, 0);
image( kuvat[2], 100, 0);
image( kuvat[3], 150, 0);
image( kuvat[4], 200, 0);

Listaa käyttäen voimme laittaa kaikki kuvamme yhteen muuttujaan, joka initialisoidaan vain kerran: PiMag [] = new PiMag [5]. Tämän jälkeen voimme täyttää jokaisen tiedoston jokaisen arvon sijaintien listaan.

Mutta näinkin kirjoittamiseen menee liikaa aikaa. Mitä teet, jos sinulla on 200 tai jopa 2000 kuvaa? Kirjoitatko todella kaiken 200 kertaa? Ja mitä teet, kun tahdot tuoda uudelleennimetyn tiedoston?

Tässä on paras tapa tuoda kuvasarja: 

size(500,500);

PImage[] kuvat = new PImage[20];

for(int i=0; i<images.size(); i++) {
kuvat[i] = loadImage("kuva_" + i + ".png");
  image( kuvat[i], random(width), random(height) );
}

Käyttäen silmukkaa for() voimme nyt tuoda niin monta kuvaa kuin tahdomme.

Ensin luomme kuvalistan. Se on aluksi tyhjä lista: 

PImage[] kuvat = new PImage[20];

 

Tämän jälkeen saamme listan pituuden kysymällä siltä montako kuvaa se sisältää komennolla  images.size(). Tämän jälkeen voimme käyttää tätä komentoa antamaan for() -silmukan toistojen määrän. 

for(int i=0; i<images.size(); i++)

Voimme jopa automatisoida kuvien tuomisen käyttäen arvoa i kutsuaksemme kuvien tiedostonimiä. Merkillä "+" voimme yhdistää kaksi sanaa, mikä merkitsee, että kaksi sanaa tai merkkiä voidaan yhdistää yhteen viestiin. 

kuvat[i] = loadImage("kuva_" + i + ".png");

Liittämällä sanat "kuva_", muuttujan i arvon ja tiedostopäätteen ".png", saamme viestin, joka sisältää tekstin "kuva_42.png". Näin voimme käyttää yhtä riviä koodia luomaan niin monta kuvaa kuin tahdomme. Jos muuttuja i sisältää arvon 9, tuodun tiedoston nimi on kuva_9.png. Jos muuttuja i sisältää arvon 101, tuodun tiedoston arvo on kuva_101.png.

Jotta tämä tekniikka toimisi, sinun täytyy vain laittaa tiedostot valmiiksi data-hakemistoosi. Tässä on datahakemisto, joka sisältää 20 kuvatiedostoa: 

Kun jokainen näistä kuvista tulee ohjelmaamme, piirrämme sen johonkin luonnoksessamme.

image ( kuvat[i], random(width), random(height) );

Tämä lause piirtää kuvan (0,1,2,3,...) satunnaiseen paikkaan x ja y -akseleilla. Se käyttää leveyden ja korkeuden nykyistä arvoa sijaintina. Nämä kaksi arvoa vastaavat kuvan kokoa piirroksessa, mikä merkitsee, että jokainen kuva piirretään satunnaiseen paikkaan piirroksessamme. 

Pikselisarja

Jos luit kuvia käsittelevän luvun, näit että PiMag-muuttuja ei sisällä yhtä muuttujaa vaan monia, ellei kuvasi ole yhden pikselin korkuinen ja levyinen. Tästä harvinaisesta poikkeamasta huolimatta kuvasi sisältää sarjan muutoksia, jotka edustavat kaikkia kuvan muodostavia pikseleitä. Tätä sarjaa kutsutaan listaksi.

Voit päästä suoraan pikseleihin pyytämällä suoraa pääsyä alimuuttujaan nimeltä "pixels".

Kuvitelkaapa, että meidän täytyy aloittaa mystisen naisen kuva tiedostossa lhooq.png. 

lhooq

Jos tuomme tämän kuvan Processingiin, voimme ottaa tietyn pikselin kuvan menemällä kuvalistan sisään. Tätä listaa kutsutaan funktiolla pixels []. 

mona_pixel2.tiff

size(512,256);

PImage lhooq;
lhooq = loadImage("lhooq.png");
image(lhooq,0,0);

int x = 119;
int y = 119;

int index = x + (y * lhooq.width); color c = lhooq.pixels[index];

noStroke();
fill(c);
rect(256,0,256,256);

stroke(0);
line(x-5,y,x+5,y);
line(x,y-5,x,y+5);

Kaksi tärkeintä riviä on lihavoitu:

int index = x + (y * lhooq.width); color c = lhooq.pixels[index];

Huomautamme, että kuva ei ole mitään muuta kuin lista pikseleitä. Tyypin PiMag muuttujat tallentavat pikselien arvot pitkään listaan. 

 

Näemme listan kahdella (x, y) ulottuvuudella, PiMag nähdään yhdestä suunnasta. Jos löydämme arvon sijainnissa (2,1), todellisuudessa sen pitäisi osoittaa, että tahdomme laittaa sen sijaintiin 17 kuvassa. Todellisuudessa rivin pisteen ja vastaavan seuraavan rivin pisteen välillä on 16 pikseliä. Toisin sanottuna meillä on 16 pikseliä jokaista riviä kohden.

Tästä syystä pikselin kaava kirjoitetaan (x + (leveys * y)). Jokaista y-riviä kohden on paljon x-arvoja, joiden arvot täytyy saada.

 

Kuvan pikselien värittäminen

Voit jopa luoda omat PiMag-muuttujasi ja antaa sille pikselien värit. Kuvapikseleitä käytetään nollasta alkaen, kuten mitä tahansa listaa. 

illustration_liste_p_image02

Tässä esimerkissä piirrämme kolme kertaa kolmen pikselin ruudukon. Piirrämme suuremman kuvan venyttämällä sen 80 x 80 pikseliin. 

PImage img = createImage(3, 3, ARGB);
img.loadPixels();
img.pixels[0] = color(255, 0, 0);
img.pixels[1] = color(0, 255, 0);
img.pixels[2] = color(0, 0, 255);
img.pixels[3] = color(255, 0, 255);
img.pixels[4] = color(255, 255, 0);
img.pixels[5] = color(0, 255, 255);
img.pixels[6] = color(0, 0, 0);
img.pixels[7] = color(127, 127, 127, 255);
img.pixels[8] = color(255, 255, 255, 0);
img.updatePixels();
image(img, 10, 10, 80, 80);

Huomaa, että muunnamme Processingissa kuvaan komennolla loadPixels () ja lopetamme kuvan muokkaamisen komennolla updatePixels (). Muuten emme näe listaan tekemiemme muutosten seurauksia.

Huomaa, että voit myös tehdä tällaisen maalauksen käyttäen toistoja.