Kreativ Kode Visuelt kreative, kunstner og designere var brugere af teknologi. Vi overlod udformningen af teknologien til andre 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 informationsteknologi. 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. Penge Noget af det bedste software til er freeware (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. Platforme De fleste af programmerne findes både til Windows og Mac OSX. Enkelte endda til iphones og Android telefoner. Programmeringsfordomme Vi 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 programmeringssprog. 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 knivskarp 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. Historien Massachusetts 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/ Dette kursus blev udarbejdet i 2011. Siden da er Processing blevet væsentligt opdateret. Så der er desværre ingen garanti at alt virker... Men prøv selv!
Gratis software til tekstbaseret programmering DBN/Design By Numbers Det allerførste udspil fra MIT til. 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 hurtigere 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 bokse 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/ 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 videostyret 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/ Hvis du downloader til Windows, er det letteste at downloade 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/download/ 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 installerer WinVDIG.
Udviklingsmiljøet Processing 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 Processing. 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 kommandovindue. Her skriver softwaren resultater til dig. Uddybende fejlmeddelelser vil også stå her. Hjælp Under Help i topmenuen ligger menupunktet Reference. 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 Skriv følgende i det hvide felt ellipse(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å bogstaver Processing er meget nøjeregnende med brugen af store og små bogstaver. Semikolon Hver sætning afsluttes med semikolon. Stavekontrol Processing farver kommandoer der genkendes med orange eller blåt. Det gør det lettere af fejlfinde. 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) Firkant rect(50, 50, 30, 20) En rektangel med øverste venstre hjørne i punktet (50,50). Bredden er 30 og højden 20. Linje line(20, 30, 50, 60) En linie mellem punktet (20,30) og punktet (50,60) Trekant triangle(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å modsat det koordinatsystem vi traditionelt kender fra matematikken). Måleenheden Processing 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. 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 improvisatorisk med kode. Her kan man slukke en kommando blot ved at sætte // foran sætningen.
Data typer Processing 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) String En 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-strategi Hvis 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. Konvertering Du kan konvertere decimaltallet fra random-funktione til et heltal ved at skrive int(). x = int(random(100)); Tilsvarende kan heltallet 45 konverteres til decimaltallet 45.0: x = float(45);
Afsnit af kode Et samlet afsnit af kode startes og sluttes med tuborgklammer. På et almindeligt dansk Windows-tastatur ligger tuborgklammerne på taste-kombinationen ALT-GREY 7 og ALT-GREY + 0. Skelettet De 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. // Her kan du skrive din kode // Her kan du skrive din kode Eksempel size(600,400); background(255); ellipse(50, 50, 20, 20); line(20, 30, 50, 60); 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 Kommandoen mousex fortæller hvor musen befinder sig horisontalt. Kommandoen mousey hvor den er vertikalt. Husk at Processing kender forskel på store og små bogstaver. Kommandoerne skrives med lille m i mouse. Men med stort X og Y. Eksempel A size(600,400); background(255); ellipse(mousex, mousey, 20, 20); Eksempel B size(600,400); background(255); ellipse(mousex, mousey, mousex/4,mousey/4); Eksempel C size(600,400); background(255); background(255); ellipse(mousex, mousey, mousex/4,mousey/4);
Farver Processing 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. Gennemsigtighed Figurer 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). Baggrundsfarven Lærredts farve sættes med kommandoen background(værdi). Følgende giver en helt rød baggrund: background(255,0,0); Figures fyld-farve Farven 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-farve Kommandoen nofill() fjerner fyld-farven på alle figurer der tegnes efterfølgende. Bemærk det store F. nofill(); Figures omrids Farven på figurerens omrids sættes med kommandoen stroke(værdi). Følgende giver rødt omrids: stroke(255,0,0); Uden omrids Kommandoen nostroke() fjerner fyld-farven på alle figurer 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); Eksempel A size(600,400); background(100,100,50); nostroke(); //alle figurer tegnes uden omrids fill(255,0,0); ellipse(mousex, mousey, 20, 20); fill(0,255,0,100); ellipse(20, mousey, 20, 20); Eksempel B size(600,400); fill(mousex/3,250,50,100); ellipse(mousex, mousey, 20, 20);
Betingelser Logiske 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ærredet: 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); Eksempel size(500,500); if(mousex>width/2) fill(255,0,0); rect(mousex, mousey, 20, 20); else fill(0,0,255); ellipse(mousex, mousey, 20, 20); 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 Funktioner 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 gennemskueligt 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 hovedprogrammet og kan sende en værdi tilbage. Eksempel size(500,500); mincirkel(mousex, mousey, 100); 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 alder 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 void mincirkel(int x, int y, int radius) ellipse(x, y, radius, radius); 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:
Rekursion En funktion kan aktiveres ( kaldes ) inde fra koden i funktionen 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 cirkeltegningen 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 naturligvis blive opfyldt på et eller andet tidspunkt. Ellers nytter det ikke noget. Eksempel size(500,500); flerecirkler(mousex, mousey, 100); void flerecirkler(int x, int y, int radius) ellipse(x, y, radius, radius); radius = radius-10; 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ørrelse. if(radius > 10) flerecirkler(x, y, 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 maskinen 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. Eksempel size(500,500); smooth(); 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); Undskyld... dette er en fejl! Der skal stå "bwcirkel(...)" begge steder
Gemme lærredet som billedfil Processing 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 Processing 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 ); 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(); Eksempel size(500,500); smooth(); ellipse(mousex, mousey, 20, 20); void keypressed() saveframe( navn.jpg ); Teknisk set er keypressed() en indbygget funktion ganske som setup() og draw().
Brug af billedfiler Processing 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å nettet. foto = loadimage( http://www.artnode.org/ intra/people/ima/mj.jpg ); Hvor kan variabler bruges? Variabler (navngivne beholdere for data) kan kun bruges i de afsnit, hvor de defineres.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 eksemplet Vi 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 harddisken een gang, placerer vi loadimage i afsnittet 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. Eksempel PImage storkunst; size(500,500); storkunst = loadimage( picasso.jpg ); //billed-filen skal ligge i kodens mappe background(255); image(storkunst, 10, 10, mousex, mousey); 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 bredde og højde, så vises billedet i den oprindeligestørrelse. image(foto, 0,0,100,50);
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ørrelse eller placering. Slette tegningen når musen ikke er trykket ned (f.eks. elsebackground(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. size(500,500); background(255); fill(random(255),50); if (mousepressed) ellipse(mousex, mousey, mousex/4, mousey/4); og meget meget mere...
Inspirerende bøger Her 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 Lærebøger om Processing Den primære kilde til at lære Processing er at følge med på nettet. Der er en utroligt stor gruppe af Processingbrugere, 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. A. Ward, G. Levin, Lia og Meta: 4x4 Generative Design Casey Reas og Ben Fry: Processing: A Programming Handbook for Visual Designers and Artists Den omfattende halv-officielle manual. Enkelte eksempler 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 Dette dokument og kode-skitser kan hentes fra: www.mogensjacobsen.dk/undervisning/lr/ Websteder til inspiration www.processing.org/ www.openprocessing.org/ www.creativeapplications.net/ www.openframeworks.cc/gallery www.generatorx.no/ www.unlekker.net/ www.flight404.com/ dataisnature.com/ mediamilitia.com/getting-started-with-generative-art/