processing werkcollege 1 - the beginning
Post on 12-Jul-2015
211 Views
Preview:
TRANSCRIPT
Multimedia Technology 2Lessenreeks door Tom Luyten
voor Communicatie- en Multimedia Design Maastricht
Werkcollege 1
The beginning
Gebaseerd op het boek “Learning Processing” door Daniel Schiffman
En de PowerPoint van Donald W. Smith
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Grijswaarden
background(255);
stroke(0);
fill(150);
rect(50,50,75,100);
Grijswaarden
background(255); // witte achtergrond
stroke(0); // zwarte omranding
fill(150); // vullen met grijs
rect(50,50,75,100); // teken rechtoek met de vooraf
gedefinieerde parameters
Grijswaarden
• Instructies altijd voor dat de vorm wordt getekend
Een computer leest van boven naar onder
• Standaard (wanneer je dus geen instructies meegeeft):
• stroke() : zwart of 0
• fill() : wit of 255
• Om een stroke() of fill() op te heffen gebruik je
• noStroke();
• noFill();
De stroke of fill verdwijnt dan
Neem een stuk papier en herschrijf onderstaand voorbeeld voor een rode achtergrond, met groen doorzichtige rechthoek en blauwe rand
Grijswaarden
background(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)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Downloaden
http://www.processing.org
InstallerenUitpakken - naar applications (MAC)
- naar c:\ProgramFiles\ (PC)
Werkt onmiddellijk, eventueel snelkoppeling aanmaken
Downloaden en installeren
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
• Standaard Processing map in my documents aangemaakt
al 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)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Wat zijn we al tegengekomen ?
background(); ellipse();
stroke(); rectMode();
fill(); ellipseMode();
noFill();
noStroke();
point();
line();
rect();
Code schrijven
Wat zijn we al tegengekomen ?
background(); ellipse();
stroke(); rectMode();
fill(); ellipseMode();
noFill();
noStroke(); een nieuwe : size(xgrootte,ygrootte);
point(); definieert grootte van het display
line(); window
rect(); size(); komt altijd eerst !
Functies
Neem deze code over
Pas vervolgens de waarden aan, experimenteer
en kijk wat de gevolgen zijn
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
• Processing zal je sketch nietuitvoeren als er een fout optreedt
• De lijn waar de fout is gemaakt wordt gehighlight
• Processing duidt enkel de eerste fout aan
Foutmeldingen
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Als je iets niet weet :
• Help find in reference
• www.processing.org search
• Of gebruik de Processing Cheat sheet: http://goo.gl/gHtM9k
The processing reference
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
• Voorlopig 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 argumenten
• Wat gebeurt er achter de schermen? Wat zit er achter deze functie?
Functies
Wat zijn we al tegengekomen ?
background(); ellipse();
stroke(); rectMode();
fill(); ellipseMode();
noFill();
noStroke(); een nieuwe : size(xgrootte,ygrootte);
point(); definieert grootte van het display
line(); window
rect(); size(x,y); komt altijd eerst !
Functies
Je 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 eruit
Opdracht 1
25 min.
Er gebeuren dingen als we typen:
• Processing kleurt gekende woorden zoals functies of ingebouwdevariabelen.
• Met de functie println(“dit wordt geprint”); printen we tekst in het message window
• Het cijfer links onderaan geeft de geselecteerde lijn code aan
Code 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 leesbaardervoor jezelf, vooral als sketches groter worden
• Het maakt de code begrijpbaarvoor iemand anders
Commentaar in code
Vul de sketch die je net hebt
gemaakt aan met
betekenisvolle commentaar
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
• Welke 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)
Flow
Hoe zit dit bij een computerprogramma?
Een Game als voorbeeld:
• Een game start met een set condities
• Je stelt de naam van je figuur in
• Je start met en score van 0 punten
• Deze acties doe je maar één keer
• Dit deel van het programma noemen we SETUP
• Daarna begin je het game te spelen
• Elk moment checkt de computer wat jij aan het doen bent met je muis of keyboard
• En past het scherm hiernaar aan
• Deze cyclus gebeurt een 30 tal keer per seconde
en blijft herhalen tot je het game stopt
• Dit deel van het programma noemen we DRAW
Flow
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
setup() 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 elkaar
setup() en draw()
Pixels (p. 3 16)
• oefening
Processing (p. 17 29)
• Processing downloaden en installeren
• Het Processing menu en het sketchbook
• Code schrijven
• Foutmeldingen
• The Reference
• Je eerste sketch
• Publiceren
Interactie (p. 31 42)
• De flow van een programma
• setup() en draw()
• Interactie met de muis
• events
Les 1 : The beginning
Coördinaten van de muis uitlezen• In plaats van statisch zelf een cijfer te typen, gebruiken
we de locatie van de muis
• mouseX en mouseY
Interactie met de muis
Interactie met de muis
Verplaats background(255) eens naar setup. Wat gebeurt er?
Plaats vormen relatief tot muiscoordinaat• Alles wat je op (mouseX, mouseY) plaatst zal op identiek
dezelfde plaats als de muis verschijnen.
• Wil je vormen die de muis volgen op een afstand, dan plaats je ze op een afstand relatief tot de muis coördinaat
• ellipse(mouseX – 30, mouseY + 50, 50,50);
plaatst een ellipse 30 punten links en 50 punten onder de coördinaten van de muis.
Interactie met de muis
Opdracht
Herschrijf je schets, zodat het monstertje in zijn volledigheid
de muis volgt.
top related