Browsed by
Tag: Processing

Grunnloven av 1814 som ordsky

Grunnloven av 1814 som ordsky

WordClouds, eller ordsky på norsk, du har sikkert sett mange av dem. Ideen er å lage en visuell presentasjon av frekvensen av ordene i teksten. Dette er nyttig da det enkelt kan gi oss en oversikt over hvilke ord som brukes i teksten, og samtidig har den en klar visuell “dette er kult”-effekt. For å lage en wordle kan bruke nettsiden som, om ikke introduserte fenomenet, gjorde det populært: Wordle. Vi skal gjøre det på en annen måte, ved hjelp av det visuelle programmeringsmiljøet Processing (kom igang, enkel introduksjon).

Hvordan fungerer en wordle?

Ingen er muligens bedre kvalifisert til å svare på dette enn Jonathan Feinberg, skaperen av Wordle, som på den sosiale programmingsspørsmålsiden StackOverflow presenterer framgangsmåten.

Først telles alle ordene, og sorteres slik at ordene med høyest frekvens kommer først. Deretter fordeles ordene utover lerretet slik at frekvensen gjenspeiles i størrelsen på ordene. De mest gjentatte ordene er de som dukker opp høyest. I løpet av telle-perioden må også ord som av grammatiske (eller andre) grunner ikke skal med fjernes. Ord som ‘er’, ‘som’, ‘i’, ‘på’ brukes ofte i norsk, men de har ikke en semantisk mening på enkeltordsnivå som kan reflekteres i en wordle. (ja, det er en distinksjon mellom å være f.eks ‘i Drammen’ eller på ‘på Drammen’, men denne reflekteres ikke når alle ord splittes). Når ordene og deres frekvens er bestemt begynner plasseringsjobben, og denne er ganske vanskelig å få til (forsøk  å lage en algoritme for å best organisere alle koffertene for bagasjerommet i en bil, hvor alle koffertene har forskjellige størrelse og fasong).

Hvordan gjør vi det?

Vi skal velge en løsning som ligger i mellom Wordle og en hvor vi må utvikle alt helt fra begynnelsen. Biblioteket WordCram for Processing gjør jobben ganske enkel. På WordCram sine sider kan du også se et bilde av den amerikanske grunnloven, og dersom du syntes vårt resultat blir likt så stemmer dette, siden det er fra denne visualiseringen inspirasjonen til vår versjon av den norske grunnloven kommer fra.

US Consitution visualized through WordCram

Vi kommer til å låne fire ting fra denne presentasjonen. Den enkleste å kopiere er bakgrunnsfargen som med sin offwhite minner om offisielle papirer (og da snakker vi ikke om 80 g/m² A4 papir). Denne fargen representeres ved RGB-hex fargekoden #F5F1E3.

Vi skal også låne begge fontene som brukes i visualiseringen. Den ene, med håndskriftassosiasjoner heter, typisk nok, Jane Austen og kan lastes ned fra dafont.com. Den trykk-inspirerte fonten heter AveriaSerif-Regular. Vi kommer til å bruke Gruesa versjonen av denne. Begge to kan lastes ned fra i pakken med Averia fonter fra IOtic.

Det siste, og kanskje største tingen vi kommer til å låne er framgangsmåten. Koden som brukes ser slik ut:

[sourcecode language=”java”]
import wordcram.*;
import wordcram.text.*;

void setup() {
size(600,500);
background(#F5F1E3);

PFont averia = loadFont("Averia-Gruesa-48.vlw");
PFont janeAusten = loadFont("JaneAusten-48.vlw");

new WordCram(this)
.fromTextFile("grunnloven1814.txt")
.withFonts(averia, janeAusten)
.withColors(#000000)
.angledAt(0)
.withWordPadding(1)
.drawAll();

}
[/sourcecode]

Vi har gjort noen endringer. Spesielt i forhold til font. Istedet for å laste inn systemfonter har jeg gått inn i Processings font verktøy (“Tools”->”Create font”) og laget .vlw filer for fontene.

Grunnloven

Vi har nå satt opp rammeverket hvor magien skal skje, men vi trenger fortsatt hovedingrediensen, nemlig Grunnloven av 1814. Den finner vi heldigvis på Wikisource (et godt sted for kilder). Kopier teksten, legg den inn i en tekstfil som igjen lagres i mappen data i Processing-sketchen din. Bruk en teksteditor som TextMate eller Notepad, ikke en tekstbehandler som OpenOffice eller Word.

Et voila

Grunnloven av 1814 WordCloud
Ordsky Norges Grunnlov

Verdt å merke seg er at det kommer et nytt resultat fra den bakenforliggende algoritmen hver gang den kjøres. Derfor vil resultatet også kunne se slik ut

Grunnloven Wordcloud
Wordle, eller Wordcloud, av Grunnloven 1814 i svart. Denne gangen med Jane Austen-foten mer dominant

In Technicolor

La oss arbeide videre med utgangspunktet vi allerede har. I visualiseringen av den amerikanske grunnloven brukte de blått og rødt. Dersom vi skal visualisere grunnloven slik at den fremstår “mer norsk” er den fargekombinasjonen som vi først tenker på (si gjerne ifra hvis du tenkte på en annen fargekombinasjon): rødt, hvitt og blått, eller som vi også kan kalle de: #EF2B2D, #FFFFFF, #002868.

Igjen fra Wikipedia:

The flag of Norway consists of a  dark blue  cross (colour: RGB #002868; Pantone PMS-281U) with white borders on a  bright red  background (RGB #EF2B2D; Pantone PMS-032U). The vertical arm of the cross is shifted towards the flag pole as in the other Scandinavian flags. The overall width−to−height proportions of the flag are 22 to 16, and the individual coloured fields measure 6+1+2+1+12 in width and 6+1+2+1+6 in height.

La oss endre koden fra tidligere til å ta med fargene:

[sourcecode language=”java”]
import wordcram.*;
import wordcram.text.*;

void setup() {
size(600,500);
background(#F5F1E3);

PFont averia = loadFont("Averia-Gruesa-48.vlw");
PFont janeAusten = loadFont("JaneAusten-48.vlw");

new WordCram(this)
.fromTextFile("grunnloven1814.txt")
.withFonts(averia, janeAusten)
.withColors(#EF2B2D, #FFFFFF, #002868)
.angledAt(0)
.withWordPadding(1)
.drawAll();

}
[/sourcecode]

Resultatet er nå annerledes og i farger (selv om hvitt på off-white blir noe rart. Hvilken farge mener du passer best?)

Nå, to år før grunnlovsjubileet har du en wordcloudversjon av grunnloven.Wordle eller Wordle med Norges grunnlov 1814

Grunnloven av 1814 wordle wordcloud

Visuell programmering i Processing

Visuell programmering i Processing

I dag holdt jeg en liten innledning og workshop om visuell programmering hos Norsk Telemuseum på Kjelsås. Jeg ønsket å vise fram programmeringsmiljøet rundt Processing og var også innom forskjellige emner jeg mener er viktig i dagens IT-landskap. I hovedsak orienterte dette seg om data og interfaces, eller data og dingser som jeg kalte det. En artikkel på det kontekstuelle kommer snart, men inntil videre kan du forsøke deg på oppgavesettet jeg lagde til den praktiske gjennomføringen av kurset. Jeg tror denne praktiske delen godt også kan fungere som en del 1 i serien “lær programmering med processing”.

 

Et enkelt program:
Syntaks introdusert: Kommentarer, print(), println(), size().

+ Start opp processing
+ Skriv en åpningskommentar på toppen av programmet ved å sette inn //. Alt som følger etter disse tegnene fram til linjeskift vil ikke bli prosessert. Dersom du ønsker flere linjer med kommentarer kan du bruke /* i begynnelsen av kommentarblokken og avslutte med */
+ Klikk på play-knappen for å åpne sketsjen. Hva dukket opp. Klikk på x-symbolet i vinduet som åpnet.

+Skriv kommandoen size(x,y) i programmet. Denne kommandoen tar to parametere. X angir bredden og y angir høyden i pixler. Erstatt x og y med nummere. Forsøk forskjellige tall og se resultatet ved å klikke på play etter å ha endret et av tallene. Normalt sett skal variblene være mellom 1 og 1200, avhengig av oppløsningen støttet av datamaskinen. Du må avslutte en kommando med et semikolon.

+ Skriv ut en tekst til terminalen ved å bruke kommandoen print() og println(). Dette kan være en tekststreng, et nummer eller tegn. Tegn og tekststrenger må termineres, dette gjøres ved å sette et hermetegn i hver ende.

Resultat:

//Dette er en kommentar
/* Vi kan også kommentere
over flere linjer med kode */

size(200,300);
print(“Dette er en commando fra programmet”);
println(“Hello World!”);
print(“Dette skal komme på en ny linje”);

Variabler
Syntaks introdusert: int, float, String, char, boolean, +, -, /, *
+ Nå har du laget ditt eget lille program. Forsøk nå å bytt ut nummerene fra size med variabler. Variablene skriver du ved å først initialisere dem med datatype og navn for deretter å sette en verdi til dem. Variabler er plassholdere for verdier.

int x = 200;

 int y = 500; 

+ Opprette et par nye int-variabler. Velg navn selv, men følg
navnekonvensjonene som bestemmer at en variabel skal begynne med liten bokstav og ikke ha mellomrom. Sett disse til forskjellige tall og forsøk og opprett nye variabler ved å utføre matematiske funksjoner på eksistrerende variabler inn i nye.

+ Opprett en variabel for en tekststreng og skriv en velkomstmelding til denne (Bruk type String i stedet for int). Deklarer variablene på toppen av dokumentet og referer til det nedover. Bruk regneartene til å legge verdier inn i nye variabler. Eksempel:

int i = 10;

String k = “Dette er en tekststreng”; 

int j = 5;

int k = i* j;

println(k);

Vi har hittil benyttes oss int og String (String skrives med stor forbokstav, mens alle andre datatyper vi bruker her skrives med små bokstaver). int er kort for integer (heltall), og String er en tekststreng, som også kan være tall som ikke kan regnes på. I tillegg bruker vi float som er flyttall (eks 1.2), char som er enkelttegn og boolean som true eller false. Forsøk å utfør følgende kode, og gjett hva du får:

int a = 3;

int b = 2; 

int c = a / b; 

println(c);

+ Forsøk å endre a eller b og c til float. Hvilket svar får du nå.
+ Opprett en variabel boolean og sett denne til false eller true. Hva skjer? Skriv denne ut.

Resultat:

// Variabler for size-kommandoen

int x = 200;

int y = 500;

// Tekst

String tekst = “Dette er en hilsen”

boolean test = false;

println(test);

//Variabler for å teste verdier

int i = 10;

int j = 5

int k = i* j;

println(k);

//Variabler for å teste heltall og flyttallsdivisjon

int a = 3;

float b = 2;

float c = a / b;

println(c);

//Dette er en kommentar

/* Vi kan også kommentere over

flere linjer med kode */

size(x,y);

print(“Dette er en commando fra programmet”);

println(tekst);

print(“Dette skal komme på en ny linje”);

 

Punkter, linjer og firkanter i Processing
Syntaks introdusert: point(), line(), rect().

Nå som du har kjennskap til variabler og funksjonskall i programmering kan vi begynne å more oss med funksjonaliteten i Proessing. Funksjonene point(), line(), og rect() tegner det de heter. Point tar to verdier, x og y som blir punktets koordinater på lerretet. Line tar fire argumenter, de to første er x og y for utgangspunktet og de to siste er x og y for sluttpunktet. Rect tar også fire argumenter: x, y, bredde og høyde.

size(500,500);

rect(10,10,50,50);

rect(20,60,200,100);

rect(200,400,70,70);

line(0,0,500,500);

line(0,500,500,0);

I denne introduksjonen tar vi bare for oss en 2D kontekst. I denne konteksten refererer vi til posisjoner som i et kartesiansk rom. Utgangspunktet for koordinatene er øvre venstre hjørne. Derfor vil høyere tall på x aksen bevege objektet mot høyre, og høyere tall på y aksen nedover. Dette kan du selv forsøke ved å endre på nummerene i koden ovenfor. Fra dette eksempelet kan du også se hvordan objektene blir tegnet til lerretet. Dersom et objekt er tegnet og et nytt objekt seinere skal være i samme område blir det siste tegnet over det første.

For å skape en kode det er lettere å endre (selv om Processing programmer aldri burde bli så lange at all oversikt blir borte) kan du bruke height og width, som er konstanter satt av programmet. Disse er også reserverte ord i programmet. La oss teste dette ved å endre på koden for de to siste linjene i eksempelet over.

line(0,0,width,height);

line(0,height,width,0);

Å tegne punkter er ganske kjedelig på dette tidspunktet, men frykt ikke, om litt kommer du til å kunne tegne punkter på en annen måte, noe som gjør det mye morsommere.

 

Variabler og if/else
Syntaks introdusert: if, else, blokker.
+ Nå begynner det å bli en del kode, så nå kan du enten opprette en ny fil eller fjerne all teksten ved å markere koden du allerede har og fjerne denne på samme måte som i en tekstbehandler.
+Opprett en if-blokk. Den ser omtrent ut som dette:

if(logisk spørring) {

// Gjør noe dersom logisk spørring er tilfelle

} else {

// Gjør noe annet dersom det ikke er tilfelle

}

En logisk spørring resulterer i en boolean verdi som kan være enten true eller false. For enkelhetsskyld opprett en boolean variabel og sett denne til true. Referer til denne i if(variabel). Disse logiske spørringene etterfølges av en blokk. Tenk på denne blokken som en inndeling av kode som gjennomføres. Du kan gjøre så mye du ønsker i blokken, og denne kan bestå av en kommando eller hundre, men husk å start og slutt blokken med krøllparanteser.

boolean test = false;

if(test) { 

print(“Denne kommer ikke til skrives ut ”); 

println(“Kan du finne ut hvorfor?”);

Det hele blir mer interessant når du kan teste på verdier i de logiske spørringene. Typiske spørringer for tall er ==,eller en kombinasjon av disse.
 int i = 50; 
 if(i == 20 ){  
 println(“Hvordan kan du få skrevet ut dette?”); 
 } 

Her kan du se at = og == er to forskjellige. Den første setter er verdi til en variabel og den andre tester om to verdier er de samme.

+ Forsøk nå å lage en egen if-else forgrening der du skriver ut noe dersom en verdi er sann og noe annet dersom dette ikke er tilfelle.

 

Løkker
Syntaks introdusert: for, while.

Løkker er et nyttig redskap for å gjøre en handling mange ganger. De består gjerne av en logisk spørring, en blokk og en endring. Den enkleste løkka er while(), som til norsk kan oversettes til mens. Så for å oversette den syntaktiske meningen kan du si at en while løkke går mens spørringen er sann.

//setter variabelen i 
int i = 0; 
//mens i er mindre enn tusen 
while(i < 1000){ 
//Denne har du ikke sett ennå, men her skriver vi ut 
//verdien av i 
println(i++); 
// i++ er kortform for i = i+1 
} 

+ Hvis du vil være litt vågal kan du nå forsøke å endre i++ til i. Gjett hva som skjer først og deretter test det. Litt av moroa med å programmere er at uansett hvor mange feil du gjør skjer det ikke noe veldig alvorlig.

Den andre formen for løkker er for()-løkker. Disse er litt mer avanserte enn while, og ser typisk slik ut:

for(int i = 0; i < 100; i++ ){ }

Hvis du tenker på hva slags funksjoner som en løkke typisk inneholder, er alle disse implementert i en for-løkke. Vi kan forstå en for-løkke som for(startvariabel; utgangskriterie; inkrement) { blokk }. Når en variabel blir opprettet innenfor en blokk er den usynlig utenfor. Deklarer derfor variabler du ønsker å aksessere igjennom hele programmet utenfor en løkke, eller funksjon. I eksempelet ovenfor ser du at i blir deklarert i den logiske spørringen.
+ Forsøk å skriv ut verdien av i nedenfor den siste krøllparantesen. Hva skjer? Hva skjer dersom du deklarerer i ovenfor for-løkka?

+ Tegn et stort antall geometriske gjenstander i Processing ved hjelp av løkker. Forsøk å endre noen av parameterene ved å trekke inn iteratoren i løkka i tegnefunksjonene.

 

Funksjoner
Syntaks introdusert: funksjoner, void

Å kunne skrive kode er vel og bra, men når koden blir lengre oppstår det et behov for å abstrahere vekk alle detaljer. Hvis du bruker, som vi har gjort tidligere i heftet, bokstaver som variabelnavn kommer du ganske raskt til å gå tom, dessuten kan det være vanskelig å huske mange navn. En annen fordel ved å lage metoder er at disse kan kalles fra hvilket som helst sted i programmet. Dette gjør det enkelt å hoppe fram og tilbake i koden.

Metoder deklareres med
returtype navn(argument1, argument2, argumentN){
//Her skriver du innmaten
}

Returtyper kan være alle datatyper, eller ingenting. Dersom du bruker en datatype må du bruke utrykket return samt en verdi eller variabel som inneholder data av typen oppgitt.
Denne funksjonen tar to argumenter av typen heltall og returnerer et heltall med summen av disse to tallene.

int plusser(int tall1, int tall2){ return tall1 + tall2; }

Denne funksjonen returnerer en sannhetsverdi av et heltall om hvorvidt dette tallet er et partall. Denne funksjonen introduserer et nytt tegn % – modulo – Dette utrykket returnerer rest ved divisjon. Premisset er at et partall som deles på to ikke skal returnere en rest. If grenen tester om dette er sant og returnerer true hvis dette er tilfelle.

boolean isPartall(int tall){

if(tall %2 == 0){

return true;

} else {

return false;

}

 

setup() og draw()
Syntaks introdusert: setup(), draw(), noLoop().

Processing har to funksjoner du som programmerer skriver. Disse heter setup() og draw(). Selv om du kan lage et program uten disse, kan det være en fordel å stykke programmets funksjonalitetet, som ikke allerede har sin egen funksjon, inn i disse blokkene. I setup() skriver du kode som eksekveres en gang i begynnelsen av programmet. Her kan du plassere size() metoden samt andre definisjoner og kall som ikke trengs å være en del av draw()-loopen.

I draw() skriver du all funksjonalitetet som kjøres for å tegne. Skal du lage geometriske figurerer er det lurt å gjøre dette her. Denne funksjonen kjører helt til du kaller noLoop(). Du kan også kalle noLoop() i setup() for å la programmet kjøre kun en gang.

Verken setup() eller draw() returnerer en verdi og tar derfor returneringstypen void.

Et godt utgangspunkt kan se slik ut:

void setup {

size(200,200);

noLoop();

}

 

void draw() {

point(width/2, height/2);

}

Dette lille programmet setter en prikk midt på skjermen.

 

Farger
Syntaks introdusert: color(), background(), fill(), stroke(), noFill(), noStroke()

Farger kan få prosjektet til å se mye flottere ut, og kan også være en effektiv måte å gruppere forskjellig informasjon. Processing støtter forskjellige typer farger, men her bruker vi RGB-baserte farger hvor hver av verdiene settes til et tall mellom 0 og 255.

color() brukes for å sette en farge til en variabel av typen color. F.eks
color c1 = color(0,0,255);
Dette gjør det enkelt å referere til farger senere i programmet og slik gjøre det enkelt å holde en fargeplan. Du kan bruke fargevariabler eller fargeverdier igjennom programmet
background() tar en farge og setter denne til bakgrunnen. For å lage en applikasjon der ting skrevet til lerretet ikke blir der i neste runde av draw() må du kalle background() i draw. Det kan være lurt å la background være det første som blir kalt i draw().

Objektene du tegner på skjermen i Processing er litt som ting i Photoshop og andre steder, de har en linje som følger formen og innmat. Du kan sette hvilken farge disse har ved å kalle fill() og/eller stroke() før du tegner en form. Fargene du setter med disse metodene vil være der til du setter de på nytt.

Siden vi allererede har vært igjennom blokker og løkker la oss tegne noen farger. Denne lille kodesnutten kommer til å tegne rødt, grønt og blått i steg fra svart (0) til full farge (255)

/* Skriver ut fargene i RGB-fargebånd. Går i steg på 2px per verdi fra 0 til 255, 

skriver ut hver farge i 50 pixler brede remser. */ 

 

void setup() { 

size(3*50, 3*255); 

// Setter størrelsen til antall bånd 

//* 3 og antall steg *3. 

noStroke(); 

//Bruker ikke rand-farging 

background(255); 

//I utgangspunktet hvit farge 

noLoop(); 

// Programmet eksekverer og stopper. Draw kun kalt en gang. 


 // Tegner rødt
 void draw() { 
 for(int r = 0; r < 255; r++){
 fill(r,0,0); 
 rect(0,r*3,50,3); 

 // Tegner grønt 
 for(int g = 0; g < 255; g++){
 fill(0,g,0); 
 rect(50,g*3,50,3); 

// Tegner blått 
for(int b = 0; b < 255; b++){
 fill(0,0,b); 
 rect(100,b*3,50,3); 
} 

 

Mus

La oss returnere til punktene. Disse ønsket vi å ikke tegne selv siden de er veldig små, og du først ser morsomme resultater når du har mange av dem.

+ Skriv en setup() funksjon som setter størrelsen til 500×500 pixler. Husk å ikke ta med kallet til noLoop(). Ta deretter å skriv en draw() funksjon som plasserer en prikk midt på skjermen. Bytt nå ut prikkens x-koordinat med mouseX og prikkens y-koordinat med mouseY. Beveg musepekeren rundt på skjermen.

+ Forsøk å skrive bakground(155) i begynnelsen av draw() funksjonen. Hva skjer? Ta den vekk. Hva skjer nå?

 

Arrays og online ressurser

Et annet viktig element innen programmering er arrays. Denne kan være av alle datatyper og er en organisert samling av data. Gå inn på processing.org og se etter array i dokumentasjonen.

+ Forsøk å opprett en array med 10 forskjellige tekststrenger. Skriv deretter ut verdien av hver av disse ved hjelp av en for-løkke og println. NB: Dette er vanskelig. Se om du finner ut hvordan du kan gjøre dette ved hjelp av google, eller kontakt meg.

 

Jeg håper å komme tilbake med mer Processing-kode snart, men i mellomtiden anbefaler jeg tutorialene som ligger ute på Processing.org. Temaer jeg ønsker å dekke neste gang inkluderer å lese til og fra fil, XML og objektorientering.

 

Bildet er tatt fra Flickr brukeren blprnt. Det er lisensiert under en Creative Commons lisens. 


Lær programmering med Processing: del 0

Lær programmering med Processing: del 0

Nå er det lenge siden jeg har oppdatert bloggen med en post på norsk. Dette skyldes at jeg har arbeidet med en master på engelsk, og har ønsket å kun fokusere på et språk. Nå er oppgaven levert inn, og jeg kan endelig igjen bruke tid på å skrive uformelt og jovialt om ting der interessen komme og går. Det har vært en interessant prosess å skrive en større oppgave, men jeg har savnet å skunne skrive kortere artikler uten å måtte tenke på kapitler eller akademisk ordlegging. En av mine ideer igjennom året, som utenom programmeringen av et lite spill har vært basert rundt skriftelig tekst som formidlingsmedium, var å lage en liten innføring i programmering. Jeg har iløpet av året gjenfunnet interessen for programmering og stiftet bekjentskap med programvare som gjør det å lære programmering enkelt og morsomt. Denne bloggposten er den første av en liten følgetong jeg har planlagt der jeg ønsker å utvikle mine egne programmerings- og formidlingsegenskaper samtidig som jeg kan gjøre noe verdifullt for webben, nemlig skrive en kort og enkel programmeringsguide. For å se alle artikkler som er skrevet i denne innføringsguiden kan du følge taggen innføring i programmering. Dette blogposten er tenkt som en del 0, altså en veldig veldig enkel innføring samt en veiledning på hvor du kan få tak i programvaren.

Processing

Processing er et bra verktøy å bruke for å lære seg programmering. Det er gratis å laste ned for PC, Mac og Linux. Det kommer innebygd med terminal, en startknapp og masse eksempler, men kanskje viktigst av alt er at det har utviklet seg et community rundt programmvaren som utvikler mange interessante kodebiblioteker, gjennomganger, hjelp og samtaler. I tillegg er det utvilket en Javascript versjon som benytter HTML5s Canvas element så å lære Processing kan være et godt utgangspunkt for å lage gode web-applikasjoner. En annen fordel med Processing er at det strengt talt ikke er et eget språk, men en litt annerledes anvendelse av SUNs Java. Dette betyr at du ved å lære Processing også lærer et av de mest brukte programmeringsspråkene, dette betyr også at du kan utnytte javas enorme antall biblioteker i dine programmer. Ønsker du å legge inn noe nettverksprogrammering, programmere for parallelle tråder eller noe annet hvor det ikke er skrevet eksplisitte bibioteker for Processing kan du benytte et java bibliotek til å gjøre tilsvarende.

Kom i gang

For å starte å programmere trenger vi kun å laste ned programvaren. På processing.org under “download processing” finnes det installasjonsfiler for både Mac OSX, Windows og Linux. Installasjonen skal være en forholdsvis enkel prosess. Når du har lastet ned og installert programvaren kan du starte denne. Du skal da få opp et vindu tilsvarende dette, men med dagens dato. Dette er utviklingsvinduet i Processing, og det er i dette programmet magien skjer. I det hvite feltet skriver du koden, i det svarte får du terminalmeldinger og ved hjelp av ikonene øverst på siden kan du (fra venstre mot høyre) starte, stoppe, opprette en ny sketch, laste, lagre og eksportere programmet du har laget.

 

Vi kan nå teste om programmet fungerer som det skal. Dette kan vi sjekke ved å skrive inn følgende kode i det hvite feltet. Når du har skrevet eller kopiert koden inn i det hvite feltet kan du trykke start-knappen som er representert ved det velkjente play-symbolet.

 

[cc lang=”java”]
float x = 20;

float y = 20;

float w = 50;

float h = 50;

void setup() {

size(400,200);

println(“Hello World”);

rect(x,y,w,h);

rect(width-x-w,20,w,h);

ellipse(width/2, height/2, 40,40);

}

[/cc]

 

Når du klikker start, hvis alt er som det burde være, vil et nytt vindu åpne seg. Dette vinduet vil være 200×400 pixel og inneholde to kvaderater og en sirkel. I tillegg vil du i terminalen få skrevet meldingen “Hello World”. Hvis du leser igjennom koden linje for linje har programmet gjort akkurat hva vi ba det om å gjøre. La oss sammen gå igjennom koden linje for linje: Først initialiserte vi en variabel x og satte verdien av denne til 20 (Vi kommer til å gå mer inn på forskjellige datatyper i en seinere guide), vi gjorde det tilsvarende med y. Variabelnavnene er uten betydning for datamaskinen, men i vår sammenheng representerer x et punkt på den horisontale aksen, mens y representerer et punkt på den vertikale aksen. Variabelene w og h, som vi kan tenke i betydningen width and height, er satt til 50. Disse tallene har ingen betydning ennå bortsett fra sin verdi ennå. Etter hver kommando bruker setter vi inn et semikolon for å skille kommandoene fra hverandre.

 

void setup() {} er metoden setup, som er en dedikert metode for å sette opp en sketch i Processing. Alt som er skrevet i mellom krøllparantensene er en del av denne metoden. I tillegg til setup har Processing en annen metode som brukes til å tegne og det er draw. Vi kommer mer inn på forskjellen og bruken av disse i en seinere artikkel. Setup er ledet av ordet void, denne plassen er brukt for å fortelle systemet hvilken returverdi en metode skal returnere, og i denne sammenhengen skal ikke setup returnere noe som helst, derfor void. I de “vanlige” parantesene etter setup kan du sende variabler som metoden skal bruke, men i denne sammenhengen trenger vi ikke det. Setup har tilgang til variablene vi allerede har laget (x,y,w,h).

 

Inne i setup kaller vi fem metoder hvorav fire er unike. Den første metoden vi kaller er size. Denne metoden, som bestemmer størrelsen på vinduet vi skal opprette tar to tall, det første er hvor bredt vinduet skal være og det andre bestemmer høyden. Når dette er gjort bruker vi println, som er en forkortelse for print line, for å skrive en kommando til terminalen.

De to rect metodene og ellipse metoden brukes for å tegne de formene vi så da vi startet programmet. Rect som er en forkortelse for rectangle tar fire argumenter. X posisjonen, y posisjonen, bredden og høyden. Som du kan se har vi matet metoden med variblene vi bestemte helt i begynnelsen av programmet. Vi bruker variablene for å mate metoden med tall, og metoden hadde gjort akkurat det samme om vi hadde skrevet rect(20,20,50,50). Dette er illustrert i vårt neste metodekall. Her er bredden, høyden og y-posisjonen den samme, men for å få et symetrisk forhold til vårt tidligere rektangel har vi snudd litt om på regnestykket som bestemmer posisjonen. Med mindre vi gir systemet beskjed om noe annet vil x og y koordinatene gitt til rect bestemme posisjonen til øvre venstre hjørne i rektangelet.

Her ser du en liten og simpel illustasjon av hvordan programmet skal se ut gitt koden ovenfor. Jeg har lagt i koordinatene for hjørnene for å illustrere konvensjonen. Tallet før komma tilsvarer x og tallet etter tilsvarer y. Koordinatsystemet starter i øverste venstre hjørnet, men vi kan flytte dette rundt (noe som vi også vil komme inn på i en artikkel seinere).

 

For det siste rect kallet og for ellipse kallet har vi også benyttet konstantene width og height. Disse tilsvarer bredden og høyden som vi satt i size() metoden, og verdien av disse vil forandre seg tilsvarende størrelsen på sketchen. I metoden ellipse har vi delt høyden og bredden på to for å finne sentrum. Siden vi setter både bredden og høyden til å være det samme får vi en perfekt sirkel. Metoden ellipse tar også fire parametere og disse tilsvarer de vi brukte i rect: x-posisjon, y-posisjon, bredde og høyde.

Du har nå fått en veldig kort forklaring av hvordan processing kan brukes. Ta gjerne å lek med metodene gitt i denne guiden, men forsøk også andre metoder. I processing APIet (Application Programming Interface) kan du finne mange andre metoder. Denne guiden har vært ganske grunnleggende, men jeg håper å komme tilbake med noe mer spennende og lærerikt neste gang. Målet for denne lille blogposten har vært å vise deg hvor du kan få tak i programmet og hvordan du kan lage din første sketch. Ta gjerne å forsøk med noen av guidene på processing siden, eller se nærmere på noen av eksemplene du kan finne dersom du velger “open” deretter “examples… “.

 

Vi fortsetter med vår guide senere og vil fortsette med mer om programmering og om processing. I de første postene vil vi gå nærmere inn på data typer, hvilke metoder vi kan bruke for å tegne, vi skal lage våre egne metoder samt lese fra disk. Alt dette og mer kommer spredt utover høsten.

 

 

 

 

 

Nonlinear narrative

Nonlinear narrative

If you are a frequent reader on this blog you have probably seen the earlier updates on the computer game I created together with Tom, Brendan, Gary and Elias last semester. If this is your first time here, or you just visited by accident earlier: welcome! You can find more information about the process clicking the ‘DMSP’ banner in the word cloud in the right toolbar.

It has been an interesting process from the early stage definition and clarification of what we want to do and how to do it, to the creation of code, and sewing everything together. It has been beneficial also to gain some programming experience, as I got the ability to brush  some dust off  of my java knowledge, and to learn more about visual programming and the great (and efficient) Processing “language”.

The project is now over, but your adventure has just begun. On the project’s website you can download the code and start gaming. The source code is also published in case you want to have a look, or build on it yourself. Enjoy!

 

Above: The in-game screen with the detective’s desk, and various interactive objects. The map over New York City and a text-feed printing out content as the player explores the city.

 

Nonlinear Narrative in Processing

Above: The processing IDE with the beginning of the draw method pictured. You can find the code on the project’s homepage as well as everything else needed to get the game run.

 

The master thesis process has now begun, and I expect to post more frequently with progress from this.

New version of Non-linear narrative

New version of Non-linear narrative

As the second semester in my master program is moving towards the end I have some content I want to share with you all. Beside the digital marketplace course and a reading course I have been working on a digital media studio project, or as we call it, the DMSP. In this course sound designers, the digital design media students, the composers and some of us, the digital media and culture students, have been working together on different projects using all kind of technology to solve a huge variety of tasks. From the presentations I had the pleasure to visit I have seen, and in some cases tried, everything from the controlling four spheres with four joystick and entertaining video about an unlucky rabbit, to projection mapping, a tactile translation program, a three dimensional game in Blender and a mobile music generator utilizing the navigation functionality on Android phones.

Together with Brendan, Tom, Elias and Gary I was in the Non-Linear Narrative Group, a group whose mandate were to a certain degree more conceptual than methodological. It has been very interesting, and I have got to know the visual Java-based programming environment Processing very well.  The project has evolved in a process based on agile programming techniques, with relative frequent iteration of code and content. From version 0.001 which consisted of a grid with ellipses  from programming code, we now have a running interface with a desktop filled with tools, a map, a text feed, and an interesting sound system utilizing Max MSP over Open Sound Control.

Even though the project is not all over, I’m going to give you the ability to run the program on your computer, but since the program still need some adjustments we have not branched out a running code for Windows, Mac OSX and Linux. Instead you can download this. The source code will need the Processing programming environment and a couple of libraries. Processing, and links to the libraries can be found here.

If you have patience to wait yet another week or two, we will release a stand alone version without these requirement in a couple of weeks.

Picture: The desk, from which our protagonist explores the criminal world of New York City. Animation is by Tom O’Rourke.

No more testing inferno

No more testing inferno

If you have spent time trying out the endless opportunities contained in the art of programming you know how frustrating testing can be. Endless nights and days with an endless amount of  changing variables and recompiling. A missing semicolon, a misspelled word, well, the reasons to frustrations are many.  I know how it is, and I feel with you, you have my sympathy when you trying to clear up a for-for-for-for loop with ten different curly brackets, and that’s just for the search algorithm. When you then have additional twenty logic switches to check the conditions of your variables and maybe alter them, then life can be quite hard. If you are working on a big project, you probably have test functions, and ways to find and correct these problems without much hazzle, but what if you want to change the values instantly? Or if you are just making a little sketch after an idea and have no intention spending lots of time on the “run-stop-change-run” iteration? Too much flickering can easily remove the fun from your projects, and what about instant gratification. Everyone love some instant gratification, and here is a little program which can give you instant gratification and probably make your life a little bit better, or just give you a moment of joy. I do not want to promise you anything, but hopefully this little fix can help you with your testing inferno.

The program is inspired by the possibilities of Open Sound Control which we implemented into our Digital Media Studio Project to control sound signals sent from Processing and played in Max MSP. This little experiment consists of Processing sketch with a listener, waiting for variables to arrive over port 4000 (you can of course change all the parameters as you like), and a Max MSP patch with 5 sliders coding values from 0 to 255 and sending them.
Files:

Max MSP patch

Processing Sketch

Picture from test1

Picture from test2

DMSP: A little Game

DMSP: A little Game

The Non-linear Narrative group, where I’m one of the members, handed in the first assignment in the Digital Media Studio Project on Friday. Together with Brendan, Tom, Gary and Elias I’m working on creating a story which is determined by a random computer model in combination with some pre-written elements. This approach poses some difficulties in the manner of how to superimpose story elements on something which has elements of randomness, and where you are without total control.

We have chosen a digital approach using a computer simulated world where programmed agents influence the story as they move around and collide with each other. This computer model can be combined with auditory and visual elements to create a multimedial experience. We already have a basic computer model, some stunning visuals and interesting sound. Since our submission for the first assignment is a web page I thought I could share a link to the link here so you could have a look. We also have a blog where we try to share thoughts and ideas on our assignment.

If you want to try out the computer model, or play around with the Source Code. I’ve added different versions of the program here for you to download.

Files for Download

Source Code (Processing) with all files.

Source Code (Processing) just .pde file.

Windows.

Mac OSX.

Linux.

 

 

Enjoy

Object Oriented Programming

Object Oriented Programming

This post is written as a blog post on the Digital Media Studio Project blog Non-Linear Narratives.


In this post I want to discuss some aspect of object oriented programming, and some philosophy behind the non-linear computer program in its current version.

The program is built in Processing, which utilizes the Java programming language, and is ideal to make sketches with its easy-to-create graphical user interface (GUI). Processing has a clear division between its two runtime methods which are crucial for its execution: setup runs once as the program is started, and draw runs perpetually during runtime. The advantage using processing lies in the flexibility the user interface, and the simple instructions which has to be done to get action onto the screen. The threshold to get a visual representation is much lower than e.g. Swing. Since Processing is built on Java, we can also benefit from the strong usability, the many packages developed and the basis of object oriented programming.

In the case of Java the magic words for object oriented programming are class, new and ‘.’ (punctuation). The class name is used in the beginning of a class, and is followed by a descriptive name where the first letter, by convention, should be in capital. Two curly brackets are placed to mark the beginning and the end of the class. The class does not need an explicit constructor, but if you want to send some attributes to the class when you initialize it you should make one. The ‘new’ keyword is used to express that a new object should be created – or instantiated – from the class (Thanks to Kebman pointing this out). Metaphorically can we perceive the class as a mold, and the objects as casts created from this, and which constructor defines the customization.  This is followed by the name of the class and attributes encapsulated in parenthesizes. The ‘.’ is used to call upon a method, or to access or alter one of the attributes contained by the class. This is done by placing the punctuation mark in between the pointer to the class and the attribute or method you want to access, call or alter.

The object oriented programming has been changing the way the world is represented within the computer since it was first invented in Simula 67 by computer scientists Ole-Johan Dahl and Kristen Nygård in the 1960s. Today this method is deeply integrated in many computer languages such as C#, Java, Lisp and PHP. Its advantages lies in the possibility of modularisation, encapsulation, messaging and abstraction as well as a way of representing reality which can be traced back in the history of philosophy.

Well, let us move from the syntax and history to the more philosophical ideas behind this way of perceiving the world. Do you remember Plato, the old Greek philosopher. He operated with two different world of existence. In his metaphysics things did not only exist in their earthly being, but also in a world of ideas. Without discussing whether this is a good or a true way of experiencing the world let us just keep the idea in our head (Plato’s concept) as we move to a more language bound example, the difference between the ‘the actor’ and ‘an actor’, here the former is the decisive actor standing in front of you in the queue, or in the neighbouring area, while an actor could be any actor, however ‘an actor’ could not be ‘an area’. So there are some distinctive features which separates actor from area. Let us agree upon these as the attributes, functions and relationships held by the classes.

With this, hopefully a bit confusing in mind, let us move on to a visual representation of our program.

This is a Unified Modelling Language (UML) class diagram of the program so far. If you remember that we spoke about the setup and draw class in the Processing language, or the Actor and Area. Well here is everything we need to know (attributes) and do (methods), as well as the relationships between them. Let us have a closer look at the class Area. This class has three attributes: it knows its X and Y position in the grid, as well as which actors who are currently visiting. What the area can do is to sign an actor in and out, and, return a binary boolean result whether something is bound to happen in the respective tile. (The execution of the program is all orchestrated by the all mighty control class, and the draw method.) The interesting thing which could happen here is depending on whether the tile has more than one visitor, as you may know, if this is the case then three possible actions can take place (in the current version represented by three separate recordings): Two victim meet, two suspects meet or one suspect and victim meet.

The classes Victim and Suspect are in the current version just used to identify the different objects, but can be expanded to act differently. Since they share the common superclass actor, they are in this version acting the same way.

The classes we see here is the mould. It is the idea, to use Plato’s term. As the program starts up the setup method calls upon a creation method in the control class which creates objects from the classes. How many are dependent on global variables set in the program, but currently we are operating with 16 times 16 areas (256 in total), 6 suspects and 2 victims. If we take a closer look at the areas these are stored within an double array Area[16][16] which is a great way of representing a map, and works very good with double loops to iterate through.

I hope this post was able to explain the concept of object oriented programming more than it caused confusion. The current version of the program code can be found here. Enjoy.

Electronic Workshop Weekend: Arduino

Electronic Workshop Weekend: Arduino

After an inspiring lecture on circuit bending and electronics held by Edinburgh based digital artist Yann Seznec last week I decided to try something new. In this lecture we looked at some interesting possibility in using electronics separately and in combination with computers. This seemed like an interesting domain to check out, so I ordered some electronic components and an Arduino to play with the ideas from the lecture to learn more about it.

Perhaps the most interesting part is that electronics offer us to work at a lower abstraction level than the computer. Another advantage is the alternative inputs and outputs you can use in combination with projects in everything from low level C to high level Max MSP.  Hearing a relay click or to see some simple LEDs blinking gives a feeling of mastery on the same level as sorting algorithms and searching through huge databases, and by getting it to communicate with the computer you can experiment beyond the limits of the sandbox provided in the computer. Why not let a variable in the program be dependent on the temperature in the room, or on the amount of light? Or you can turn it around and let the result of your last budget result in a green or a red lamp blinking. Or maybe you want the number of visitors of your webpage be represented by the frequency of a tune from a speaker. Maybe you want to combine it together with the power of the Internet to take a picture each time your alarm clock goes off and publish this using Twitter or surveillance the toaster through its own blog where it will put a new post as the toast reach for the sky? Well, you have the opportunity.

The most obvious difference from playing around with computers is that the electronic components are physically alterable and the real deal; no surprise, but it has implications. If you simulate a higher voltage than expected or connect something the wrong way in a computer program the worst thing that would happen is that the program prompt a catched error or maybe an infamous null pointer exception. Dealing with real voltages and circuits, the components can bust, but if you make sure not to use anything really powerful and read the instructions when you use more complicated components such as micro controllers you should be OK.  The set I bought contained several components, and endless opportunities. In the beginning I tried to get a LED to flash and to gather input from the photo sensor, but with time and training I was able to do some more advance stuff, and in the end of a long day I managed to controll the time between each exposure on my DSLR (great for time lapse).

The interface between the computer and the components is the Ardurino. This is a little blue board with some analog ports, some digital ports, an USB connector and a power inlet. It is running on open source software downloadable from the homepage. The program is very similar to Processing, and has the opportunity to compile and upload the code, and to receive messages sent from the board. The board can run alone with software uploaded and using the ports on the board you can make small programs, meaing that you don’t need to have it hooked up to the computer to play around. If you want to use wireless technology or controll the board using Ethernet there are shields supporting Bluetooth and RJ45 Ethernet connections available. You can also get smaller components with Ardurino loader if you want to bring with you the logic programmed away from the little blue board.

There is a wide variety of components, and they all have their distinctive features and functions.Measuring temperature, light, radon level, speed, direction, proximity, RFID tags, taking pictures, well you find all kinds of components to hook up, and if you don’t want to buy new, you can always reuse your old toys, as in this video.

As we know from electric and electronic theory, the whole play is about getting the electricity from plus to minus and in between the polarities we can play around. The electricity will find the shortest path in terms of resistance, and the circuiut has to be complete to work. One of the easiest circuits are made by connecting an outlet from one of the digital ports through a LED, further through a resistor and then to ground. The lamp will be switched on when the port is set to high, and accordingly switched off when the port is set to low. This can be realized using the digital port (0 or 1, off or on), but using the analog ports the Arduino can address the lamp with a signal between 0 and 255 (a byte instead of a bit), which makes it possible to dim or to set it to a value in between the 0 and the 1. The repspective ports can be set at both input and output, and this is done really easy through methods in the Arduino “language”, there are also many libraries to do everyting from utilizing advance components with the board to sending messages to different software.

I have created a folder here, where I will put up some source code as I try out different things. I will also see if I can get up some sketches of the components as well. Until further, here are some pictures taken while playing around.

Non-linear Narratives and Agents in Processing

Non-linear Narratives and Agents in Processing

The last weeks my Digital Media Studio Project group and I have been spinning around ideas on how to make a non-linear narrative based on a computer model using agents. This is an interesting way of taking advantage of Object Oriented Modelling, since the agents have attributes and methods relevant to humans. The model is based upon a matrix consisting of two arrays, this model is ideal to represent geographical space, and especially maps seen from above because of the resemblance. We are going to create a story based upon the collisions created in the model, and the aesthetic world will be set to New York and made in a Film Noir characteristics. If you want to know more about the project, you can visit the project’s blog here.

The model we have been playing around with is created in Processing, which is an easy-to-learn version of Java created by MIT to teach programming. It is a great tool, and makes programming easy with accessible functionality built in and much documentation on their web page. Since it’s running on Java you also have the powerful tools and all the packages of this language right at your fingertips. You can download Processing from here, and since it is Open Source, you can play around. It is free, as Richard Stallman would say, as in free beer and in free speech. If you download it and play around, you can find our current (alpha) version here. Enjoy.