Processing intro - computerdenken, als ontwerper !? (dutch)

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

Transcript of Processing intro - computerdenken, als ontwerper !? (dutch)

  • 1. Multimedia Technology 2 Lessenreeks door Tom Luyten voor Communicatie- en Multimedia Design MaastrichtHoorcollege 1Computerdenken, 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 [email protected] 3. multimedia technology 2 Algemeen 9 lesweken + 1 toets week Hoorcollege 45 min (inspiratie+context) Werkcollege 3uLesmateriaal Boek: Learning Processing PowerPoint/Pdf's (Blackboard) Open ProcessingOefeningen (!) Oplossingen: www.learningprocessing.com 4. multimedia technology 2 Eindbeoordeling Individuele opdracht(en) Schriftelijke proef(50%) (50%)Deadlines Schriftelijke toets Individuele eindopdracht Lesopdrachtentoetsweek (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 TechniekenVerschil:blok blok blok blok1 2 3 4UNIVERSEEL (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 makenProcessing ? Java gebaseerd Gericht op ontwerpers (!) = direct visueel resultaat Lage instapdrempel Hoog plafond 8. Door Onformative 9. Generative-gestaltung.de 10. Adidas Megalizer Link naar de fysieke wereld 11. Les 1 : The beginningPixels (p. 3 16) Pixel cordinatenBasisvormen: point, line, rectangle, ellipseKleur: grijsschaal, RGBTransparantie 12. Les 1 : The beginningPixels (p. 3 16) Pixel cordinatenBasisvormen: point, line, rectangle, ellipseKleur: grijsschaal, RGBTransparantie 13. RekenpapierElk Punt op het scherm is een pixelheeft een locatie (x,y) 14. CordinatensysteemNiet hetzelfde! Computer plaatst (0,0) linksboven X is horizontaal= hoe groter X, hoe meer naar rechtsY is verticaal= hoe groter Y, hoe meer naar onder 15. Les 1 : The beginningPixels (p. 3 16) Pixel cordinatenBasisvormen: point, line, rectangle, ellipseKleur: grijsschaal, RGBTransparantie 16. Puntpoint(4,5); point, zonder hoofdletters(x,y)Puntkomma om af te sluitenX komt altijd eerst 17. Lijnline(x1,y1,x2,y2); 2 punten(x1,y1,x2,y2)Puntkomma om af te sluitenaltijd in deze volgorde, X eerst 18. Rechthoek 1rect(x1,y1,breedte,hoogte); rect met kleine lettersCordinaten van punt linksboven, breedte, hoogteStandaardmodus vanuit linkerhoekPuntkomma om af te sluiten 19. Rechthoek 2rectMode(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. 20. Rechthoek 3rectMode(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 21. ellipsellipse(x1,y1,breedte, hoogte); Dezelfde modes als de rechthoekellipse wordt in een rechthoek getekendDefault voor de ellipse is CENTER! (in tegenstelling tot CORNER bij de rechthoek) 22. Overzicht basisvormen Vormen point(x,y); line(x1,y1,x2,y2); rect(x1,y1,breedte,hoogte);default = CORNER ellipse(x1,y1,breedte, hoogte);default = CENTERModes CORNER CORNERS CENTER 23. Les 1 : The beginningPixels (p. 3 16) Pixel cordinatenBasisvormen: point, line, rectangle, ellipseKleur: grijsschaal, RGBTransparantie 24. Grijswaarden 25. RGB fill(rood, groen, blauw); Ook een as van 0 (niks van de kleur) tot 255 (maximum van de kleur) 26. Les 1 : The beginningPixels (p. 3 16) Pixel cordinatenBasisvormen: point, line, rectangle, ellipseKleur: grijsschaal, RGBTransparantie 27. Transparantie Een vierde parameter transparantieStandaard op 255, ook als niet ingevuldFill(rood, groen, blauw, zichtbaarheid);Fill(grijswaarde, zichtbaarheid);Ook een as van 0 (compleet doorzichtig) tot 255 (volledig gevuld/niet doorzichtig) 28. Overzicht pixelsOverzicht verschillende mogelijkheden: fill(grijswaarde); fill(grijswaarde, zichtbaarheid); fill(rood, groen, blauw); fill(rood, groen, blauw, zichtbaarheid);