GRIP 2D1953 Föreläsning 1 Grafik och Interaktionsprogrammering Introduktion och översikt Hemsida: http://www.nada.kth.se/kurser/kth/2D1953 Registrering: res checkin grip00 Hemkatalog: /info/grip00 previous next Introduktion Kursens uppläggning • Föreläsningar – Trettio timmar varav 10 timmar gästföreläsningar – Fyra gäsföreläsare fördjupar och breddar.
Download ReportTranscript GRIP 2D1953 Föreläsning 1 Grafik och Interaktionsprogrammering Introduktion och översikt Hemsida: http://www.nada.kth.se/kurser/kth/2D1953 Registrering: res checkin grip00 Hemkatalog: /info/grip00 previous next Introduktion Kursens uppläggning • Föreläsningar – Trettio timmar varav 10 timmar gästföreläsningar – Fyra gäsföreläsare fördjupar och breddar.
Slide 1
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 2
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 3
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 4
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 5
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 6
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 7
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 8
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 9
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 10
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 11
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 12
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 13
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 14
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 15
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 16
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 17
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 18
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 19
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 20
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 21
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 22
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 23
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 24
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 25
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 26
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 27
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 28
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 29
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 30
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 31
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 32
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 33
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 34
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 35
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 36
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 2
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 3
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 4
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 5
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 6
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 7
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 8
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 9
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 10
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 11
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 12
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 13
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 14
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 15
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 16
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 17
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 18
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 19
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 20
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 21
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 22
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 23
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 24
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 25
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 26
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 27
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 28
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 29
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 30
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 31
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 32
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 33
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 34
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 35
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36
Slide 36
GRIP 2D1953
Föreläsning 1
Grafik och Interaktionsprogrammering
Introduktion
och
översikt
Hemsida:
http://www.nada.kth.se/kurser/kth/2D1953
Registrering:
res checkin grip00
Hemkatalog:
/info/grip00
previous
next
Introduktion
Kursens uppläggning
• Föreläsningar
– 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-3, 5 i grupper om två, lab 4 i grupper om 4-7)
1
2
3
4
Introduktion till 2D-grafik och grafiska gränssnitt i Java (Björn)
Strata Studio Pro (Fredrik Winberg)
Avancerad riteditor (Björn)
Utvärderingsuppgift av interaktivt system (presenteras för resten av
kursen samt på WWW) (Björn)
5 GLUT och OpenGL (Gustav Taxén)
previous
next
2
Introduktion
...Kursens uppläggning
• 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
• res checkin grip00
• Kursmöte
– Newsmöte: news:nada.kurser.grip
previous
next
3
Introduktion
Varför intressera sig för grafik och interaktion?
• 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
Introduktion
Vad går kursen ut på?
• 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
Introduktion
GRIP
består av tre inbördes beroende delar
GRIP
Programmering
previous
next
Grafik
Interaktion
Tekniker
Tekniker
Tekniker
Språk
Mjukvara
Hårdvara
Utvecklingsmiljöer
Visualisering
Människan
Gränssnitt
Dimensioner
Modeller
WWW, Internet
Hårdvara
Ergonomi
6
Introduktion
Programmering
Programmering
Tekniker
Visualisering
Interaktion
Frameworks
Komponentbaserade
Språk
C
Java
Smalltalk
Utvecklingsmiljöer
Smalltalkmiljöer
Javamiljöer
Andra
Gränssnitt
Tekniker
Anpassningsbara
Gränssnittsbyggare
WWW, Internet, mm
Applets
previous
next
Distribuerade applikationer
HTML
7
Introduktion
Grafik
Grafik
Tekniker
Algoritmer
Primitiver
Modellering
Mjukvara
OpenGL
GKS, PHIGS, mfl
VRML
Visualisering
Grafisk presentation Färg, belysning
Perceptuella aspekter
Dimensioner
2D
2.5D
3D
Hårdvara
Inmatningsverktyg
previous
next
Utmatning
Bildminne
8
Introduktion
Interaktion
Interaktion
Tekniker
Presentations
Interaktions
Programmerings
Hårdvara
Pekverktyg
Skärm
Hjälm, handske
Människan
Förutsättningar
Deltagande under utvecking
Seendet
Modeller
Konceptuella
previous
next
Programmeringsmodeller
Styrd av människans krav
9
Introduktion
Grafik kort historik
• Milstolpar
– redan tidigt i datorhistorien (50-talet) fanns
halvdumma utskriftsenheter som teleprintrar och
radskrivare
– omkring 1950 kom datordrivna katodstrålerör
(CRT)
previous
next
10
Introduktion
... historik ...
– under tidigt 60-tal utvecklades Sketchpad
• 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
Introduktion
... historik ...
– Samtidigt såg bil- och flygindustrin möjligheterna att
använda grafiska tekniker
• Computer Aided Design (CAD) och Computer Aided
Manufacturing (CAM)
– Arkadspelen
• som kom i mitten av sjuttiotalet bidrog också starkt till
populäriseringen av datorstödda grafiska lösningar.
PONG mitten av 70-talet.
previous
next
12
Introduktion
... historik ...
– Under sjuttiotalet utvecklades också grafiska
arbetsstationer med bl.a. fönster och möss.
– Under 80-talet då billiga persondatorer med bitmappade
skärmar kom tog den grafiska användningen riktig fart.
• (även om hårdvaruteknikerna till stora delar
utvecklades under 60-talet)
previous
next
13
Introduktion
... historik
– 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
Introduktion
Interaktiva grafiska system
• Milstolpar (några axplock):
– Douglas Engelbart, mitten av 1960-talet
• NLS systemet som innehöll email, hypertext, direkmanipulation,
konferenssystem med videolänk, hypertext, mm
– Smalltalk, på Xerox under 1970-talet
• 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
Introduktion
...milstolpar...
– Xerox Star, 1981
• Desktopmetafor med ikoner och överlappande fönster. What You
See Is What You Get (WYSIWYG)
– MAC, 1984
• Första billiga alternativet. Genomgående grafisk
direkmanipulativ filosofi.
– X-windows, 1987
– Windows 3, 1990
• Sålde idéerna till en bredare publik (även om gränssnittet var ett :-))
previous
next
16
Introduktion
...milstolpar
– Videospel
• Gjorde oss vana vid idéerna.
– Windows 95/NT gav vidare spridning
• (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
Introduktion
Datorgrafik tillämpningsområden
• 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
Introduktion
...
– 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
Introduktion
...Datorgrafik tillämpningsområden...
• 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
Introduktion
...Datorgrafik tillämpningsområden
• 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
Introduktion
Ett grafiskt systems uppbyggnad
• Ett grafiskt system består av:
processor
bildminne
minne
previous
next
22
Introduktion
...Ett grafiskt systems uppbyggnad...
• Pixlar och bildminne
– En bild skapas som en vektor (raster) av bildelement
(pixlar)
– Bilderna lagras i bildminnet (eng. Frame Buffer)
– Djupet av bildminnet anger anger antal bitar per
bildpunkt som används för att lagra en bild
– I fullfärg används ett djup av 24 (eller mer), kallas också
true-color eller RGB-color system
– Upplösningen anger hur många bildpunkter som finns i
bildminnet
– Översättningen från geometriska beskrivningar kallas för
rastrering eller svepkonvertering
previous
next
23
Introduktion
...Ett grafiskt systems uppbyggnad...
• 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
Introduktion
...Ett grafiskt systems uppbyggnad
previous
next
25
Introduktion
Inmatningsenheter
• Det finns många olika typer av inmatningsverktyg
–
–
–
–
–
–
–
–
–
–
–
–
previous
next
mus
tangentbord
penna
digitaliseringsbord
scanners
röst
handske
peksskärm
”trollspö”
rullboll
joystick
mm
26
Introduktion
Vi ser på världen: Olika vyer
• Objekt och betraktare
previous
next
27
Introduktion
Ljus, reflektion och skuggor
• 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
Introduktion
Kamerametaforen
• Vi tänker oss att vi ser världen genom en kamera
previous
next
29
Introduktion
Den syntetiska kameran
• Olika sätt att betrakta bilden
previous
next
30
Introduktion
...
• Kamera, projektorer och projektionsplan
projektor
projektionsplan
projektionscentrum
previous
next
31
Introduktion
Klippning
• Anger vilka delar av världen betraktaren kan se
klipprektangel
previous
next
32
Introduktion
Programmerarens gränssnitt
Applikation
previous
next
Grafiskt bibliotek
(API)
Hårdvara
33
Introduktion
Arkitektur för ett grafiskt system
• Tidiga system
Värddator
Digital till
analog
omvandling
• Utritning med utritningslista
Värddator
Grafikprocessor
Utritningslista
previous
next
34
Introduktion
Alltså ...
• Vi skall i kursen titta vidare på:
– Grundläggande begrepp, matematik, algoritmer och metoder för
att konstruera 2D- och 3D-applikationer
– Tekniker för att konstruera interaktiva grafiska applikationer
• Vi gör detta genom:
– Föreläsningar och (övningar), laborationer och egen läsning
• 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
Introduktion
previous
next
36