I det här projektet kommer du skapa en klocka vars siffror består av fotografier på post-it-lappar. För att lyckas med detta kommer du lära dig hur man använder bilder i dina program och hur du lagrar bilderna i arrays. Precis som tidigare kommer programmeringen att gås igenom steg för steg.

1. Lägg till bilder

   Steg 1 är att ge ditt program tillgång till bilden du vill använda.

   Dra bildfilen till Processing IDE:t på samma sätt som i skärmdumpen nedan:
   

   Bilden lagras nu i mappen ”data”. Skärmdumpen nedan visar filstrukturen så att du hittar bildfilen. Ett annat sätt att hitta bildfilen är via Sketch>Show Sketch Folder.
   

2. Visa en bild

   I det här steget kommer du att använda variabeltypen PImage för att visa en bild.

   Ladda ned bilden du kommer använda here.

   
   

   Nya kommandon

   • PImage imageName: skapar en variabel av typen PImage med namnet imageName. En PImage-variabel kan förvara en bild.
   • loadImage(imageFile): Laddar bilden imageFile som finns i den program-mappen. imageFile måste stavas exakt likadant som filens namn.
   • image(imageName, x, y): Visar Pimage-bilden imageName. Bildens övre vänstra hörn är placerat på koordinaterna x och y.

   Så här fungerar det

   • En PImage-variabel med namnet im deklareras.
   • I setup() sätts programfönstrets storlek till 400×400 pixlar. Samma storlek som bilden som används i det här programmet.
   • Bilden foto.jpg laddas och lagras i variabeln im.
   • im visas i draw(). Det övre vänstra hörnet placeras i koordinaterna 0,0 – programfönstrets övre vänstra hörn. Eftersom bilden och programfönstret har samma storlek passar bilden perfekt.

3. Visa två bilder

   I det här steget kommer du att lägga till en PImage t illoch visa bilderna bredvid varandra.

   Ladda ned bilderna foto.jpg och foto2.jpg

   
   

   Så här fungerar det

   • En andra PImage deklareras med namnet im2.
   • I setup() sätts programfönstrets storleke till 800×400 pixlar, dubbelt så bred som tidigare, så att båda bilderna får plats sida vid sida.
   • Bilden foto2.jpg laddas och lagras i im2.
   • im2 visas efter im i draw(). Det övre vänstra hörnet placeras i koordinaterna (400,0) – programfönstrets övre mitt, det övre högra hörnet av im.

4. Arrays I

   I nästa steg kommer du att modifiera föregående steg och använda en array för att visa två bilder. Men först kommer du att lära dig vad en array är.

   Om en variabel är som en behållare är en array som en behållare med flera fack. Varje fack kan lagra ett objekt och alla objekt i en behållare måsta vara av samma typ. Du får tillgång till varje objekt genom att referera till det fack det ligger i.

   En array som kallas FruitContainer av typen Fruits har tre fack och kan lagra tre objekt. Fack 1 innehåller en banan, fack 2 ett körsbär och fack 3 en jordgubb. Om du vill använda körsbäret tittar du i FruitContainer fack 2. Numreringen av arrays startar alltid med 0, så i FruitContainer[0] hittar du bananen, i FruitContainer[1] körsbäret och i FruitContainer[2] jordgubben.
   

   En array kan vara av samma datatyp som variabler, som till exempel integer eller String. Objekten i en array kallas för array-element. När du deklarerar en array måste du ange hur många element som arrayn max ska kunna hålla.

5. Arrays II

   I det här steget kommer du att modifiera steg 3 och använda en PImage-array för att visa de två bilderna.
   

   
   

   Nya kommandon

   • datatype arrayName[ ] = new datatype[ numberOfElements ]: skapar en array av typen datatype, med namnet arrayName. numberOfElements är antalet element, eller fack, av data.
   • arrayName[ index ]: får tillgång till ett element i arrayName i dess indexnummer index. Det första elementets indexnummer är 0, det andra 1, o.s.v..
   • Läs mer om arrays och Processing här.

   Så här fungerar det

   • Istället för att använda två PImage-variabler, deklareras en PImage–array med två fack för att hålla två bilder.
   • I setup(), laddas och lagras foto.jpg i im[0], och foto2.jpg i im[1].
   • I draw() visas im[0]med det övre vänstra hörnet i koordinaterna (0, 0).
   • im[1] visas med det övre vänstra hörnet i koordinaterna (400, 0).

   Resultat

   Förändringarna i koden förändrar inget i utförandet av programmet.

6. Att använda två Arrays

   För att ytterligare förenkla hanteringen av bilder kommer du i detta exempel att lagra bildnamnen i en String-array.
   

   
   

   Så här fungerar det

   • En till array deklareras av typen String. Den får namnet imFile och lagrar bildernas filnamn: foto.jpg och foto2.jpg.
   • I setup() laddas och lagras imFile[0] i im[0].
   • imFile[1] laddas och lagras i im[1].

   Resultat

   Den här förändringen i koden förändrar inte heller något i utförandet av programmet. Däremot kommer det att bli enklare att fortsätta arbeta härifrån. Detta kommer bli tydligare när du lägger till fler bilder.

7. For-loop

   I det här steget kommer du att öka antalet bilder som visas, från två till fyra. Du kommer att använda två arrays som i tidigare steg, men för att göra koden mer effektiv kommer du att använda en for-loop.

   Ladda ned bilderna banana.jpg, peninsula.jpg, postit.jpg, och tortilla.jpg

   
   

   Nya kommandon

   • for(initializer; test; update){ statements }: Låter dig upprepa ett stycke kod så många gånger du behöver. En for-loop går igenom följande steg:
     1. initiator körs. Oftast en deklarering av en integer med namnet i.
     2. test kollas om det är sant eller falskt. Vanligtvis är testet att se om iär större eller mindre än ett visst värde.
     3. Om test är falskt avbryts loopen. Om test testär sant, körs statements, alltså kommandona innanför klammerparentesen.
     4. update-kommandot körs. Vanligtvis innebär detta att öka eller minska i med 1.
     5. For-loopen hoppar till steg två.

   Så här fungerar det

   • im[] och imFile[] modifieras för att kunna lagra vardera fyra element.
   • I setup() sätts programfönstrets storlek till 800×800 pixlar så att alla fyra bilder får plats
   • En for-loop används för att ladda och lagra bildfilerna i im[]:
     • En integer, i, deklareras och får värdet 0.
     • Testet kontrolleras, i<4, och är sant, 0 är mindre än 4.
     • ianvänds som indexnummer i varje array. I första upprepningen av for-loopen är i lika med 0. imFile[0], alltså postit.jpg laddas och lagras därför i im[0].
     • update-kommandot körs,i ökas med 1, i = i+1.
     • Testet kontrolleras igen och är fortfarande sant, 1 är mindre än 4.
     • imFile[1], peninsula.jpg, laddas och lagras i im[1].
     • update-kommandot körs igen
     • For-loopen upprepas ända tills att i är lika med 4 då testet är falskt, 4 är inte mindre än 4.
   • De fyra bilderna visas i ett rutnät i draw().

8. Fler bilder

   Målet med det här programmet är att skapa en post-it-klocka.I det här steget kommer du att visa alla bilder som senare kommer användas för att representera tiden.

   Ladda ned bilderna här: 0, 1, 2, 3, 4, 5, 6, 7, 8 och 9.

   
   

   Så fungerar det

   • im[] och imFile[] modifieras för att kunna lagra tio element vardera.
   • I setup() sätts programfönstrets storlek till 700×95 pixlar för att kunna visa 10 bilder i rad. Varje bild är 70×95 pixlar stor.
   • En for-loop upprepas tio gånger för att ladda alla bildfiler i PImage-arrayn, im.
   • I draw() upprepas ytterligare en for-loop tio gånger för att visa bilderna.
     • Vid första upprepningen är i är lika med 0. im[0] visas med det övre vänstra hörnet i koordinaterna (0, 0) då 70*0 = 0.
     • Vid andra upprepningen är i lika med 1 och img[1] visas i koordinaterna (70, 0) då 70*1 = 70.
     • For-loopen fortsätter att upprepas tills i är lika med 10.

9. Tiden

   I det här steget kommer du att visa den aktuella timman.

   
   

   Nya kommandon

   • hour(): returnerar den aktuella timman som ett värde mellan 0 och 23.

   Så här fungerar det

   • För att två bilder ska få plats bredvid varandra, sätts programfönstrets storlek till 140×95 i setup().
   • Tre nya variabler deklareras i draw(): h, h_dec och h_uni. h används för att hålla det aktuella klockslaget. h_dec och h_uni används som indexnummer till array-positionerna på de bilder som du vill visa.
   • När det aktuella klockslaget är 14:30 görs följande uträkningar:
     • h = hour() = 14
     • h_dec = int( h/10 ) = int( 1.4 ) = 1
     • h_uni = h-h_dec *10 = 14-1*10 = 14-10 = 4
   • När det aktuella klockslaget är 02:00 görs följande uträkningar:
     • h = hour() = 2
     • h_dec = int( 2/10 ) = int( 0.2 ) = 0
     • h_uni = h-h_dec *10 = 2-0*10 = 2-0 = 2
   • Bilderna im[h_dec] och im[h_uni] visas nu bredvid varandra.

10. Klockan

    I det sista steget kommer du att lägga till minuter och sekunder till din klocka.

    
    
    • minute(): Returnerar den aktuella minuten som ett värde mellan 0 och 59.
    • second(): Returnerar den aktuella sekunden som ett värde mellan 0 och 59.

    Så här fungerar det

    • Efter att bilderna som representerar timmen har visats i draw(), deklareras tre nya variabler; m, m_dec och m_unit för att hålla minutens siffror.
    • När det aktuella klockslaget är 14:30 görs följande uträkningar:
      • m = minute() = 30
      • m_dec = int( m/10 ) = int( 3 ) = 3
      • m_uni = m-m_dec *10 = 30-3*10 = 30-30 = 0
    • Bilderna im[m_dec] och im[m_uni] visas bredvid varandra, nedanför tim-bilderna.
    • Ytterligare tre variabler deklareras, s, s_dec och s_uni, för att hålla sekundens siffror.
    • Bilderna im[s_dec] och im[s_uni] visas bredvid varandra, nedanför minut-bilderna.

Lär genom att göra

• Gör en köksklocka: använd systemvariablerna för tid till att göra en klocka som räknar ner tiden i bilder.
• Ta egna bilder på siffror och använd dem i programmet.