Processing
Processing-ohjelmointikielen kehittivät Casey Reas ja Benjamin Fry MIT:n medialaboratoriossa. Se on avoimeen lähdekoodin perustuva ohjelmointikieli, joka kehitettiin elektronisen taiteen luomiseen. Processing perustuu Java-ohjelmointikieleen. Processingin kehittämisen aloittivat Casey Reas ja Benjamin Fry 2001 MIT:n medialaboratoriossa. Scratch on toinen MIT:n kehittämä visuaalinen ohjelmointikieli, joka on jo laajalti koulumaailmassa käytössä. Olen tehnyt sitä varten oman ohjelmointikurssinsa, joka löytyy tästä osoitteesta: https://aoe.fi/#/materiaali/436. Scratch on erinomainen kieli ohjelmoinnin alkeiden opiskeluun motivoivassa ympäristössä. Lähde: en.wikipedia.org/wiki/Processing_(programming_language) Katsottu: 23.9.2021 19:09.
Johdanto
Tämän kurssin idea on yhdistää kuvataidetta ja ohjelmointia. Processingin avulla pystyy varsin nopeasti oppimaan, kuinka luoda erilaisia kuvia ja animaatioita ohjelmoimalla. Samalla lähestymme ohjelmointia lähes kaikista ohjelmointikielistä löytyvien käsitteiden: lause, silmukka, ehtolause ja muuttuja, kautta.
Jokaisella ohjelmointikäsitteellä on oma osuutensa, jossa on aluksi koodiesimerkkejä ja kuvia sekä animaatioita koodin tuottamista tuloksista. Tärkein osa on kuitenkin viimeisenä tuleva luova tehtävä, jossa opittuja taitoja pääsee testaamaan ja päästämään luovuutensa irti.
Processingista löytyy todella paljon tutoriaaleja ja myös hyviä kirjoja. Processingin omilta sivuilta löytyy hyviä tutoriaaleja: processing.org/tutorials. Tähän kurssiin sain myös paljon inspiraatiota tästä kirjasta: Processing – A Programming Handbook for Visual Designers and Artists – MIT Press-200709.pdf, jonka saa ladattua ilmaiseksi PDF-muodossa internetistä. Jo ennen tätä kirjaa sain todella vahvan inspiraation Mehackitin “Let me hack it” MOOC:sta, jossa tein sekä Arduino-, Sonic Pi- että Processing -kurssit. Ihastuin erityisesti luovaan lähestymistapaan ohjelmoinnin opiskelussa. Tämän kurssin rakensin kuitenkin itse alusta asti näiden materiaalien innostamana.
Processing-ohjelman asentaminen koneelle tai sen käyttö selaimen avulla
Processing-ohjelman voi ladata sen omilta sivuilta osoitteesta: processing.org/download. Espoon perusopetuksessa se löytyy Windows-koneilta Software Centeristä. Processing-ohjelmaa voi myös käyttää Google-tunnuksilla tai luomalla tunnukset selaimella osoitteessa: openprocessing.org/. OpenProcessingia pystyy käyttämään myös kirjautumatta palveluun ja tallentamaan koodin vaikka tekstitiedostona itselleen talteen.
Kurssin sisältö
Alla on kurssin sisältö avattuna. Linkeistä pääsee suoraan juuri siihen sisältöön, jonka otsikko kertoo:
Kerrotaan, mitä lause tarkoittaa ohjelmoinnissa ja Processing-ohjelmointikielessä.
Kuinka piste tehdään koodaamalla Processingilla.
Kuinka viiva tehdään koodaamalla Processingilla.
Kuinka kolmio tehdään koodaamalla Processingilla.
Kuinka suorakulmio tehdään koodaamalla Processingilla.
Kuinka ellipsi (ja ympyrä) tehdään koodaamalla Processingilla.
Kuinka annetaan pisteelle väri Processingilla. (Tämä suora linkki ei toimi, joten joutuu skrollaamaan sivulla alas päin).
Kuinka annetaan viivalle väri Processingilla. (Tämä suora linkki ei toimi, joten joutuu skrollaamaan sivulla alas päin).
Kuinka annetaan kolmiolle väri Processingilla. (Tämä suora linkki ei toimi, joten joutuu skrollaamaan sivulla alas päin).
Kuinka annetaan suorakulmiolle väri Processingilla. (Tämä suora linkki ei toimi, joten joutuu skrollaamaan sivulla alas päin).
Kuinka annetaan ellipsille väri Processingilla.
Kuinka annetaan taustalle väri ja koko Processingilla.
Tässä haasteessa pääsee kokeilemaan tähän mennessä opittuja taitoja ja laskemaan luovuuden valloilleen.
Kerrotaan, mitä silmukka tarkoittaa ohjelmoinnissa ja Processing-ohjelmointikielessä.
Kerrotaan, mitä while-silmukka tarkoittaa ja miten sitä käytetään Processing-ohjelmointikielessä.
Ohjelmoidaan 4 valkoista viivaa mustalle pohjalle while-silmukkaa hyväksi käyttäen.
Kerrotaan, mitä for-silmukka tarkoittaa ja miten sitä käytetään Processing-ohjelmointikielessä. (Tämä suora linkki ei toimi, joten joutuu skrollaamaan sivulla alas päin).
Ohjelmoidaan tietokone kirjoittamaan kuusi kertaa “Hello, World!” konsoliin for-silmukkaa hyväksi käyttäen.
Kerrotaan, miten draw()- ja setup() -funktioita käytetään Processing-ohjelmointikielessä. (Tämä suora linkki ei toimi, joten joutuu skrollaamaan sivulla alas päin).
Ohjelmoidaan animaatio, jossa punainen pallo siirtyy vasemmalta oikealle mustalla taustalla hyödyntäen draw()- ja setup() -funktioita.
Tässä haasteessa pääsee kokeilemaan tähän mennessä opittuja taitoja ja laskemaan luovuuden valloilleen vaikka animaatioita tehden.
Kerrotaan, mitä ehtolause tarkoittaa ohjelmoinnissa ja Processing-ohjelmointikielessä.
Kerrotaan, mitä if-ehtolause tarkoittaa ja miten sitä käytetään Processing-ohjelmointikielessä.
Ohjelmoidaan animaatio, jossa punainen pallo liikkuu vasemmalta oikealle. Kun se menee oikean reunan yli, tulee se takaisin näkyviin vasemmalta puolelta hyödyntäen if-ehtolausetta.
Kerrotaan, mitä else-ehtolause tarkoittaa ja miten sitä käytetään Processing-ohjelmointikielessä.
Ohjelmoidaan tietokone piirtämään viivan taustan keskipisteestä hiiren osoittimeen niin, että se vaihtaa väriä keskikohdan ylittäessään vaakasuunnassa. Hyödynnetään if- ja else -ehtolauseita.
Kerrotaan, mitä else if -ehtolause tarkoittaa ja miten sitä käytetään Processing-ohjelmointikielessä.
Ohjelmoidaan tietokone piirtämään viivan, joka jättää taustalle kuvioita punaisella, sinisellä ja keltaisella värillä hyödyntäen if- , else if- ja else -ehtolauseita.
Animoidaan muotoja ehtolauseita hyödyntäen.
Kerrotaan, mitä muuttuja tarkoittaa ohjelmoinnissa ja Processing-ohjelmointikielessä.
Kokonaisluku-tietotyyppi Processing-ohjelmoinnissa.
Liukuluku-tietotyyppi Processing-ohjelmoinnissa.
Ohjelmoidaan animaatio, jossa punainen ja sininen pallo liikkuvat eri vauhdilla vasemmalta oikealle. Toisessa x-koordinaatti muuttuu kokonaisluvuin ja toisessa liukuluvuin.
Satunnaislukujen hyödyntäminen random() -funktiota hyväksi käyttäen.
Ohjelmoidaan mustalle taustalle satunnaisen kokoisia palloja (tietyllä välillä), joilla on satunnainen väri ja sijoittuminen taustalla.
Tietotyyppi kuville ja miten sitä käytetään Processing-ohjelmoinnissa.
Ohjelmoidaan tietokone muuttamaan värikuva mustavalkoiseksi kuvaksi.
Käytetään tähän asti opittuja taitoja ja tehdään kuvataidetta ohjelmoiden inspiraation johdattelemana.
Lause
Ohjelmoinnissa lause on komento tai ohje, jonka ohjelmoija antaa tietokoneelle. Ohjelma rakentuu lauseista, joilla ohjelmoija antaa tietokoneelle käskyjä, joita tietokone sitten toteuttaa. Tietokoneohjelma koostuu siis joukosta lauseita. Processing-ohjelmoinnissa lause lopetetaan “;” (puolipiste) -symbolilla. Kommentteja käytetään selventämään ohjelmakoodia niin, että ihmiset ymmärtäisivät ohjelmaa paremmin. Yhden rivin kommentti aloitetaan kahdella vinoviivalla (“//“). Useamman rivin kommentti aloitetaan vinoviivalla ja tähdellä (/*) ja lopetetaan tähdellä ja vinoviivalla (*/) Processing-ohjelmoinnissa.
0. Piste
Yllä kuva koodista Processingin koodieditorissa (klikkaamalla kuvaa saat sen suuremmaksi) ja alla lopputulos OpenProcessingissa. Jos haluat nähdä koodin lopputuloksen sijasta, klikkaa “</>”-painiketta. Saat koodin helposti itsellesi muokattavaksi klikkaamalla “Fork”-painiketta.
1. Viiva
Yllä koodi (klikkaamalla kuvaa saat sen suuremmaksi) ja alla lopputulos OpenProcessingissa.
2. Kolmio
Yllä koodi (klikkaamalla kuvaa saat sen suuremmaksi) ja alla lopputulos OpenProcessingissa.
3. Suorakulmio
4. Ellipsi
5. Pisteen väri
6. Viivalle väri
7. Kolmiolle väri
8. Suorakulmiolle väri
9. Ellipsille väri
10. Taustalle väri ja koko
Luova haaste 1
Käytä hyväksesi oppimiasi viivoja, kolmioita, suorakulmioita, ellipsejä jne.; ja ohjelmoi Processingilla kuva.
Silmukka
Ohjelmoinnissa silmukoita voidaan käyttää toistamaan samoja lauseita monta kertaan. Processingissa on erilaisia mahdollisuuksia luoda silmukoita.
While-silmukka
Tämä silmukka toistaa sisällään (kaarisulkeiden välissä) olevan koodin suluissa olevan ehdon mukaisesti. Ehdon pitää päivittyä toistojen aikana, tai muuten voi muodostua ns. ikuinen silmukka, joka jatkuu päättymättä.
while (ehto) {
koodi;
}
For-silmukka
Tämä silmukka toistaa sisällään (kaarisulkeiden välissä) olevan sisennetyn koodin tietyn määrän. Processingissä for-silmukka rakentuu kolmesta puolipisteellä (;) erotetulla osalla: alku(init), testaus(test) ja päivitys(update). Toisto jatkuu niin kauan, kuin testaus on totta.
for (alku; testaus; päivitys){
koodi;
}
draw() ja setup()
Oletuksena Processing toistaa draw()-funktion sisällä (kaarisulkeiden sisällä) olevaa koodia jatkuvasti (ikuinen silmukka). Ennen draw()-funktiota tulee Processing-koodissa yleensä setup()-funktio. Se ajetaan vain kerran, kun ohjelma käynnistyy. Sitä käytetään, kun luodaan projektin ympäristö, kuten taustan koko, ja kuvat ja fontit ohjelman käynnistyessä. Ohjelmassa voi olla vain yksi setup()-funktio.
setup() {
koodi;
}
draw()
{
koodi;
}
Ohjelmoidaan animaatio, jossa punainen pallo siirtyy vasemmalta oikealle mustalla taustalla hyödyntäen draw()- ja setup() -funktioita.
/* @teromakotero Tero Toivanen Aluksi luodaan kokonaislukumuuttuja x, ja asetetaan sen arvoksi 0(int x = 0, muuttujasta on siis oma lukunsa. Seuraavaksi luodaan funktio setup(), jonka tyyppi on void. void tarkoittaa, ettei funktio palauta mitään arvoa (tästä puhutaan lisää funktiota käsiteltäessä). setup()-funktiossa asetetaan taustan kooksi 500px x 500px. Seuraavaksi luodaan draw()-funktio. Se on myös tyyppiä void. draw-funktion sisällä värjätään tausta mustaksi (background(0)), asetetaan ellipsin täyttöväriksi punainen (fill(255, 0, 0) ja piirretään lopuksi ellipsi (50px x 50px kokoinen punainen ympyrä). ympyrän sijainnin x-koordinaatti päivittyy jokaisella toistokerralla yhden pikselin verran (x = x + 1). Näin saadaan aikaiseksi animaatio, jossa punainen ympyrä siirtyy vasemmalta oikealle. */ int x = 0; // asetetaan muuttujan i:n arvoksi 0 void setup() { // aloitetaan setup()-funktio size(500, 500); // asetetaan taustan kooksi 500px x 500px } // funktion koodi alkaa ja loppuu kaarisululla void draw() { // aloitetaan draw()-funktio background(0); // värjätään tausta mustaksi fill(255, 0, 0); // asetetaan ellipsin väriksi punainen (255, 0, 0) ellipse(x, height/2, 50, 50); // piirretään ellipsi(ympyrä) x = x + 1; // päivitetään x-koordinaatin arvo }
Luova haaste 2
Animoi muotoja silmukkaa hyväksi käyttäen.
Ehtolause
Ohjelmoinnissa ehtolauseet mahdollistavat ohjelman toimimisen halutulla tavalla silloin, kun ehdot täyttyvät. Ehdot joko täyttyvät (true) tai eivät täyty (false). Jos ehto täyttyy, jotain tapahtuu. Ehtolauseilla voi siis haaroittaa ohjelman suoritusta. Ehtolauseita voi myös laittaa toistensa sisään ja näin tehdä monimutkaisempia haaroituksia. Processingissa on erilaisia mahdollisuuksia luoda ehtolauseita.
if
Jos (if) sulkeiden sisällä oleva ehto täyttyy, kaarisulkeiden sisällä oleva koodi suoritetaan. Jos ei, koodia ei suoriteta ja ohjelma jatkaa eteen päin.
if (ehto) { koodi; }
/* @teromakotero Tero Toivanen Edellisessä silmukka-jaksossa viimeisessä esimerkissä animoitiin silmukan avulla ympyrä, joka liikkui vasemmalta oikealle. Kun se saavutti taustan oikean reunan se hävisi näky- vistä. if-ehtolauseen avulla saamme sen tulemaan uudestaan esille vasemmasta reunasta muuttamalla ympyrän x-koordinaatin arvoa, kun se saavuttaa haluamme kohdan. */ int x = 0; // asetetaan muuttujan i arvoksi 0 void setup() { // aloitetaan setup()-funktio size(500, 500); // asetetaan taustan kooksi 500px x 500px } // funktion koodi alkaa ja loppuu kaarisululla void draw() { // aloitetaan draw()-funktio background(0); // värjätään tausta mustaksi fill(255, 0, 0); // asetetaan ellipsin väriksi punainen (255, 0, 0) ellipse(x, height/2, 50, 50); // piirretään ellipsi(ympyrä) x = x + 1; // päivitetään x-koordinaatin arvo if (x >= (500 + 50)) { // jos x:n arvo on suurempi tai yhtäsuuri kuin // 500 (taustan oikea reuna) + 50 (ympyrän koko), niin x = (0 - 50); // x:n arvoksi asetetaan 0 (taustan vasen reuna) + // 50 (ympyrän koko). } }
else
Jos if-ehtolauseen sulkeiden sisällä oleva ehto ei täyty, voidaan antaa koodi “muussa tapauksessa” (else), joka ajetaan silloin.
if (ehto) { koodi; } else { koodi; }
/* @teromakotero Tero Toivanen Ohjelma piirtää viivan taustan keskipisteestä (width/2, height/2), hiiren osoittamaan kohtaan (mouseX, mouseY) tällä koodilla: line(width/2, height/2, mouseX, mouseY);. Jos (if) hiiren x-koordinaatti on pienempi tai yhtäsuuri kuin tausta keskipiste, viivan väri on punainen, muuten (else) se on sininen. */ void setup() { // aloitetaan setup()-funktio size(500, 500); // asetetaan taustan kooksi 500px x 500px } // funktion koodi alkaa ja loppuu kaarisululla void draw() { // aloitetaan draw()-funktio background(0); // värjätään tausta mustaksi if (mouseX <= width/2) { // jos hiiren x-koordinaatti(mouseX) on pienempi tai // yhtäsuuri kuin taustan keskipisteen x (width/2), stroke(255, 0, 0); // viivan väri on punainen. } else { // muuten(else) stroke(0, 0, 255); // viivan väri on sininen } line(width/2, height/2, mouseX, mouseY); // piirrä viiva, joka alkaa taustan keski- // pisteestä (width/2, height/2) ja päättyy hiiren // x(mouseX) ja y(mouseY) -koordinaattien näyttä- // mään paikkaan }
else if
if-ehtolauseen jälkeen voidaan lisätä lisää ehtoja, jotka testataan, jos if on epätosi (false). Ne alkavat muodossa else if ja sen jälkeen sulkuihin ehto. Niitä voi olla useita peräkkäin. Jos halutaan kirjoittaa koodi, joka ajetaan, jos kaikki edeltävät ovat epätosia, valitaan else.
if (ehto) { koodi; } else if (ehto) { koodi; } else { koodi; }
/* @teromakotero Tero Toivanen Ohjelma piirtää viivan taustan keskipisteestä(width/2, height/2), hiiren osoittamaan kohtaan(mouseX, mouseY) tällä koodilla: line(width/2, height/2, mouseX, mouseY);. Jos (if) hiiren x-koordinaatti on pienempi tai yhtäsuuri kuin taustan keskipiste, viivan väri on punainen. Muuten (else) se on sininen. */ void setup() { // aloitetaan setup()-funktio size(500, 500); // asetetaan taustan kooksi 500px x 500px background(0); // värjätään tausta mustaksi // koska värjäys tapahtuu setup:ssa, se tapahtuu // vain kerran ja myöhemmin piirettävät viivat // jäävät näkyviin } // funktion koodi alkaa ja loppuu kaarisululla void draw() { // aloitetaan draw()-funktio if ((mouseX <= width/2) && (mouseY <= height/2) ) { // jos hiiren x-koordinaatti(mouseX) on pienempi tai // yhtäsuuri kuin taustan keskipisteen x (width/2) ja // y-koordinaatti(mouseY) on pienempi tai // yhtäsuuri kuin taustan keskipisteen x (height/2) stroke(255, 0, 0); // viivan väri on punainen } else if ((mouseX <= width/2) && (mouseY > height/2) ){ // muuten jos(else if) // hiiren x-koordinaatti(mouseX) on pienempi tai // yhtäsuuri kuin taustan keskipisteen x (width/2) ja // y-koordinaatti(mouseY) on suurempi // kuin taustan keskipisteen y (height/2) stroke(0, 0, 255); // viivan väri on sininen } else if ((mouseX > width/2) && (mouseY > height/2) ){ // muuten jos(else if) // hiiren x-koordinaatti(mouseX) on suurempi // kuin taustan keskipisteen x (width/2) ja // y-koordinaatti(mouseY) on suurempi // kuin taustan keskipisteen y (height/2) stroke(0, 255, 0); // viivan väri on vihreä } else { // muuten (else) stroke(255, 255, 0); // viivan väri on keltainen } line(width/2, height/2, mouseX, mouseY); // piirrä viiva, joka alkaa taustan keski- // pisteestä (width/2, height/2) ja päättyy hiiren // x-(mouseX) ja y(mouseY) -koordinaattien näyttä- // mään paikkaan }
Luova haaste 3
Animoi muotoja ehtolauseita hyväksi käyttäen.
Muuttuja
Muuttuja (variable) on säilytyspaikka arvolle tietokoneen muistissa. Processingissa muuttuja tehdään määrittämällä sen tyyppi (esim. int, float) ja antamalla muuttujalle nimi (Processingissa muuttujan nimi aloitetaan pienellä kirjaimella, se ei voi alkaa numerolla, eikä nimessä voi olla välejä). Usemmasta sanasta koostuvaan muuttujaan sanojen väliin laitetaan “_”-merkki) tai aloitetaan erotetaan uusi sana isolla kirjaimella yhteen kirjoitettuna (camel case), “=” merkki ja sitten muuttujalle annettava arvo. On olemassa sekä paikallisia (lokaaleja) että yleisiä (globaaleja) muuttujia.
int
Tietotyyppi kokonaisluvuille (integer). Ne ovat lukuja ilman desimaaleja. Olemme käyttäneet niitä jo silmukoita luodessa hyväksi. Esim. for-silmukoissa:
for (int i = 0; i < 6; i = i + 1) { println("Hello World!"); }
Tämä koodi tulostaa konsoliin “Hello World!” kuusi kertaa.
float
Tietotyyppi liukuluvuille (float). Ne ovat lukuja, joissa on desimaaleja. Liukulukuisten tietojen tyyppi, esim. numeroita, joissa on desimaali.
/* @teromakotero Tero Toivanen Ohjelma piirtää kaksi ympyrää. Punaisen ympyrän x-koordinaatti kasvaa jokaisella kierroksella yhdellä. Sinisen ympyrän x-koordinaatti kasvaa vuorostaan 0.1:llä eli animaatiossa sen liike on paljon hitaampaa kuin punaisen pallon. */ int kokonaisluku = 0; float liukuluku = 0.0; void setup() { // aloitetaan setup()-funktio size(500, 500); // asetetaan taustan kooksi 500px x 500px } void draw() { // aloitetaan draw()-funktio background(0); // värjätään tausta mustaksi fill(225, 0, 0); // värjätään ympyrä punaiseksi ellipse(0 + kokonaisluku, height/4, 100, 100); // piirretään ympyrä kokonaisluku += 1; // lisästään kokonaislukumuuttujaan 1 fill(0, 0, 255); // värjätään ympyrä siniseksi ellipse(0 + liukuluku, height/4 + height/2, 100, 100); // piirretään ympyrä liukuluku += 0.1; // lisätään liukulukuun 0.1 }
random()
random()-funktio luo satunnaislukuja. Kun random()-funktiota kutsutaan, se palauttaa satunnaisen arvon määritetyllä alueella. Jos funktiolle välitetään vain yksi parametri, se palauttaa arvon nollan ja parametrin välillä. Esimerkiksi random(5) palauttaa arvon välillä 0 ja 5. Jos kaksi parametria on määritetty, funktio palauttaa liukuluvun noiden kahden arvon välillä. Liukuluvun voi muuttaa kokonaisluvuksi käyttämällä int() -funktiota.
/* @teromakotero Tero Toivanen setup()-funktio tekee 640x480 kokoisen mustan taustan. draw()-funktiossa luodaan int-muuttuja "koko", jonka koko vaihtelee 10 ja 30 pikselin välillä eri toistokerroilla. Väriksi valitaan sattumanvaraisesti värejä 0-255 arvoilla punaista, vihreää ja sinistä yhdistämällä lisäksi pallot sijoittuvat sattumanvaraisesti taustalle. */ void setup() { // aloitetaan setup()-funktio size(640, 480); // asetetaan taustan kooksi 640px x 480px background(0); // värjätään tausta mustaksi } void draw() { // aloitetaan draw()-funktio int koko = int(random(10, 30)); // annetaan koko-muuttujalle sattumanvarainen arvo fill(random(255), random(255), random(255)); // värjätään ympyrä sattumanväriseksi ellipse(random(640), random(480), koko, koko); // piirretään ympyrä sattumanvaraiseen // paikkaan ja kokoon }
PImage
Tietotyyppi kuvien tallentamiseen. Se voi käyttää .gif-, .jpg-, .tga- ja .png -kuvia. Kuva ladataan loadImage() -toiminnolla. Kuvatiedoston on hyvä olla samassa kansiossa koodin kanssa.
/* @teromakotero Tero Toivanen setup()-funktio tekee 640x480 kokoisen taustan ja lataa kuvan paikalleen. draw()-funktiossa kahden sisäkkäisen for-silmukan avulla käydän kuvan jokainen pikseli läpi, otetaan sen punaisen, vihreän ja sinisen arvo ja lasketaan niiden keskiarvo, joka asetetaan punaisen, vihreän ja sinisen uusiksi arvoiksi ja näin saadaan värikuva muutetuksi mustavalkoiseksi kuvaksi. */ PImage kuva; // luodaan PImage-muuttuja float r,g,b; // luodaan r, g ja b muuttujat värejä varten void setup() { // aloitetaan setup()-funktio size(640, 480); // asetetaan taustan kooksi 640px x 480px kuva = loadImage("640x480.jpg"); // ladataan kuva image(kuva, 0, 0); // asetetaan kuva vasempaan ylänurkkaan } void draw() { // aloitetaan draw()-funktio for(int i = 1; i < 640; i++) { // aloitetaan ensimmäinen for-silmukka for(int j = 1; j < 480; j++) { // aloitetaan toinen for-silmukka color c = get(i, j); // otetaan väri kuvan jokaisesta kuvapisteestä r = red(c); // otetaan kuvapisteen punaisen arvo g = green(c); // otetaan kuvapisteen vihreän arvo b = blue(c); // otetaan kuvapisteen sinisen arvo float avg = (r + g + b)/3; // otetaan edellisten keskiarvo r = avg; // muutetaan punaisen arvo keskiarvoksi g = avg; // muutetaan vihreän arvo keskiarvoksi b = avg; // muutetaan sinisen arvo keskiarvoksi set(i,j,color(r,g,b)); // asetetaan kuvapisteen väriksi keskiarvo } } noLoop(); // pysäytetään draw-silmukka delay(1000); // hidastetaan kuvan piirtämistä sekunnilla }
Alkuperäisen kuvan tekijänoikeustiedot: By Richard Kimble – Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=32572159
Tästä linkistä voit katsoa lopputuloksen OpenProcessingissa:
openprocessing.org/sketch/2363580
Luova haaste 4
Käytä tähän mennessä oppimisiasi taitoja ja ohjelmoi kuvataidetta inspiraatiosi johdattamana.
Processing by Tero Toivanen is licensed under CC BY-SA 4.0
