EU:n koodausviikko: Kuvataidetta koodaten

• EU:n koodausviikko Innokkaan sivuilla: https://www.innokas.fi/tapahtumat/eun-koodausviikko-2025/

• EU Codeweek-sivusto: https://codeweek.eu/

Processing-ohjelman esittely

Processing-ohjelmointikielen kehittivät Casey Reas ja Benjamin Fry 2001 MIT:n medialaboratoriossa. Se on avoimeen lähdekoodin perustuva ohjelmointikieli, joka kehitettiin elektronisen taiteen luomiseen. Processing perustuu Java-ohjelmointikieleen.

Kuvataidetta koodaten -sivu

Lyhytlinkki tälle sivulle on https://bit.ly/kuvataidetta-koodaten (voit kirjoittaa selaimen osoiteriville pelkästään bit.ly/kuvataidetta-koodaten).  Osoite pitkässä muodossaan on https://www.teromakotero.fi/kuvataidetta-koodaten/, Voit käyttää oheista sivua vapaasti opiskellaksesi tai opettaaksesi Processing-ohjelmointia ja kuvan tekemistä

Kurssin laajempi versio löytyy tästä samasta sivustosta osoitteessa https://www.teromakotero.fi/processing/. Tältä sivustolta löytyy myös muita ohjelmointikursseja, jotka kaikki ovat vapaita ja avoimia käytettäväksi sekä opiskeluun että ohjelmointiin. Koko sivuston osoite on https://www.teromakotero.fi/

Processing-ympäristön ohjevideoita englanniksi

https://processing.org/tutorials/ 

Esimerkkejä Processingilla luodusta taiteesta

Tästä linkistä pääset selaamaan tässä kuussa tehtyä taidetta samassa ympäristössä, jossa tänään harjoittelemme:

https://openprocessing.org/browse?time=thisMonth&type=hearts&q=&offset=0#

Kurssiympäristö

Kurssin voi suorittaa tältä sivulta suoraan sille upotetuista tehtäväpohjista. Niissä hyödynnetään OpenProcessing ympäristöä: https://openprocessing.org/. Tehtävät voi suorittaa kirjautumatta eikä mitään tarvitse tallentaa omaan laitteeseen. Processing-ohjelman voi ladata halutessaan sen omilta sivuilta osoitteesta: processing.org/download. 

P5js ja Pjs

Tällä kurssilla sinun ei tarvitse huomioida ohjelmointikielen valintaa, sillä esimerkit ja haasteet ovat jo valmiita ohjelmointikielen osalta. Halusin sen kuitenkin liittää mukaan, jotta pääset sujuvasti luomaan omia projektejasi alustalla.

Tärkeä huomio: kun menet OpenProcessing ympäristöön ja lähdet tekemään omaa projektiasi oletusvalinta ohjelmointikieleksi on P5js. Se perustuu JavaScriptiin, jonka komennot ovat erilaisia kuin tässä kurssissa käytetyt Java-kieleen perustuvat komennot. Siksi valitse oikeasta reunasta kieleksi Pjs, niin voit ohjelmoida tämän kurssin ohjeiden mukaisesti. Koska web-selain toimii JavaScriptillä, kääntää editori myös Java-kielen JavaScriptiksi.

Alla kuva koodieditorista tämän sivun upotuksina. Sen alla on kuva OpenProcessing sivun näkymästä koodieditoriin ja kuinka valitset käytettävän ohjelmointikielen Javaksi (oletus on siis P5js). 

Koodieditori

Forkkauksesta lisää täällä: https://fi.wikipedia.org/wiki/Forkkaus. Forkkaamalla pääset tekemään oman versiosi tämän sivun projekteista. Haasteet pääset tekemään myös forkkaamalla.

Perusmuodot ja niiden komennot

Koordinaatit

X- ja y-koordinaatit lähtevät nollasta oikeasta yläkulmasta ja suurenevat vasemmalta oikealle (x) ja ylhäältä alas (y).

Piste

Koodissa vinoviiva / ja asteriski * aloittavat kommentin (tietokone jättää sen huomioimatta koodia ajettaessa) ja vastaavasti asteriski * ja vinoviiva / lopettavat kommentin. Tällainen kommentti voi olla usean rivin mittainen.

Kaksi vinoviivaa // aloittavat yhden rivin kommentin. Alla koodi pisteen piirtämistä varten.

/* @teromakotero Tero Toivanen
piste tehdään komennolla point(x, y). X ja y edustavat vastaavia koordinaatteja
*/

point(width/2, height/2);    // Leveyttä ja korkeutta ei määritetty-> 100px x 100px 

Viiva

/* @teromakotero Tero Toivanen
Viiva tehdään komennolla line(x1, y1, x2, y2). 
x1 ja y1 edustavat viivan lähtöpisteen koordinaatteja, ja
x2 ja y2 edustavat viivan päätepisteen koordinaatteja
*/

line(10, 10, 90, 90);    // lähtöpiste(10,10) ja päätepiste(90,90) 

Vihreä kolmio

/* @teromakotero Tero Toivanen
Kolmio tehdään komennolla triangle(x1, y1, x2, y2, x3, y3). 
x1 ja y1 edustavat kolmion lähtöpisteen koordinaatteja,
x2 ja y2 edustavat kolmion seuraavan pisteen koordinaatteja ja
x3 ja y3 edustavat kolmion viimeisen pisteen koordinaatteja.
Se täytetään värillä komennolla fill(r, g, b), jossa kirjain
r edustaa punaista valoa,
g vihreää ja
b sinistä
Niille annetaan arvot välillä 0-255, 255 on maksimi ja 0 minimi
Näitä kolmea yhdistämällä saadaan kaikki värit aikaiseksi
Jos arvoja on vain yksi, annetaan eri harmaan sävyjen arvoja
*/
fill(0, 255, 0);                     // Väri annetaan ennen kolmion piirtämistä
                                     // Tässä tapauksessa piste on vihreä, koska
                                     // g:n arvo 255 ja muiden 0
noStroke();                          // Komennolla noStroke(), ääriviivat poistuvat
triangle(10, 10, 90, 90, 50, 90);    // lähtöpiste(10, 10), seuraava piste(90, 90)
                                     // ja (50, 90) viimeinen piste

Vihreä neliö

/* @teromakotero Tero Toivanen
Suorakulmio tehdään komennolla rect(x1, y1, w, h). 
x1 ja y1 edustavat neliön lähtöpisteen koordinaatteja,
w edustaa suorakulmion leveyttä
h edustaa suorakulmion korkeutta
Oletuksena (default) kaksi ensimmäistä numeroa edustava suorakulmion vasenta
yläkulmaa ja kaksi seuraavaa suorakulmion leveyttä ja korkeutta. 
Se täyteään värillä komennolla fill(r, g, b), jossa kirjain
r edustaa punaista valoa,
g vihreää ja
b sinistä
Niille annetaan arvot välillä 0-255, 255 on maksimi ja 0 minimi
Näitä kolmea yhdistämällä saadaan kaikki värit aikaiseksi
Jos arvoja on vain yksi, annetaan eri harmaan sävyjen arvoja
*/
fill(0, 255, 0);                     // Väri annetaan ennen suorakulmion 
                                     // piirtämistä
                                     // Tässä tapauksessa suorakulmio on vihreä, 
                                     // koska
                                     // g:n arvo 255 ja muiden 0
noStroke();                          // Komennolla noStroke(), ääriviivat poistuvat

rect(10, 10, 80, 80);    // vasen yläkulma(10, 10), leveys 80px ja korkeus 80px

Sininen ympyrä

/* @teromakotero Tero Toivanen
Ellipsi tehdään komennolla ellipse(x1, y1, w, h). 
x1 ja y1 edustavat ellipsin keskipisteen koordinaatteja,
w edustaa ellipsin leveyttä
h edustaa ellipsin korkeutta

Ellipsi, jonka leveys ja korkeus ovat samat, on ympyrä.
Oletuksena (default) kaksi ensimmäistä numeroa antavat ellipsin
sijainnin, ja kaksi seuraavaa ellipsin leveyden ja korkeuden. 
Se täytetään värillä komennolla fill(r, g, b), jossa kirjain
r edustaa punaista valoa,
g vihreää ja
b sinistä
Niille annetaan arvot välillä 0-255, 255 on maksimi ja 0 minimi
Näitä kolmea yhdistämällä saadaan kaikki värit aikaiseksi
Jos arvoja on vain yksi, annetaan eri harmaan sävyjen arvoja
*/
fill(0, 0, 255);                     // Väri annetaan ennen ympyrän 
                                     // piirtämistä
                                     // Tässä tapauksessa ympyrä on sininen, 
                                     // koska
                                     // b:n arvo 255 ja muiden 0
noStroke();                          // Komennolla noStroke(), ääriviivat poistuvat
ellipse(width/2, height/2, 80, 80);  // ellipsin(ympyrän) keskipiste (10, 10), 
                                     // leveys 80px ja korkeus 80px

Taustalle väri ja koko

/* @teromakotero Tero Toivanen
Taustan koko määritellään komennolla size(w, h),
jossa w edustaa leveyttä ja h korkeutta.
Taustan väri annetaan komennolla background(r, g, b)
Jos on vain yksi numero, niin se edustaa harmaan eri sävyjä.
*/
background(0);                       // Taustan väriksi asetetaan musta 
size(200, 200);                      // Taustan kooksi asetetaan 200px x 200px
fill(0, 0, 255);                     // Väri annetaan ennen ympyrän 
                                     // piirtämistä
                                     // Tässä tapauksessa ympyrä on sininen, 
                                     // koska
                                     // b:n arvo 255 ja muiden 0
noStroke();                          // Komennolla noStroke(), ääriviivat poistuvat
ellipse(width/2, height/2, 80, 80);  // ellipsin(ympyrän) keskipiste (width/2, height/2), 
                                     // leveys 80px ja korkeus 80px

Haaste 1

Aurinko on tipahtanut outoon paikkaan. Valitse ”Fork” ja koodaa aurinko taivaalle paistamaan. Valitsemalla </> -pääset koodaamaan ja sen vasemmalla puolella olevasta ikonista ► pääset kokeilemaan koodin toimintaa. Sinun ei tarvitse kirjautua ja jos haluat, voit kopioida koodin itsellesi talteen johonkin muuhun ympäristöön. 

Muodot liikkumaan koodaten

/* @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
}

 

Ehtolauseella pallo takaisin näkyviin

/*
"Muodot liikkumaan" -koodissa 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 haluamamme kohdan. 
*/

int x = 0;                        // asetetaan muuttujan x 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).
  }
}

if ehtolause 01

 

Haaste 2

Animoi muotoja liikkumaan. Voit muokata muotojen väriä, ääriviivoja ja paikkaa. Aloita haluamastasi muodosta ja laita se liikkumaan. Jos ehdit, pistä kaikki liikkeelle.

Random() -funktio – satunnaislukugeneraattori

• Processing-ohjelmassa on random() -funktio, joka generoi satunnaislukuja

• Kyseessä on näennäissatunnaisluvut (ns. pseudo-satunnaisluvut), jolloin satunnaislukuja tuotetaan siemenluvusta ennakkoon määritellyn algoritmin mukaan

• Random() -funktiota voi käyttää esimerkiksi satunnaisten värien tai paikan ohjelmoimiseen

 

Esimerkkejä:

random(5);   palauttaa satunnaisia desimaalilukuja nollan ja viiden väliltä

random(10,100); palauttaa satunnaisia desimaalilukuja kymmenen ja sadan väliltä

int(random(5)); palauttaa kokonaislukuja nollan ja viiden väliltä

fill(random(255),random(255),random(255));  täyttää muodon satunnaisella värillä (valitsee arvot 0 ja 255 väliltä)

stroke(random(255),random(255),random(255));   muodon ääriviiva muodostuu satunnaisella värillä

Ahaa – idea kuvataiteesta ohjelmoiden

/* 
Tässä idea kuvataiteen tekemisestä Processingilla. Näyttö täyttyy sattumanvaraisesti erivärisistä 
läpikuultavista palloista. Pallojen määrän kasvaessa värit kirkastuvat pikkuhiljaa.
*/

void setup() {                                      // aloitetaan setup()-funktio
  background(0);                                    // värjätään tausta mustaksi
  //fullScreen();                                     // asetetaan taustan kooksi laitteen näytön koko
  size(640,480);                                    // asetetaan taustan kooksi 640x480 px
}

void draw() {                                       // aloitetaan draw()-funktio
  int alfa = 50;                                    // asetetaan läpinäkyvyys arvoon 50 (arvot 0-255 käytössä)
  float red = random(255);                          // punaisen värin arvoksi sattumanvaraisesti (0-255)
  float green = random(255);                        // sama kuin edellinen vihreän värin osalta                     
  float blue = random(255);                         // sama punaisen osalta
  fill(red, green, blue, alfa);                     // määritetään täyttöväri edellisillä muuttujilla
  stroke(red, green, blue, alfa);                   // määritetään ääriviivan väri samaksi kuin täyttöväri
  float koko = random(10,100);                      // asetetaan kooksi sattumanvaraisesti (10-100 pikseliä)
  ellipse(random(width),random(height),koko,koko);  // piirretään ympyrä sattumanvaraiseen kohtaan
}

Haaste 3

Tee oma taideteoksesi ohjelmoiden

Päästä luovuutesi irti ja pidä hauskaa! 😄

Kuvataidetta koodaten © 2025 by Tero Toivanen is licensed under CC BY-SA 4.0