søndag 15. november 2015

Processing

I de foregående blogginnleggene har fokus vært mot enkle progarmmeringsomgivelser som er tilrettelagt for eksperimentering i en begynnerfase, i hovedsak for barn. Jeg har sett på Scratch, Logo og MIT App Inventor og har så vidt sett på noen enkle paralelle programbiter i andre språk. Nå tenkte jeg å se litt på et programmeringsverktøy med en litt annen innfallsvinkel og begrunnelse: Processing.
På hjemmesiden presenteres Processing slik:
Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts
.
Teknisk sett er språket et subsett av Java.
Det er også interessant å merke seg at store deler av Processing kan kjøres på en webside ved hjelp av et Javascriptbibliotek. Denne løsningen, Processig.js, er beskrevet som et eget produkt. Jeg bruker denne nedenfor for å illustrere noen enkle skisser, men merk at det er bergrensninger på hvor mye av Processing vi kan handtere på denne måten. Du finner flere eksempler på bruk av Processing.js på mine fagsider, Børres Processing .
Det er interessante å se Processing fra tre perspektiver:
  1. Hvor lav er inngangsterskelen, eller med andre ord hvem er en potensiell målgruppe.
  2. Hvor langt bringer Processing oss i retning av avansert programmering. Eller sagt på en annen måte: Er dette en vei å gå for å bli programmerer.
  3. Hvilke kvaliteter har det som uttrykksform, jfr. "...within the context of the visual arts", som nevnt ovenfor.

Basis

Vi tegner og skriver på en canvas. De grunnleggende rutinene er setup() og draw(). F.eks. slik:
// set up size and permanent settings
void setup() {
  size(200, 50);
  fill(0);
}
// draw a frame
void draw() {
  text("Hello World", 50, 20);
}

I prinsipp er det dette vi trenger for å fortsette å eksperimentere. Vi ser at det dukker opp en del uunngåelige ord (void) og parenteser av forskjellig type, () {}. Dette er da en del av javasyntaksen. Denne må vi ta med oss fra starten. Ikke så vanskelig å forklare, men det setter nok opp en barriere for noen potensielle brukere, erfaringsmessig mer avhengig av motivasjon enn av alder.

Fleksibilitet

Processing tilbyr oss et stort spekter av grunnleggende uttrykksformer når vi skal formidle noe på tegneflaten. Vi kan håndtere en rekke forskjellige former, linjer, tekst og farger. Dokumentsajonen er god og oversiktlig, men det tar trolig litt tid å skille det enkle fra det mer avanserte.
Vi kan ta vårt enkle hello-program et steg videre.: F.eks. slik:
/* @pjs preload="data/bs1.png"; */
PImage bs;  
float v=0.0;
// set up size and permanent settings
void setup() {
  size(200, 200);
  fill(0);
  textFont(createFont("SansSerif",18));
  bs = loadImage("data/bs1.png");  
  frameRate(30);
}
// draw a frame
void draw() {
  background(255, 255, 180);
  text("Hello World", 50, 150);
  translate(90,60);
  rotate(radians(v+=2));
  image(bs, -bs.width/2, -bs.height/2, bs.width, bs.height);
}
Sett fra en pedagogs synspunkt synes den umiddelbare grafiske responsen som Processing innbyr til som et godt læringsverktøy. Den gjør det mulig å assosiere til noen av tankene rundt Logo og beslektede uttrykksformer. Erfaringsmessig er det nok grunn til å være litt forsiktig med å legge for stor vekt på den ferske programmererens nysgjerrighet.

Struktur

Vi lager en skisse med noen baller som endrer farge når vi klikker på dem. Her har vi introdusert en egen beskrivelse av en ball, vi har laget klassen ball, og vi kan lage forekomster (objekter) av denne klassen. Det vil si at har innført objekt-begrepet i koden vår. Dette er på mange måter et viktig prinsipp som bringer oss et langt steg videre i forståelse av effektiv og strukturert programmering.
/* some balls on a table */
ArrayList <ball > allBalls = new ArrayList <ball >();

void setup(){
  size(150,300);
  allBalls.add(new ball(50,50));
  allBalls.add(new ball(100,150));
  allBalls.add(new ball(50,250));
  background(255);
  fill(0);
}

void draw (){
  for (int i = 0; i < allBalls.size(); i++) {
    allBalls.get(i).display();
  }
}

void mouseClicked(){
  for (int i = 0; i < allBalls.size(); i++) {
    allBalls.get(i).check();
  }
}

/* one ball with position radius and color*/
class ball{
  int xpos;
  int ypos;
  int rad;
  color clr;
  /* construct it, new ball() */
  ball(int xpos,int ypos){
    this.xpos=xpos;
    this.ypos=ypos;
    rad=30;
    clr=color(0,0,255);//blue
  }
  /* display it */
  void display(){
    fill(clr);
    ellipse(xpos, ypos, rad, rad);
  }
  /* check if hit and change color if so*/
  void check(){
    /* clicked on it ?*/
    if( (abs(mouseX-xpos)<rad) && (abs(mouseY-ypos)<rad) ){
      if(clr==color(0,0,255)) // is blue ?
         clr=color(255,0,0);  // red
      else 
         clr=color(0,0,255);  // back to blue
    }
  }
}

Hva kan vi gjøre med Processing ?

Det tredje perspektivet vi lanserte ovenfor var, ut fra Processings hjemmeside,: "...within the context of the visual arts". Nå er ikke min hovedbeskjeftigelse knyttet til denne typen anvendelser, men de verkøyene og bibliotekene vi finner tilsier at det er dekning for si at dette er en av Processings styrker. Det er også viktig å merke seg av lyd/musikk er godt ivaretatt.
Det er en side med Processing som kanskje er litt underkommunisert. Vi har en rekke verktøy for å handtere ulike typer dataformater og vi har verktøy som gjør det rimelig enkelt å visualisere data, i form av kurver, tabeller osv.
Dessuten styrkes støtten for 3-dimensjonal framstilling fra versjon til versjon. Dette basert på OpenGL.
Jeg vet ikke om skissene og argumentasjonen over bidrar til innsyn i Processing, men håper det kan bidra til nysgjerrighet på å finne ut mer. Det er ganske moro. Lykke til !

Linker

Processing
Processing.js
Børres Processing

søndag 1. november 2015

LOGO

Programmeringsspråket Logo ble lansert så tidlig som i 1967. Den personen som har stått som frontfigur for Logo er Seymour Papert. Papert hadde nær tilknytning til Piaget og ideen bak Logo knyttes til Piagets utviklingslære og det som pedagogene kaller en konstruktivistisk læringform. Det vil vel i korthet si at vi former mentale modeller baser på våre erfaringer. Alan Kay som jeg nevnte i forrige bloggpost var influert av Papert, og det er ikke så vanskelig å se at det paralelle tanker i Kays resonnementer om brukergrensesnitt ("doing with images makes symbols") og Paperts tenking bak Logo.

Jeg har ikke til hensikt å gå i detlaj om alle sider med Logo som språk. Kort sagt er Logo i sin opprinnelige form bygget på Lisp. I det halve sekelet som har gått siden Logo ble introdusert har det dukket opp et utall av varianter med litt forskjellige egenskaper og basert på forskjellige plattformer. Det finnes løsninger for websider, og det finnes "turtle"-biblioteker i mange forskjellige språkomgivelser.

Det er noen grunnleggende egenskaper ved alle implementasjonene som reflekterer den opprinnelige ideen. Metaforen er en skilpadde (turtle) som vi kan bevege ved hjelp av kommandoer. Vi kan la den gå framover (forward 20), vi kan la den snu seg et antall grader til høyre (right 30) eller til venstre (left 30) og vi kan la den etterlate seg et spor (pendown) eller gå sporløst (penup).

Logo ble opprinnelig implementert som robot og etter hvert som tegneomgivelse på skjerm.

Ideen er da for å si det enkelt at vi skal sette oss i skilpaddas sted når vi tenker og forsøker å lage noe eller utføre noe.

Noen enkle kodebiter

Ett (av mange) muligheter for å leke litt med Logo-konseptet er Turtle Academy.

Vi kan tegne et kvadrat med f.eks. følgende kode:

forward 100 left 90
forward 100 left 90
forward 100 left 90
forward 100 left 90

eller

repeat 4[forward 100 left 90]

Vi kan, og det er viktig begrepsmessig, lære skilpadda sammensatte begreper, f.eks. å lage et kvadrat. Merk at på engelsk framstår dette som angivelse av et verb. Vi burde kanskje si på norsk "å firkante" eller "å rute", men siden infinitivsmerket, TO, er en del av språket beholder jeg det.

TO square 
repeat 4[forward 100 left 90]
END

Da har square blitt en del av skilpaddas handlingsmuligheter. Vi har definert et begrep, et verb, en funksjon eller hva vi måtte ønske å kalle det. Aksjonen trigges kanske enkelt ved å skrive:

square

Og vi kan tegne flere kvadrater på forskjellige steder ved å skrive f.eks.

square
forward 100
square

Erfaringene med å introdusere Logo til lærere og elever på 80-tallet var at det i utgangspunktet skapte stor begeistring. Selv enkle innføringer som ovenfor åpnet øynene for at her ligger det nær sagt ubegrensede muligheter for å leke med geometri. Alle synes det var morsomt. Det er viktig å sette denne begeistringen inn i en situasjon der de teknologiske forutsetningene var sterkt begrenset, og det å få utført tegninger på en skjerm i seg selv var ganske innovativt.

Problemer oppsto imidlertid ganske raskt når man skulle gå videre og lage situasjoner der læringspotensialet skulle undersøkes. Kravet til forberedelse fra lærernes side ble nok kraftig undervurdert. Det var vel egentlig så enkelt som:
"Vi har en penn og nå kan du tegne hva du vil. Ja men hva skal jeg tegne og hvorfor ?".
Dette reiser noen interessante pedagogiske utfordringer eller dilemmaer. På den ene siden ønsker vi en situasjon der verktøyet er enkelt og inviterer til nysgjerrighet og utprøving. På den annen side er det trolig nødvendig med noen mer eller mindre klare utfordringer og oppfølging i bruk av verktøyet. Uansett hvor enkelt det kan synes er det større avstand mellom en ide og realiseringen av den enn det er med en penn på papir. Skolerte pedagoger kan analysere denne balansen i et konstruktivistisk perspektiv bedre enn jeg kan, men det er viktig å forstå hvordan verktøyet legger både praktiske og logiske føringer.

Nå er det mye mer i de fleste Logodialekter enn det som er skissert ovenfor. Vi kan arbeide med lister av tekster eller tall, vi har flere strukturer i språkkunstruksjonen, vi kan fylle områder med farge osv. Jeg forfølger ikke dette her. Du finner lett beskrivelser av litt ulike versjoner på nettet.

La oss ta for oss en tilsynelatende enkel problemstilling og se hva den kan føre til av problematisering og kanskje forståelse.

Vi lager en polygon-funksjon med parametere:

to polygon :kanter:lengde 
  repeat :kanter [
    forward :lengde 
    right 360/:kanter] 
end
 

Vi vil altså at skilpadda skal lage et polygon med kanter sider og der hver kant skal være lengde lang.

Dersom vi skriver polygon 4 30 får vi et kvadrat med sidekant 30

Dersom vi skriver polygon 8 30 får vi en åttekant med sider som er 30 lange.

Dersom vi skriver polygon 50 10 begynner resultatet å ligne på en sirkel.

Ikke så rart, men det reiser noen spørsmål.

  • hvorfor kommer skilpadda tilbake med samme orientering?
  • hvorfor kommer skilpadda tilbake til samme sted?
  • hvor stor er radien i den omsluttende sirkelen, gitt en bestemt verdi på parameteren lengde ?

Python turtle

En interessant implemntasjon av turtle-gtafikken er Turtle-biblioteket som er integrert i programmeringsspråket Python. Dette er interessant fordi det bevarer de grunnleggende ideene samtidig som det åpner for et bredere spekter av programmeringsmuligheter, dersom vi måtte ønske det.

import turtle

def polygon(steps,length):
    for i in range(1,steps+1,1):
        turtle.forward(length)
        turtle.right(360.0/steps)

polygon(4,50)
polygon(10,20)
polygon(36,15)

Vi ser blandt annet at vi snakker til objektet turtle med en vanlig dot-notasjon, turtle.forward(). Vi har dessuten brukt def til å definere funksjonen polygon, og løkkekonstruksjonen er litt annerledes. Python er på mange måter et språk med to ansikter. Enkle ting er veldig enkle, og mer intrikate ting krever ganske mye trening.

Scratch

For å trekke trådene tilbake til forrige blogg så ser vi at vi kan arbeide med det samme problemet ved hjelp av Scratch.

Linker

Logo på Wikipedia
Papert på Wikipedia
Turtle Academy
Dokumentasjon av Turtle-biblioteket i Python