Processing Werkcollege 1 - the beginning

44
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

Transcript of Processing Werkcollege 1 - the beginning

Page 1: Processing Werkcollege 1 - the beginning

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

Page 2: Processing Werkcollege 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

Page 3: Processing Werkcollege 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

Page 4: Processing Werkcollege 1 - the beginning

Grijswaarden

background(255);

stroke(0);

fill(150);

rect(50,50,75,100);

Page 5: Processing Werkcollege 1 - the beginning

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

Page 6: Processing Werkcollege 1 - the beginning

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

Page 7: Processing Werkcollege 1 - the beginning

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.

Page 8: Processing Werkcollege 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

Page 9: Processing Werkcollege 1 - the beginning

Downloaden

http://www.processing.org

InstallerenUitpakken - naar applications (MAC)

- naar c:\ProgramFiles\ (PC)

Werkt onmiddellijk, eventueel snelkoppeling aanmaken

Downloaden en installeren

Page 10: Processing Werkcollege 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

Page 11: Processing Werkcollege 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

Page 12: Processing Werkcollege 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

Page 13: Processing Werkcollege 1 - the beginning

Het Processing menu

Page 14: Processing Werkcollege 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

Page 15: Processing Werkcollege 1 - the beginning

Wat zijn we al tegengekomen ?

background(); ellipse();

stroke(); rectMode();

fill(); ellipseMode();

noFill();

noStroke();

point();

line();

rect();

Code schrijven

Page 16: Processing Werkcollege 1 - the beginning

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

Page 17: Processing Werkcollege 1 - the beginning

Neem deze code over

Pas vervolgens de waarden aan, experimenteer

en kijk wat de gevolgen zijn

Page 18: Processing Werkcollege 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

Page 19: Processing Werkcollege 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

Page 20: Processing Werkcollege 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

Page 21: Processing Werkcollege 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

Page 22: Processing Werkcollege 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

Page 23: Processing Werkcollege 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

Page 24: Processing Werkcollege 1 - the beginning

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

Page 25: Processing Werkcollege 1 - the beginning

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.

Page 26: Processing Werkcollege 1 - the beginning

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

Page 27: Processing Werkcollege 1 - the beginning

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

Page 28: Processing Werkcollege 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

Page 29: Processing Werkcollege 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

Page 30: Processing Werkcollege 1 - the beginning

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

Page 31: Processing Werkcollege 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

Page 32: Processing Werkcollege 1 - the beginning

setup() en draw()

1a,1b,1c,2a,2b,2a,2b,….

In Processing:

Page 33: Processing Werkcollege 1 - the beginning

setup() en draw()

Page 34: Processing Werkcollege 1 - the beginning

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

Page 35: Processing Werkcollege 1 - the beginning

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.

Page 36: Processing Werkcollege 1 - the beginning

Van:

Page 37: Processing Werkcollege 1 - the beginning

Naar:

Page 38: Processing Werkcollege 1 - the beginning

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

Page 39: Processing Werkcollege 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

Page 40: Processing Werkcollege 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

Page 41: Processing Werkcollege 1 - the beginning

Interactie met de muis

Verplaats background(255) eens naar setup. Wat gebeurt er?

Page 42: Processing Werkcollege 1 - the beginning

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

Page 43: Processing Werkcollege 1 - the beginning
Page 44: Processing Werkcollege 1 - the beginning

Opdracht

Herschrijf je schets, zodat het monstertje in zijn volledigheid

de muis volgt.