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.