Processing Werkcollege 1 - the beginning

download Processing Werkcollege 1 - the beginning

of 44

  • date post

    12-Jul-2015
  • Category

    Technology

  • view

    206
  • download

    0

Embed Size (px)

Transcript of Processing Werkcollege 1 - the beginning

Dia 1

Multimedia Technology 2Lessenreeks door Tom Luyten voor Communicatie- en Multimedia Design Maastricht

Werkcollege 1The beginningGebaseerd op het boek Learning Processing door Daniel SchiffmanEn de PowerPoint van Donald W. Smith

Pixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningPixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningGrijswaardenbackground(255);

stroke(0);fill(150);rect(50,50,75,100);Grijswaardenbackground(255);// witte achtergrond

stroke(0);// zwarte omranding

fill(150);// vullen met grijs

rect(50,50,75,100);// teken rechtoek met de vooraf gedefinieerde parameters

GrijswaardenInstructies altijd voor dat de vorm wordt getekendEen computer leest van boven naar onder

Standaard (wanneer je dus geen instructies meegeeft):stroke() : zwart of 0fill() : wit of 255

Om een stroke() of fill() op te heffen gebruik jenoStroke();noFill();De stroke of fill verdwijnt danNeem een stuk papier en herschrijf onderstaand voorbeeld voor een rode achtergrond, met groen doorzichtige rechthoek en blauwe randGrijswaardenbackground(255);// witte achtergrond

stroke(0);// zwarte omranding

fill(150);// vullen met grijs

rect(50,50,75,100);// teken rechtoek met de vooraf gedefinieerde parameters

5 min.Pixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningDownloadenhttp://www.processing.org

InstallerenUitpakken- naar applications (MAC)- naar c:\ProgramFiles\ (PC)

Werkt onmiddellijk, eventueel snelkoppeling aanmakenDownloaden en installeren Processing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningPixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningStandaard Processing map in my documents aangemaaktal je sketches komen daar standaard in terecht

Elke sketch heeft zijn eigen folder met zelfde naam als de sketch

Soms is er ook een folder data in aanwezig, waar media elementen van het geschreven programma worden opgeslagen

Libraries folder voor uitbreidingen

Modes folder voor export mogelijkheden

Sketchbook

Het Processing menu

Pixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningWat zijn we al tegengekomen ?

background();ellipse();stroke();rectMode();fill();ellipseMode();noFill();noStroke();point();line();rect();Code schrijvenWat zijn we al tegengekomen ?

background();ellipse();stroke();rectMode();fill();ellipseMode();noFill();noStroke();een nieuwe : size(xgrootte,ygrootte);point();definieert grootte van het display line();windowrect();size(); komt altijd eerst !Functies

Neem deze code overPas vervolgens de waarden aan, experimenteer en kijk wat de gevolgen zijnPixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningProcessing zal je sketch niet uitvoeren als er een fout optreedt

De lijn waar de fout is gemaakt wordt gehighlight

Processing duidt enkel de eerste fout aanFoutmeldingen

Pixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningAls je iets niet weet : Help find in referencewww.processing.org search

Of gebruik de Processing Cheat sheet: http://goo.gl/gHtM9k

The processing reference

Pixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningVoorlopig bestaat de code die we schrijven uit functions of functies

Een functie is een (onzichtbaar) stukje van een programma, dat een aantal waarden nodig heeft en vervolgens weet wat het daarmee moet doen.

Een function heeft een naam, gevolgd door een set arguments, die tussen haakjes staan

Voorbeeld:line(0,0,200,200);De lijn functie tekent een lijn met de opgegeven argumentenWat gebeurt er achter de schermen? Wat zit er achter deze functie?FunctiesWat zijn we al tegengekomen ?

background();ellipse();stroke();rectMode();fill();ellipseMode();noFill();noStroke();een nieuwe : size(xgrootte,ygrootte);point();definieert grootte van het display line();windowrect();size(x,y); komt altijd eerst !FunctiesJe eigen monstertjeStel een eigen monstertje samen door gebruik te maken van de primitieve vormen die je al kent zoals line(); ellipse();rect();

Typ de code voor je monstertje over in Processing en Haal de fouten eruitOpdracht 1

25 min.Er gebeuren dingen als we typen:

Processing kleurt gekende woorden zoals functies of ingebouwde variabelen.

Met de functie println(dit wordt geprint); printen we tekst in het message window

Het cijfer links onderaan geeft de geselecteerde lijn code aanCode schrijven

Commentaar is een handige tool

Je kan commentaar in je code kwijt door //voor een regel te plaatsen of meerder regels te openen met /* en te sluiten met */Begin er meteen mee

Het maakt je code leesbaarder voor jezelf, vooral als sketches groter worden

Het maakt de code begrijpbaar voor iemand andersCommentaar in code

Vul de sketch die je net hebt gemaakt aan met betekenisvolle commentaarPixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningWelke stappen onderneem je als je gaat rennen?

Hoeveel keer herhaal je elke handeling?

We structureren dit, denkende als een computer:Stap 1: schoenen aandoen, binden (slechts 1 keer)Stap 2: zet je linkervoet voor je rechter (herhaal)FlowHoe zit dit bij een computerprogramma? Een Game als voorbeeld:

Een game start met een set conditiesJe stelt de naam van je figuur inJe start met en score van 0 puntenDeze acties doe je maar n keerDit deel van het programma noemen we SETUP

Daarna begin je het game te spelenElk moment checkt de computer wat jij aan het doen bent met je muis of keyboardEn past het scherm hiernaar aanDeze cyclus gebeurt een 30 tal keer per seconde en blijft herhalen tot je het game stoptDit deel van het programma noemen we DRAWFlowPixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningsetup() en draw()

1a,1b,1c,2a,2b,2a,2b,.In Processing: setup() en draw()

Schets dynamisch maken

Onze sketch moet worden opgedeeld in setup(); voor de initialisatie van het programma en draw(); voor de loop.

setup(); en draw(); zijn codeblokken

Codeblokken beginnen met een { en eindigen met een }

Door te tekst te laten inspringen geven we aan tot welk blok de code behoort (edit auto format)setup() en draw() Herschrijf je statische schets van je monstertje als dynamische schets door gebruik te maken van de indeling setup(); en draw();setup() en draw()

15 min.

Van:

Naar:

Er verandert niets als we de sketch runnen (?!)

Waarom?Omdat er niets varieert binnen draw()We tekenen hetzelfde resultaat steeds over elkaarsetup() en draw()

Pixels (p. 3 16)oefeningProcessing (p. 17 29)Processing downloaden en installerenHet Processing menu en het sketchbookCode schrijvenFoutmeldingenThe ReferenceJe eerste sketchPublicerenInteractie (p. 31 42)De flow van een programmasetup() en draw()Interactie met de muisevents

Les 1 : The beginningCordinaten van de muis uitlezenIn plaats van statisch zelf een cijfer te typen, gebruiken we de locatie van de muismouseX en mouseYInteractie met de muisInteractie met de muisVerplaats background(255) e