Skapa grafik?

Tilläggsbibliotek

Till nästan alla programspråk finns tillägg. Med hjälp av dem kan du utföra avancerade uppgifter betydligt enklare. Kod för att lägga till grafik, bilder, ljud, mm brukar finnas i tilläggsbibliotek.

I den här kursen använder vi javascript med tillägget p5JS för att bl a skapa grafik. Om du använder editor.p5js.org finns tillägget inbyggt. Läs mer om editorn om du inte redan gjort det. Om du inte vill använda editorn från p5js kan du istället ladda ner ett komplett exempel från p5js.org.

setup() och draw()

När du börjar med editor.p5js.org finns från början två funktioner som kan användas för grafik. Den första funktionen genomförs EN gång när programkoden kör. Här ligger från början en inställning för storleken på ritytan (createCanvas()), i exemplet inställd på 400 pixlar i bredd och 400 pixlar i höjd.

Prova att ändra storleken på ritytan i setup() och tryck sedan på kör-knappen. Resultatet visas i webbfönstret ”Preview” till höger om editorn.

function setup() {
   createCanvas(400, 400);
}

I setup() kan mer kod köras, men det tar vi senare.

Den andra funktionen, draw(), upprepas många gånger per sekund efter att setup() körts en gång. Från början ligger en bakgrundsfärg här. (Bra att veta: Om du ska rita i setup() så kommer det täckas över av den bakgrund som ligger i draw()).

function draw() {
   background(220);
}

Från början anges en färgkod för grå färg (220). Det är egentligen en förenklad rgb-kod som ser ut så här: (220,220,220). Prova att blanda färg själv! Det första värdet är 0-255 för rött, det andra 0-255 för grönt och det tredje värdet är 0-255 för blått. Exempel: background(50,100,200);

Linje

Dags att rita linjer! Förbered genom att flytta bakgrundsfärgen till setup() så att den inte skriver över linjer du ritar.

function setup() {
 createCanvas(400, 400);
 background(50,100,200);
 }

I draw() skriver du kod för linjefärgen ( 0 är svart) och linjen. Linjens inställningar är x och y för startpunkten samt x och y för slutpunkten.

function draw() {
   stroke(0);
   line(30, 300, 370, 350);
}

Prova att ändra färg på linjen och x och y-värden för start- och slut av linjen! Läs om hur du kan ändra färg och bredd på linjen i P5-referensen

Prova också att lägga till en variabel på första raden (före setup()):

var y = 300;

skriv sedan om koden för linjen så att y-värdet använder variabeln:

line(30, y, 370, y+50);
y = y - 1;

Vad händer och varför?

Rektangel och triangel

För att skapa en rektangel används rect() och inställningarna i parentesen talar om x- och y-värdet för övre vänstra hörnet samt bredd respektive höjd på rektangeln.

function draw() {
  rect(30,30, 300,100);
}

Lägg också till en triangel. Inställningen visar x- och y-värdet för första, andra och tredje hörnet.

 triangle(30,150, 180,300, 330,150);

Prova att flytta rektangeln och triangeln så att det liknar ett hus!
Prova också att ändra fyllnadsfärgen med fill(200, 50, 50); före triangeln och kanske en annan färg för rektangeln?

Ellips/cirkel

För att rita en cirkel används funktionen ellipse(). Inställningarna i parentesen ställer in x- och y-värdet för cirkelns mittpunkt och bredden på cirkeln.

function draw() {
   ellipse(200,200,100);
}

Prova att byta till slumpade värden med random() Ex:
ellipse(random(400), random(400), random(50) );
Vad händer och varför?

Prova att lägga till ett inställningsvärde till, efter bredden på ellipsen, t ex:
ellipse(200,200,100,50);
Vad händer och varför?