Lär dig Processing

 

Lektion 1

2 3 4 5

Introduktion till Processing (p5.js)

Processing och 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 https://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.

start-kod
Testa att köra programmet och sedan se koden igen!

Ett Processing-program har två huvudmetoder setup och draw.

function setup() {
   //kod som körs när programmet startar
}

function draw() {
  //kod som körs om och om igen som ett "för alltid"-block i Scratch
}

Det som står efter // är så kallade kommentarer. Kommentarer är till för den som läser koden och exekveras inte.

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

I Scratch tar vissa kommandon emot en eller flera parametervärden, detta visas som små rutor som man kan skriva i. Vill man skriva flera parametervärden i Processing, skriver man dem mellan parenteser avskilda med kommatecken.

parametrar i Scratch och Processing
Parametrar i Scratch och Processing.

Tänk på att alla måsvingar och parenteser alltid förekommer i par.

Kortkommandon

När man programmerar är det mycket vanligt att man kopierar och klistrar in kod. Det är därför bra om du lär dina händer att använda kortkommandon

  Windows & Linux (Chromebook) Mac
kopiera ctrl + c cmd + c
klipp ut ctrl + x cmd + x
klistra in ctrl + v cmd + v

Övning - Ändra startkoden

Draw eller setup

Testa att flytta kommandot background från setup-metoden till draw-metoden.

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 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-metoden eller draw-metoden.

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-metoden. 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));

Koordinatsystemet i Processing

I Scratch används ett sedvanligt koordinatsystem där y-axeln pekar uppåt och origo är placerat i mitten.

Koordinatsystem i Scratch
Koordinatsystem i Scratch.

I Processing används det koordinatsystem som är vanligast när man programmerar, y-axeln ökar i riktning neråt och origo ligger i det övre vänstra hörnet.

Koordinatsystem i Processing
Koordinatsystem i Processing.

Om man tänker sig hur text och bilder är postitionerade 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 - Storlek, position, form och text

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

rect ellipse
Vad som menas med x, y, bredd och höjd för olika figurer.

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);
}
canvas1

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

canvas2

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

canvas3

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

canvas4

 

Lektion 1

2 3 4 5