1. Multimedia Technology 2
Lessenreeks 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
2. 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
3. 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
6. 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
7. Grijswaarden
5 min.
Neem een stuk papier en herschrijf onderstaand voorbeeld voor een rode
achtergrond, met groen doorzichtige rechthoek en blauwe rand
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
8. 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
10. Les 1 : The beginning
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
11. 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
12. Sketchbook
•
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
14. 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
15. Code schrijven
Wat zijn we al tegengekomen ?
background();
stroke();
fill();
noFill();
noStroke();
point();
line();
rect();
ellipse();
rectMode();
ellipseMode();
16. Functies
Wat zijn we al tegengekomen ?
background();
stroke();
fill();
noFill();
noStroke();
point();
line();
rect();
ellipse();
rectMode();
ellipseMode();
een nieuwe : size(xgrootte,ygrootte);
definieert grootte van het display
window
size(); komt altijd eerst !
17. Neem deze code over
Pas vervolgens de waarden aan, experimenteer
en kijk wat de gevolgen zijn
18. 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
19. Foutmeldingen
•
Processing 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 aan
20. 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
21. The processing reference
Als je iets niet weet :
• Help find in reference
• www.processing.org search
• Of gebruik de Processing Cheat sheet:
http://goo.gl/gHtM9k
22. 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
23. Functies
• 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?
24. Functies
Wat zijn we al tegengekomen ?
background();
stroke();
fill();
noFill();
noStroke();
point();
line();
rect();
ellipse();
rectMode();
ellipseMode();
een nieuwe : size(xgrootte,ygrootte);
definieert grootte van het display
window
size(x,y); komt altijd eerst !
25. Opdracht 1
25 min.
Je eigen monstertje
Stel 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
26. Code schrijven
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 aan
27. Commentaar in code
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 anders
Vul de sketch die je net hebt
gemaakt aan met
betekenisvolle commentaar
28. 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
29. Flow
• 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)
30. 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
31. 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
34. 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)
35. setup() en draw()
15 min.
Herschrijf je statische schets van je monstertje als
dynamische schets door gebruik te maken van de indeling
setup(); en draw();
38. setup() en draw()
Er verandert niets als we de sketch runnen (?!)
Waarom?
Omdat er niets varieert binnen draw()
We tekenen hetzelfde resultaat steeds over elkaar
39. 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
40. Interactie met de muis
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
41. Interactie met de muis
Verplaats background(255) eens naar setup. Wat gebeurt er?
42. Interactie met de muis
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.
