EXPERIMENTELE CROSSMEDIALE VORMGEVING HEREXAMEN / 2CMO / SCHOOLJAAR / ZENO DRIESEN

Transcriptie

1 EXPERIMENTELE CROSSMEDIALE VORMGEVING P R E S E N T A T I E B O E K HEREXAMEN / 2CMO / SCHOOLJAAR / ZENO DRIESEN

2 INHOUDSOPGAVE VISUAL SCORE WHAT HAPPENED ZELFPORTRET > GENERATIEF VORMGEVEN > INTERFACE DESIGN (MOBILE APP)

3 VISUAL SCORE OPDRACHT OMSCHRIJVING: Een muziekstuk visualiseren. Een alternatieve partituur - libretto ontwerpen en visueel uitvoeren op een 2-dimensionele drager. Kan in de vorm van een poster maar bvb ook een animatiefilm. MIJN VISUAL SCORE: Vertrokken met behulp van processing om de muziek te visualiseren in blokken met pieken. Van daaruit verder bouwen naar een partituur. OPZOEKWERK: THERE S NO SOUND IN MY HEAD - BIRDS ON THE WIRES -

4 WHAT HAPPENED OPDRACHT OMSCHRIJVING: Combinatie van het traditionele infodesign met een persoonlijk onderwerp. Je selecteert een tijdsperiode in je leven waarin een serie van gebeurtenissen plaats hebben. Je kiest zelf wat en wanneer/hoelang. Maak van deze gebeurtenissen een interessant vormgegeven infographic. MIJN INFOGRAPHIC: Een overzicht van de 3 festivals die ik deze zomer heb gedaan en een zicht op wat deze 3 festivals me in totaal hebben gekost. Ook de manieren waarop ik tot aan het festival ben geraakt en zaken die belangrijk kunnen zijn voor op een festival. ZOMER Fe n Em i jsn Tt o tai VA L S l e u i t gav e ROCK WERCHTER TOMORROWLAND PUKKELPOP = 200,10 = 165,75 = 159,50 = 28,10 = 26,50 = 48,23 = 35,58 = 10 = 100 = 80 = 2x 25 = 40

5 ZELFPORTRET > GENERATIEF VORMGEVEN OPDRACHT OMSCHRIJVING: Je maakt een zelfportret in de ruimere zin van het woord. Eentje met enkel Nodebox/Processing dat ééndimensioneel (plat vlak) is, het ander met Nodebox/Processing is multidimensioneel incl. de dimensie tijd (video/animatie, 3D, interactiviteit, audio, etc.). Je kan starten van een foto, een schilderij, een... ONDERZOEK: Interessante dingen rond processing gevonden op sites zoals shiffman.net, postspectacular.com, andybest.net, creativeapplications.net, openprocessing.net, vimeo.com, generative-gestaltung.de, wblut.com. PImage reference; int SPEED = 0; int TESTS = 10; //the percent that colours must have in common to link together float ACCURACY = 85; float DISTANCE = 300; //stops from getting stuck on a single colour int MAXTRIES = 1000; int loctest; color coltest; int xtest; int ytest; float testtot; color col; int loc; int x; int y; int count = 0; int tries = 0; boolean newpix = true; void setup(){ reference = loadimage( data/zelfportret1.jpg ); //size(reference.width,reference.height,p3d); size(800,997,p3d); background(255); strokeweight(1); void draw(){ if(distance > 35) DISTANCE -=.1; if(speed < 4000) SPEED ++; for(int i = 0; i < SPEED; i++){ if(newpix tries > MAXTRIES){ newpix = false; tries = 0; //choose a random pixel to test for loctest = int(random(reference.pixels.length)); //grab its colour/position coltest = reference.pixels[loctest ]; xtest = loctest % reference.width; ytest = loctest / reference.width; //generates the value for that colour float rv = coltest >> 16 & 0xFF; float gv = coltest >> 8 & 0xFF; float bv = coltest & 0xFF; testtot = rv + gv + bv; //choose a random pixel loc = int(random(reference.pixels.length)); col = reference.pixels[loc]; //test if(colortest(col)){ x = loc % reference.width; y = loc/ reference.width; if(dist(xtest,ytest,x,y) <= DISTANCE){ stroke(coltest,40); //enable to make spiderweb like drawings //stroke(brightness(col),50); line(xtest,ytest,x,y); count++; //resets counter if(count > TESTS){ newpix = true; count = 0; tries++; //tests colour similarities boolean colortest(color _col){ float rv = _col >> 16 & 0xFF; float gv = _col >> 8 & 0xFF; float bv = _col & 0xFF; float tot = rv + gv + bv; //check similarity float perc = (testtot/tot) *100; if(perc >= ACCURACY ){ return true; else return false; // SAVE IMAGE float saveincr; void mousepressed() { saveincr++; save( image +saveincr+.jpg );

6 ZELFPORTRET > GENERATIEF VORMGEVEN PROCESSING: Eendimensioneel zelfportret gemaakt met processing. Vertrokken vanaf een foto waarna deze wordt getekend door middel van verschillende ontelbare lijnen tot je het gewenste resultaat hebt.

7 ZELFPORTRET > GENERATIEF VORMGEVEN PROCESSING: Eendimensionaal zelfportret gewoon op basis van mijn getypte naam. Uiteindelijk door te experimenteren met de waarden krijgt je getypte naam een abstracte identiteit. import geomerative.*; import org.apache.batik.svggen.font.table.*; import org.apache.batik.svggen.font.*; import processing.pdf.*; RFont font; void setup() { size(1420,600); smooth(); RG.init(this); font = new RFont( BEBAS.TTF ); font.setsize(250); nostroke(); fill(0); //colormode(hsb, 100); void draw(){ background(255); translate(30,400); // font.draw( Design ); RCommand.setSegmentLength(mouseX-300); // Randpunkte der Schrift bestimmen RGroup grp = font.togroup( Zeno Driesen ); grp = grp.topolygongroup(); RPoint[] punkte = grp.getpoints(); float a = mousey-300; stroke(0); for (int i=0; i < punkte.length; i++){ // pos1: point(punkte[i].x, punkte[i].y); // pos2: line(punkte[i].x-5, punkte[i].y-5, punkte[i].x, punkte[i].y); float durchmesser = random(5,8); fill(random(0), random(0), random(0)); ellipse(punkte[i].x, punkte[i].y, a, a); for (int i=0; i < punkte.length-1; i++){ if (dist(punkte[i].x, punkte[i].y, punkte[i+1].x, punkte[i+1].y)<80){ line(punkte[i].x, punkte[i].y, punkte[i+1].x, punkte[i+1].y); strokeweight(random(0,0.5)); void keypressed() { if (key == s ) { println( Frame abspeichern ); saveframe( screenshot-####.tif ); if (key == b ) { background(255); if (key == p ) { beginrecord(pdf, zeichnung-####.pdf ); background(255); if (key == e ) { endrecord();

8 ZELFPORTRET > GENERATIEF VORMGEVEN PROCESSING: Multidimensioneel zelfportret genomen met behulp van processing en webcam. Door beweging met de muis kan je de balken aanpassen in richting. Het zelfportret krijgt ook een bepaalde diepte naargelang hoe je de richting bepaalt van de balken met je muis. PImage img; import processing.video.*; Capture mycapture; // fill(0); pushmatrix(); translate(i*circlesize, j*circlesize); void setup() { size(1440, 900); smooth(); mycapture = new Capture(this, width, height, 30); int circlesize = 9; void draw() { randomseed(0); translate(circlesize/2,circlesize/2); background(0); strokeweight(1/10); for (int i = 0; i<width/circlesize;i++) { for (int j = 0; j<height/circlesize;j++) { float circlesize2 = 20-brightness(myCapture. get(i*circlesize, j*circlesize)); //float circlesize3 = 120-brightness(myCapture. get(i*circlesize, j*circlesize)); float r =20* brightness(mycapture. get(i*circlesize, j*circlesize))/40; rotate(mousex/r); rect(0,0, circlesize2/r*2, circlesize2/5); // fill(mycapture.get(i*circlesize/20, j*circlesize) ); fill(random(255)); popmatrix(); // image(mycapture,0,0); void captureevent(capture mycapture) { mycapture.read(); // SAVE IMAGE float saveincr; void mousepressed() { saveincr++; save( image +saveincr+.jpg ); ); fill(mycapture.get(i*circlesize/20, j*circlesize)

9 ZELFPORTRET > GENERATIEF VORMGEVEN PROCESSING: Multidimensioneel zelfportret met een 3D effect. De afbeelding wordt opgebouwd uit verschillende 3D balken. PImage fany; int xpos = 0; void setup(){ size(352,900, P3D); background(0); fany = loadimage( zelfportret.jpg ); fany.resize(fany.width, fany.height); void draw(){ pushmatrix(); int xp = int(random(width)); int yp = int(random(height)); color c = fany.get(xp,yp); fill(c,80); nostroke(); pushmatrix(); translate(xp,yp); framerate(30.0); rectmode(center); box(random(xp/8),random(yp/8),random( xp/8)); popmatrix(); popmatrix(); // SAVE IMAGE float saveincr; void mousepressed() { saveincr++; save( image +saveincr+.jpg );

10 ZELFPORTRET > INTERFACE DESIGN (MOBILE APP) ICON OPDRACHT OMSCHRIJVING: Een elektronisch zelfportret/portfolio/cv bouwen dat kan draaien op een mobiel platform (iphone/ipod/ ipad/nokia smartphones/...). Bouw een interface incl navigatie, icons, etc... CONCEPT: Mijn applicaties zal een portfolio worden die maandelijks wordt geupdate. Er zal gebruik worden gemaakt van verschillende iphones om de applicatie volledig tot zijn recht te laten komen. De verschillende iphones zullen elkaar herkennen en eigenlijk het beeld delen over de 3 iphones. Het idee kwam na het zien van een filmpje op youtube van een illusionist die gebruik maakt van moderne elektronische middelen, Marco Tempest. Hij heeft een filmpje op vimeo waar je kan zien hoe hij goochelt met behulp van 3 iphones. Hij maakt gebruik van MultiVid een applicatie die de 3 iphones synchroniseerd en zo een video synchroon afspeelt op meerdere iphones,... Met mijn applicatie zal het nog iets verder gaan omdat we niet een video gaan afspelen maar gewoon een mini portfolio site gaan maken die met behulp van de 3 iphones bepaalde dingen gaat verdelen over de schermen.

11 PAGINAS > Home > Keuzepaginas

12 PAGINAS > About > Video > Back (keuzepaginas) ABOUT Hello, I m Zeno! I m a student and a freelance webdesigner working with HTML, CSS, JavaScript, Illustrator, Photoshop, InDesign and After Effects.

13 PAGINAS > Contact > Work > Close (sluit app af) CONTACT WORK GSM: 0472/378486

14 WERKING -> -> -> -> ->

15 WERKING ABOUT Hello, I m Zeno! I m a student and a freelance webdesigner working with HTML, CSS, JavaScript, Illustrator, Photoshop, InDesign and After Effects. WORK WORK CONTACT GSM: 0472/378486