I det här projektet kommer du att lära dig hur man programmerar ett föremål som rör på sig. När du rör på muspekaren lämnar föremålet spår efter sig på skärmen. Du kommer att gå igenom programmeringen steg för steg, med en ny funktion för varje steg.

1. Rita en cirkel

   Du kommer att börja med att rita en röd cirkel.
   

   
   

   Nya kommandon

   • noStroke(): Tar bort konturerna på de efterföljande formerna.
   • fill(red, green, blue): Bestämmer färgen på de efterföljande formerna. Varje färg kan ha ett värde från 0 till 255.

   Repetition:

   • size(width, height): Bestämmer storleken på programfönstret i pixlar.
   • ellipse(x, y, diameterX, diameterY): Ritar en ellips med mittpunkten i koordinaterna x och y. Storleken bestäms med xDiameter och yDiameter. När dessa två parametrar är lika blir resultatet en cirkel.

   Så här fungerar det

   • I setup() sätts programfönstrets storlek till 400×400 pixlar.
   • I draw() bestäms det att former kommer ritas utan konturer
   • Fyllningsfärgen sätts till röd.
   • En cirkel ritas på koordinaterna (100, 100) med en X- och Y-diameter på 30 pixlar. På grund av tidigare kommandon blir cirkeln röd, utan konturer.

   Resultat

   draw() fortsätter att upprepas men då inga förändringar görs med någon av parametrarna uppför sig programmet statiskt.

2. Gör så att cirkeln rör på sig

   I det här avsnittet kommer du att programmera den röda cirkeln så att den följer muspekaren och efterlämnar ett spår på skärmen.

   
   

   Så här fungerar det

   • Varje gång draw()upprepas, sätts ellipsens koordinater till mouseX , mouseY. Det gör att cirkeln följer muspekaren.
   • Bakgrunden ritas aldrig ut så varje cirkel som ritas stannar på skärmen. Därför lämnar muspekaren ett rött spår efter sig.

3. Ändra färg gradvist – del 1

   I nästa steg kommer du att lära dig hur man gradvist ändrar cirkelns färg. För att förbereda inför det steget kommer vi först att använda en variabel för att bestämma cirkelns färg istället för ett konstant nummer.

   
   

   Så här fungerar det

   • Innan setup() deklareras en integer-variabel med namnet red och med värdet 255.
   • Där fyllnadsfärgen bestäms i draw() används variabeln red istället för nummer 255.

   Resultat

   Notera att den här förändringen i koden inte påverkar programmets beteende.

4. Ändra färg gradvist – del 2

   Att ändra färg beroende på tid kan göras på olika sätt. I följande exempel kommer mängden röd färg att minska varje gång draw() upprepas.

   
   

   Nya kommandon:

   • if( test ){ statements }: Kontrollerar om test är sant eller falskt. Om det är sant kommer statementsinnanför klammerparentesen att utföras. Om test är falskt hoppar programmet till koden efter if-satsen.

   Så här fungerar det

   • draw() börjar med att subtrahera 1 från variabeln red, red = red-1. red kommer att vara lika med 254 när draw() kör första gången.
   • Ett if-statement kontrollerar om red är mindre än 1. Första gången draw()körs blir resultatet flaskt.
   • Fyllnadsfärgen bestäms med variabeln red. Den här gången blir färgen aningen mindre röd än föregående steg, fill(254, 0, 0).
   • För varje upprepning av draw() närmar sig red 0, vilket gör fyllnadsfärgen mörkare och mörkare.
   • När draw() är inne på sin 255:e upprepning blir red lika med 0.
   • If-satsen är fortfarande falsk, 0 är inte mindre än 0.
   • Fyllnadsfärgen är nu svart, fill(0, 0, 0).
   • När draw() är inne på sin 256:e upprepning blir red lika med-1.
   • If-satsen är nu sann, -1 är mindre än 0.
   • Koden innanför klammerparenteserna utförs och red är återigen lika med 255.
   • Fyllnadsfärgen är nu röd, fill(255, 0, 0).

5. sin()-funktionen

   I föregående exempel ändras färgen plötsligt från svart till röd. I det här exemplet kommer du att använda en sinusfunktion för att gradvis pendla mellan de två färgerna.

   
   

   Nya kommandon

   • int(data): Omvandlar data till en integer. int(2.545) returnerar 2, int(233.9999) returnerar 233, o.s.v..
   • frameRate: Returnerar programmets bildfrekvens, det vill säga antalet gånger bildrutan uppdateras per sekund.
   • PI: En konstant som har värdet av π (3,14).
   • sin( angle ): Räknar ut sinus av en vinkel. angle anges i radianer och kan därför ha ett värde från 0 till 2π (6.28). Funktionens returnerade värde är i intervallet -1 till 1. När angle ökar pendlar det returnerade värdet gradvist mellan -1 och 1. Se nedan.
     • sin( 0 ) = 0
     • sin( π/2 ) = 1
     • sin( π ) = 0
     • sin( π + π/2 ) = -1
     • sin( 2π ) = 0
     • sin( 2π + π/2 ) = 1

   

   Så här fungerar det

   • Värdet av red räknas ut i denna rad kod: red = int(128 * (1 + sin(time * 2 * PI / frameRate / 20)))
   • Det här är vad du hittills vet: 1, red måste ha ett värde mellan 0 och 255; 2, sin( angle )returnerar ett värde i intervallet -1 och 1, och pendlar gradvist mellan dessa värden när angle ökar.
   • Du behöver se till att: 1, resultatet av din uträkning pendlar mellan 0 och 255; och 2, värdet du stoppar i sin()-funktionen ökar i en hastighet som passar dina behov.
   • I början av programmet deklareras variabeln time.
   • Varje gång draw() körs ökar time med 1. På så sätt kan du använda den här variablen i sin().
   • Om vi bryter ner uträkningen av redser det ut så här:
     • Det returnerade värdet från sin(time) pendlar mellan -1 och 1, men det pendlar för snabbt.
     • sin( time * 2 * PI / frameRate / 20) pendlar istället med ett intervall på 20 sekunder.
     • 1 + sin( time * 2 * PI / frameRate / 20) ger ett värde som pendlar mellan 0 och 2.
     • 128 * ( 1 + sin( time * 2 * PI / frameRate / 20) ) ger ett värde som pendlar mellan 0 och 255 eftersom 128*0 = 0 och 128*2 = 255.
     • Det resulterande värdet är en float (decimaltal), så därför används int() för att omvandla resultatet till en integer.
       int( 128 * ( 1 + sin( time * 2 * PI / frameRate / 20) ) )
   • Precis som tidigare används red för att bestämma värdet på röd i fill().

6. Ändra formen

   I det här steget kommer du att använda sin() för att gradvist ändra på cirkelns storlek. Detta kommer att förändra ormens form.
   

   
   

   Nya kommandon:

   • fill(red, green, blue, alpha): en fjärde parameter, alpha, läggs till i fill(). alpha bestämmer en färgs transparens och kan ha ett värde mellan 0 och 255.

   Så här fungerar det

   • Integervariabeln diameter deklareras.
   • I draw() räknas diameter ut med följande kod:
     int(50 * (1 + sin( time* 2 * PI / frameRate / 5))) vilket får diameter att pendla mellan 0 och 100 med ett intervall på 5 sekunder.
   • Ormens färg sätts till att ha en transparens av 50.
   • Ellipsens diameter bestäms med variablen diameter.

Lär genom att göra

• Ändra ormens färg: flytta på variablen red från den första parametern till den andra eller tredje i funktionen fill().
• Ändra andra färger: lägg till nya variabler för att ändra de andra färgparametrarna.