Lär dig programmera Processing

Dessa sidor går att skriva ut om Firefox används, annars förstörs formateringen av fusklapparna.

Lär dig programmera Processing

Ladda ner Processing från Download Processing.

Fyll i "No Donation" och klicka på "Download".

Välj den version som passar till ditt operativsystem.

Processings hemsida kan du hitta detaljerad information. Det enklaste sättet är att använda sökrutan i det övre högra hörnet.

Koordinatsystemet i Processing fungerar lite annorlunda än koordinatsystemet i Scratch. Punkten (0, 0) ligger i mitten när du använder Scratch, i Processing ligger (0, 0) i översta vänstra hörnet. I Scratch ökar y-koordinaten om du går uppåt, i Processing ökar y när du går neråt.

Miniversion av Processings koordinatsystem.

Från block till skriven kod

Ett Processing-program har två huvudmetoder setup och draw. Ett skal till ett program ser ut så här:

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

void 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. På liknande sätt används parenteser när man skall skriva kommandon. Måsvingar och parenteser skrivs alltid som par.

processing 2
Parametrar i Scratch och Processing.

Fusklapp 1

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

rect ellipse

Starta med koden

void setup() {
  size(bredd, höjd);
  
}
void draw() {
  
}

Gör geometriska figurer

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

Visa text

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

Ändra kantens tjocklek

strokeWeight(tjocklek); 

Dölj kanten eller fyllnadsfärg

noStroke(); 
noFill();

Ändra färgerna

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

röd, grön, blå är tal mellan 0 och 255.

Om man bara använder en parameter får man en gråskala.

background(grå);
fill(grå); 
stroke(grå);

Med en fjärde parameter kan man göra ett objekt halvgenomskinligt.

fill(röd, grön, blå, alpha);

Slumptal

random(a,b) = random

Fördefinierade variabler

mouseX = mouse x
mouseY = mouse y
mousePressed = mouse pressed
keyPressed = någon tangent nedtryckt

Villkorssatser

if then if then else

Om-blocken motsvaras av:

if ( villkor ) {
    
  }
if ( villkor ) {
    
} else {
    
}

Övning 1.1 - Storlek, position, form, och text

övning 1

Skriv av koden och kör programmet.

void setup() {
  size(600, 400);
}

void 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 placerad som i bilden nedan.
övning 1 a
Ändra på bredd och höjd så att det ser ut som i bilden nedan. Se till att ellipsen ritas ovanpå rektangeln.
övning 1 b

Övning 1.2 - Färger

Lägg till de fyra blå raderna överst i draw-metoden.

void draw() {
  background(255, 255, 0);
  stroke(0, 0, 255);
  fill(255, 0, 0);
  strokeWeight(5);
  //din kod
}
övning 2

Ändra i koden så att kanterna blir vita och rektangeln grön. Gå in i menyn Tools -> Color Selector och leta upp en färg. Skriv in de RGB-värden som visas i färgväljaren så att ellipsen får den färg du valt. Gör ellipsen halvgenomskinlig.

övning 2 a

 

Malin Christersson Creative Commons License wwww.malinc.se