Kursens uppläggning. GRIP 2D1640 Föreläsning 1. Sidan borttagen!! Grafik och Interaktionsprogrammering

Transkript

1 GRIP 2D1640 Föreläsning 1 Grafik och Interaktionsprogrammering och översikt Hemsida: Registrering: res checkin grip05 Hemkatalog: /info/grip05 Kursansvarig Björn Eiderbäck bjorne@nada.kth.se Kursens uppläggning Föreläsningar Ca 48 timmar varav ca 16 timmar gästföreläsningar Fem gäsföreläsare fördjupar och breddar ämnet Laborationer Tio stycken Lab 1-4 i period 3 Lab 5-10 i period 4 Se Tentamen Efter period 3, på Angel previous next previous next 2 Sidan borttagen!! 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 3 previous next 4

2 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 GRIP består av tre inbördes beroende delar GRIP Programmering Grafik Interaktion Tekniker Språk Utvecklingsmiljöer Gränssnitt WWW, Internet Tekniker Mjukvara Visualisering Dimensioner Hårdvara Tekniker Hårdvara Människan Modeller Ergonomi previous next 6 Programmering Grafik Programmering Grafik Tekniker Tekniker Visualisering Interaktion Frameworks Komponentbaserade Språk C Java Smalltalk Lingo Utvecklingsmiljöer Smalltalkmiljöer Javamiljöer Director Gränssnitt Tekniker Anpassningsbara Gränssnittsbyggare WWW, Internet, mm Applets Distribuerade applikationer HTML Spel Algoritmer Primitiver Modellering Mjukvara OpenGL GKS, PHIGS, VRML, mfl Alice, Croquet Visualisering Grafisk presentation Färg, belysning Perceptuella aspekter Dimensioner 2D 2.5D 3D Hårdvara Inmatningsverktyg Utmatning Bildminne Maya Maya previous next 7 previous next 8

3 Interaktion Interaktion Tekniker Grafik kort historik Mer historik på torsdag då vi ser på en video om grafik Presentations Interaktions Programmerings Hårdvara Pekverktyg Skärm Hjälm, handske Människan Förutsättningar Deltagande under utvecking Seendet Modeller Men några Milstolpar redan tidigt i datorhistorien (50-talet) fanns halvdumma utskriftsenheter som teleprintrar och radskrivare Konceptuella Programmeringsmodeller Styrd av människans krav omkring 1950 kom datordrivna katodstrålerör (CRT) previous next 9 previous next 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... 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 (dvs ett sorts enkelt tennisspel) mitten av 70-talet. previous next 11 previous next 12

4 ... historik... Under sjuttiotalet utvecklades också grafiska arbetsstationer med bl.a. fönster och möss.... historik Många grafiska standarder har utvecklats Med en strävan att enklare skriva komplexa grafiska applikationer 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) 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 13 previous next 14 Interaktiva grafiska system Milstolpar (några axplock): Douglas Engelbart, mitten av 1960-talet NLS, on Line System, innehöll , 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....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 :-)) IDE med utvecklingsverktyg previous next 15 previous next 16

5 ...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 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 Modernare IDEer 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 VisualWorks\Smalltalk med SUnit, refactoring, mm Eclipse previous next 17 previous next 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...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 19 previous next 20

6 ...Datorgrafik tillämpningsområden Användargränssnitt Användarsynvinkel Fönstersystem Grafiska interaktiva tillämpningar Internet Exempel Hur har följande bild konstruerats? Utvecklarsynvinkel Grafiska bibliotek av komponenter Frameworks för att konstruera grafiska och interaktiva tillämpningar Grafiska programmerings- och utvecklingsverktyg Gränssnittsbyggare Vilken hård- och mjukvara konstruerade den? previous next 21 previous next 22 Preliminärt svar Grundläggande grafiskt system Applikationen: Objektet är en artistisk ritning av solen avsedd att visas på planetarier Mjukvara: Maya för modellering och rendering. Maya byggt ovanpå OpenGL Hårdvara: PC med grafikkort för modellering och rendering Inmatningsenhet Bilden skapad i FB Utmatningsenhet previous next 23 previous next 24

7 CRT Datorgrafik: Som tidigare sett går datorgrafik tillbaks till datorernas barndom (se oh sid 10) Konstnaden för omritning via CRTvar hög Datorerna var långsamma, dyra och inte tillförlitliga Kan antingen användas som linjeritande enhet eller innehållet i en frame buffer (rastergrafik) previous next 25 previous next 26 Datorgrafik : Trådmodeller Grafikprocessor (eng Display Processor) Istället för att den vanliga datorn ska behöva uppdatera skärmen finns en speciell grafikprocessor (display processor (DPU)) Dom grafiska elementen lagras i en utritningslista (eng display list (display file)) i grafikprocessorn Värddatorn kompilerar display-listan och skickar den till DPU previous next 27 previous next 28

8 Bildrör som direkt visade dom grafiska elementen Skapades av Tektronix Krävde inte konstant omritning Standardiserade gränssnitt Tillät standardmjukvara Plot3D i Fortran Relativt billigt Öppnade dörren för CAD (Computer Aided Design) Datorgrafik : Rastergrafik Grafiska standardpaket började komma IFIPS GKS: Europeiskt Blev ISO 2D standard Core: Nordamerikanskt 3D men blev aldrig ISO standard Arbetstationer och PC previous next 29 previous next 30 Rastergrafik En bild skapad som en vektor (ett raster) av bildelement (pixels) i frame bufferten Rastergrafik Låter oss gå från linjer och trådmodeller till fyllda polygoner previous next 31 previous next 32

9 PCar och arbetsstationer Även om vi inte längre skiljer på PCar och arbetstationer så har dom utvecklats från olika källor Tidiga arbetsstationer karaktäriseras av Networksanslutning: klient-server Hög nivå av interaktivitet Tidiga PCar inkluderade bildminne som del av användarminnet Datorgrafik : Realism kommer till datorgrafiken smooth shading environmental mapping bump mapping previous next 33 previous next 34 Datorgrafik: Specialhårdvara Silicon Graphics geometrimotor VLSI implementation av grafisk pipeline Industry-baserad standard PHIGS RenderMan Networksbaserad grafik: X Window System Datorgrafik: OpenGL API Helt datorgenerarade filmer (Toy Story) gör succe Nya hårdvarumöjligheter Texture mapping Blending Accumulation, stencil buffer Human-Computer Interface (HCI) previous next 35 previous next 36

10 Datorgrafik: Fotorealism Grafikkort till PCs dominerar marknaden Nvidia, ATI, 3DLabs Spelkonsoler leder marknadsutvecklingen Datorgrafik blir rutin i filmindustrin: Maya, Lightwave Alltså, vad gör vi på kursen? 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 37 previous next 38 Java och enkla grafiska gränssnitt Då man konstruerar enkla grafiska gränssnitt kan man med fördel använda Swing Eller det äldre, men mindre generella/eleganta, AWT Vi återkommer till fler detaljer om hur man konstruerar grafiska gränssnitt, bla med mer detaljerad beskrivning av paket som Swing i nästa period av kursen Under denna period, främst under denna och nästa föreläsning, diskuterar vi på ett pragmatiskt sätt hur enkla grafiska komponenter som inmatningsfält, knappar, mus och 2D-grafik kan hanteras Idag fokuserar vi på grunderna i Swing, med exemplifiering av hur fönster, knappar, inmatningsfält och andra enkla komponenter (widgets) kan konstrueras och hanteras. Vid nästa föreläsning tittar vi på Javas stöd för 2D-grafik och hur man kan skriva interaktiva tillämpningar som manipuleras via musen previous next 39 Fönster JFrame Kodexempel Vi tittar på Java/Swing genom att steg för steg (pragmatiskt!) konstruera en tillämpning med några textinmatningsfält med rubriker, ett fält att rita på, och en knapp. Vi kommer konstruera en tillämpning som ser ut i stil med följande figur Rubrik JLabel Inmatningsfält JTextField Rityta (i detta fall en) JPanel På vilken en text ritats ut Knapp JButton Dessa objekt Grupperade via en JPanel previous next 40

11 Steg för steg 1. Skapa fönster 1. Skapa fönster Koden skrivs på föreläsningen 2. Skapa knapp Lägg den på fönsterytan 3. Skapa inmatningsfält för text som ska visas Koppla knappbeteende så att det man skrivit in i fältet visas på terminalen vid knapptryck 4. Skapa utritningsyta Koppla ihop knappens beteende så att den ritar texten från fältet på ytan istället 5. Ge koordinater för utritning via inmatningsfält Ordna layouten med inre panel Ta hand om eventuella fel 6. Kompilera och kör previous next 41 previous next Skapa knapp 3. Skapa inmatningsfält för text som ska visas Lägg den på fönsterytan Koppla knappbeteende så att det man skrivit in i fältet visas på terminalen vid knapptryck previous next 43 previous next 44

12 4. Skapa utritningsyta Koppla ihop knappens beteende så att den ritar texten från fältet på ytan istället 5. Ge koordinater för utritning via inmatningsfält Styr var utritningen ska hamna via koordinater i givna i fält Ordna layouten med inre panel Ta hand om eventuella fel previous next 45 previous next Kompilera och kör Hela kodexemplet i main För överskådlighetens skull skriver vi första versionen av exemplet helt i en main-metod. En sak man då speciellt måste tänka på är att final-deklarera variabler som man vill skicka meddelanden till i inre anonyma klasser package gripf1; import java.awt.*; import java.awt.event.*; import javax.swing.*; Om vi ska göra det snyggt så definierar vi ett eget paket (fast man kan klara sig utan paket) Vi behöver använda oss av en del klasser i dessa paket så vi importerar dem (för enkelhets skull hela paketen) previous next 47 previous next 48

13 ... fönster Dess container knapp inmatningsfält Panel att lägga saker på Panel att rita på Dess storlek Placera i mitten public class MyTest1 { public static void main(string[] args) { JFrame f = new JFrame("Test"); Container container = f.getcontentpane(); JButton button = new JButton("Rita"); final JTextField text = new JTextField(15); final JTextField xfield = new JTextField(3); final JTextField yfield = new JTextField(3); JPanel panel = new JPanel(); panel.add(new JLabel("Text: ")); panel.add(text); panel.add(new JLabel("x: ")); panel.add(xfield); panel.add(new JLabel("y: ")); panel.add(yfield); final JPanel component = new JPanel(); component.setpreferredsize(new Dimension(200, 200)); container.add(component, BorderLayout.CENTER); container.add(panel, BorderLayout.NORTH); container.add(button, BorderLayout.SOUTH); Vi måste final-deklarera om vi ska accessa variablerna från inre anonyma klasser Vi grupperar vissa objekt genom att lägga dom i en egen panel först Lägg komponenterna i fönstrets container, därmed kommer dom synas då vi öppnar fönstret previous next Ta tag i en komponentens grafiska rityta Läs x- och y-koordinater från inmatningsfälten Rita ut texten på komponenten Hjälpmetod Beskriv vad som ska hända om man trycker på knappen button.addactionlistener(new ActionListener(){ public void actionperformed(actionevent arg0) { Graphics g = component.getgraphics(); int x, y; x = getcoordinate(xfield, 0); y = getcoordinate(yfield, 20); g.drawstring(text.gettext(), x, y); private int getcoordinate(final JTextField field, int defaultint) { int intval = defaultint; try { intval = Integer.parseInt(field.getText()); catch (NumberFormatException e1) { ; ; return intval; ); previous next 50 f.setsize(200, 300); f.pack(); f.setvisible(true); Öppna fönstret Fönsterstorlek Se till att komponenterna (layoutmässigt)ordnas efter sina beskrivningar Kodexemplet som klass package gripf1; import java.awt.*; import java.awt.event.*; import javax.swing.*; Om vi aldrig ändrar dessa värden i koden kan vi tydliggöra detta genom att finaldeklarera dessa konstanter. Om dom dessutom inte ska ändras eller anpassas på instansnivå kan vi deklarera dom som klassvariablet (static) public class MyTest1 { static final String ButtonText = "Rita"; static final int FieldWidth = 3; static final int TextWidth = 15; static final Dimension ComponentDimension = new Dimension(200, 200); static final Point FieldPosition = new Point(0, 20); protected Container container; protected JButton button; protected JTextField text; protected JTextField xfield; protected JTextField yfield; protected JPanel panel; protected JPanel component; Vi definierar komponenterna som instansvariabler previous next 51 previous next 52

14 public static void main(string[] args) { JFrame f = new JFrame("Test"); new MyTest1(f); f.setsize(200, 300); f.pack(); f.setvisible(true); public MyTest1(JFrame f) { container = f.getcontentpane(); createbasicwidgets(); populatepanel(); createdrawingcomponent(); populatecontainer(); definebuttonaction(); protected void createbasicwidgets() { button = new JButton("Rita"); text = new JTextField(15); xfield = new JTextField(3); yfield = new JTextField(3); panel = new JPanel(); previous next 53 previous next 54 protected void populatepanel() { panel.add(new JLabel("Text: ")); panel.add(text); panel.add(new JLabel("x: ")); panel.add(xfield); panel.add(new JLabel("y: ")); panel.add(yfield); protected void createdrawingcomponent() { component = new JPanel(); component.setpreferredsize(componentdimension); protected void populatecontainer() { container.add(component, BorderLayout.CENTER); container.add(panel, BorderLayout.NORTH); container.add(button, BorderLayout.SOUTH); previous next 55 protected void definebuttonaction() { button.addactionlistener(new ActionListener() { public void actionperformed(actionevent arg0) { Graphics g = component.getgraphics(); int x, y; x = getcoordinate(xfield, (int) FieldPosition.getX()); y = getcoordinate(yfield, (int) FieldPosition.getY()); g.drawstring(text.gettext(), x, y); private int getcoordinate(jtextfield field, int defaultint) { int intval = defaultint; try { intval = Integer.parseInt(field.getText()); catch (NumberFormatException e1) { ; ; return intval; ); previous next 56