Välkommen till Programmering 1 med processing

I den här kursen ska du lära dig programmering från grunden. Innan vi kan sätta igång behöver vi ett litet programpaket. Det är själva kompilatorn och en liten så kallad IDE (Integrated Development Environment). Du hämtar det på processing.org. Ladda ner nyaste version för ditt operativsystem.

Det är en så kallad zip-fil. Öppnar utforskaren, välj en mapp och flytta innehållet, dvs mappen processing-3.4, från zip-filen med drar-och-släpp till utforskaren. I mappen finns en fil som heter processing (eller processing.exe). Med den startas IDE. För att komma åt den nästa gång kan du göra så här:

• Drar ikonen till skrivbordet medan du håller ALT-knappen. Då skapas en genväg till processing eller
• Lär dig var du har sparat mappen processing-3.4

Din utvecklingsmiljö

När du starta processing ser det ut så här:

En förklaring vad allt innebär finns här https://www.processing.org/reference/environment/

Vi kommer att programmera textbaserad dvs vi skriver kod i detta fönster för att sedan sätta igång programmet vi skrev för att se hur det blev. Vi börjar med ett exempel. vi tar lite färdig kod och klistra den in i textfönstret. Det är inte meningen att förstå koden på en gång. det är bara ett enkelt men fungerande exempel. Tryck på triangeln för att starta. Programmet stoppas genom att stänga fönstret eller stop-knappen.

void setup() {
  size(640, 360);
  background(102);
}

void draw() {
  variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
}

void variableEllipse(int x, int y, int px, int py) {
  float speed = abs(x-px) + abs(y-py);
  stroke(speed);
  ellipse(x, y, speed, speed);
}

Rör musen över fönstret för att se vad som händer.

---

Ditt första egna program

Radera all kod och skriv bara koden nedan och kör.

size(640, 360);
background(102);
text("Hello World!", 100,50);

Spara och hitta igen

Laboration 1

Grundstruktur för varje program

Det går att skriva ett par instruktioner för att sedan köra sitt program. Men i de flesta fall leder det till oväntade resultat. det beror på att koden som du skriver i textfönstret är inbunden i ett större samband som vi inte riktigt ser (än). Kompilatorn leta första efter vissa block för att koppla det till olika händelser. Här kommer en mall vi använder i alla samband:

```

// variabler

void setup(){
size(400,360);

}


void draw(){


}

Förklaring

Två snedstreck anvisar kompilatorn att ignorera resten av raden. På detta sätt kommer vi att kommentera kod.

Nu består ditt program av två block. All kod som du placera mellan 'måsvingarna' { } körs i fallet setup() direkt i början EN gång, I fallet draw() körs koden 60 gånger per second (60 fps) om och om igen. Med tex framerate(30) kan du ändra det till 30 fps.

size( bredd, höjd) borde vara med som första rad i setup-blocket. Annars blir det 100 x 100 , som är oftast för lite.

En mall för din IDE

Varje ny sketch börja med en tom pde-fil. För att alltid kunna starta med samma mall kan du göra så här:

In och utmatning

Vi kommer att jobba mycket med grafik men ändå behöver vi, särskild i början, kunna mata ut lite text. Dess instruktioner finns:

• text(texten, x, y ): Text på grafikfönstret. x och bestämma position av texten. text(Hello World!", 200,100) visa en text 200px från vänsterkanten och 100px från överkanten. Färgen ställs in med fill(gråvärde).

• print() och println(): skriver till konsolfönstret, rutan under ditt kodfönster. println() lägger alltid till ett radbyte.

Du kan fortsätter med Grunder i Grafik