Välkommen till Programmering 1 med processing

processing-logo

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:

Din utvecklingsmiljö

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

IDE

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

Lagring och sökvägar

Det brukar råder lite förvirring i början om i vilka mappar allt ligger och hur man sparar mm. Det är upp till tre platser/mappar som är relevanta.

  1. Mappen för själva utvecklingsmiljön. Du har nyss flyttas mappen processing-3.4 från zip-filen till en annan på din dator, förmodligen på Onedrive. I denna mapp ligger programmet processing.exe mm. Allt som behövs för att kunna skriva kod, kompilera kod och köra dina program.

  2. Du har väl tänkt att ha en mapp för ämnet programmering och i den vill du har allt du skapar.

  3. Kolla File --> Preferences. Under sketchbokk location finns sökvägen till en mapp som processing vill gärna att du sparar alla dina skapelse. Med Browse borde du ändra det till din mapp för ämnet.

Tänk på att när du sparar programkod för första gången så skapas en med med samma namn. Låt säger du sparar det under namnet MittProgram. Då skapas en mapp med namnet MittProgram och en fil med namnet MittProgram.pde det är huvudfilen som är central i ditt program. Senare i kursen kommer vi lägga till flera filer i samma mapp. Så filer som ligger i samma mapp som MittProgram ingår i projektet MittProgram.

Filändelsen är .pde och det är förknippat med procssing-IDE. Så dubbelklick på en sådan fil öppnar utvecklingsmiljön på rätt ställe. Du kan har flera samtidigt!





Laboration 1

  1. Variera de olika värden/sparametrar och kör igen. Försök lista ut vad den styr. Högerklick på tex size eller text, sedan *Find in Reference". Kolla om du hade rätt.
  2. Kolla upp hur
  3. Rita ett hårkors.

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:

Lägg till standardmall

  1. Kolla via File --> Preferences sökvägen till dina sketchbook.
  2. Öppna mappen i utforskaren
  3. Det ska finnas en undermapp templates . Öppna.
  4. Skapa en mapp som heter Java (stort J). Öppna
  5. Ladda ner filen sketch.pde och flytta till mappen. Länk till mallen: sketch.pde
  6. Allt som placeras i mappen kommer att läggas i de nya sketch-böcker. Vi kommer lägga till ännu mer längre fram i tiden.

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:

Du kan fortsätter med Grunder i Grafik