Processing intro course - les 1 : the beginning

Transcript

1. Multimedia technologie Les 1: “the beginning” Gebaseerd op het boek “Learning Processing” door Daniel Schiffman En de PowerPoint van Donald W. Smith
2. Algemeen •  8 lesweken + 1 toets week •  3x 50 minuten les met 1 pauze van 20 minuten Lesmateriaal •  Boek: “Learning Processing” door Daniel Shiffman •  PowerPoint/Pdf's (Blackboard) Oefeningen (!) •  Oplossingen: www.learningprocessing.com Multimedia Technologie 1
3. Eindbeoordeling •  Opdrachten uit de les (50%) •  Schriftelijke proef (50%) Deadlines •  Schriftelijke toets toetsweek (zie rooster) •  Lesopdrachten aanvang van de volgende les Multimedia Technologie 1
4. Beperkt programmeren? Neen… •  Basis denken •  Begrippen = UNIVERSEEL •  Technieken (php, java, c sharp, javascript,…) Processing is een tool, programeerconcepten gelden overal! Programmeren voor ontwerpers ? Introductie
5. Beeld Afbeelding door actelion
6. Beeld Afbeelding door actelion
7. Link tussen disciplines en de buitenwereld Didier Burn and Sid Lee http://www.youtube.com/watch?v=p0LtpDFxHCQ&feature=player_embedded
8. Pixels (p. 3 à 16) •  Pixel coördinaten •  Basisvormen: point, line, rectangle, ellipse •  Kleur: grijsschaal, “RGB” •  Transparantie Processing (p. 17 à 29) •  Processing downloaden en installeren •  Het Processing menu en het sketchbook •  Code schrijven •  Foutmeldingen •  The Reference •  Je eerste sketch •  Publiceren Les 1 : “the beginning”
9. Pixels
10. Coördinaten
11. •  Elk Punt op het scherm is een pixel •  heeft een locatie (x,y) Rekenpapier
12. Niet hetzelfde! Computer plaatst (0,0) linksboven X is horizontaal = hoe groter X, hoe meer naar rechts Y is verticaal = hoe groter Y, hoe meer naar onder Coördinatensysteem
13. Basisvormen
14. •  point, zonder hoofdletters •  (x,y) X komt altijd eerst •  Puntkomma om af te sluiten Punt point(4,5);
15. •  2 punten •  (x1,y1,x2,y2) altijd in deze volgorde, X eerst •  Puntkomma om af te sluiten Lijn line(x1,y1,x2,y2);
16. •  Rect met kleine letters •  Coordinaten van punt linksboven, breedte, hoogte •  Standaardmodus vanuit linkerhoek •  Puntkomma om af te sluiten Rechthoek 1 rect(x1,y1,breedte,hoogte);
17. •  rectMode veranderd de manier waarop een rechthoek wordt getekend. •  Definieer 1 centraal punt, van daar uit breedte en hoogte. Rechthoek 2 rectMode(CENTER); rect(x1,y1,breedte,hoogte);
18. •  rectMode veranderd de manier waarop een rechthoek wordt getekend. •  2 punten, Linksboven en rechtsonder, waartussen de rechthoek wordt getekend rectMode(CORNERS); rect(x1,y1,x2,y2); Rechthoek 3
19. ellips ellipse(x1,y1,breedte, hoogte); •  Dezelfde “modes” als de rechthoek •  ellipse wordt in een rechthoek getekend •  Default voor de ellipse is CENTER! (in tegenstelling tot CORNER bij de rechthoek)
20. Overzicht basisvormen •  Vormen •  point(4,5); •  line(x1,y1,x2,y2); •  rect(x1,y1,breedte,hoogte); default = CORNER •  ellipse(x1,y1,breedte, hoogte); default = CENTER •  Modes: •  CORNER •  CORNERS •  CENTER
21. kleur
22. Grijswaarden
23. Instructies altijd voor dat de vorm wordt getekend Standaard: stroke() : zwart of 0 fill() : wit of 255 Om een stroke() of fill() op te heffen gebruik je •  noStroke(); •  noFill(); 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
24. Herschrijf onderstaand voorbeeld voor een zwarte achtergrond, met zwarte rechthoek en witte 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
25. •  fill(rood, groen, blauw); •  Ook een as van 0 (niks van de kleur) tot 255 (maximum van de kleur) RGB
26. •  Een vierde parameter transparantie •  Standaard op 255, ook als niet ingevuld •  Fill(rood, groen, blauw, zichtbaarheid); •  Fill(grijswaarde, zichtbaarheid); •  Ook een as van 0 (compleet doorzichtig) tot 255 (volledig gevuld/niet doorzichtig) Transparantie
27. •  Fill(grijswaarde); •  Fill(grijswaarde, zichtbaarheid); •  Fill(rood, groen, blauw); •  Fill(rood, groen, blauw, zichtbaarheid); Allemaal een as van 0 à 255 Overzicht pixels
28. Stel een eigen monstertje samen door gebruik te maken van de primitieve vormen die je al kent zoals line(); ellipse(); rect(); enz. Teken het op papier en schrijf de code erlangs. Opdracht
29. Processing
30. Downloaden en installeren
31. Downloaden http://www.processing.org Installeren Uitpakken naar applications naar c:\ProgramFiles\ Werkt onmiddellijk, eventueel snelkoppeling aanmaken Downloaden en installeren
32. Het Processing menu
33. •  Standaard “processing” map in my documents aangemaakt •  Ook “save as” kan •  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 Sketchbook
34. Code schrijven
35. Functies Voorlopig bestaat de code die we schrijven uit enkel functions. Een functie is een stukje van een programma, dat een aantal argumenten nodig heeft en vervolgens weet wat het daarmee moet doen. Een function heeft een naam, gevolgd door een set arguments, die tussen haakjes staan en wordt afgesloten door een puntkomma. line(0,0,200,200); De lijn functie tekent een lijn met de opgegeven argumenten. Processing heeft een hele reeks ingebouwde functies. Later leren we onze eigen functies schrijven. Code schrijven
36. Functies die we al zijn 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 ! Code schrijven
37. Eerste sketch
38. Eerste sketch
39. Er gebeuren dingen als we typen Processing kleurt gekende woorden zoals functies of ingebouwde variabelen. Met de functie println(“String”); printen we tekst in het message window Het cijfer links onderaan geeft de geselecteerde lijn code aan Je kan commentaar in je code kwijt door //voor een regel te plaatsen of meerder regels te openen met /* en te sluiten met */ Code schrijven
40. Commentaar is een handige tool 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 commentaar Commentaar in code
41. Processing zal je sketch niet uitvoeren als er een fout optreedt De lijn waar de fout is gemaakt wordt ge highlight Processing duidt enkel de eerste fout aan Maak een fout in je sketch en kijk wat er gebeurt Foutmeldingen
42. Als je iets niet weet HELP à FIND IN REFERENCE Uitleg, voorbeeld,… The processing reference
43. Je eigen monstertje Typ de code voor je monstertje over in Processing, Haal de fouten eruit. Vergeet niet: Maak de oefeningen voor dit hoofdstuk in je boek Opdracht 1