Lathund för Processing

Grundstruktur

void setup() {
  size(<bredd>, <höjd>);
  //kod som utförs när programmet startar
}

void draw() {
  /*kod som utförs varje 
    gång det tickar */
}

Allt som skrivs efter // på en rad, är en så kallad kommentar. Kommentarer över flera rader innesluts mellan /* och */. Under menyn Edit kan du kommentera/avkommentera längre stycken kod.

Gör geometriska figurer

rect(<x>, <y>, <bredd>, <höjd>);
ellipse(<x>, <x>, <bredd>, <höjd>);
line(<x1>, <y1>, <x2>, <y2>);

Visa text

textAlign(CENTER);
textSize(<tjocklek>);
text("Hello World!", <x>, <y>);

Ändra kantens tjocklek

strokeWeight(<tjocklek>);

Dölj kant eller fyllnadsfärg

noStroke();
noFill();

Slumptal

Kommandot random(256) genererar ett slumptal mellan 0 och 255: 0 ≤ slumptal < 256

Kommandot random(<a>, <b>) genererar ett slumptal mellan a och b : a ≤ slumptal < b

Ändra färgerna

background(<röd>, <grön>, <blå>);
fill(<röd>, <grön>, <blå>);
stroke(<röd>, <grön>, <blå>);

<röd>, <grön>, <blå> är tal mellan 0 och 255.

Om man bara använder en parameter får man en gråskala.

background(<grå>);
fill(<grå>);
stroke(<grå>);

En fjärde parameter kan göra ett objekt halvgenomskinligt.

fill(<röd>, <grön>, <blå>, <alpha>);

Fördefinierade variabler

mouseX och mouseY = musens koordinater

width och height = fönstrets bredd/höjd

frameCount = antalet "frames" som visats.

mousePressed är sann om musknappen är nedtryckt.

keyPressed är sann om en tangent är nedtryckt.

Variabler

Du skapar en variabel genom att deklarera den överst i programmet. Skriv datatyp följt av variabelnamn separerade av komma.

Du tilldelar en variabel ett värde med hjälp av likhetstecken. Du kan tilldela värden i deklarationen. Variabler som inte tilldelas startvärden får värdet 0.

int score;
float x = 3.1, y =5.7;
String message;
char letter;

void setup() {
  size(600, 400);
  message = "Välkommen!";
}

Alternativ

if (<villkor>) {
  //kod som utförs om villkor är sann
}

if (<villkor>) {
  //kod som utförs om villkor är sann 
} else {
  //kod som utförs om villkor är falsk
}

Konkatenera text

En textsträng slås samman med ett variabelvärde med ett plustecken

"poängen = "+score

Resultatet är en textsträng. Det går bra att konkatenera flera textsträngar med plustecken.

text("Poängen är "+score+".", 100, 100);

Likheter och olikheter

Eftersom = används till tilldelningar, behövs det andra tecken för en logisk likhet.

Logiska operatorer

Fördefinierade händelsefunktioner

void keyTyped() {
  if (key == 'a') {
    ellipse(mouseX, mouseY, 200, 100);
  }
  if (key == ENTER) {
    ellipse(mouseX, mouseY, 10, 10);
  }
  text ("Du klickade på " + key, mouseX, mouseY);
}

Funktionen keyTyped ignorerar speciella tangenter såsom piltangenterna, använd istället funktionen keyPressed och variabeln keyCode

void keyPressed() {
  if (keyCode == UP) {
    text ("Du klickade på uppåtpil.", mouseX, mouseY);
  }
}

Avstånd

Kommandot dist(<x1>, <y1>, <x2>, <y2>) ger dig avståndet mellan två punkter med koordinaterna (<x1>, <y1>) och (<x2>, <y2>).

Stäng av/sätt på draw-metoden

noLoop();

stänger av draw-metoden.

loop();

sätter på draw-metoden.

void keyTyped() {
  if (key == 'n') {
    noLoop();
  }
  if (key == 'l') {
    loop();
  } 
}

Använd bilder

Välj Sketch->Add file... i menyn. Leta upp en bild som du har sparat på din dator.

PImage myImage;

void setup() {
  size(600, 400);
  myImage = loadImage("MonaLisa.png");
}

void draw() {
  background(100);
  image(myImage, mouseX, mouseY);
}

Det går också att ange bredd och höjd när bilden ritas ut.

image(myImage, <x>, <y>, <bredd>, <höjd>);

Med

imageMode(CENTER);

centreras bilden. Lägg detta i setup-metoden.

Mer information

Se referensbiblioteket https://processing.org/reference/.