1. Multimedia Technology 2
Lessenreeks door Tom Luyten
voor Communicatie- en Multimedia Design Maastricht
Hoorcollege 1
Computerdenken, als ontwerper!?
Gebaseerd op het boek “Learning Processing” door Daniel Schiffman
En de PowerPoint van Donald W. Smith

2. Tom Luyten
http://www.fiftylab.be
tom.luyten@zuyd.nl

3. multimedia technology 2
Algemeen
• 9 lesweken + 1 toets week
• Hoorcollege 45 min (inspiratie+context)
• Werkcollege 3u
Lesmateriaal
• Boek: “Learning Processing”
• PowerPoint/Pdf's (Blackboard)
• Open Processing
Oefeningen (!)
• Oplossingen: www.learningprocessing.com

4. multimedia technology 2
Eindbeoordeling
• Individuele opdracht(en)
• Schriftelijke proef
(50%)
(50%)
Deadlines
• Schriftelijke toets
• Individuele eindopdracht
• Lesopdrachten
toetsweek (zie rooster)
vrijdag voor de toetsweek
aanvang van de volgende les

5. multimedia technology 2
Verbeteringen aan lessenreeks
•
•
•
•
•
Herhalingsles
Oefentoets
Open Processing portfolio (leren van anderen)
Processing tutorials/lessen (Blackboard)
Tweak mode (inzicht)

6. Introductie
Algemene inhoud
• Basis denken
• Begrippen
• Technieken
Verschil:
blok
blok
blok
blok
1
2
3
4
UNIVERSEEL
(php, java, c sharp, javascript,…)
:
:
:
:
programmeren voor het web
Programmeerprincipes adhv creatieve softw
generatief ontwerpen basis
generatief ontwerpen uitvoer

7. Introductie
Programmeren voor ontwerpers ?
•
•
•
•
•
Mee kunnen in een verandere wereld
ontwerpen voor het nu, niet voor gisteren
nieuwe mogelijkheden
Basis voor multidisciplinair werken
Groeien als ontwerper, nieuwe manieren van maken
Processing ?
•
•
•
•
Java gebaseerd
Gericht op ontwerpers (!) = direct visueel resultaat
Lage instapdrempel
Hoog plafond

8. Door Onformative

10. Generative-gestaltung.de

11. Adidas Megalizer
Link naar de fysieke wereld

12. Les 1 : The beginning
Pixels (p. 3  16)
•
Pixel coördinaten
•
Basisvormen: point, line, rectangle, ellipse
•
Kleur: grijsschaal, “RGB”
•
Transparantie

13. Les 1 : The beginning
Pixels (p. 3  16)
•
Pixel coördinaten
•
Basisvormen: point, line, rectangle, ellipse
•
Kleur: grijsschaal, “RGB”
•
Transparantie

14. Rekenpapier
•
Elk Punt op het scherm is een pixel
•
heeft een locatie (x,y)

15. Coördinatensysteem
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

16. Les 1 : The beginning
Pixels (p. 3  16)
•
Pixel coördinaten
•
Basisvormen: point, line, rectangle, ellipse
•
Kleur: grijsschaal, “RGB”
•
Transparantie

17. Punt
point(4,5);
•
point, zonder hoofdletters
•
(x,y)
•
Puntkomma om af te sluiten
X komt altijd eerst

18. Lijn
line(x1,y1,x2,y2);
•
2 punten
•
(x1,y1,x2,y2)
•
Puntkomma om af te sluiten
altijd in deze volgorde, X eerst

19. Rechthoek 1
rect(x1,y1,breedte,hoogte);
•
rect met kleine letters
•
Coördinaten van punt linksboven, breedte, hoogte
•
Standaardmodus vanuit linkerhoek
•
Puntkomma om af te sluiten

20. Rechthoek 2
rectMode(CENTER);
rect(x1,y1,breedte,hoogte);
•
rectMode veranderd de manier waarop een rechthoek wordt getekend.
•
Definieer 1 centraal punt, van daar uit breedte en hoogte.

21. Rechthoek 3
rectMode(CORNERS);
rect(x1,y1,x2,y2);
•
rectMode veranderd de manier waarop een rechthoek wordt getekend.
•
2 punten, Linksboven en rechtsonder, waartussen de rechthoek wordt getekend

22. 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)

23. Overzicht basisvormen
Vormen
• point(x,y);
• line(x1,y1,x2,y2);
• rect(x1,y1,breedte,hoogte);
default = CORNER
• ellipse(x1,y1,breedte, hoogte);
default = CENTER
Modes
• CORNER
• CORNERS
• CENTER

24. Les 1 : The beginning
Pixels (p. 3  16)
•
Pixel coördinaten
•
Basisvormen: point, line, rectangle, ellipse
•
Kleur: grijsschaal, “RGB”
•
Transparantie

25. Grijswaarden

26. RGB
• fill(rood, groen, blauw);
• Ook een as van 0 (niks van de kleur)
tot 255 (maximum van de kleur)

27. Les 1 : The beginning
Pixels (p. 3  16)
•
Pixel coördinaten
•
Basisvormen: point, line, rectangle, ellipse
•
Kleur: grijsschaal, “RGB”
•
Transparantie

28. Transparantie
•
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)

29. Overzicht pixels
Overzicht verschillende mogelijkheden:
• fill(grijswaarde);
• fill(grijswaarde, zichtbaarheid);
• fill(rood, groen, blauw);
• fill(rood, groen, blauw, zichtbaarheid);