Variabler, datatyper och bilder

Vi har sett att det finns fördefinierade variabler i Processing, exempelvis mouseX, mouseY och mousePressed. Om man vill göra egna variabler måste dessa deklareras. När man deklarerar en variabel beskriver man vad variabeln ska heta och vilken datatyp den ska vara. De datatyper som finns är följande:

• int: heltal
• float: decimaltal. Internt representeras ett decimaltal på ett sådant sätt att decimaltecknet placeras på samma ställe, man säger att decimaltecknet "flyter", därför kallas decimaltal för flyttal på svenska eller floating point på engelska.
• char: tecken. Ett tecken skrivs innesluten mellan apostrofer, som 'c'.
• String: textsträng. En textsträng skrivs innesluten mellan citationstecken, som "Hello World".
• boolean: true eller false. Logiska variabler, eller booleska variabler efter George Boole.

Globala och lokala variabler

Variabler som ska kunna användas i alla funktioner deklareras överst i kodfönstret. Sådana variabler kallas globala. Man inleder en deklaration genom att skriva datatyp, därefter skriver men en eller flera variabelnamn åtskilda av kommatecken.

int n, score;
float interestRate;
char myKey;
String message;
boolean done;

Om bara ska använda en variabel inuti en funktion, bör man deklarer den inuti funktionen. Variabeln blir då en lokal variabel och kan bara användas i den funktion där den är deklarerad.

Ett variabelnamn kan innehålla bokstäver och siffror men inga blanktecken. Variabelnamnet måste inledas med en bokstav och enligt konvention bör det vara en liten bokstav (en gemen). En annan konvention är att använda så kallad "Camel case"; vill man att variabelnamnet ska beskriva något med flera ord, låter man varje ord utom det första inledas med en versal, som minLillaVariabel.

Tilldelningar

Att ge en variabel ett värde, kallas att tilldela den ett värde. En tilldelning skrivs med hjälp av ett likhetstecken.

n = 1000;
score = 0;
interestRate = 5.7;
myKey = 'a';
message = "Hello World";
done = false;

Likhetstecknet ska inte uppfattas som en logisk likhet, en logisk likhet skrivs med dubbla likhetstecken. Det som står till höger om likhetstecknet beräknas först, det framräknade värdet är det värde variabeln tilldelas. Man kan därför öka en variabels värde med ett genom att skriva:

score = score + 1;

Att öka en variabels värde är så pass vanligt att det finns kortare kod för att göra det. Vill man öka med 5, kan detta skrivas som:

score += 5

Övning - En variabel radie

Skriv av och kör koden.

int radius;

void setup() {
  size(600, 400);
  background(255);
  radius = 10;
}

void draw() {
  ellipse(width/2, height/2, 2*radius, 2*radius);
}

De fördefinierad variablerna width och height innehåller fönstrets bredd respektiva höjd. Genom att ange positioner med hjälp av dessa variabler bibehålls centrering även om fönstrets storlek förändras.

Lägg till kod som gör att radien ökar med ett om användaren klickar med musen.

Variabeln radius måste deklareras globalt. Hade den deklarerats inuti draw-metoden, hade värdet nollställts varje gång draw-metoden genomfördes.

Övning - Styr en boll

Skriv av och kör koden.

int radius;
float x, y;

void setup() {
  size(600, 400);
  ellipseMode(RADIUS);
  radius = 10;
  x = width/2;
  y = height/2;
}
void draw() {
  background(255);
  ellipse(x, y, radius, radius);
}

Lägg till kod som gör att användaren kan styra bollen med piltangenterna.

Använd bilder istället för geometriska figurer

Man kan använda en bild i png-format och styra bilden på samma sätt som man styr en ellips eller rektangel.

Lägg in en bild-fil

Spara din sketch. Välj Sketch -> Add file. Leta upp en bild som du har sparad på din dator.

Deklarera en bildvariabel

Deklarera bilden överst så att den blir global. Skriv in:

PImage img

Ladda bilden i setup-funktionen

Skriv in

img = loadImage("bild.png");

i setup. Här ska du använda det filnamn bilden har.

Rita bilden i draw-funktionen

Rita bilden genom att skriva

image(img, x, y)

eller

image(img, x, y, bredd, höjd)

Centrera bilden

Bildens koordinater (x, y) anger det övre högra hörnet. Det kan vara bättre om bildens koordinaterna är mitt i bilden. Skriv

imageMode(CENTER);

i setup. På liknande sätt kan man centrera rektanglar.

rectMode(CENTER);