Lathund för p5.js

Gör geometriska figurer

rect(<x>, <y>, <bredd>, <höjd>);
ellipse(<x>, <y>, <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();

Ä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>);

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

Fördefinierade variabler

mouseX och mouseY = musens koordinater

windowWidth och windowHeight = fönstrets bredd/höjd

frameCount = antalet "frames" som visats.

mouseIsPressed är sann om musknappen är nedtryckt.

keyIsPressed är sann om en tangent är nedtryckt.

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
}

Kommentarer

Allt som skrivs efter // på en rad, är en så kallad kommentar.

Kommentarer över flera rader innesluts mellan /* och */.

Variabler

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

Du tilldelar en variabel ett värde med hjälp av likhetstecken.

var xValue, yValue;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
  xValue = 100;
  yValue = 50;
}

function draw() {
  ellipse(xValue, yValue, 20, 20);
}

 

Semikolon

Programmeringsspråket Java (och en del andra språk) kräver ett semikolon i slutet på raden. I Javascript behövs inte semikolon men det rekommenderas. Med Processing måste man alltså använda semikolon - med p5.js rekommenderas det.

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

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

används för alfanumeriska tangenter

function keyPressed() {
  text ("Du klickade på " + key, mouseX, mouseY);
  if (key == 'A') {
    ellipse(mouseX, mouseY, 200, 100);
  }
  if (keyCode == ENTER) {
    text("Du klickade på retur", mouseX, mouseY);
  } 
}

reagerar på alla tangentryckningar. Bokstäver tolkas som versaler. Speciella tangenter kontrolleras med orden: BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.

Det finns flera fördefinierade funktioner för mushändelser: mouseMoved(), mouseDragged(), mouseReleased(), mouseClicked().

function mouseReleased() {
  text("Du släppte upp musen.", 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.

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

Använd bilder

Ladda upp din bild till webb-editorns server.

var img;

function preload() {
  img = loadImage('MonaLisa.jpg');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(100);
  image(img, mouseX, mouseY);
}

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

image(img, x, y, width, height);

Med

imageMode(CENTER);

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

Mer information

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