p5.js introduktion

För att skapa sidor som visas i en webbläsare används ofta programmeringsspråket JavaScript tillsammans med HTML och CSS. I den här introduktionen kommer JavaScript att användas med ett tillägg/bibliotek som heter p5.js.

JSHTMLCSS400

HTML - HyperText Markup Language används för att strukturera text för visning i en webläsare.

CSS - Cascading StyleSheets används för att beskriva hur sidan ska se ut.

JS - JavaScript används för att ge webbsidor föränderligt utseende och för att göra dem interaktiva med klickbara knappar och liknande. Språket används också för programmering av annat än webbsidor.

p5js

p5.js är ett JavaScript-bibliotek med verktyg som skapats med det målet att göra kodning tillgänglig för artister, designers, lärare och nybörjare.
p5.js skapades av Lauren McCarthy.
p5.js hemsida finns på följande länk: https://p5js.org/

 

Textredigerare/Editor

Det finns många textredigerare/editors att välja mellan. En som fungerar bra, för övningarna som gås igenom i den här introduktionen, är p5.js  editor

Skapa ett konto klicka på sign up uppe i högra hörnet. Då kommer inloggningsformuläret fram.

Fyll I formuläret och notera uppgifterna för senare användning. 

Redigeraren består av tre delar. Vänster övre sida är Editorn där kod skrivs. Vänster nedre sida finns Console. När du använder console.log() kommer text att synas där. I Console loggas också information som är associerad med en webbsida såsom säkerhetsfel och varningar. På höger sida finns Preview. Den fungerar som en webbsida där resultatet av koden kommer att visas.

Det finns tre filer skapade när editorn startas. Genom att klicka på > som finns strax ovanför editorn kommer dessa fram, sketch.js, index.html och style.css. I index.html finns kod inskriven som behövs för att webbläsaren/browsern ska kunna tolka att det här är html och att det finns två filer till kopplade till den. Filen style.css anger utseendet på webbsidan. Den fil som all kod skrivs i är sketch.js.

För att förändra färg (theme) på sidan: klicka på kugghjulet längst upp till höger och välj det tema som passar dig bäst.

Variabler

I programmeringsspråk använder man något som kallas för variabler. En variabel kan snabbt sammanfattas som en plats att spara information. När variabeln deklareras (skapas) så kan man ge den ett värde. Det värdet kan under programmets gång ändras/varieras. I JavaScript skapar man en variabel genom att skriva: 
var variabelnamn

var används för variabler som ges ett värde som kan förändras

 

För att skapa en variabel som heter stad och som har värdet Köping skrivs:
var stad = “Köping”;
Namnet på variabeln kan inte börja med en siffra eller tecken. Vanligast är att man använder små bokstäver som beskriver vad variabeln är. Ibland kanske namnet på variabeln består av två ord. I JavaScript skriver man det då på ett sätt som kallas camelCase.

bild som illustrerar begreppet camelCase

camelCase är ett sätt att skriva samman ord utan bindestreck eller mellanslag, men med inledande versal (storbokstav) på varje ingående orddel.
För att deklarera en variabel för en annan stad skrivs:
var annanStad = “Västerås”;

De tre vanligaste datatyperna i JavaScript, de som vi kommer jobba mest med, är:

  • Sträng (String)
  • Heltal (Integer)
  • Boolesk variabel (Boolean)

I JavaScript och annan programmering kallar man textslingor för strängar (strings). För att tilldela en variabel en sträng som värde använder man sig av citattecken “ “ eller apostrofer ' ' och skriver hela sin sträng inom dem. ex: var mittNamn = "Greta Svensson";

En variabel age ska ha heltalet (Integer) 17 som värde skrivs på följande sätt:
var age = 17;
Om ålder (age) förändras skriver man i koden age = 18;  Det gamla värdet har nu ersatts med det nya. Tänk på att koden körs rad för rad uppifrån och ner i programmet. Det värde som står sist på viss variabel är det som gäller för det tillfället.

En Boolesk variabel är en datatyp som kan ha två värden, true eller false. Precis som heltal så skrivs dessa utan citat-tecken.
Namnet Boolean kommer från den brittiske matematikern George Boole.
Mer om Boolean under nästa avsnitt (olikheter)

I filen index.js kan vi nu skapa två variabler. var a = 5; och
var b = 7;  När man skriver kod är det väldigt viktigt med alla tecken och att hålla koll på när det ska vara små respektive stora bokstäver. Ett missat tecken kan göra att koden inte kommer att fungera som tänkt.

Variablerna som skapats kan användas i olika beräkningar. Skriv in koden som finns här bredvid i din editor. För att se resultatet av beräkningarna tryck på play och se resultatet i Console.
Här används en funktion som heter console.log(); Den funktionen gör att resultatet av koden skrivs i Console.

var a = 5;
var b = 7;

console.log(a + b); //Addition
console.log(a - b); //Subtraktion
console.log(a * b); //Multiplikation
console.log(a / b); //Division

/* det här är en kommentar
som går över flera rader*/

När programmet körs kan resultatet av beräkningarna ses i konsolen som finns på höger sida i editorn.
Lägg märke till hur man kan skriva kommentarer i sin kod. Genom att göra två snedstreck ( // ) kan man lägga in text som inte kommer att köras som kod. Vill man skriva flera rader kommentar görs det genom att man börjar med /*  skriver sin kommentar över flera rader och avslutar med */

Något som datorer är riktigt bra på är att räkna. Ordet computer kommer från det latinska ordet Computare som betyder ”att beräkna”.
De räkneregler som gäller i matematiken gäller även för JavaScript. En repetition av i vilken ordning beräkningar görs:

  1. Parenteser
  2. Potenser (upphöjt till)
  3. Multiplikation och Division (läses från vänster till höger)
  4. Addition och Subtraktion (läses från vänster till höger)

Strängar kan också sammanfogas (concatenate på engeska). I andra console.log() här bredvid används ett kommando som har egenskapen att den räknar längden på strängar (text). Variabelns namn skrivs följt av .length; resultatet blir då antal tecken i strängen.

Om en hel mening skrivs som sträng ex: const mening = ”detta är en lång sträng”; så kommer resultatet av mening.length vara 23 trots att det bara är 19 bokstäver. .length räknar alla tecken, även mellanslag.

var a = 5;
var stad = "Köping";
var annanStad = "Västerås";

console.log(stad + annanStad); //sammanfogning
console.log(stad.length); //kolla längd av sträng
console.log(a + stad); //sammanfoga olika datatyper



Om man sammanfogar olika datatyper (integer och string) kommer JavaScript att bestämma att allt är string.

Olikheter

Tecknet = betyder i matematiken att det som står på ena sidan om det är lika med det som står på andra sidan. I JavaScript används tecknet på annat sätt. När en variabel tecknas (const a = 5;) så används tecknet till att tilldela ett värde till  variabeln. = är tilldelningsoperatorn (assignment operator) som tilldelar variabeln till vänster om operatorn värdet av uttrycket till höger.

=== är ”lika med”-operatorn som returnerar true om värdet av uttrycket till vänster är lika med värdet av uttrycket till höger om operatorn, och annars false. Ibland skrivs det här med två lika med tecken ==.  ==  frågar om två saker är lika förutom om de är av samma typ (string och number). ex: 5 =="5"; returnerar true medan 5==="5"; returnerar false.

Det är bäst att hålla sig till === innan man är helt säker på att det är == man vill använda.

Andra operatorer som svarar med true eller false:

<              är ”mindre än”-operatorn

<=            är ”mindre än eller lika med”-operatorn

>              är ”större än”-operatorn

>=            är ”större än eller lika med”-operatorn

sketch.js

Grunden för att programmera i p5.js är två funktioner som skrivs i filen index.js. En funktion används för att gruppera ihop kod. Mer om funktioner senare. Den första funktionen har namnet setup. Setup körs bara en gång och kod som skrivs i den funktionen kommer att köras när programmet startas. Den andra funktionen har namnet draw. Den är en loop och körs om och om igen för alltid. Om datorn har uppdateringsfrekvens på 60 Hz (hertz) kommer draw loopen att köras 60 gånger per sekund.

Syntaxen (det vill säga hur orden/koden är sammansatt) för att skriva en funktion är:

function funktionsnamn(){
Vad man vill att funktionen ska göra
}

Ordet function kommer först, sen anger man det namn som funktionen ska ha. Därefter kommer parenteser () och sen klammerparenteser  { }. Mellan klammerparenteserna skrivs det som funktionen ska utföra.

function setup(){
        
}
function draw(){

}

Skriv koden nedan i sketch.js filen (ta bort det som står där från tidigare övningar).

function setup(){
     createCanvas(400, 500);
     background(255,0,0);
 }
function draw(){
    rect(10,10,50,50);
}

Den första funktionen har namnet setup. Setup körs bara en gång. I den står createCanvas(500,400); vilket betyder att det ska skapas en yta att rita/måla på. Ytan ska vara 500 pixlar bred och 400 pixlar hög.

background(255,0,0); ger canvasen en bakgrundsfärg. Värdena som står i parentesen är färgkod i formatet RGB,
R = röd, G = grön, B = blå.

(255,0,0) är röd
(0,255,0) är grön
(0,0,255) är blå
(0,0,0) är svart, (255,255,255) är vit. Genom att använda värden mellan 0 och 255 ges alla tänkbara färger.

Den andra funktionen har namnet draw. Den är en loop och körs om och om igen för alltid. I den står nu rect(10,10,50,50); vilket betyder att en rektangel ska ritas. Rect har 4 parametrar (värden i parentesen). Värdena anger var rektangeln ska ritas och hur stor den ska vara (x, y, bredd, höjd).

Ändra värdena i rect() för x till 0 och för y till 0.
Rektangeln ritas då med utgångspunkt i övre vänstra hörnet av canvasen. Koordinatsystemet för canvasen är alltså att (x = 0, och y = 0) uppe i vänster hörn. Koordinaten för det nedre högra hörnet på den här canvasen är då (400,500).

rect(x, y, bredd, höjd) är en funktion som finns färdigskapad I biblioteket p5.js. När den används måste rätt antal parametrar anges I parentesen.

Lägg till ytterligare tre rect/kvadrater i koden och placera dem i varsitt hörn av canvasen.

För att få färg på rektangeln används en annan funktion, fill(); Inom parentesen anges färg.

Nu är rektangeln lila. fill() sätter färg på de objekt som kommer efter i koden.

Lägg in följande kod och fundera över varför rektanglarna blir färgade som de blir.
Tips: draw-funktionen är en loop

function setup(){
     createCanvas(400, 500);
     background(255,0,0);
 }
function draw(){
    rect(0,0,50,50);
    fill(120,0,130);
    rect(350,450,50,50);
    rect(0,450,50,50);
    fill(0,255,0);
    rect(350,0,50,50);
}

Figurer

ellipse(); ritar en ellips. En ellips är en oval figur. Om bredden och höjden är lika stora blir figuren en cirkel. Vi använder ellipse för att rita cirklar.
Har 4 parametrar(värden som ska stå i parentesen), ellipse(x, y, bredd, höjd). Som sagt, om bredd och höjd är lika stora blir det en cirkel. x och y anger centrum på ellipsen.

line(); ritar en linje mellan två punkter.
Har 4 parametrar, line(x1, y1, x2, y2). Man kan tänka att man sätter ut en punkt i (x1, y1) och en annan i (x2, y2) och sen drar en linje mellan dessa punkter. En linje färgläggs genom att använda stroke(); det går inte att använda fill(); eftersom ingen yta finns att fylla.

point(); ritar en prick som är en pixel stor.
Har 2 parametrar, point(x, y). Färgläggs med stroke();

Rita en figur enligt koden nedan och kör programmet:

function setup(){
     createCanvas(400, 400);
     background(0,255,255);
 }
function draw(){
    fill(120,0,130);
    rect(225,150,50,100);//Kropp
    fill(236,214,165);
    ellipse(250,150,60,60);//Huvud
    fill(120,0,130);
    rect(250,250,20,50);//Ben
    rect(230,250,20,50);//Ben
    fill(0,255,0);
    rect(220,170,7,60);//Arm
    rect(275,170,7,60);//Arm
}

Flytta kroppens kod (och färg) så att de står under huvudets kod. Kör programmet igen.

Nu syns det tydligt att det objekt som ritas först kommer längst bak på canvasen.
Ordningsföljd på koden är viktig i all programmering.

Text

För att text ska ritas ut på canvasen används funktionen text();
Har 3 parametrar. text(”string”, x, y); String står här för valfri text.

Skapa koden enligt nedan.

function setup(){
     createCanvas(400, 400);
     background(255,224,209);
 }
function draw(){
    textSize(45);
    fill(0,255,0);
    stroke(0,0,255);
    text("word",50,130);
}

Text skrivs ut i svart om ingen färg valts. textSize() anger textens storlek i pixlar. stroke() ger en konturlinje i ytterkant av bokstäverna.

Ändra x och y för text och ta reda på var på texten de punkterna ligger. Är det som rektangeln (övre högra hörnet), som ellipsen (centrum av figuren) eller annat?

var a = "Att kunna JavaScript \när en SUPERPOWER!!";
function setup(){
     createCanvas(400, 400);
     background(255,224,209);
 }
function draw(){
    textSize(32);
    fill(0,255,0);
    stroke(0,0,255);
    text(a,50,130);
}

I koden ovan är texten skapad som en variabel. Variabeln används sen i funktionen text();
I texten är det tillagt en \n. Det är en symbol för att visa att det ska vara en ny rad. För flera radmatningar mellan stycken används fler \n efter varandra.

Ett litet ritprogram

Det finns några definierade variabler i biblioteket p5.js. mouseX och mouseY är två sådana. mouseX innehåller alltid det aktuella horisontella läget för musen på canvasen. Om touchskärm används istället för musinmatning kommer mouseX att hålla x-värdet för den senaste beröringspunkten. För mouseY gäller det vertikala läget.

Skapa  programmet nedan.

function setup(){
     createCanvas(500, 500);
     background(250,250,100);
 }
function draw(){
    noStroke();
    fill(232,30,232,50);
    ellipse(mouseX, mouseY, 10,10);
}

Det här är ett ritprogram där en ny cirkel ritas vid varje nytt värde för musens x och y.
I funktionen fill() används nu 4 parametrar. R, G, B och Alpha. Alpha anger hur genomskinlig färgen ska vara. 0 för helt genomskinlig och 255 för inte alls genomskinlig.

För att testa hur programmet fungerar utan en viss funktion kan man ”kommentera bort” funktionen. Sätt två snedstreck framför så blir den en kommentar.
gör det med noStroke()      //noStroke(); för att se hur programmet ser ut då.

Flytta background funktionen från setup och sätt den först i draw-funktionen. Nu kommer det bara att synas en cirkel åt gången. Draw-funktionen loopar och varje loop ritar ut bakgrunden på nytt. Testa att addera värden till mouseX och mouseY för att få cirkeln att följa musen på visst avstånd. Ex: ellipse(mouseX + 50, mouseY + 50, 30,30);

Hur fungerar det med negativa värden?

Vad sker om mouseX och mouseY multipliceras med 1.5? (Det går inte att skriva 1,5).

Animering

Skapa följande program:

function setup(){
     createCanvas(400, 500);
 }
function draw(){
    background(250,250,100);
    stroke(255);
    strokeWeight(4);
    fill(232,30,232);
    ellipse(100, 100, 50,50);
}

I färgkoden för stroke(); står nu bara ett värde. Här gäller att om endast ett värde skrivs in så gäller det för de andra två också. Det betyder alltså att R = 255, G = 255 och B = 255, det vill säga färgen vit. Om det hade stått stroke(0) så hade det blivit en svart konturlinje istället. Funktionen strokeWeight(4) säger att konturlinjen ska vara 4 pixlar bred.

För att skapa en animering behövs en variabel som representerar var på skärmen det objekt som ska animeras är.
Variabler kan deklareras på flera ställen i programmet. För nu så får de vara i toppen. På så sätt är det lätt att hålla koll på dem och hitta när de ska ändras.
Skapa en variabel som heter x och har värdet 0 på rad 1 (ovanför setup(); ) I ellipsen ska värdet för x (100) bytas ut mot variabeln som skapats.

Eftersom funktionen draw() loopar (körs om och om för alltid) kan man lägga att variabeln x ska ändras för varje loop längst ner i koden.

x = x + 1;

Eftersom var x fick värdet 0 när den initierades så är den 0 första gången loopen körs.
Andra gången blir den   x = 0 + 1     vilket är lika med 1.
Tredje gången blir den   x = 1 + 1     vilket är lika med 2
Fjärde gången blir den   x = 2 + 1     vilket är lika med 3
och så vidare...

var x = 0;
function setup(){
     createCanvas(400, 500);
 }
function draw(){
    background(250,250,100);
    stroke(255);
    strokeWeight(4);
    fill(232,30,232);
    ellipse(x, 100, 50,50);
    x = x + 1;
}

Nu rör sig cirkeln över skärmen men försvinner när den når x = 400.

För att se till att cirkeln inte försvinner måste vi använda något som kallas villkorssatser (if-satser). I det här fallet behöver vi veta när cirkeln kommer till slutet av canvasen, och då ska något annat, än att öka variabeln x, ske.

Syntaxen för att skriva en if-sats är:
if  ( någonting är sant ){
gör det här;
}

Om det som står i parentesen inte är sant kommer programmet att ignorera hela if-satsen och gå till nästa rad i programmet. För att få något specifikt att hända om det som står i parentesen för falskt så används else

Syntaxen för att skriva en if-sats med else är:
if (någonting är sant ){
gör det här;
}else {
annars gör det här;
}

Det går också att lägga till flera villkor och då används else if

Syntaxen för att skriva en if-sats med else if är:
if  ( någonting är sant ){
gör det här;
}else if ( annars om det här är sant) {
gör det här;
}

Det går att använda så många else if() som behövs. Börja alltid med en if() och lägg till else if(). Att avsluta med else görs vid behov. I en if() else if() sats kommer bara en av villkoren kunna vara sanna och då körs den koden.
Exempel på det här kan vara biobesök. Låt säga att biobesökaren får gå in utan målsman när den fyllt 15 år. Med målsman när den fyllt 11 år. Inte alls annars.
Då kan koden se ut så här:

if(ålder >= 15){
”Ja, du får komma in”;
}else if (ålder >= 13 + målsman){
”Ja, ni är också välkomna”;
}else{
”Sorry men du får vänta ett (eller flera) år”;
}

I koden för vår cirkel behövs en if-sats för att kontrollera om x-värdet för cirkeln är större än canvasens bredd då ska x vara 0 igen.

Skriv in koden för det längst ner i draw();
if (x >400){
x=0;
}

Nu börjar cirkeln om på vänster sida. För att få den att byta riktning när den når x = 400 behövs en variabel till. Skapa en variabel som heter speed och har värdet 1. Istället för x = x +1; sätt x = x + speed;. I if-satsen sätt att speed ska vara -1 om x > 400.

Nu kommer cirkeln att vända och gå åt andra hållet när den kommer till högra kanten av canvasen.

Tyvärr så åker den ut på anda sidan där x < 0. Här krävs en if-sats till.

Förändra programmet genom att ändra fart på cirkeln. Försök att få den att studsa innan halva bollen passerat kanten.

var x = 0;
var speed = 1;
function setup(){
     createCanvas(400, 500);
 }
function draw(){
    background(250,250,100);
    stroke(255);
    strokeWeight(4);
    fill(232,30,232);
    ellipse(x, 100, 50,50);
    x = x + speed;
    if (x > 400){
        speed = -1;
    }
    if (x < 0){
        speed = 1;
    }
}

Lägg till en variabel till som heter gravity och har värdet 3 och en som heter y och har värdet 0. I draw() sätt y = y + garvity. Ändra värdet på speed till 3 respektive -3.

Lägg till två if-satser.en för när y > höjden på canvasen och en för när y < 0 och lägg in gravity = -3  och gravity = 3 som det som ska ske om if- villkoret är true.

Ändra på speed- och gravity-värdena i if satserna och se hur de påverkar cirkelns rörelse.
Kan du få bollen att studsa tillbaka när den precis kommer till kanterna? Som det är nu är halva bollen utanför canvasen innan den vänder.

var x = 0;
var y = 0;
var speed = 3;
var gravity = 3;
function setup(){
     createCanvas(400, 500);
 }
function draw(){
   background(250,250,100);
    stroke(255);
    strokeWeight(4);
    fill(232,30,232);
    ellipse(x, y, 50,50);
	x = x + speed;
	y = y + gravity;
	if (x > 400){
    speed = -3;
    }
	if (x < 0){
    speed = 3;
    }
	if (y > 500){
    gravity = -3;
    }
	if (y < 0){
    gravity = 3;
    }
}

För fler övningar i p5.js gå till Matematik med JS