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



Vergelijkbare documenten
Scripting 2 TUTORIAL EEN APP ONTWIKKELEN VOOR ANDROID MET PROCESSING. ellipse(screenwidth/2, screenheight/2, 140,140); DOOR THIERRY BRANDERHORST

Lesje programmeren. Hallo allemaal, wat fijn dat je er bent. ROBOTICA

A Inloggen. B - Wachtwoord Veranderen

size( 800, 500 ); Canvas = tekenblad 'size' is een woord dat processing herkent om de grootte van het canvas (tekenblad) in te stellen

Processing. Met Processing kun je hele mooie tekeningen maken niet met stiften of potloden, maar door tegen de computer te zeggen wat je wil zien.

Module Programmeren in Javascript

Grote Beer TR Rotterdam

Functioneel Ontwerp / Wireframes:

Graphic Design. Keuzevak GD1. Raul Martinez-Orozco / raul@thecombine.nl)

X. Grafische elementen


Talk Nerdy To Me NHL. Responsive Webdesign. Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com

Documentatie Nederlands v1

SAMPLE 11 = + 11 = + + Exploring Combinations of Ten + + = = + + = + = = + = = 11. Step Up. Step Ahead

CURSUS DIGITAAL ATELIER Photoshop/ Illustrator/ Indesign

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN B

Contactgegevens Opleider. Thomas BAREZ. Competenties verworven tijdens de opleiding. Competentierapport IBO

appendix A Full project description dd

Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.

Handleiding CMS EWall

Uitleg Glogster voor de leerlingen

Stappenplan Infographic maken

English is everywhere. hi morning mouse cool help desk hello computers mail school game. Lees de tekst. Omcirkel de Engelse woorden.

Screen Design. Deliverable 3 - Visual Design. Pepijn Gieles Docent: Jasper Schelling

Uitleg van Glogster. hyperlinks maken naar andere websites.

Ontwerp Portfoliowebsite MMIO 2016

Een introductie in het vormgeven van je eigen website... 2 Over CSS... 2 Id s en classes... 3 Eigenschappen... 4 Color:... 4

Veel succes! 1. Gegeven is de volgende klasse:

onderzoek ontwerp realisatie implementatie

MODULE 4 : WEBSITEX1

Design Document. If This Then That

HANDLEIDING PROGRAMMEREN IN PASCAL (LAZARUS)

De interface van de Audio Narration lijkt nu meer op de vormgeving zoals we die kennen van Storyline. Meerdere blokken zijn vanaf Studio 360 naar

Stedelijk Museum. Ontwerpspecificatie. VMBO leerlingen interactieve rondleiding. Meesterproef Minor UXD V Jasper Bunschoten

Werken met afbeeldingen in webpagina's

Portfolio Marc Smeehuijzen Freelance User Experience Designer. Interactie ontwerp. User research. Een selectie van mijn werk:

Het handboek van KDE Screen Ruler. Lauri Watts Vertaling van het handboek: Niels Reedijk Vertaler/Nalezer: Alexander S. Koning

IMP Uitwerking week 13

PORTFOLIO Coen Aukema Visual Designer coenaukema.com

PROOF of CONCEPT. Technical justification + Design. Martijn Muit - Digital Publisching Semester 4

Grafisch ontwerp. Referenties.

Wat is een child-theme?

Concept CLE01-3 Ferro Tempo

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN B

NSPYRE LEGO MINDSTORMS UITDAGING (JAVA) INLEIDING. DOEL: SIMULATOR:

Social media plan. bit. creations

Card sorting Sitemap Use case. Wireframes Schermontwerpen Stijlgids. Niet in les gedaan! Via je einddocument. Verkennen. Genereren.

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

Interactive media Developer (IMD) In samenwerking met House of Media

Versie 2. Opdracht deel B Inhoud. Raoul Vos Hogeschool Leiden Studentnummer:

Monday, November 18, 13

If This Then That. The color detecting sound device. Naam: Bertus Jansen Studentnummer: Klas: G&I-1C

Modular Development. Een App in Facebook. Dennis van der Oost CMD2D Module: CMDDEV01-7 Docent: Eric Mahieu. Eindverslag v.1.

Design for Mobile. Projectplan CMD jaar 2. Remco Dekker Daan van Klinken Sybren Wartna CMD3A UXD

WESTPOINTDIGITAL MOBILE APPS DEVELOPMENT

Lessen Java: Reeks pag. 1

Functioneel Ontwerp PlastiCats

class book I am reading a book. close your books homework My teacher gave me a lot of homework. to read We are going to read that book.

Creature Design / Photobash. Hier nog een Tutorial over Brushes with brushes

Summerschool Mobiele Apps augustus 2012 Herman van Dompseler. HTML 5 App

Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website

Abstracte klassen & Interfaces

Pro templates. Copyright Starteenwinkel.nl

+ prototyping. Prototyping CMDDEV01-6. Aron Martin CMD2D

EM6005 / EM6015 iphone en ipod app

Android Development CCSS2011

Interactief blok 2 code opdracht 6 - wireframe

Startersservice Thomas More

adobe Premiére Pro CC?

Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat.

DESIGNBIBLE. 4 Visuele families (inspiratie) Afbeeldingroepen die inspiratie zullen bieden voor mijn vorm geving. 1 De websites van de sportbonden

Bram Vanhaeren. graphic designer _ +32 (0) /

HET GEHEIME RECEPT VAN ENSCHEDE

Adobe Premiere Pro CS5. Adobe Premiere Pro CS5. Adobe Premiere Pro CS5. Adobe Premiere Pro CS5

General info on using shopping carts with Ingenico epayments

A Inloggen. B - Wachtwoord Veranderen

Handleiding Workshop:Code It. Een workshop over coderen, door Code For Kids

Voorbeeldtentamen Inleiding programmeren (IN1608WI), Oktober 2003, , Technische Universiteit Delft, Faculteit EWI, Afdeling 2.

Website analyse anytime.nl

Keuzepakket: ICT en onderwijs

Handleiding. All In The Picture

Eye Feature Detection Towards Automatic Strabismus Screening

Smartphones. Figuur 1 Our Mobile Planet, 2012

IOS and Android APP instruction

i ll take off to the cloud

Veel succes! 1. Deze opgave bestaat uit een aantal deelvragen. Houd het antwoord kort: één of twee zinnen per onderdeel kan al genoeg zijn.

Website beoordeling seo.sololaki.com

Gebruiksaanwijzing Samsung PV 210 Tablet PC. Inhoudsopgave

Extra mogelijkheden Adobe Presenter. Video toevoegen

Programmeren in Java les 3

Tentamen Formele Methoden voor Software Engineering (213520)

Universiteit van Amsterdam FNWI. Voorbeeld van tussentoets Inleiding programmeren

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO

SMARTPHONE APPLICATIE HANDLEIDING

PORTFOLIO WEBSITE DOCUMENT AMY VERLOUW VAK: DED KLAS: M21T DOCENT: SCL

Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.

Zo maak je een presentatie met Prezi. Zo maak je een account.. Zo log je in op Prezi. Zo begin je een presentatie.

Handleiding 1a WAT JE NODIG HEBT. NewsMaker 2015 voor Windows Teevers Pte Ltd. Joy of Progress BV

Interaction Design for the Semantic Web

Hoe maak je een website voor de school en voor elke klas?

Transcriptie:

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

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

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: http://www.graphicalscores.org/wordpress/ http://www.spiralcage.com/blog/?tag=graphic-scores THERE S NO SOUND IN MY HEAD - http://vimeo.com/14469188 BIRDS ON THE WIRES - http://vimeo.com/6428069

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

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 );

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.

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();

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)

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 );

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 http://vimeo.com/27627548 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.

PAGINAS > Home > Keuzepaginas

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.

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

WERKING -> -> -> -> ->

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