*5,3' ) UHOlVQLQJD *UDILNRFK,QWHUDNWLRQVSURJUDPPHULQJ Introduktion och översikt Hemsida: http://www.nada.kth.se/kurser/kth/2d1953 Registrering: res checkin grip02 Hemkatalog: /info/grip02 previous next XUVHQVXSSOlJJQLQJ Föreläsningar Ca trettio timmar varav 10 timmar gästföreläsningar Fyra gäsföreläsare fördjupar och breddar ämnet Övningar Dom flesta på formen mer praktisk inriktad föreläsning Laborationer Fem stycken (lab 1-4 i grupper om två, minprojekt i grupper om 2-4 personer och utvärdering i grupper om 4-7) Introduktion till 2D-grafik och grafiska gränssnitt med Java (Björn) GUI av formulärtyp i Swing (Björn) GLUT och OpenGL (Gustav Taxén) IDEer och GUI-byggare (Björn) 0LQSURMHNW Avancerad riteditor (Björn) 8WYlUGHULQJVXSSJLIW av interaktivt system (presenteras för resten av kursen samt på WWW) (Björn) previous next 2 %M UQ(LGHUElFN 1
XUVHQVXSSOlJJQLQJ Tentamen Tentamen på framförallt Angel, kompendier och artiklar Detaljerade läsanvisningar publiceras på kursens hemsida. Mer information och nyheter hittar du på kursens hemsida http://www.nada.kth.se/kurser/kth/2d1953 Registrering Registrera dig i res UHVÃFKHFNLQÃJULS Ping-Pong Webbaserat system för att hantera kurser Med föreläsningar, länkar, newsmöten, chattar, tester, skrivningar, etc Personliga konton som vet om vad man sett och vad som är nytt http://bilda.kth.se previous next 3 9DUI ULQWUHVVHUDVLJI UJUDILNRFKLQWHUDNWLRQ" Användarsynvinkel Grafiska gränssnitt ger (om rätt konstruerade) överskådlighet enkel och effektiv inlärning rolig och inbjudande presentation och interaktion ökad kreativitet hos användarna Utvecklarsynvinkel Vad är ett bra grafiskt/interaktivt gränssnitt? Vilka olika möjligheter finns det? Hur konstruerar jag en sådan applikation rent tekniskt? Finns det bra verktyg för att konstruera tillämpningarna? previous next 4 %M UQ(LGHUElFN 2
9DGJnUNXUVHQXWSn" Grafik Matematiska modeller, grundläggande grafiska algoritmer, visualisering, modellering, termer, tekniker och något om hårdvara Interaktion Utformning, konstruktion, design och tekniker för att fabricera interaktiva grafiska applikationer Programmering Ge inblick i tekniker och orientering om programmeringsverktyg för att skapa grafiska interaktiva tillämpningar previous next 5 *5,3 består av tre LQE UGHVEHURHQGH delar GRIP Programmering Tekniker Språk Utvecklingsmiljöer Gränssnitt WWW, Internet Grafik Tekniker Mjukvara Visualisering Dimensioner Hårdvara Interaktion Tekniker Hårdvara Människan Modeller Ergonomi previous next 6 %M UQ(LGHUElFN 3
3URJUDPPHULQJ 3URJUDPPHULQJ 7HNQLNHU 9LVXDOLVHULQJ,QWHUDNWLRQ )UDPHZRUNV.RPSRQHQWEDVHUDGH 6SUnN & -DYD 6PDOOWDON 8WYHFNOLQJVPLOM HU 6PDOOWDONPLOM HU -DYDPLOM HU $QGUD *UlQVVQLWW 7HNQLNHU $QSDVVQLQJVEDUD *UlQVVQLWWVE\JJDUH :::Ã,QWHUQHWÃPP $SSOHWV 'LVWULEXHUDGHÃDSSOLNDWLRQHU +70/ previous next 7 *UDILN *UDILN 7HNQLNHU $OJRULWPHU 3ULPLWLYHU 0RGHOOHULQJ 0MXNYDUD 2SHQ*/ *.6Ã3+,*6ÃPIO 950/ 9LVXDOLVHULQJ *UDILVNÃSUHVHQWDWLRQ )lujãeho\vqlqj 3HUFHSWXHOODÃDVSHNWHU 'LPHQVLRQHU ' ' ' +nugydud,qpdwqlqjvyhunw\j 8WPDWQLQJ %LOGPLQQH previous next 8 %M UQ(LGHUElFN 4
,QWHUDNWLRQ,QWHUDNWLRQ 7HNQLNHU 3UHVHQWDWLRQV,QWHUDNWLRQV 3URJUDPPHULQJV +nugydud 3HNYHUNW\J 6NlUP +MlOPÃKDQGVNH 0lQQLVNDQ ) UXWVlWWQLQJDU 'HOWDJDQGHÃXQGHUÃXWYHFNLQJ 6HHQGHW 0RGHOOHU.RQFHSWXHOOD 3URJUDPPHULQJVPRGHOOHU 6W\UGÃDYÃPlQQLVNDQVÃNUDY previous next 9 *UDILNNRUWKLVWRULN Milstolpar redan tidigt i datorhistorien (50-talet) fanns KDOYGXPPDXWVNULIWVHQKHWHU som teleprintrar och radskrivare omkring 1950 kom datordrivna NDWRGVWUnOHU U (CRT) previous next 10 %M UQ(LGHUElFN 5
KLVWRULN under tidigt 60-tal utvecklades 6NHWFKSDG av Ivan Sutherland på MIT Lincoln lab här användes eleganta sätt att rita och manipulera grafiska objekt med en ljuspenna man introducerade många intressanta tekniker bl.a. hierarkier av bilder och delbilder, gummibandslinjer, restriktioner (eng. constraints), gester för vissa operationer många av dessa tekniker hittar vi i dagens system previous next 11 KLVWRULN Samtidigt såg bil- och flygindustrin möjligheterna att använda grafiska tekniker &RPSXWHU$LGHG'HVLJQ (CAD) och &RPSXWHU$LGHG 0DQXIDFWXULQJ (CAM) $UNDGVSHOHQ som kom i mitten av sjuttiotalet bidrog också starkt till populäriseringen av datorstödda grafiska lösningar. PONG (dvs ett sorts enkelt tennisspel) mitten av 70-talet. previous next 12 %M UQ(LGHUElFN 6
KLVWRULN Under sjuttiotalet utvecklades också JUDILVND DUEHWVVWDWLRQHU med bl.a. I QVWHURFKP VV. Under 80-talet då billiga persondatorer med ELWPDSSDGH VNlUPDU kom tog den grafiska användningen riktig fart. (även om hårdvaruteknikerna till stora delar utvecklades under 60-talet) previous next 13 KLVWRULN Många grafiska standarder har utvecklats Med en strävan att enklare skriva komplexa grafiska applikationer flyttbar kod som kan köras på flera olika plattformar och hårdvaror Några betydelsefulla grafikpaket 80-talet GKS, PHIGS, NeWS mfl 90-talet OpenGL VRML previous next 14 %M UQ(LGHUElFN 7
,QWHUDNWLYDJUDILVNDV\VWHP 0LOVWROSDUQnJUDD[SORFN: 'RXJODV(QJHOEDUWPLWWHQDYWDOHW 1/6R1/LQH6\VWHPLQQHK OOHPDLOK\SHUWH[W GLUHNPDQLSXODWLRQNRQIHUHQVV\VWHPPHGYLGHROlQNK\SHUWH[W PP 6PDOOWDONSn;HUR[XQGHUWDOHW Introducerade bitmappade skärmar, fönstersystem, pop-upmenyer, användning av mus, reflexiv öppen omgivning, maskinoberoende portabel kod, MVC, objektorientering, stort klassbibliotek previous next 15 PLOVWROSDU Xerox Star, 1981 Desktopmetafor med ikoner och överlappande fönster. What You See Is What You Get (WYSIWYG) 0$& Första billiga alternativet. Genomgående grafisk direkmanipulativ filosofi. ;ZLQGRZV :LQGRZV Sålde idéerna till en bredare publik (även om gränssnittet var ett :-)) previous next 16 %M UQ(LGHUElFN 8
PLOVWROSDU 9LGHRVSHO Gjorde oss vana vid idéerna. :LQGRZV17JDYYLGDUHVSULGQLQJ (Det börjar se snyggare ut.) HTML, WWW med browsrar som Mosaic och Netscape, tidigt 1990-tal Har (indirekt) ökat intresset och spritt idéerna till en riktigt bred marknad Java (första versionen släpptes 1995) Ökade möjligheter att skriva plattformsoberoende interaktiva system, enkelt att sprida med sin koppling till Internet previous next 17 'DWRUJUDILNWLOOlPSQLQJVRPUnGHQ Visualisering av information Arkitetktur Tidigare 4000 år sedan: Babylonierna ristade våningsplan av byggnader på sten 2000 år sedan: Grekerna konstruerade arkitektritningar Idag: görs ritningar ofta mha datorer Kartografi Idag används datorer till stor del inom detta område GIS, Geographic Information Systems Statistik Många verktyg för att behandla och presentera data previous next 18 %M UQ(LGHUElFN 9
Medicin Många områden som datortomografi, magnetröntgen, och ultraljud använder datorgrafik för att speciellt konstruera tredimensionella bilder Väderprognoser Vetenskaplig visualisering Datorgrafik erbjuder sätt att presentera och sedan tolka stora datamängder Tex inom flödesdynamik, molekylär biologi, matematik, astronomi. Film och underhållning Konst Utbildning Simulatorer Bildbehandling previous next 19 'DWRUJUDILNWLOOlPSQLQJVRPUnGHQ Design Att designa (vad det än må vara) är ofta en iterativ process Datorer i allmänhet och interaktiva grafiska datorverktyg i synnerhet ger kostnadseffektiva lösningar Exempel: CAD (Computer Aided Design), VLSI (Very Large Scale Integrated) Simulering Ända sedan grafiska system blev kapabla att generera realistiska bilder har dom används för simuleringar Exempel: Flysimulatorer, arkadspel, robotar, film, militär, Virtual Reality (VR) previous next 20 %M UQ(LGHUElFN 10
'DWRUJUDILNWLOOlPSQLQJVRPUnGHQ Användargränssnitt Användarsynvinkel Fönstersystem Grafiska interaktiva tillämpningar Internet Utvecklarsynvinkel Grafiska bibliotek av komponenter Frameworks för att konstruera grafiska och interaktiva tillämpningar Grafiska programmerings- och utvecklingsverktyg Gränssnittsbyggare previous next 21 (WWJUDILVNWV\VWHPVXSSE\JJQDG Ett grafiskt system består av: processor bildminne minne previous next 22 %M UQ(LGHUElFN 11
(WWJUDILVNWV\VWHPVXSSE\JJQDG Pixlar och bildminne En bild skapas som en YHNWRU (raster) av ELOGHOHPHQW (pixlar) Bilderna lagras i ELOGPLQQHW (eng. Frame Buffer) 'MXSHW av bildminnet anger anger antal bitar per bildpunkt som används för att lagra en bild I IXOOIlUJ används ett djup av 24 bitar (eller mer), kallas också WUXHFRORU eller 5*%FRORU system 8SSO VQLQJHQ anger hur många bildpunkter som finns i bildminnet Översättningen från geometriska beskrivningar kallas för UDVWUHULQJ eller VYHSNRQYHUWHULQJ previous next 23 (WWJUDILVNWV\VWHPVXSSE\JJQDG Utmatningsenheter Katodstrålerör Består av Elektronstråle som böjs av i olika riktningar innan den träffar skärmen Metallmask med små hål, som ser till att strålen endast aktiverar fosforpunkter med rätt färg på skärmen Fosforlager Typiskt ordnade i grupper om tre färger (en av varje av dem primära färgerna) Bildrepetitionsfrekvens (refresh rate) Hur ofta skärmen uppdateras Typisk 50-80 ggr per sekund previous next 24 %M UQ(LGHUElFN 12
(WWJUDILVNWV\VWHPVXSSE\JJQDG previous next 25,QPDWQLQJVHQKHWHU Det finns många olika typer av inmatningsverktyg mus tangentbord penna digitaliseringsbord scanners röst handske peksskärm trollspö rullboll joystick mm previous next 26 %M UQ(LGHUElFN 13
9LVHUSnYlUOGHQ2OLNDY\HU Objekt och betraktare previous next 27 /MXVUHIOHNWLRQRFKVNXJJRU Belysning och skuggning Olika typer av ljuskällor diffust, punktformat, riktat, osv Olika material färg, beskaffenhet, hur dom reflekterar, etc Reflektion, algoritmer och modeller Gouraud, Phong etc Hur olika objekt påverkar varandras belysning och skuggor Strålföljning (Ray tracing) Ljusets väg genom scenen, dvs direkt från belysningskällor och via reflektion från objekt Strålning (Radiosity) Baseras på den energi som strålar ut från objekten previous next 28 %M UQ(LGHUElFN 14
DPHUDPHWDIRUHQ Vi tänker oss att vi ser världen genom en kamera previous next 29 'HQV\QWHWLVNDNDPHUDQ Olika sätt att betrakta bilden previous next 30 %M UQ(LGHUElFN 15
Kamera, projektorer och projektionsplan SURMHNWRU SURMHNWLRQVSODQ SURMHNWLRQVFHQWUXP previous next 31 OLSSQLQJ Anger vilka delar av världen betraktaren kan se NOLSSUHNWDQJHO previous next 32 %M UQ(LGHUElFN 16
3URJUDPPHUDUHQVJUlQVVQLWW Applikation Grafiskt bibliotek (API) Hårdvara previous next 33 $UNLWHNWXUI UHWWJUDILVNWV\VWHP Tidiga system Värddator Digital till analog omvandling Utritning med utritningslista Värddator Utritningslista Grafikprocessor previous next 34 %M UQ(LGHUElFN 17
$OOWVn Vi skall i kursen titta vidare på: Grundläggande EHJUHSS, PDWHPDWLN, DOJRULWPHU och PHWRGHU för att konstruera 2D- och 3D-applikationer 7HNQLNHU för att konstruera interaktiva grafiska applikationer Vi gör detta genom: Föreläsningar och (övningar), ODERUDWLRQHU och HJHQOlVQLQJ För att ni skall få: kunskap om grafisk databehandling och interaktionsteknik förståelse för att människans förutsättningar bör påverka utformningen av interaktiva system erfarenhet av verktyg och tekniker för att skapa grafiska och interaktiva tillämpningar previous next 35 %M UQ(LGHUElFN 18