Lär dig programmera Processing

Datatyper och händelser

Vi har sett att det finns fördefinierade variabler i Processing:

   mouseX, mouseY, mousePressed, keyPressed.

Precis som i Scratch, kan du också definiera egna variabler i Processing. I Processing måste du ange vilken datatyp variabeln skall vara när du skapar den.

I Scratch finns det en speciell operator för att förena textsträngar. I Processing skriver du en textsträng mellan citationstecken, exempelvis som "Hello World". Du förenar (konkatenerar) flera textsträngar med ett plustecken. Du kan förena en textsträng med en variabel som representera ett tal, då förvandlas variabelns värde till text och resultatet blir en textsträng. Om exempelvis score är en variabel som håller reda på poängen, kan du skriva:

text("poäng = " + score, 100, 100); 

Precis som det i Scratch finns block som hanterar händelser, finns det i Processing fördefinierade metoder som hantera händelsen att användaren klickar på musknappen eller en tangent. En händelse i Processing är en metod precis som setup eller draw. Du lägger in händelser nedanför draw-metoden.

I Scratch finns det flera block under menyn Känna av som hanterar kollisionsdetektering. Alla block av typen rör kan användas för att upptäcka kollisioner. I Processing måste du själv programmera kollisioner och det är svårt. Ett sätt att upptäcka kollisioner i Processing är att kolla avståndet mellan två punkter med hjälp av kommandot dist.

Fusklapp 2

Datatyper

int: heltal
float: decimaltal
char: tecken
String: textsträng
boolean: True eller False

Deklarera variabler

int n, m = 100, myInteger;
float score, xposition;
char myKey = 'm';
String message = "hi";

Konkatenera text

"poäng = " + score

join

Skriv text

I konsolen:

println("poäng = " + score);

I fönstret:

text("poäng = " + score, 10, 10);

Mät tid

frameCount håller reda på hur många gånger draw-metoden tickat.

Stäng av draw

noLoop();

Starta draw igen

loop();

Kan exempelvis skrivas i en händelsen keyPressed.

Tilldelningar

score = 0;

set

score += 1;

change

Det finns många andra sätt att ändra på variabelvärden men det går vi inte igenom.

Händelser

void keyPressed() {
  if (key == 'a') {
    //kod
  }
}
void keyReleased() {
  if (key == 'a') {
    //kod
  }
}
void mousePressed() {
  //kod
}

Avstånd

Avståndet mellan punkterna (x1, y1) och (x2, y2) mäts med kommandot:

dist(x1, y1, x2, y2)

Jämförelser

Olikheter: <, >, <=, >=
Lika med och skilt från: ==, !=

Observera att ett likhetstecken står för en tilldelning, inte en logisk likhet.

Övning 3.1 - Pricka bollen spel

Skriv in koden och kör programmet.

float x, y, radius = 50;

void setup() {
 size(600, 400); 
 x = width/2;  //width är fönstrets bredd
 y = height/2; //height är fönstrets höjd
}

void draw() {
  ellipse(x, y, 2*radius, 2*radius); 
}

void mousePressed() {
  float distance = dist(mouseX, mouseY, x, y);
  println("Avstånd = " + distance);
}

Testkör programmet och läs i konsolen. Hur stort kan avståndet högst vara om du ska pricka bollen? Formulera villkoret som en olihet.

distance < ??

Uppgift 1

Gör en variabel som räknar poäng. Se till att poängen ökar om du prickar bollen.

Uppgift 2

Lägg till kod så att cirkeln får en ny slumpmässig position varje gång du klickar på den.

Uppgift 3

Se till att programmet avslutas med kommandot noLoop() efter 500 tickningar. Använd den fördefinierade variabeln frameCount.

Övning 3.2 - Styr en boll

Skriv in koden:

float x, y, radius = 50;

void setup() {
  size(600, 400); 
  x = width/2; 
  y = height/2;
}

void draw() {
  background(0);
  ellipse(x, y, 2*radius, 2*radius);
  if (keyPressed) {
     //skriv in en if-sats
  }
}

Om du vill styra med bokstäver skriver du in en if-sats på följande sätt:

if (key == 'a') {
    //din kod
} else if (key == 'd') {
    //din kod
} else if (key == 'w') {
    //din kod
} else if (key == 's') {
    //din kod
}

Om du vill styra med piltangenterna använder du variabeln keyCode istället för key, och de fördefinierade konstanterna UP, DOWN, LEFT, RIGHT. Ändra på x och y genom att använda +=. Exempelvis: x += 2;

 

Malin Christersson Creative Commons License wwww.malinc.se