Kreativ Kode

Kreativ Kode Programmeringsfordomme
Visuelt kreative, kunstner og designere var brugere af Vi tror programmeringskoder ligner volapyk. Det gør de
teknologi. Vi overlod udformningen af teknologien til an-sjældent. De ligner engelsk. Men computere kan være ret
dre og brugte med hvad IT-industrien ville levere til os.strikse med hensyn til den skrevne syntaks.

kreativ kodning
De seneste 15 år har dette ændret sig. Der er kommet Der er mange ligheder mellem forskellige programme-
et oprør mod rollen som passive forbruger af informati- ringssprog. Har du lært et programmeringssprog, kan du
onsteknologi. hurtigt forstå andre.
Der er et ønske om at forstå informationsteknologi. Vi tror at programmering kræver matematisk viden. Det
Der er kommet et ønske om et udtrykke noget nyt i et gør det måske i enkelte tilfælde, men sjældent på højere
nyt medie – fremfor blot at efterligne gamle. niveau.
Vi tror at programmering kræver planlægning og kniv-
Penge skarp målrettethed. Men på workshoppend vil vi arbejde
Noget af det bedste software til kreativ kodning er fre- improviserende og eksplorativt med kode uden at vide
eware (gratis). hvor vi ender. I virkeligheden udvikles det meste software
Ud over at spare penge, har freeware ofte den fordel at ved at skrive videre på eksisterende. Vi vil også arbejde
den støttes af en stor og engageret gruppe af anvendere med at modificere andres kode.
(et ”community”). På grupperne websteder kan du ofte
hente gode råd, ideer og bede om hjælp. Historien
Enkelte stykker software – som f.eks. ”DBN/DesignBy- Massachusetts Institute of Technology (MIT) har spillet
Numbers” og ”Processing” – har støtte-websteder rettet en stor rolle i udbredelsen af konceptet ”Kreative Kode”.
specielt mod undervisere. 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
Platforme
forskellige kreativ kode initiativer, vil du opdage at de
De fleste af programmerne findes både til Windows og
næsten alle har studeret der.
Mac OSX.
http://acg.media.mit.edu/
Enkelte endda til iPhones og Android telefoner.

© 2011 mogens jacobsen www.mogensjacobsen.dk

Gratis software til tekstbaseret programmering

DBN/Design By Numbers
Det allerførste udspil fra MIT til kreativ kodning.

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/

Processing
Under 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/

Arduino
Arduino 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/

Freeware til modulær/visuel programmering
I 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.

kreativ kodning
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/

EyesWeb
EyesWeb 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/

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

kreativ kodning
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.

Udviklingsmiljøet Processing De 6 knapper i toppen.

kreativ kodning
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”.

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.

Den første kode ”Primitive” figurer Hvor er jeg?
Skriv følgende i det hvide felt Processings lærred starter i punktet
ellipse(50,50,20,20); Cirkel (ellipse) (0,0) i øverste venstre hjørne.
og tryk på start (den runde knap med pilen). ellipse(50, 50, 20, 20)

kreativ kodning
En ellipse med centrum i punktet (50,50) og hvor både X-aksen vokser horisontalt mod højre.
Virker det? Ser du et lille lærred med en cirkel på? bredde og højde er 20 (altså en cirkel) Y-aksen vokser lodret nedad (altså mod-
Hvis det ikke virker: sat det koordinatsystem vi traditionelt
Har du stavet det hele rigtigt og ellipse med lille ”e”? Firkant kender fra matematikken).
Har du husket semikolon for at afslutte sætningen? rect(50, 50, 30, 20)
Har du komma mellem værdierne? En rektangel med øverste venstre hjørne i punktet Måleenheden
Og er der fire værdier? (50,50). Bredden er 30 og højden 20. Processing måler alt i pixels.
Pixels er de små prikker et skærmbillede
Store og små bogstaver Linje er bygget op af.
Processing er meget nøjeregnende med brugen af store line(20, 30, 50, 60) En typisk opløsning på en lille bærbars
og små bogstaver. En linie mellem punktet (20,30) og punktet (50,60) skærm er 1024 pixels i bredden og 768
pixels i højden.
Trekant
Semikolon
triangle(30, 45, 5, 20, 25, 75)
Hver sætning afsluttes med semikolon.
En trekant med spidserne i punket (30, 45), punktet (5,
20) og punktet (25, 75).
”Stavekontrol”
Processing farver kommandoer der genkendes med
orange eller blåt. Det gør det lettere af fejlfinde.

Kommentarer i kode
Sæ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.

Data typer En hack-strategi
Processing arbejder med nogle forskellige typer af data. Hvis du får en fejl-medling i stil med ”cannot convert from
Ofte vil Processing brokke sig hvis en kommando gives en float to int” er det fordi du har givet et decimal-tal, hvor
værdi af en forkert type. Processing forventede et heltal.

kreativ kodning
Sammen med tastefejl og glemte tuborg-klammer, er det
De almindeligste typer mest almindelige fejl.
Hvis du selv har defineret nogle data som heltal, kan du
int (integer) prøve blot at skifte ordet ”int” ud med ”float”.
Heltal som f.eks 5, 72, 0, 255 og -11
Nogle funktioner som f.eks. tilfældige tal (random())
float giver altid decimaltal tilbag.
Decimaltal som f.eks 5,0 eller -120,25
Konvertering
char (character) Du kan konvertere decimaltallet fra random-funktione til
Et enkelt tegn som f.eks. ”a”, ”A” eller ”5” (tegnet ’5’ - et heltal ved at skrive int().
ikke tallet 5) x = int(random(100));
Tilsvarende kan heltallet 45 konverteres til decimaltal-
String let 45.0:
En sætning som f.eks. ”dette er en prøve” eller ”230” x = float(45);
(sætning bestående af tegnene 2, 3 og 0 - ikke tallet
230)
Bemærk at String staves med stort ”S”.


Afsnit af kode Skelettet Eksempel
Et samlet afsnit af kode startes og sluttes med tuborg- De fleste Processing programmer består af to afsnit. void setup()
klammer. Det første hedder ”setup” og det andet ”draw”. {
{ } Bemærk at afsnittene ikke afsluttes med semikolon, men size(600,400);

kreativ kodning
På et almindeligt dansk Windows-tastatur ligger tuborg- det gør sætningerne indenfor afsnittene. background(255);
klammerne på taste-kombinationen ALT-GREY 7 og }
ALT-GREY + 0. void setup()
{ void draw()
// Her kan du skrive din kode {
} ellipse(50, 50, 20, 20);
line(20, 30, 50, 60);
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å.

Interaktivitet med musen Eksempel A
Kommandoen mouseX fortæller hvor musen befinder sig void setup()
horisontalt. Kommandoen mouseY hvor den er vertikalt. {
size(600,400);

kreativ kodning
Husk at Processing kender forskel på store og små bog- background(255);
staver. Kommandoerne skrives med lille ”m” i mouse. Men }
med stort ”X” og ”Y”.
void draw()
{
ellipse(mouseX, mouseY, 20, 20);
}

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

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

Eksempel C
void setup()
{
size(600,400);

background(255);
}

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

Farver Baggrundsfarven Eksempel A
Processing arbejder med gråtoner og RGB-farver. Lærredts farve sættes med kommandoen void setup()
RGB-farver er blandinger af rød, grøn og blå. background(værdi). Følgende giver en helt rød baggrund:{
background(255,0,0); size(600,400);

kreativ kodning
Vi arbejder med farvet lys og farvesystemet er additivt. background(100,100,50);
En værdi på 0 er slukket lys (sort) og 255 er hvid. Figures fyld-farve noStroke();
Farven inde i figurer sættes med kommandoen fill(værdi). //alle figurer tegnes uden omrids
En ren rød farve skrives som 255, 0, 0. Følgende giver lilla figurer: }
En ren grøn som 0, 255, 0. fill(255,0,255);
En gul er en blanding af rød og grøn: 255, 255, 0. Følgende giver halv-gennemsigtige lilla figurer: void draw()
Hvid kan skrives som 255, 255, 255 eller blot som fill(255,0,255,128); {
255. Sort kan skrives som 0, 0, 0 eller blot som 0. En grå figur kan skrives sådan: fill(255,0,0);
fill(120); ellipse(mouseX, mouseY, 20, 20);
Gennemsigtighed Fyld-farven vil gælde for alle figurer, der tegnes. Indtil en fill(0,255,0,100);
Figurer kan være mere eller mindre gennemsigtigt. ny fyld-farve sættes. ellipse(20, mouseY, 20, 20);
Gennemsigtigheden (”opacity”) skrives som et fjerde tal }
efter værdierne for rød, grøn og blå. Eller som andet tal Uden fyld-farve
efter en gråtone. Kommandoen noFill() fjerner fyld-farven på alle figurer der Eksempel B
Værdien 0 er helt gennemsigtigt. Værdien 255 er fuldt tegnes efterfølgende. Bemærk det store ”F”. void setup()
dækkende. noFill(); {
Hvis du ikke skriver noget tal for gennemsigtigheden, vil size(600,400);
farven være fuldt dækkende (svarende til værdien 255). }
Figures omrids
Farven på figurerens omrids sættes med kommandoen
void draw()
stroke(værdi). Følgende giver rødt omrids:
{
stroke(255,0,0);
fill(mouseX/3,250,50,100);
Uden omrids }

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

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

Betingelser Eksempel
Logiske betingelser (”conditions”) er kernen i ethvert void setup()
programmeringssprog. {
size(500,500);

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

Hvis-så-ellers
Konstruktionen 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);
}

Funktioner Eksempel
Funktioner er ekstra afsnit, der behandler data. Hvis void setup()
du gentager den samme kode igen og igen inde i draw() {
afsnittet, kan du sikkert gøre det simplere og mere gen- size(500,500);

kreativ kodning
nemskueligt ved at samle koden i en funktion. }

Funktioner skrives som et selvstændigt afsnit efter hele void draw()
draw() afsnittet. Altså efter den sidste tuborgklamme. {
mincirkel(mouseX, mouseY, 100);
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 void mincirkel(int x, int y, int radius)
af data den modtager og hvilken type den returnere. {
Denne funktion hedder ”navn”. ellipse(x, y, radius, radius);
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 kendinge
Teknisk set er setup() og draw() indbyggede funktioner,
der ikke modtager nogle data og ikke returnere noget. Du
kan genkende funktionens syntaks:

void setup()
{
}

Rekursion Eksempel
En funktion kan aktiveres (”kaldes”) inde fra koden i funk- void setup()
tionen selv. Dette kaldes rekursion. {
size(500,500);

kreativ kodning
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å void draw()
beder om endnu en cirkel..... {
Men på den måde bliver computeren aldrig færdig med at flerecirkler(mouseX, mouseY, 100);
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 void flerecirkler(int x, int y, int radius)
anden stop-betingelse. Denne stop-betingelse skal na- {
turligvis blive opfyldt på et eller andet tidspunkt. Ellers ellipse(x, y, radius, radius);
nytter det ikke noget. radius = radius-10;

Eksemplet viser en funktion. der tegner en cirkel. if(radius > 10)
Dernæst trækker den 10 fra størrelsen af cirklen. {
Så kommer stop-betingelsen: Hvis størrelsen stadig er flerecirkler(x, y, radius);
større end 10, så kalder den sig selv med den nye stør- }
relse.
}


Rekursion ”i anden” Eksempel
En funktion kan kalde sig selv mere en een gang pr runde. void setup()
Det giver mange interessante muligheder med meget {
komplicerede grafiske figurer a la fraktaler. size(500,500);

kreativ kodning
smooth();
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. void draw()
Hvis beregningen er kompliceret, kan det betyde at ma- {
skinen kører langsomt. bwcirkel(mouseX, mouseY, 300);
}
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 void bwcirkel(int x, int y, int radius)
10, så kalder funktionen sig selv to gange med den nye {
størrelse. En gang med en cirkel, der er skubbet nedad ellipse(x,y,radius,radius);
(der bliver lagt en værdi til y-placeringen). Og en gang radius = radius/2;
skubbet opad. if (radius > 10)
Nu kører der altså 2 kopier af funktionen. Disse 2 kalder {
sig selv 2 gange. Der kører nu 4 kopier af funktionen. fill(random(255));
Denne fordoblende kald fortsættes indtil radius ikke vcirkel(x, y+radius/2, radius);
længere er større end 10. vcirkel(x, y-radius/2, radius);
}
}


Gemme lærredet som billedfil Pænere billeder Eksempel
Processing gør det meget let at gennem hvad der er Processing tegner cirkler og skrå linier temmeligt groft void setup()
tegnet på lærredet som en billed-fil. med en del hak. Med kommandoen smooth(); kan du få {
Det gøres med kommandoen: programmet til at tegne langt pænere. Men det kan gå size(500,500);

kreativ kodning
saveFrame(”navn.jpg”); lidt ud over hastigheden. smooth();
smooth(); }
Billedet gemmes som en jpg-fil i skitsens mappe.
For at se denne mappe, kan du vælge ”Sketch” og ”Show void draw()
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 void keyPressed()
vores skitse er. {
Derfor sætter vi et afsnit - nederst i vores kode - efter saveFrame(”navn.jpg”);
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().


Brug af billedfiler Hvor kan variabler bruges? Eksempel
Processing kan vise billeder i fil-formaterne JPG, PNG og Variabler (navngivne beholdere for data) PImage storkunst;
GIF. kan kun bruges i de afsnit, hvor de define-
Før du henter billedet ind i Processing, skal du lave en res.Dette kaldes variablens ”scope”. void setup()

kreativ kodning
variable til at gemme billedets data i. En variabel er en Hvis en variable skal kunne bruges overalt {
slags navngiven beholder for data. Programmet henter i programmet, kan du definere variablen size(500,500);
billedets data ind i denne beholder. Du kan så senere først i programmet - før setup() afsnittet. storkunst = loadImage(”picasso.jpg”);
i programmet arbejde med billedet ved at referere til //billed-filen skal ligge i kodens mappe
beholderens navn. Forklaring til eksemplet }
Du laver en ny beholder til et billede ved at skrive: Vi definerer en variable med navnet
PImage foto; ”storkunst” allerførst i programmet. Når void draw()
den defineres her, kan vi bruge den både i {
Du henter billed-filens data ind i beholderen ”foto” med afsnittet setup() og draw(). background(255);
kommandoen: Da vi kun vil hente billed-filen ind fra hard- image(storkunst, 10, 10, mouseX, mouseY);
foto = loadImage(”storkunst.jpg”); disken een gang, placerer vi loadImage i af- }
Bemærk at det er et stort ”I” som i Island. snittet setup(). Vi ved at dette afsnit kun
Hvis billed-filen ligger i kode-skitsens mappe, kan du afvikles een gang når programmet starter.
nøjes med at skrive navnet på filen. Alternativt må du For at tegne billedet på lærredet har vi
skrive hele stien til billed-filen. placeret visnings-kommandoen nede i
Du kan også skrive et link til et billede, der ligger på net- afsnittet draw().
tet. I eksemplet er billedet afhænger billedets
foto = loadImage(”http://www.artnode.org/ størrelse af musens placering.
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);

Et godt udgangspunkt for improvisation void setup()
{
Bytte om på mouseX og mouseY. size(500,500);
Farver som RGB (rød, grøn, blå). background(255);
}

kreativ kodning
Farver som afhænger af musen.
Flytte farveskiftet ind i ”if”-afsnittet.
Lav en tilfældig størrelse på ellipsen. void draw()
Lav en tilfældig mis-placering af ellipsen (f.eks. med {
mouseX+random(10)). fill(random(255),50);
Tegn mere end een ellipse hver gang - med anden stør-
relse eller placering. if (mousePressed)
Slette tegningen når musen ikke er trykket ned (f.eks. {
else{background(255);}). ellipse(mouseX, mouseY, mouseX/4, mouseY/4);
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.......


Inspirerende bøger Lærebøger om Processing
Her er nogle klassikere omkring Kreativ Kode. Bøgerne Den primære kilde til at lære Processing er at følge med
indeholder kun få konkrete kode-eksempler, men er mere på nettet. Der er en utroligt stor gruppe af Processing-
en oversigt over emnet: brugere, der gerne deler deres viden, ideer og kode.

kreativ kodning
Men naturligvis findes der også et utal af bøger. Her er 4
John Maeda: anbefalinger:
“Creative Code: Aesthetics + Computation”
Casey Reas og Ben Fry:
John Maeda: “Getting Started with Processing”
“Maeda @ Media” Kort og let introduktion. Kan finds til godt 100 kr.

A. Ward, G. Levin, Lia og Meta: Casey Reas og Ben Fry:
“4x4 Generative Design” “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.


Materiale fra workshoppen Websteder til inspiration
Dette dokument og kode-skitser kan hentes fra: www.processing.org/
www.mogensjacobsen.dk/undervisning/lr/ www.openprocessing.org/
www.creativeapplications.net/

kreativ kodning
www.openframeworks.cc/gallery
www.generatorx.no/
www.unlekker.net/
www.flight404.com/
dataisnature.com/
mediamilitia.com/getting-started-with-generative-art/


Kreativ Kode

Recommended

Recommended

More Related Content

Similar to Kreativ Kode

Similar to Kreativ Kode (20)

Kreativ Kode