krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Kreativ KodeVisuelt kreative, kunstner og designere var brugere af teknologi. Vi overlod udformningen af teknologien til an-dre og brugte med hvad IT-industrien ville levere til os.De seneste 15 år har dette ændret sig. Der er kommet et oprør mod rollen som passive forbruger af informati-onsteknologi. Der er et ønske om at forstå informationsteknologi. Der er kommet et ønske om et udtrykke noget nyt i et nyt medie – fremfor blot at efterligne gamle.

PengeNoget af det bedste software til kreativ kodning er fre-eware (gratis).Ud over at spare penge, har freeware ofte den fordel at den støttes af en stor og engageret gruppe af anvendere (et ”community”). På grupperne websteder kan du ofte hente gode råd, ideer og bede om hjælp. Enkelte stykker software – som f.eks. ”DBN/DesignBy-Numbers” og ”Processing” – har støtte-websteder rettet specielt mod undervisere.

PlatformeDe fleste af programmerne findes både til Windows og Mac OSX. Enkelte endda til iPhones og Android telefoner.

ProgrammeringsfordommeVi tror programmeringskoder ligner volapyk. Det gør de sjældent. De ligner engelsk. Men computere kan være ret strikse med hensyn til den skrevne syntaks.Der er mange ligheder mellem forskellige programme-ringssprog. Har du lært et programmeringssprog, kan du hurtigt forstå andre.Vi tror at programmering kræver matematisk viden. Det gør det måske i enkelte tilfælde, men sjældent på højere niveau.Vi tror at programmering kræver planlægning og kniv-skarp målrettethed. Men på workshoppend vil vi arbejde improviserende og eksplorativt med kode uden at vide hvor vi ender. I virkeligheden udvikles det meste software ved at skrive videre på eksisterende. Vi vil også arbejde med at modificere andres kode.

HistorienMassachusetts Institute of Technology (MIT) har spillet en stor rolle i udbredelsen af konceptet ”Kreative Kode”. Det skyldes især MIT’s ”aesthetics + computation group” under ledelse af John Maeda. Hvis du begynder at kigge på hvem der står bag de forskellige kreativ kode initiativer, vil du opdage at de næsten alle har studeret der. http://acg.media.mit.edu/

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Gratis software til tekstbaseret programmering DBN/Design By NumbersDet allerførste udspil fra MIT til kreativ kodning. Meget enkelt - og meget begrænset (og et meget lille lærred). Kan downloades eller køres i en webbrowser.http://dbn.media.mit.edu/

ProcessingUnder workshoppen arbejdede vi med Processing. Processing er en direkte fortsættelse af ”DesignByNumbers” og er et open-source programmeringsmiljø for kreative, der vil skabe billeder, animationer og interaktioner. Projektet blev startet af Benjamin Fry og Casey Reas, begge studerende fra MIT.Tekniske set er Processing baseret på programmeringssproget JAVA.http://www.processing.org/ ArduinoArduino er et ganske specielt eksempel på kreativ kode. Arduino er både et gratis udviklingsmiljø og en open-source mikro-computer. Udviklingsmiljøet og sproget ligner Processing til forveksling. Arduinoen er ikke beregnet på visuelt skærmdesign, men mere fysiske dimser som f.eks. små robotter, blinkende lamper, arbejde med sensorer og lign. Den specielle mikro-computer er udviklet som opensource hardware, og findes den i utroligt mange varianter. I Danmark koster den almindelige Arduino små 200 kr. Den kan bl.a. købes hos Farnell (http://dk.farnell.com/).Tekniske set er Arduino baseret på programmeringssproget ”C”.http://arduino.cc/ OF (openFrameworks)OF er en slags storebror til Processing. OF kan meget mere og arbejder langt hurti-gere end Processing. Til gengæld er det også en del sværere at lære og meget, meget sværere at installere.OF er en overbygning på programmeringssproget ”C”. For at bruge OF skal du derfor først have en C-compiler og et C-udviklingsmiljø installeret på din computer. http://www.openframeworks.cc/

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Freeware til modulær/visuel programmeringI modulbaseret programmering skriver du ikke så meget kode. I stedet trækker du bok-se ind på skærmen og forbinder disse. Det kan lyde enkelt. Men i praksis skjuler disse systemer en masse funktioner og er derfor ofte svære for en nybegynder at gå til. Lily Lily er et stykke meget specielt software. Det er et plugin til webbrowseren FireFox (som du altså skal have installeret på forhold). Du programmerer ved at forbinde bokse inde i din webbrowsers vindue.http://www.lilyapp.org/

PD (Pure Data) PD arbejde mest med lyd. Det er en gratis pendant til det professionelle og kostbare program Max/MSP. PD kræver et forholdsvist stort kendskab til musik og digital signalbehandling.http://puredata.info/

VVV VVV bruges ofte af VJs (som live visuals til koncerter). Kan være svært at installere (det er aldrig lykkedes mig at få det til at virke)http://vvvv.org/

EyesWebEyesWeb er lavet som et meget seriøst research-software for krops-interaktion med musik (dans etc). Men er let at bruge til at lave special effekts på video eller videosty-ret lyd. Det findes - så vidt jeg ved - kun til Windows. Projektets hjemmesiden kan være lidt svær at finde rundt i. http://musart.dist.unige.it/

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Download og installation af ProcessingProcessing er gratis. Processing findes til Windows, Mac og Linux. Processing downloades fra: http://processing.org/

Hvis du downloader til Windows, er det letteste at down-loade den fulde version (ikke “without JAVA”).

Processing skal ikke ”installeres”, du skal blot udpakke den fil du downloaded. Da programmet ikke skal installeres, kan du blot kopiere mappen ind fra en CD (fremfor at alle skal downloade individuelt).

Programmet startes ved at dobbeltklikke på det blå ”P” ikon.

Specielt om video-input og Windows.Hvis du bruger Windows og vil arbejde med video-input (f.eks. fra computerens webcam) skal du bruge noget ekstra software. Du skal have Apple QuickTime installeret (det har du allerede hvis du bruger iTunes). Ellers kan du downloade QuickTime fra http://www.apple.com/quicktime/down-load/

Desuden skal du have installeret programmet WinVDIG. Det kan downloades fra http://www.eden.net.nz/7/20071008/ Men du skal ikke hente den nyeste version, men bruge version 1.0.1. Du skal have Apple QuickTime installeret før du instal-lerer WinVDIG.

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Udviklingsmiljøet Processing

Du skriver din kode i det hvide tekst-felt.

Det grå tekstfelt i bunden er et statusfelt – og fejlmeddelelser vises her.

Det sorte tekstfelt i bunden er Processings ”kom-mandovindue”. Her skriver softwaren resultater til dig. Uddybende fejlmeddelelser vil også stå her.

Hjælp Under ”Help” i topmenuen ligger menupunktet ”Refe-rence”. Det linker til en online oversigt over alle ”ord” i Processing-sproget. Bemærk at det ligger online – computeren skal derfor være på nettet for at bruge denne hjælp.

De 6 knapper i toppen.

De 2 runde: Start din kode og stop.

De 4 firkantede: Ny kode (tomt kanvas), åben en gemt kode, gem en kode og eksporter til web.

Med den anden firkantede knap (”åben”) kan du åbne dine tidligere gemte koder (kaldes ”sketches” i Processing. Men der følger en masse gode eksempler med Proces-sing. Især kan du kigge i mapperne ”Basics” og ”Topics”.

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Den første kodeSkriv følgende i det hvide feltellipse(50,50,20,20);og tryk på start (den runde knap med pilen).

Virker det? Ser du et lille lærred med en cirkel på? Hvis det ikke virker: Har du stavet det hele rigtigt og ellipse med lille ”e”? Har du husket semikolon for at afslutte sætningen?Har du komma mellem værdierne? Og er der fire værdier?

Store og små bogstaverProcessing er meget nøjeregnende med brugen af store og små bogstaver.

SemikolonHver sætning afsluttes med semikolon.

”Stavekontrol”Processing farver kommandoer der genkendes med orange eller blåt. Det gør det lettere af fejlfinde.

Kommentarer i kodeSætninger der starter med ”//” ignoreres af Processing. Du kan altså skrive kommentarer inde i koden ved at starte sætningen med //. Det er er stor hjælp, når du senere skal huske hvad du har lavet. Det er også et god hjælp når vi vil arbejde improvisato-risk med kode. Her kan man ”slukke” en kommando blot ved at sætte // foran sætningen.

”Primitive” figurer

Cirkel (ellipse) ellipse(50, 50, 20, 20)En ellipse med centrum i punktet (50,50) og hvor både bredde og højde er 20 (altså en cirkel)

Firkantrect(50, 50, 30, 20)En rektangel med øverste venstre hjørne i punktet (50,50). Bredden er 30 og højden 20.

Linjeline(20, 30, 50, 60)En linie mellem punktet (20,30) og punktet (50,60)

Trekanttriangle(30, 45, 5, 20, 25, 75)En trekant med spidserne i punket (30, 45), punktet (5, 20) og punktet (25, 75).

Hvor er jeg?Processings lærred starter i punktet (0,0) i øverste venstre hjørne.

X-aksen vokser horisontalt mod højre.Y-aksen vokser lodret nedad (altså mod-sat det koordinatsystem vi traditionelt kender fra matematikken).

MåleenhedenProcessing måler alt i pixels. Pixels er de små prikker et skærmbillede er bygget op af.En typisk opløsning på en lille bærbars skærm er 1024 pixels i bredden og 768 pixels i højden.

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Data typerProcessing arbejder med nogle forskellige typer af data. Ofte vil Processing brokke sig hvis en kommando gives en værdi af en forkert type.

De almindeligste typer

int (integer)Heltal som f.eks 5, 72, 0, 255 og -11

float Decimaltal som f.eks 5,0 eller -120,25

char (character) Et enkelt tegn som f.eks. ”a”, ”A” eller ”5” (tegnet ’5’ - ikke tallet 5)

StringEn sætning som f.eks. ”dette er en prøve” eller ”230” (sætning bestående af tegnene 2, 3 og 0 - ikke tallet 230) Bemærk at String staves med stort ”S”.

En hack-strategiHvis du får en fejl-medling i stil med ”cannot convert from float to int” er det fordi du har givet et decimal-tal, hvor Processing forventede et heltal. Sammen med tastefejl og glemte tuborg-klammer, er det mest almindelige fejl. Hvis du selv har defineret nogle data som heltal, kan du prøve blot at skifte ordet ”int” ud med ”float”.

Nogle funktioner som f.eks. tilfældige tal (random()) giver altid decimaltal tilbag.

KonverteringDu kan konvertere decimaltallet fra random-funktione til et heltal ved at skrive int().x = int(random(100));Tilsvarende kan heltallet 45 konverteres til decimaltal-let 45.0:x = float(45);

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Afsnit af kodeEt samlet afsnit af kode startes og sluttes med tuborg-klammer.{ }På et almindeligt dansk Windows-tastatur ligger tuborg-klammerne på taste-kombinationen ALT-GREY 7 og ALT-GREY + 0.

SkelettetDe fleste Processing programmer består af to afsnit. Det første hedder ”setup” og det andet ”draw”. Bemærk at afsnittene ikke afsluttes med semikolon, men det gør sætningerne indenfor afsnittene.

void setup(){// Her kan du skrive din kode}

void draw(){// Her kan du skrive din kode}

Afsnittet setup()Dette afsnit afvikles kun een gang, når du starter koden. Afsnittet afvikles som det første - før afsnittet draw().Her kan du f.eks. sætte størrelsen på dit lærred til 600 pixels i bredden og 400 pixels i højden: size(600,400);og du kan sætte baggrundsfarven til hvid:background(255);

Afsnittet draw()Dette afsnit afvikles igen og igen. Indtil du trykker på stop-knappen. Det er typisk her det meste af din kode kommer til at stå.

Eksempelvoid setup(){size(600,400);background(255);}

void draw(){ellipse(50, 50, 20, 20);line(20, 30, 50, 60);}

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Interaktivitet med musenKommandoen mouseX fortæller hvor musen befinder sig horisontalt. Kommandoen mouseY hvor den er vertikalt.

Husk at Processing kender forskel på store og små bog-staver. Kommandoerne skrives med lille ”m” i mouse. Men med stort ”X” og ”Y”.

Eksempel Avoid setup(){size(600,400);background(255);}

void draw(){ellipse(mouseX, mouseY, 20, 20);}

Eksempel Bvoid setup(){size(600,400);background(255);}

void draw(){ellipse(mouseX, mouseY, mouseX/4,mouseY/4);}

Eksempel Cvoid setup(){size(600,400);background(255);}

void draw(){background(255);ellipse(mouseX, mouseY, mouseX/4,mouseY/4);}

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

FarverProcessing arbejder med gråtoner og RGB-farver. RGB-farver er blandinger af rød, grøn og blå. Vi arbejder med farvet lys og farvesystemet er additivt. En værdi på 0 er slukket lys (sort) og 255 er hvid.

En ren rød farve skrives som 255, 0, 0.En ren grøn som 0, 255, 0.En gul er en blanding af rød og grøn: 255, 255, 0.Hvid kan skrives som 255, 255, 255 eller blot som 255. Sort kan skrives som 0, 0, 0 eller blot som 0.

GennemsigtighedFigurer kan være mere eller mindre gennemsigtigt.Gennemsigtigheden (”opacity”) skrives som et fjerde tal efter værdierne for rød, grøn og blå. Eller som andet tal efter en gråtone.Værdien 0 er helt gennemsigtigt. Værdien 255 er fuldt dækkende.Hvis du ikke skriver noget tal for gennemsigtigheden, vil farven være fuldt dækkende (svarende til værdien 255).

BaggrundsfarvenLærredts farve sættes med kommandoen background(værdi). Følgende giver en helt rød baggrund:background(255,0,0);

Figures fyld-farveFarven inde i figurer sættes med kommandoen fill(værdi). Følgende giver lilla figurer: fill(255,0,255);Følgende giver halv-gennemsigtige lilla figurer: fill(255,0,255,128);En grå figur kan skrives sådan:fill(120);Fyld-farven vil gælde for alle figurer, der tegnes. Indtil en ny fyld-farve sættes.

Uden fyld-farveKommandoen noFill() fjerner fyld-farven på alle figurer der tegnes efterfølgende. Bemærk det store ”F”.noFill();

Figures omridsFarven på figurerens omrids sættes med kommandoen stroke(værdi). Følgende giver rødt omrids: stroke(255,0,0);

Uden omridsKommandoen noStroke() fjerner fyld-farven på alle figu-rer der tegnes efterfølgende. Bemærk det store ”S”.noStroke();

Omridsets tykkelseOmridsets tykkelse er normalt 1. Men kan ændres med kommandoen strokeWeight(værdi).strokeWeight(5);

Eksempel Avoid setup(){size(600,400);background(100,100,50);noStroke();//alle figurer tegnes uden omrids}

void draw(){fill(255,0,0);ellipse(mouseX, mouseY, 20, 20);fill(0,255,0,100);ellipse(20, mouseY, 20, 20);}

Eksempel Bvoid setup(){size(600,400);}

void draw(){fill(mouseX/3,250,50,100);ellipse(mouseX, mouseY, 20, 20);}

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

BetingelserLogiske betingelser (”conditions”) er kernen i ethvert programmeringssprog.

Hvis-såDen simpleste konstruktion er at lave et afsnit, der kun afvikles hvis en betingelse er opfyldt. Det kan f.eks. være om musen er på højre halvdel af lær-redet:if(mouseX>width/2){background(255,0,0);}Eller om musen er trykket ned:if(mousePressed){background(255,0,0);}Eller om det er eftermiddag:if(hour()>12){background(255,0,0);}

Hvis-så-ellersKonstruktionen if-else skelner mellem to tilstande. Og udfører eet hvis betingelsen er opfyldt (som den simple if-konstruktion) men noget andet hvis betingelsen ikke er opfyldt. Den skifter altså mellem to muligheder.if(mousePressed){background(255,0,0);}else{background(0);}

Eksempelvoid setup(){size(500,500);}

void draw(){ if(mouseX>width/2) { fill(255,0,0); rect(mouseX, mouseY, 20, 20); } else { fill(0,0,255); ellipse(mouseX, mouseY, 20, 20); }}

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

FunktionerFunktioner er ekstra afsnit, der behandler data. Hvis du gentager den samme kode igen og igen inde i draw() afsnittet, kan du sikkert gøre det simplere og mere gen-nemskueligt ved at samle koden i en funktion.

Funktioner skrives som et selvstændigt afsnit efter hele draw() afsnittet. Altså efter den sidste tuborgklamme.

Funktioner modtager ofte værdier inde fra hovedpro-grammet og kan sende en værdi tilbage.

Funktioner skal have et navn, en angivelse af hvilken type af data den modtager og hvilken type den returnere.Denne funktion hedder ”navn”. Den modtager et heltal. Som efterfølgende hedder ”al-der” indenfor funktionens afsnit. Den sender ikke noget tilbage til hovedprogrammet (den returnerer data af typen void = ikke noget).void navn(int alder){ //her skriver vi vores kode}

To gamle kendingeTeknisk set er setup() og draw() indbyggede funktioner, der ikke modtager nogle data og ikke returnere noget. Du kan genkende funktionens syntaks:void setup(){}

Eksempelvoid setup(){size(500,500);}

void draw(){mincirkel(mouseX, mouseY, 100); }

void mincirkel(int x, int y, int radius){ellipse(x, y, radius, radius); }

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Rekursion En funktion kan aktiveres (”kaldes”) inde fra koden i funk-tionen selv. Dette kaldes rekursion.

Det giver fantastisk muligheder med grafik. Tænk at hver gang du beder om at få tegnet en cirkel, så kalder cirkel-tegningen tilbage og beder om endnu en cirkel. Som så beder om endnu en cirkel..... Men på den måde bliver computeren aldrig færdig med at tegne cirkler. Den går i selvsving og der sker intet. Måske er den så travlt optaget, at du ikke engang kan stoppe processen.Derfor skal alle rekursive funktioner indeholde en eller anden stop-betingelse. Denne stop-betingelse skal na-turligvis blive opfyldt på et eller andet tidspunkt. Ellers nytter det ikke noget.

Eksemplet viser en funktion. der tegner en cirkel.Dernæst trækker den 10 fra størrelsen af cirklen.Så kommer stop-betingelsen: Hvis størrelsen stadig er større end 10, så kalder den sig selv med den nye stør-relse.

Eksempelvoid setup(){size(500,500);}

void draw(){flerecirkler(mouseX, mouseY, 100); }

void flerecirkler(int x, int y, int radius){ellipse(x, y, radius, radius);radius = radius-10;

if(radius > 10){ flerecirkler(x, y, radius);} }

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Eksempelvoid setup(){size(500,500);smooth();}

void draw(){bwcirkel(mouseX, mouseY, 300); }

void bwcirkel(int x, int y, int radius){ellipse(x,y,radius,radius);radius = radius/2;if (radius > 10) { fill(random(255)); vcirkel(x, y+radius/2, radius); vcirkel(x, y-radius/2, radius); }}

Rekursion ”i anden” En funktion kan kalde sig selv mere en een gang pr runde.Det giver mange interessante muligheder med meget komplicerede grafiske figurer a la fraktaler.

Men husk at computerens beregningsopgave nu ikke blot stiger liniært men eksponentielt. Hver beregning starter to beregninger, der så hver starter to beregninger etc.Hvis beregningen er kompliceret, kan det betyde at ma-skinen kører langsomt.

Eksemplet kalder funktionen bwcirkel(). Denne funktion tegner en først en cirkel. Så halveres størelsen på cirklen. Hvis størrelsen stadig er større end 10, så kalder funktionen sig selv to gange med den nye størrelse. En gang med en cirkel, der er skubbet nedad (der bliver lagt en værdi til y-placeringen). Og en gang skubbet opad.Nu kører der altså 2 kopier af funktionen. Disse 2 kalder sig selv 2 gange. Der kører nu 4 kopier af funktionen. Denne fordoblende kald fortsættes indtil radius ikke længere er større end 10.

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Gemme lærredet som billedfilProcessing gør det meget let at gennem hvad der er tegnet på lærredet som en billed-fil.Det gøres med kommandoen:saveFrame(”navn.jpg”);

Billedet gemmes som en jpg-fil i skitsens mappe.For at se denne mappe, kan du vælge ”Sketch” og ”Show Sketch Folder” i Processings menu i toppen.

Men vi ønsker ikke at gemme hver eneste gang Proces-sing tegner med draw() afsnittet. Det sker nemlig meget ofte - op til 50 gange i sekundet alt efter hvor avanceret vores skitse er. Derfor sætter vi et afsnit - nederst i vores kode - efter hele draw() afsnittet - der kun afvikles, når vi trykker på en tast på tastaturet:void keyPressed(){saveFrame(”navn.jpg”);}

Teknisk set er keyPressed() en indbygget funktion gan-ske som setup() og draw().

Eksempel void setup(){size(500,500);smooth();}

void draw(){ellipse(mouseX, mouseY, 20, 20);}

void keyPressed(){saveFrame(”navn.jpg”);}

Pænere billeder Processing tegner cirkler og skrå linier temmeligt groft med en del hak. Med kommandoen smooth(); kan du få programmet til at tegne langt pænere. Men det kan gå lidt ud over hastigheden.smooth();

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Brug af billedfilerProcessing kan vise billeder i fil-formaterne JPG, PNG og GIF.Før du henter billedet ind i Processing, skal du lave en variable til at gemme billedets data i. En variabel er en slags navngiven beholder for data. Programmet henter billedets data ind i denne beholder. Du kan så senere i programmet arbejde med billedet ved at referere til beholderens navn.Du laver en ny beholder til et billede ved at skrive:PImage foto;

Du henter billed-filens data ind i beholderen ”foto” med kommandoen:foto = loadImage(”storkunst.jpg”);Bemærk at det er et stort ”I” som i Island. Hvis billed-filen ligger i kode-skitsens mappe, kan du nøjes med at skrive navnet på filen. Alternativt må du skrive hele stien til billed-filen.Du kan også skrive et link til et billede, der ligger på net-tet.foto = loadImage(”http://www.artnode.org/intra/people/ima/mj.jpg”);

Vining af billeder Efter du har hentet billed-filen ind i en variable/beholder, kan du vise billedet med kommandoen image(variable_navn, x,y,bredde,højde). X og y er billedet øverste venstre hjørne. Hvis du ikke angiver en bred-de og højde, så vises billedet i den oprindeli-gestørrelse.image(foto, 0,0,100,50);

Eksempel PImage storkunst;

void setup(){size(500,500);storkunst = loadImage(”picasso.jpg”);//billed-filen skal ligge i kodens mappe}

void draw(){background(255);image(storkunst, 10, 10, mouseX, mouseY);}

Hvor kan variabler bruges? Variabler (navngivne beholdere for data)kan kun bruges i de afsnit, hvor de define-res.Dette kaldes variablens ”scope”.Hvis en variable skal kunne bruges overalt i programmet, kan du definere variablen først i programmet - før setup() afsnittet.

Forklaring til eksempletVi definerer en variable med navnet ”storkunst” allerførst i programmet. Når den defineres her, kan vi bruge den både i afsnittet setup() og draw(). Da vi kun vil hente billed-filen ind fra hard-disken een gang, placerer vi loadImage i af-snittet setup(). Vi ved at dette afsnit kun afvikles een gang når programmet starter.For at tegne billedet på lærredet har vi placeret visnings-kommandoen nede i afsnittet draw(). I eksemplet er billedet afhænger billedets størrelse af musens placering.

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Et godt udgangspunkt for improvisation

Bytte om på mouseX og mouseY.Farver som RGB (rød, grøn, blå).Farver som afhænger af musen.Flytte farveskiftet ind i ”if”-afsnittet.Lav en tilfældig størrelse på ellipsen.Lav en tilfældig mis-placering af ellipsen (f.eks. med mouseX+random(10)).Tegn mere end een ellipse hver gang - med anden stør-relse eller placering.Slette tegningen når musen ikke er trykket ned (f.eks. else{background(255);}).Brug en anden figur end ellipsen (rect eller line).Skifte mellem ellipser og firkanter alt efter om musen er trykket ned.Gemme tegningen som billed-fil når der trykkes på en tast.

og meget meget mere.......

void setup(){size(500,500);background(255);}

void draw(){fill(random(255),50);

if (mousePressed) { ellipse(mouseX, mouseY, mouseX/4, mouseY/4); } }

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Inspirerende bøgerHer er nogle klassikere omkring Kreativ Kode. Bøgerne indeholder kun få konkrete kode-eksempler, men er mere en oversigt over emnet:

John Maeda: “Creative Code: Aesthetics + Computation” John Maeda: “Maeda @ Media” A. Ward, G. Levin, Lia og Meta: “4x4 Generative Design”

Lærebøger om ProcessingDen primære kilde til at lære Processing er at følge med på nettet. Der er en utroligt stor gruppe af Processing-brugere, der gerne deler deres viden, ideer og kode. Men naturligvis findes der også et utal af bøger. Her er 4 anbefalinger:

Casey Reas og Ben Fry: “Getting Started with Processing” Kort og let introduktion. Kan finds til godt 100 kr.

Casey Reas og Ben Fry: “Processing: A Programming Handbook for Visual Desig-ners and Artists” Den omfattende ”halv-officielle” manual. Enkelte eksem-pler er lidt Mac fokuseret.

Daniel Shiffman: “Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction” Ikke den letteste bog. Men mange holder meget af denne bog, da Shiffman tager eksempler fra andre og mere spændende - områder end de fleste lærebøger. Ira Greenberg: “Processing: Creative Coding and Computational Art.” En meget grundig bog på mere end 800 sider.

krea

tiv

kodn

ing

© 2

011

mog

ens

jaco

bsen

ww

w.m

ogen

sjac

obse

n.dk

Materiale fra workshoppenDette dokument og kode-skitser kan hentes fra:www.mogensjacobsen.dk/undervisning/lr/

Websteder til inspirationwww.processing.org/www.openprocessing.org/www.creativeapplications.net/www.openframeworks.cc/gallerywww.generatorx.no/www.unlekker.net/www.flight404.com/dataisnature.com/mediamilitia.com/getting-started-with-generative-art/