1. Hva er p5.js?

Skolekoding.no > Tekstkoding > p5.js > Kurs > 1. Hva er p5.js?

1.1 Opprinnelse

​p5.js er inspirert av Processing som ble utviklet av kunstnere og designere for å gjøre det enklere å bruke programmering i kunstneriske utrykk. I dag brukes Processing og p5.js av kunstnere, studenter, designere, lærere, musikere m. fl. p5.js bygger på JavaScript.

1.2 Hello p5.js!

​Hva er p5.js? 
Lauren McCartht og Daniel Shiffman: www.hello.p5js.org
Hvorfor p5.js?
Daniel Shiffman: 1.2: p5.js Web Editor – p5.js Tutorial

1.3 Ditt første program

Det er viktig at du skriver hver setning nøyaktig slik de vises nedenfor (uten punktet først i linjen)

Skriv dette i editoren eller åpne programmet her.

  • function setup() {
    • createCanvas(400, 400);
  • }
  • function draw() {
    • background(220);
    • circle(200, 200, 100);
  • }​

Innrykk, mellomrom og linjeskift er strengt tatt ikke nødvendig, men det er vanlig praksis fordi det gjør koden lettere å lese.

Du kan be editoren om å rydde opp for deg: Velg «Edit» på menyen og deretter «Tidy code», eller trykk Shift + Tab.

1.4 Oppgaver

A) Klikk «Sign up» oppe i høyre hjørnet
B) Opprett en konto
C) Endre navnet på programmet
D) Lag annen størrelse på lerretet
E) Endre tallet i parentesen bak background
F) Endre siste tallet i parentesen bak circle


1.5 Skriv riktig

Å skrive i p5.js er som skriving ellers. Det er regler for ord, setninger og tegnsetting. Fordi vi skriver til en datamaskin, må vi være ekstra påpasselige med å skrive riktig.

Hvis du skriver en norskoppgave og skriver «abonement» i stedet for «abonnement», vil jeg rynke på nesa og riste på hodet, men jeg forstår hva du mener. Slik er det ikke med datamaskiner (enda…). I et program må alt være pinlig nøyaktig skrevet.

Hvis du skriver uten å bruke punktum og stor forbokstav, vil jeg forstå ordene, men jeg vil ha problemer med å skjønne hva du mener. En datamaskin vil ikke skjønne noen ting! I p5.js brukes semikolon (Shift + komma) for å avslutte en setning.

På samme måte som i en vanlig tekst, blir et p5.js-program lettere å lese hvis du bruker linjeskift og avsnitt. Men, hvis du skriver riktig, vil en datamaskinen skjønne hva du mener selv om du skriver hele programmet på én kjempelang linje!

1.6 Bruk kommentarer

– Kommentarer i koden gjør koden lettere å lese.
– Kommentarer blir ikke lest av programmet.
– Kommentarer starter med to skråstreker.
– Kommentarer er ikke en kodelinje og skal ikke avsluttes med semikolon.

NB! Her på nettsiden er kommentarene skrevet i senket skrift for at de skal skille seg ut fra resten av programmet. I editoren får kommentarer en grå farge.

  • function setup() {
    • createCanvas(400, 400); // Lager et lerret på 400×400 punkter
  • }
  • function draw() {
    • background(220);
    • circle(200, 200, 100); // Tegner en sirkel i koordinaten (200, 200) med radius 100 punkter
  • }​


Kommentarer kan også brukes for å deaktivere kodelinjer. Det kan være praktisk i når du skal søke etter feil.

Skal du skrive mange kommentarlinjer under hverandre, eller deaktivere mange linjer, kan du i stedet starte med /* og avslutte med */.

  • /*
  • Dette er et lite program
  • som viser en sirkel på
  • et lerret som er 400 x 400 punkter
  • */
  • function setup() {
    • createCanvas(400, 400); // Lager et lerret på 400×400 punkter
  • }
  • function draw() {
    • background(220);
    • circle(200, 200, 100); // Tegner en sirkel i koordinaten (200, 200) med radius 100 punkter
  • }​

1.7 Oppgave

A) Skriv kommentarer i programmet ditt

skolekoding.no
Stein Olav Kivle