SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
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
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
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
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
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
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
Downloaden en installeren
Downloaden
http://www.processing.org

Installeren
Uitpakken

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

Werkt onmiddellijk, eventueel snelkoppeling aanmaken
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
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
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
Het Processing menu
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
Code schrijven
Wat zijn we al tegengekomen ?
background();
stroke();
fill();
noFill();
noStroke();
point();
line();
rect();

ellipse();
rectMode();
ellipseMode();
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 !
Neem deze code over
Pas vervolgens de waarden aan, experimenteer
en kijk wat de gevolgen zijn
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
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
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
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
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
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?
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 !
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
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
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
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
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)
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
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
setup() en draw()
In Processing:

1a,1b,1c,2a,2b,2a,2b,….
setup() en draw()
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()

15 min.
Herschrijf je statische schets van je monstertje als
dynamische schets door gebruik te maken van de indeling
setup(); en draw();
Van:
Naar:
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
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
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
Interactie met de muis

Verplaats background(255) eens naar setup. Wat gebeurt er?
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.
Processing Werkcollege 1 - the beginning
Opdracht
Herschrijf je schets, zodat het monstertje in zijn volledigheid
de muis volgt.

Weitere ähnliche Inhalte

Mehr von Tom Luyten

Processing Werkcollege 6 functies met parameters
Processing Werkcollege 6   functies met parametersProcessing Werkcollege 6   functies met parameters
Processing Werkcollege 6 functies met parametersTom Luyten
 
Processing Werkcollege 5 functies zonder arguments
Processing Werkcollege 5   functies zonder argumentsProcessing Werkcollege 5   functies zonder arguments
Processing Werkcollege 5 functies zonder argumentsTom Luyten
 
Processing Werkcollege 4 - loops
Processing Werkcollege 4 - loopsProcessing Werkcollege 4 - loops
Processing Werkcollege 4 - loopsTom Luyten
 
Processing Werkcollege 3 - condities
Processing Werkcollege 3 - conditiesProcessing Werkcollege 3 - condities
Processing Werkcollege 3 - conditiesTom Luyten
 
Processing intro - computerdenken, als ontwerper !? (dutch)
Processing intro - computerdenken, als ontwerper !? (dutch)Processing intro - computerdenken, als ontwerper !? (dutch)
Processing intro - computerdenken, als ontwerper !? (dutch)Tom Luyten
 
Eindpresentatie thesis tom_luyten_draft_1
Eindpresentatie thesis tom_luyten_draft_1Eindpresentatie thesis tom_luyten_draft_1
Eindpresentatie thesis tom_luyten_draft_1Tom Luyten
 

Mehr von Tom Luyten (6)

Processing Werkcollege 6 functies met parameters
Processing Werkcollege 6   functies met parametersProcessing Werkcollege 6   functies met parameters
Processing Werkcollege 6 functies met parameters
 
Processing Werkcollege 5 functies zonder arguments
Processing Werkcollege 5   functies zonder argumentsProcessing Werkcollege 5   functies zonder arguments
Processing Werkcollege 5 functies zonder arguments
 
Processing Werkcollege 4 - loops
Processing Werkcollege 4 - loopsProcessing Werkcollege 4 - loops
Processing Werkcollege 4 - loops
 
Processing Werkcollege 3 - condities
Processing Werkcollege 3 - conditiesProcessing Werkcollege 3 - condities
Processing Werkcollege 3 - condities
 
Processing intro - computerdenken, als ontwerper !? (dutch)
Processing intro - computerdenken, als ontwerper !? (dutch)Processing intro - computerdenken, als ontwerper !? (dutch)
Processing intro - computerdenken, als ontwerper !? (dutch)
 
Eindpresentatie thesis tom_luyten_draft_1
Eindpresentatie thesis tom_luyten_draft_1Eindpresentatie thesis tom_luyten_draft_1
Eindpresentatie thesis tom_luyten_draft_1
 

Processing Werkcollege 1 - the beginning

  • 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
  • 5. 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
  • 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
  • 9. Downloaden en installeren Downloaden http://www.processing.org Installeren Uitpakken - naar applications (MAC) - naar c:ProgramFiles (PC) Werkt onmiddellijk, eventueel snelkoppeling aanmaken
  • 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
  • 32. setup() en draw() In Processing: 1a,1b,1c,2a,2b,2a,2b,….
  • 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();
  • 36. Van:
  • 37. Naar:
  • 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.
  • 44. Opdracht Herschrijf je schets, zodat het monstertje in zijn volledigheid de muis volgt.