Fotballbane

Analyse

Det første vi gjør er å kikke litt nærmere på geometrien:

• Symmetri. Vi ser at banen er symmetrisk om midtlinja. Det vil si at vi skal kunne tegne de to halvdelene med samme kode, men med endret koordinatsystem. Ser vi nærmere etter kan vli slå fast at banen er symmetrisk også om en linje som går midt gjennom begge målene. Det vil si at vi kan "brette banen" to ganger og sitte igjen med fire like figurer. Vi må kikke nærmere på hvor mye av symmetriegenskapene vi skal bruke
• Alle formene er slik at vi kan løse tegningen med kjente Processing funksjoner: line(), rect(), ellipse(), arc(). Det er imidlertid ett problem som kan bli utfordrende. Det kan bli litt tricky å tegne sirkelbuene utenfor 16-meteren uten å regne på vinkler og forhold. Kanskje vi kan finne på noe lurt ?

Så må vi se nærmere på de aktuelle målene. Vi finner følgende informasjonen på Wikipedia:

Vi har litt handlefrihet når det gjelder lengden og bredden på banen. Vi bestemmer oss i utgangspunktet for en lengde 100 meter og bredde 65 meter. Da er banen så vidt lovlig for landskamper. Målet stal være 7.32 m.

Det virker fristende å tenke i meter. Dette kan vi gjøre dersom vi lage en gjennomgående skalering. Hvis tar utgangspunkt banelengden og bestemmer oss for at denne skal legge beslag på 1000 punkter, kan vi forsøksvis bruke en skalering på 10. Dette kan vi lett endre senere.

Hvis vi analyserer den aktuelle oppgaven så involverer den i hvert fall tre problemer:

1. Hvordan printer vi en skisse på papir?
2. Hvordan finner vi ut hvor mange punkter som tilsvarer 5cm?
3. Hvordan tegner vi en hensiktsmessig utbrettet kube?

Vi må da spørre oss om de kan løses hver for seg, og i vilken rekkefølge de i så fall kan eller bør løses. I dette tilfellet kan problemene åpenbart løses hver for seg. Når det gjelder rekkefølgen så kan det være at vi må tenke litt nærmere etter. Hvis vi skal finne ut hvor mange punkter som tilsvarer 5cm på papir, må vi kanskje få utskriften til å virke før vi kan måle.

Vi kan kanskje gå for en strategi der vi løser deloppgavene i den rekkefølgen vi har skrevet dem over.

Hvordan printer vi en skisse

Her får vi starte med å sjekke dokumentasjone av Processing, reference (Links to an external site.)Links to an external site. Der finner vi en print() funksjon, men den skriver tekst til consolet( tekstområdet unnder koden) så den kan vi ikke bruke. Men vi har en save() funksjon som kopierer det vi har tegnet til en fil. Denne må vi kunne bruke og deretter åpne fila i et tegneprogram og printe den derfra. Vi trenger en måte å starte save-operasjonen. Vi kan velge å bruke et museklikk. I sum løser vi deloppgave 1 med følgende program.

void setup(){
  size(400,400);
}
void draw(){
  // hva som helst
  line(10,10,200,200);
}
void mouseClicked(){
  save("test1.png");
}

Vi kan raskt konstatere at file "test1.png" dukker opp i samme katalog som skissen. Hvis vi vil kan vi lese den inn i et tegneprogram og printe den.

Kodestruktur

Vi deler løsningen i tre filer.

• FIFA_bane. Dette er hovedfila med setup() og draw() og oppsett av dimensjoner.
• tegnBane. Denne fila består av en funksjon tegnBane().Her tegner vi omrisset av banen og kaller funksjonen tegnHalvBane to ganger for å få på plass de symmetriske detaljene.
• tegnHalvbane. Denne fila består av en funksjon tegnHalvBane() som tar seg av detaljene på en banehalvdel (16-m, 5-m osv)

I dette tilfellet var det naturlig å utvikle koden i den rekkefølgen som er nevnt over. Vi kan skrive og teste stegvis og se om vi er på riktig spor. For hver iterasjon kan vi fylle inn flere detaljer. Slik ble det (forminsket):

/* --------------------
 Tegner en fotball bane
 med FIFa mål
----------------------- */
// globale variable
// antall punkter pr meter
float meterFaktor=10;
// banedimensjoner
float baneLengde=100;
float baneBredde=65;
// sirkel på midten og ved 16 meter
float sirkelDiameter=9.15*2;
 
void setup(){
  // setter av plass til litt marg rundt banen
  size(1050,680);
}
 
void draw(){
  // grå
  background(120,120,120);
  // vil tenke i meter
  scale(meterFaktor,meterFaktor);
  // fjerner skalering av strekene
  strokeWeight(1/meterFaktor);
  // lager 2m marg
  translate(2,2);
  //tegn banen
  tegnBane();
  noLoop();
}

og

/*
Tegner en fotballbane
*/
// gressfarge
color gress=color(0,240,0);
// markering
color kritt=color(255,255,255);

// tegn banen
void tegnBane(){
  // set strekbredde 20cm
  strokeWeight(0.2);
  stroke(kritt);
  fill(gress);
  // omriss
  rect(0,0,baneLengde,baneBredde);
  // midtsirkel
  ellipse(baneLengde/2,baneBredde/2,sirkelDiameter,sirkelDiameter);
  // midtlinje
  line(baneLengde/2,0,baneLengde/2,baneBredde);
  // --------------
  // benytter oss av symmetrien 
  // rundt midtlinja
  // tegn venstre banehalvdel
  pushMatrix();
    translate(0,baneBredde/2);
    rotate(-PI/2); //-90 grader
    tegnHalvbane();
  popMatrix();
  
  // tegn høyre banehalvdel
  pushMatrix();
    translate(baneLengde,baneBredde/2);  
    rotate(PI/2); // 90 grader
    tegnHalvbane();
  popMatrix();
}

og

/*
 Tegner en halv bane. Bruker meterdimensjoner 
 direkt uten å sette dem i variable. 
 Skal vi følge FIFA-stndarden er disse 
 verdiene låst uansett.
*/
void tegnHalvbane(){
  // sirkelen ved 16-meteren
  // vi tegner en hel sirkel rundt straffemerket
  // og dekker over med 16-meteren etterpå
  ellipse(0,11,sirkelDiameter,sirkelDiameter);
  // 16-meteren
  rect(-20.15,0,40.3,16.5);
  // 5-meteren
  rect(-5.5-7.32/2,0,40.3-22,5.5);
  // corner markører
  arc(-baneBredde/2,0,3,3,0,PI/2);
  arc(baneBredde/2,0,3,3,PI/2,PI);
  // straffe punkt
  ellipse(0,11,0.5,0.5);
  // målet markeres som et mørkt felt bak streken
  fill(0,0,0);
  rect(-7.32/2,-1,7.32,1);
  fill(gress);
}

Oppgaverforslag