Undervisning i programmering på HUM-TEK

Hent og installere

Hent det fra http://processing.org eller http://padfield.org/nicolas/div/undervisning/tools/processing-0148.zip (hurtigere)

Lave en mappe uden mellemrum, danske tegn m.v. F.eks. c:\processing Pak zip filen ud (højreklik på filen og vælg Udpak) i mappen.

Links

Opgavesiden med eksporteret applet: http://isl.ruc.dk/~troels/humtek/opgave/

Kode til programmet (linkes også på opgavesiden): http://isl.ruc.dk/~troels/humtek/opgave/sketch_080901b.pde

Tilføjelse vedr spørgsmål 9 (linkes også på opgavesiden): http://isl.ruc.dk/~troels/humtek/opgave/tilfoj_080901b.pde

Hele opgaveteksten i pdf (linkes også på opgavesiden): http://isl.ruc.dk/~troels/humtek/opgave/opgave.pdf

Manual, API http://processing.org

Opgaver og eksempelkode

Introduktion til kode

Denne opgave går ud på at eksperimentere med processing. Start med at kopiere nedenstående kode og kør den som en sketch i processing. Prøv herefter at forklare og modificere koden som angivet nedenfor.

 void setup( ) {
    background(0);
    size(400, 400);
 }
 void draw( ) {
    float radius = random(70);
    fill(random(255), random(255), random(255));
    if (dist(mouseX,mouseY,pmouseX,pmouseY) > 1)‏
       ellipse(mouseX, mouseY, radius, radius);
    if (mouseX-pmouseX > 25)‏
       background(0);
 }

1) Bemærk at sketchen starter med at være helt sort og at man kan male hele sketchen over ved at køre rundt med musen, men at man også kan komme ud for at sketchen bliver sort påny. Hvad skal der til for at sketchen bliver sort?

2) Funktionskaldet fill(x,y,z) indstiller farven, der bruges til udfyldning af efterfølgende figurer. Farven angives i RGB-formatet, dvs. med 3 værdier x, y og z, der angiver hhv. hvor meget rød, grøn og blå, der blandes i farven. Værdierne kan variere fra 0 til 255. Funktionskaldet random(x) giver et tilfældigt tal imellem 0 og x. Hvad gør kaldet fill(random(255), random(255), random(255))?

3) Omskriv programmet så kun en bevægelse imod nederste højre hjørne kan gøre sketchen sort. (Tip overvej at bruge et "logisk og" der angives med to og-tegn, som fx i "if { && } ...")‏

4) Omskriv så der kun varieres imellem blå nuancer og der males på grå baggrund.

5) Bemærk at der er "konteksthjælp" når man bruger processing således at man kan højreklikke på en kommando og derved få en forklaring til denne. Hvad gør ellipse og hvilke argumenter tager den?

6) Med

 float radius = random(70);

sættes en variabel "radius" til en tilfældig værdi imellem 0 og 70. Vil man få det samme resultat, hvis denne linie slettes og der i stedet males med

  ellipse(mouseX, mouseY, random(70), random(70)); ?

(Prøv det (for at være sikre) og kom med et bud på en begrundelse af svaret)‏

7) I processing er der også andre figurer fx rektangler (rect). Prøv at omskrive programmet så der males med kvadrater/rektangler i stedet for cirkler/ellipser.

8) Prøv at komme med et bud på hvordan man kan få sketchen til at male med en tilfældig blanding af kvadrater og cirkler. Hvis I ikke lige kan ryste koden ud af ærmet, så nøjes evt. med at overveje hvad princippet kan være?

9) Et sidste problem vedrører et "kast" - dvs. en hurtig bevægelse med musen. Med udgangspunkt i programmet ovenfor kan man indføre et simpelt kast med følgende kode:

 if (dist(mouseX,mouseY,pmouseX,pmouseY) > 25) {
    for (int i = 1; i < 11; i = i+1) {
       int dx=mouseX-pmouseX;
       int dy=mouseY-pmouseY;
    ellipse(mouseX+(i*dx), mouseY+(i*dy), radius, radius);
    }
 };

Prøv at indsætte denne kode før det sidste "if" i programmet. Giv et bud på hvordan denne kode virker. Hvorfor fås den rigtige retning med kastet? Sporet for kastet varierer med afstanden imellem cirklerne. Hvorfor? Hvordan kan man simpelt få sporets længde (i antal figurer) til at variere?

Avanceret:

Libraries

ProcessingHowtos