Grafik. TDDC66 Datorsystem och programmering Föreläsning 4. Peter Dalenius Institutionen för datavetenskap

Transkript

1 Grafik TDDC66 Datorsystem och programmering Föreläsning 4 Peter Dalenius Institutionen för datavetenskap

2 Anmälan till laborationer Från och med laboration 3 ska ni arbeta i par. Anmälan sker i Webreg via länk på kursens webbsidor. Anmäl er senast fredag 20 september. Efter anmälningstidens slut kommer ni att få tillgång till versionshanteringssystemet Subversion som kommer användas för att redovisa laborationer hädanefter. Om ni redan har pratat ihop er, anmäl er på samma gång. Om du inte har någon att jobba ihop med, skriv upp dig ensam, eller skriv upp dig bredvid någon annan. Håll ihop klasserna. I övrigt spelar det ingen roll vilken grupp man anmäler sig till. 2

3 Tidigare utvärderingar TDDC66 Datorsystem och programmering: 4,0 (52%) TDDD64 Programmering i Python: 4,0 (33%) Boken var inte nödvändig för någon som redan kunde lite programmering, detta kan vara värt att poängteras för studenterna. Fler övningsuppgifter samt lösningar hade varit att önska! Se till att tentamiljön fungerar bättre till nästa gång. 3

4 Översikt Introduktion till grafik i Python Grundläggande grafiska objekt Exempel Interaktivitet Inför andra laborationsomgången 4

5 Hur organiserar man programkod? funktioner (verktyg) data (råvaror, material) 5

6 Hur organiserar man programkod? objekt (verktyg och material sorterat efter ämne) 6

7 Objektorientering Objektorientering är i grund och botten ett sätt att skapa ordning och reda i programkoden. Python stödjer objektorientering, men tvingar oss inte att använda det. Vi kommer inte att ta upp objektorientering, bortsett från att vi kommer att använda en del av de objekt som redan finns i Python. När man ser något i programkoden som ser ut så här objekt.medlem då vet man att objekt är med i bilden på något sätt. 7

8 Komma igång med grafik Python har ett standardpaket för grafik som heter tkinter. Det kan dock vara lite krångligt att använda för nybörjare, så istället ska vi använda ett mindre paket kallat graphics som följer med läroboken (se kapitel 4). Paketet graphics innehåller några få enkla kommandon för att rita figurer på skärmen. 8

9 Komma igång med grafik x import graphics win = graphics.graphwin('demo') win.close() 0 from graphics import * win = GraphWin('Demo') p = Point(50,50) p.draw(win) y 199 9

10 from graphics import * win = GraphWin('Demo') r = Rectangle(Point(20,20),Point(100,60)) r.setfill('green') r.draw(win) Exempel på grafiska objekt c = Circle(Point(150,150),45) c.setfill('blue') c.draw(win) t = Text(Point(60,40),"Hello!") t.draw(win) l = Line(Point(100,60),Point(150,150)) l.draw(win) o = Oval(Point(40,140),Point(120,180)) o.setfill('red') o.draw(win) r2 = Rectangle(Point(40,140),Point(120,180)) r2.setoutline('orange') r2.draw(win) 10

11 Något kort om färger Grafikpaketet från läroboken erbjuder några vanliga grundfärger som vi redan sett exempel på. Man skriver helt enkelt färgens namn som en sträng. Man kan också blanda sin egen färg genom att ange hur mycket rött, blått och grönt man vill blanda. De tre argumenten ska vara heltal i intervallet Om man har jobbat med hexadecimalt uttryckta färgkoder förut kan man använda dem istället. Gör en webbsökning på hex colors för mer tips. 'green' color_rgb(130,0,164) '#8200a4' 11

12 def draw_with_shadow(object,window): shadow = object.clone() shadow.setfill('black') shadow.move(10,10) shadow.draw(window) object.draw(window) Fler exempel på objekt def main(): win = GraphWin('Demo',200,300) p = Polygon(Point(30,80),Point(70,100), \ Point(100,30)) p.setfill('#00afaf') draw_with_shadow(p,win) c = Circle(Point(140,140),30) c.setfill('#af00af') draw_with_shadow(c,win) i = Image(Point(100,250),'owl.gif') i.draw(win) 12

13 Exempel Vi vill ha en funktion contactsheet som tar en lista med namn på bildfiler och som visar upp dessa sida vid sida i ett fönster, tillsammans med bildens namn. Antalet bilder är inte känt på förhand. contactsheet(['cat.gif', 'arrangement.gif', 'painting.gif']) 13

14 Design av gränssnittet x y höjd = 300 bredd = 300 * antal bilder bildernas mittpositioner ( *i,149) där i = 0, 1, 2,... texternas mittpositioner ( *i,284) där i = 0, 1, 2,... 14

15 Implementation from graphics import * Siffrorna är hårdkodade. Vad händer om vi behöver ändra storleken? def contactsheet(images): win = GraphWin('Contact Sheet',300*len(images),300) for i in range(len(images)): img = Image(Point( *i,149),images[i]) img.draw(win) txt = Text(Point( *i,284),images[i]) txt.draw(win) contactsheet(['cat.gif', 'arrangement.gif', 'painting.gif']) 15

16 Nytt koordinatsystem x y win.setcoords(0,0,3,1) önskade koordinater för nedre vänstra och övre högra hörnet 16

17 Ny implementation from graphics import * def contactsheet(images): size = 300 n = len(images) win = GraphWin('Contact Sheet',size*n,size) win.setcoords(0,0,n,1) for i in range(n): img = Image(Point(i+0.5,0.5),images[i]) img.draw(win) txt = Text(Point(i+0.5,0.05),images[i]) txt.draw(win) contactsheet(['cat.gif', 'arrangement.gif', 'painting.gif']) 17

18 Interaktivitet from graphics import * def main(): win = GraphWin('Demo') msg = Text(Point(100,100), \ 'Click three times!') msg.draw(win) p1 = win.getmouse() p2 = win.getmouse() p3 = win.getmouse() triangle = Polygon(p1,p2,p3) triangle.setfill('peachpuff') triangle.draw(win) Vänta på ett musklick och returnera ett Point-objekt. main() 18

19 Inför andra laborationsomgången Game of Life är en cellulär automat som konstruerades av matematikern John Conway Det är ett spel för 0 spelare som spelas på ett oändligt rutat papper. Varje ruta (cell) kan vara död eller levande. Varje gång klockan tickar föds eller dör några celler, enligt särskilda regler. Cellulära automater är diskretmatematiska modeller som t.ex. kan användas för att studera fenomen i kaotiska system, eller bara för att de är roliga att titta på. 19

20 Regler för Game of Life Regler En levande cell med 0-1 levande grannar dör av ensamhet En levande cell med 4-8 levande grannar dör av trängsel En död cell med 3 levande grannar återföds Alla övriga celler är oförändrade Generation

21 Typer av mönster i Game of Life Stabila mönster block bikupa 21

22 Typer av mönster i Game of Life Oscillerande mönster blinker padda 22

23 Typer av mönster i Game of Life Mönster som förflyttar sig glider (generation 1) 2) 3) 4) 5) 23

24 Uppgift Vi har skrivit ett program som simulerar Game of Life på ett ändligt rutnät. Er uppgift är att skriva kod som ritar upp spelplanen på skärmen på något lämpligt sätt. Titta på den engelska Wikipedia-sidan för Game of Life för tips på olika intressanta mönster. 24

25 Bildkällor: