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 Report

Transcript 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