Introduktion till Processing (p5.js)

Programmeringsspråket Processing är liksom Scratch utvecklat vid MIT. Processing är utvecklat för att icke-programmerare, exempelvis designers, konstnärer, studenter och hobbyprogrammerare, på ett enkelt sätt ska kunna göra program som är visuella och interaktiva.

Processing är gjort i programmeringsspråket Java och går inte att köra online. Vill man köra program online är det lämpligast att använda programmeringsspråket Javascript , vilket fungerar i alla moderna webbläsare. Det finns ett Javascript-bibliotek kallat p5.js som är skapat för att man ska kunna skriva Processing-liknande kod online. Vi kommer att använda p5.js och skapa alla program online.

Kom igång med OpenProcessing

Gå till www.openprocessing.org och klicka på Join för att skapa ett konto.

Klicka på Create a Sketch för att skapa ditt första program.

Kortkommandon

När man programmerar är det mycket vanligt att man kopierar och klistrar in kod. Det är därför bra att träna upp händernas muskelminne.

Ett annat användbart kortkommando som fungerar i de flesta program är ångra.

Jämförelser med Scratch

Ett Processing-program har två huvudfunktioner setup() och draw().

Det som står efter // är så kallade kommentarer. Kommentarer exekveras inte utan är till för den som läser koden. Vill du skriva en lång kommentar över flera rader kan du stänga in kommentaren så här: /* lång kommentar */

För att stänga in saker används måsvingar eller parenteser. Allt som skall utföras i funktionen setup måste ligga mellan den vänstra och högra måsvingen.

Du kan göra egna funktioner i Processing, detta motsvarar att göra egna block i Scratch. Precis som du kan använda ett egenhändigt gjort block i Scratch kan du använda en funktion i Processing, detta kallas för att anropa funktionen.

I Scratch visas parametrar som små rutor som man kan skriva i. Vill man skriva flera parametervärden i Processing, skriver man dem mellan parenteser avskilda med kommatecken.

Du kan skriva alternativ (if-satser och if-else-satser) som har samma struktur som motsvarande block i Scratch.

Det finns fördefinierade variabler i Processing, precis som i Scratch.

Vissa variabler i Scratch hör till en sprajts position, riktning eller utseende. I Processing finns det inga sprajts utan du måste rita egna geometriska objekt eller bilder. Du måste sedan själv göra variabler för deras positioner.

Koordinatsystem

Om man tänker sig hur text och bilder är positionerade på exempelvis en hemsida, så är deras position relativt det övre vänstra hörnet alltid densamma, oavsett hur man förstorar eller förminskar fönstret. Att ha origo i det övre vänstra hörnet är därför naturligt i en programmeringsmiljö.

---

Övning 1 - Ändra startkoden

Draw eller setup

Testa att flytta kommandot background(100); från setup-funktionen till draw-funktionen.

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

function draw() {
  background(100);
  ellipse(mouseX, mouseY, 20, 20);
}

Kör programmet! Kan du förklara skillnaden?

Ändra storlek på ritfönstret

Ändra koden i setup-funktionen till:

createCanvas(600, 400);

Kör programmet! Vad tror du 600 och 400 står för?

Ändra ellipsen

Byt de sista två parametrarna i ellipse-kommandot till andra positiva heltal. Kör programmet! Vad tror du de två sista parametrarna står för?

Ändra färgerna

I Processing används antingen en gråskala eller så kallade RGB-färger (RedGreenBlue). Om en parameter används, blir det en gråskala med värden mellan 0 och 255.

Testa att byta bakgrundsfärgen!

background(0);
background(255);

Vad är vitt? Vad är svart?

Om tre parametrar används, blir det RGB-färger.

Testa olika varianter av kommandona

background(<röd>, <grön>, <blå>);
fill(<röd>, <grön>, <blå>); 
stroke(<röd>, <grön>, <blå>);

där röd, grön, blå är tal mellan 0 och 255. Det spelar ingen roll om fill och stroke ligger i setup-funktionen eller draw-funktionen.

Vad tror du kommandona fill och stroke gör?

Slumptal

Med kommandot random kan du generera ett slumptal.

Om du använder en parameter blir det ett slumptal större än eller lika med 0 och strängt mindre än parametern. Exempelvis ger kommandot random(256) ett slumptal mellan 0 och 255.

Med två parametrar kan du ange två gränser. Exempelvis ger kommandot random(10, 20) ett slumptal mellan 10 och 19.

Testa att skriva

fill(random(256));

i draw-funktionen. Var noga med parenteserna! Testa även

fill(random(256), random(256), random(256));

Det går även att slumpa fram ellipsens bredd och höjd,

ellipse(mouseX, mouseY, random(50), random(50));

och position.

ellipse(random(600), random(400), random(50), random(50));

Övning 2 - Storlek, position, form och text

Du ska nu använda kommandon för att göra geometriska figurer och skriva text.

Kommandon för geometriska figurer

rect(<x>, <y>, <bredd>, <höjd>);
ellipse(<x>, <y>, <bredd>, <höjd>); 
line(<x1>, <y1>, <x2>, <y2>);

Kommandon för text

textSize(<textStorlek>);
text(”Hello World!”, <x>, <y>);

Där <textStorlek> är ett positivt heltal.

Ändra kantens tjocklek

strokeWeight(<tjocklek>); 

Där <tjocklek> är ett positivt heltal.

Dölj kanten eller fyllnadsfärg

noStroke(); 
noFill();

Uppgift

Kopiera koden

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

function draw() {
  ellipse(150, 200, 120, 200);
  rect(320, 300, 200, 50);
  textSize(36);
  text("Hello World!", 300, 100);
}

Flytta på objekten så att de blir placerade som i bilden nedan.

Ändra på bredd och höjd så att det ser ut som i bilden nedan. Se till att ellipsen ritas ovanpå rektangeln.

Färglägg objekten på valfritt sätt!