Lär dig programmera Processing

Listor

I Scratch kan man under menyn data skapa en lista som innehåller text eller tal. I Processing finns det olika sätt att göra liknande listor. Det enklaste är att göra en så kallad array (det finns ingen bra svensk översättning av "array").

När man skapar en array måste man ange vilken datatyp den ska innehålla, sedan måste man ange hur många element den ska ha.

Vill man gå igenom en lång array är det bäst att använda en så kallad for-sats. När man räknar igenom en array, börjar man räkna på noll. Om en array innehåller fem element, har det sista elementet index fyra.

index element
0 "Sverige"
1 "Norge"
2 "Danmark"
3 "Finland"
4 "Island"

I de här övningarna skall du använda dig av bilder. Om du inte har några bilder kan du spara bilderna nedan till din dator (högerklicka och välj Spara bild som). Bilderna är från Scratch och licensierade så att man får använda dem.

donut
donut

Fusklapp 3

Lägg in en bild

Spara din sketch. Välj Sketch -> Add file
Lägg in en bild som du har sparad på din dator.

Deklarera bildvariabeln

PImage bild;

Ladda bilden i setup-metoden

bild=loadImage("bild.png");

Rita bilden

image(bild, x, y);

eller:

image(bild, x, y, bredd, höjd);

Centrera bilden

Bildens koordinater (x, y) anger det övre högra hörnet. Vill du mäta avstånd mellan bilder är det bättre om koordinaterna är mitt i bilden. Skriv:

imageMode(CENTER);

På liknande sätt kan man centrera en rektangel.

rectMode(CENTER);

Deklarera arrays

float[] numbers;
String[] countries;

Ange hur många element

numbers = new float[100];
countries = new String[5];

Lägg in element i listan

countries[0] = "Sverige";
countries[1] = "Norge";
countries[2] = "Danmark";
countries[3] = "Island";
countries[4] = "Finland";

Antal element

Du tar reda på hur lång en array är genom att skriva .length efter namnet.

println(countries.length);

Använd en loop för att lägga in element

for (int i=0;i<numbers.length;i++) {
    numbers[i] = random(500);
}

Skriv ut landet med index 2

println(countries[2]);

Skriv ut alla element

for (int i=0;i<numbers.length;i++) {
    println(numbers[i]);
}

Övning 4.1 - Styr nyckelpigan

Välj Sketch -> Add file i menyn och lägg in bilden på nyckelpigan.

Skriv in koden och kör programmet.

PImage nyckelpiga;
float nyckelpigaX, nyckelpigaY;

void setup() {
  size(800, 600); 
  nyckelpigaX = width/2;
  nyckelpigaY = height/2;
  nyckelpiga = loadImage("ladybug.png");
  imageMode(CENTER);
}

void draw() {
  background(150);
  image(nyckelpiga, nyckelpigaX, nyckelpigaY);
}

Du kan skala nyckelpigan genom att lägga till två parametrar (bredd och höjd) till kommandot image.

Lägg in kod så att du kan styra nyckelpigan med tangenter, ungefär som i Övning 3.2.

Övning 4.2 - Rita munkar

Välj Sketch -> Add file i menyn och lägg in bilden på munken.

Lägg till en bild av en munk. Lägg till det blå ordet.

PImage nyckelpiga, munk;

Deklarera två arrays av koordinater, så att du kan rita många munkar.

float[] munkX, munkY;

Ladda bilden i setup.

munk = loadImage("donut.png");

Bestäm hur många munkar du vill rita.

munkX = new float[3];
munkY = new float[3];

Skriv in vilka koordinater varje bild skall ha. Du kan också slumpa talen med en for-sats.

munkX[0] = 100;
munkY[0] = 150;
// fler koordinater

Rita munkarna i draw med hjälp av en for-sats.

for (int i = 0; i < munkX.length; i++) {
    image(munk, munkX[i], munkY[i]);
}

Övning 4.3 - Mata nyckelpigan

Gör en int-variabel för att räkna poäng. Visa poängen i fönstret.

Ge poäng varje gång nyckelpigan kommer tillräckligt nära en munk. Eftersom du måste kolla alla munkar, är det bäst att använda en for-sats. Testa med olika gränser för avståndet så att det ser bra ut när du kör programmet.

for (int i = 0; i < munkX.length; i++) {
  if (dist(nyckelpigaX, nyckelpigaY, munkX[i], munkY[i]) < 100) {
    //räkna upp poängen
    //se till att munkX[i] hamnar utanfär skärmen så att munken inte längre syns
  }
}

Du kan också lägga in bilder på äcklig mat som ger minuspoäng, eller gör att man förlorar.

 

Malin Christersson Creative Commons License wwww.malinc.se