Vadå funktioner?

I alla tidigare program har vi använd funktioner. Vi har både definierat funktioner och kallat på fördefinierade funktioner.

En funktion är en uppsättning kod som utför något eller returnerar ett värde. Koden samlas i en namngiven ”behållare” som man sen kan kalla på.

Att definiera en funktion

function namn() {
//här skrivs den kod funktionen ska köra när den kallas på
}

I p5.js finns två funktioner som behövs för att programmet ska köras. Innanför deras klammerparenteser definierar vi vad som ska ske.
Den första är setup(). Den definieras precis som en vanlig funktion men den behöver inte kallas på för det sker automatiskt direkt när programmet laddas.
Den andra är draw() och den körs om och om igen  60 gånger/sekund (om datorns frekvens är 60 hertz).

Det finns många fördefinierade funktioner  i p5.js bibliotek. För att använda dem behöver vi bara kalla på dem.
ellipse(__,__,__,__) , background(__) , createCanvas(__,__) är några fördefinierad funktion som finns i p5.js bibliotek.

Att kalla på en funktion

namn();  //utan argument 
namn(__,__,__);  // med argument

Vad argument är kommer vi till senare på denna sida.

Det finns olika orsaker till att man vill skapa en funktion.
En anledning kan vara läsbarheten av koden. Om koden struktureras i moduler så är det lättare att hantera ändringar mm.


Om vi ritar en figur enligt ovan kan det vara krångligt att hålla koll på var men kan ändra vad. Alternativet är att skapa funktioner.
Funktionerna skapas här nedanför draw().


Nu är koden mycket lättare att läsa och det blir enklare vid eventuella ändringar.

Funktioner med parametrar

function namn(  //här skrivs parametrarna in )
 { //här skrivs den kod funktionen ska köra när den kallas på 
}

Om vi vill rita en figur, som definieras av en funktion, och kan användas om och om igen i koden så är det bra att det finns någon parameter som kan ändras för varje gång figuren ritas ut annars blir den bara ritad över den tidigare figuren.

I programmet nedan har funktionen parametrar x och y, vilket innebär att det är x och y vi kan ändra när figuren ska ritas ut.


funktionen ernst(x, y); har koden för att rita en figur. Alla delar av ernst ritas med sina positioner relativt till x och y för ernsts huvud.

Funktionens argument

När ernst(__,__); kallas på i funktionen draw() så ska värden för var ernst ska ritas ut placeras inom parenteserna. De värden som placeras där kallas argument.

 I funktionen draw() kan du nu kalla på ernst flera gånger med olika argument och då ritas ernst ut på de platser du valt.

  Skapa en egen sammansatt figur som fungerar som ernst.
Tips: Rita först figuren med  hårdkodade  variabler dvs skriv det värde du vill att den ska placeras på ( Ex ellipse(200,200,50,50);) och ändra sen till relativa referenser när allt sitter på rätt plats.

Funktion och Return

Funktioner kan utföra något omedelbart, som till exempel rect(200,200,50,50); som ritar ut en kvadrat på canvasen. Funktioner kan också returnera ett värde. Exempel på en sån funktion är random(1,7) vilken returnerar ett värde mellan 1 och 6,99999999999….

function namn( //parameterar ) 
{
//kod
return  //det som ska returneras
}

Om vi behöver en omvandlare av temperatur från Fahrenheit till Celsius så kan vi använda en funktion med return.
För att omvandla , ta antalet grader i Fahrenheit, dra ifrån 32. Multiplicera sedan med 5 och dela med 9.
Funktionen skapas med ett namn och en parameter där vi sen kan ange grader i Fahrenheit när funktionen används.

function temp(farenh){
var celcius = ((farenh - 32) *5) / 9;
return celcius;
}

I steup() skapar vi en variabel som ska få det omvandlade värdet och  kallar på funktionen och anger antal grader i Fahrenheit  som argument

var mallorca = temp(78.8)

 Skapa ett program som omvandlar från  Celsius till Fahrenheit