Ord inneslutna av < och > (exempelvis <bredd>
) ska ersättas av värden, variabelnamn eller uttryck.
rect(<x>, <y>, <bredd>, <höjd>);
ellipse(<x>, <y>, <bredd>, <höjd>);
line(<x1>, <y1>, <x2>, <y2>);
textAlign(CENTER);
textSize(<tjocklek>);
text("Hello World!", <x>, <y>);
strokeWeight(<tjocklek>);
noStroke();
noFill();
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>);
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
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.
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
}
Allt som skrivs efter //
på en rad, är en så kallad kommentar.
Kommentarer över flera rader innesluts mellan /*
och */
.
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);
}
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.
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);
Eftersom =
används till tilldelningar, behövs det andra tecken för en logisk likhet.
kod | == |
!= |
<= |
>= |
< |
> |
---|---|---|---|---|---|---|
jämförelse | = | ≠ | ≤ | ≥ | < | > |
kod | && |
|| |
---|---|---|
operator | och | eller |
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);
}
Kommandot dist(<x1>, <y1>, <x2>, <y2>)
ger dig avståndet mellan två punkter med koordinaterna (<x1>, <y1>) och (<x2>, <y2>).
noLoop();
stänger av draw-metoden.
loop();
sätter på draw-metoden.
function keyTyped() {
if (key == 'n') {
noLoop();
}
if (key == 'l') {
loop();
}
}
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.
Se referensbiblioteket https://p5js.org/reference/.