{ "componentChunkName": "component---src-templates-course-content-template-js", "path": "/osa-13/2-animation", "result": {"data":{"page":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"text-box","properties":{"variant":"learningObjectives","name":"Inlärningsmål"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Efter den här delen"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Vet du hur man skapar en animation med pygame"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Kommer du att kunna använda en klocka för att ställa in hastigheten på ditt program"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Kommer du att kunna använda grundläggande trigonometriska funktioner i dina animationer"}]},{"type":"text","value":"\n"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Många spel har rörliga karaktärer, så ett logiskt nästa steg är att skapa animationer. Vi kan skapa en illusion av rörelse genom att rita samma bild på olika ställen på skärmen och tajma ändringarna på rätt sätt."}]},{"type":"element","tagName":"h2","properties":{"id":"skapa-en-animation","style":"position:relative;"},"children":[{"type":"text","value":"Skapa en animation"},{"type":"element","tagName":"a","properties":{"href":"#skapa-en-animation","ariaLabel":"skapa en animation permalink","className":["anchor","after"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Följande kod skapar en animation där en robot rör sig från vänster till höger i ett pygame-fönster:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" pygame\n\npygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"init"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\nfonster "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"set_mode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"640"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"480"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\nrobot "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"load"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"robot.png\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\nx "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\ny "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\nklocka "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"time"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Clock"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"while"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"True"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" handelse "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"event"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" handelse"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"QUIT"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n exit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"fill"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"blit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"x"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" y"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"flip"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"\n klocka"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"tick"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"När detta exekveras, borde resultatet se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/e0ac2065e7c54214a7440186eb4b9a5b/pygame_animaatio.gif"},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Låt oss ta en närmare titt på de instruktioner som är inblandade. Om vi vill spåra bildens rörelse på skärmen måste vi veta var den befinner sig. Därför har vi två variabler för koordinaterna för bildens övre vänstra hörn:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":"x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\ny "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vi har även en klocka, som vi använder för att se till att animationens hastighet är korrekt:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":"klocka "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"time"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Clock"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Huvudloopen ritar bilden på sin aktuella plats vid varje iteration:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":" fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"fill"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"blit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"x"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" y"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"flip"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Först fyller metoden fill fönstret med svart, precis som tidigare. Färgen skickas som en tupel som innehåller RGB-värdena för färgen. I det här fallet är argumentet "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(0, 0, 0)"}]},{"type":"text","value":", vilket innebär att alla tre komponenterna - röd, grön och blå - har värdet 0. Varje komponent kan ha ett värde mellan 0 och 255. Om vi skickar "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(255, 255, 255)"}]},{"type":"text","value":" som argument får vi alltså ett vitt fönster, och med "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(255, 0, 0)"}]},{"type":"text","value":" får vi ett rött fönster. RGB-färgkoder utgör ryggraden i digital färgläggning, och det finns många verktyg online för att arbeta med dem, till exempel "},{"type":"element","tagName":"a","properties":{"href":"https://www.rapidtables.com/web/color/RGB_Color.html","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"RGB Color Codes Chart"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"När fönstret har fyllts med färg ritas bilden på den angivna platsen med blit-metoden. Sedan uppdateras innehållet i fönstret med funktionen "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pygame.display.flip"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Slutligen ökas värdet som lagras i x, vilket gör att bilden flyttas en pixel åt höger för varje iteration:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":" x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Klock-metoden "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"tick"}]},{"type":"text","value":" kallas i slutet:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":" klocka"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"tick"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Metoden "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"tick"}]},{"type":"text","value":" tar hand om hastigheten på animationen. Argumentet 60 anger att loopen ska exekveras "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"60"}]},{"type":"text","value":" gånger per sekund, vilket innebär att bilden förflyttas 60 pixlar åt höger varje sekund. Detta motsvarar ungefär det värde för FPS eller bilder per sekund som används i spel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I princip ser "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"tick"}]},{"type":"text","value":"-metoden till att animationen körs med samma hastighet på alla datorer. Om det inte fanns någon sådan timing skulle animationens hastighet bero på datorns hastighet."}]},{"type":"element","tagName":"h2","properties":{"id":"studsa-av-en-vagg","style":"position:relative;"},"children":[{"type":"text","value":"Studsa av en vägg"},{"type":"element","tagName":"a","properties":{"href":"#studsa-av-en-vagg","ariaLabel":"studsa av en vagg permalink","className":["anchor","after"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Den föregående animationen var annars utmärkt, men när roboten nådde en vägg fortsatte den bara att försvinna ur syn. Låt oss få roboten att studsa mot väggen."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" pygame\n\npygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"init"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\nfonster "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"set_mode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"640"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"480"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\nrobot "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"load"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"robot.png\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\nx "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\ny "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\nhastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"\nklocka "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"time"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Clock"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"while"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"True"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" handelse "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"event"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" handelse"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"QUIT"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n exit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"fill"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"blit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"x"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" y"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"flip"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" hastighet\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"and"}]},{"type":"text","value":" x"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get_width"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"640"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"hastighet\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"and"}]},{"type":"text","value":" x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"hastighet\n\n klocka"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"tick"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Exekvering av koden ovan borde se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/5dac9b07ba4879c217b0b35a817a727f/pygame_animaatio2.gif"},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Det finns en ny variabel, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"hastighet"}]},{"type":"text","value":", som bestämmer rörelseriktningen. Om värdet är över noll sker förflyttningen åt höger och om det är under noll sker förflyttningen åt vänster. I det här fallet rör sig roboten åt höger om värdet är "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"1"}]},{"type":"text","value":", åt vänster om värdet är "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"-1"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Följande rader gör att roboten studsar mot sidoväggarna:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"and"}]},{"type":"text","value":" x"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get_width"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"640"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"hastighet\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"and"}]},{"type":"text","value":" x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n hastighet "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"hastighet"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Om hastigheten är över noll så att roboten rör sig åt höger, och högerkanten på bilden går utanför fönstrets högra kant, vänds riktningen och roboten börjar röra sig åt vänster. På samma sätt, om hastigheten är under noll så att roboten rör sig åt vänster, och bildens vänstra kant når fönstrets vänstra kant, vänds riktningen igen och roboten börjar röra sig åt höger igen."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Detta gör att roboten rör sig på en bana från fönstrets vänstra kant till den högra kanten, och tillbaka till vänster, och sedan till höger igen, upprepat i all oändlighet."}]},{"type":"element","tagName":"h2","properties":{"id":"rotation","style":"position:relative;"},"children":[{"type":"text","value":"Rotation"},{"type":"element","tagName":"a","properties":{"href":"#rotation","ariaLabel":"rotation permalink","className":["anchor","after"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Låt oss skapa ytterligare en animation. Den här gången ska roboten rotera i en cirkel runt fönstrets mitt:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" pygame\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" math\n\npygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"init"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\nfonster "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"set_mode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"640"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"480"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\nrobot "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"load"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"robot.png\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\nvinkel "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\nklocka "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"time"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Clock"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"while"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"True"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" handelse "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"event"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" handelse"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"QUIT"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n exit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"320"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cos"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"vinkel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get_width"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":"\n y "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"240"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"sin"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"vinkel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get_height"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":"\n\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"fill"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n fonster"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"blit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"x"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" y"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n pygame"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"display"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"flip"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n vinkel "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0.01"}]},{"type":"text","value":"\n klocka"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"tick"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Exekvering av koden ovan borde se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/ce164a1f214ed31343271340f9157733/pygame_pyorinta.gif"},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Rotation i en relativt exakt cirkel uppnås med hjälp av några grundläggande trigonometriska funktioner. Variabeln "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"vinkel"}]},{"type":"text","value":" innehåller vinkeln för robotens position i förhållande till fönstrets mittpunkt och den horisontella linjen som går genom fönstret. Sinus- och cosinusfunktionerna från Pythons matematikbibliotek används här för att beräkna koordinaterna för robotens position:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"text","value":" x "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"320"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cos"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"vinkel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get_width"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":"\n y "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"240"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"sin"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"vinkel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"robot"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"get_height"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Roboten roterar runt en cirkel med radien 100 runt fönstrets mittpunkt. Hypotenusan i detta scenario är cirkelns radie. Cosinusfunktionen anger längden på den angränsande sidan i en rätvinklig triangel i förhållande till hypotenusan, vilket innebär att den ger oss platsens "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"x"}]},{"type":"text","value":"-koordinat. Sinusfunktionen ger längden på den motsatta sidan, dvs. "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"y"}]},{"type":"text","value":"-koordinaten. Platsen justeras sedan för bildens storlek, så att cirkelns mittpunkt ligger i fönstrets mittpunkt."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"För varje iteration ökar storleken på "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"vinkel"}]},{"type":"text","value":" med 0,01. Eftersom vi använder radianer är en hel cirkel 2π, vilket motsvarar ca 6,28. Det tar cirka 628 iterationer för roboten att gå en hel cirkel, och med 60 iterationer per sekund tar detta drygt 10 sekunder."}]},{"type":"element","tagName":"programming-exercise","properties":{"name":"Vertikal rörelse","tmcname":"osa13-05_vertikal_rorelse"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Skapa en animation där roboten rör sig upp och ner i en ändlös loop. Slutresultatet ska se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/7dfa8e1aefab9c5f0586d8148b819543/pygame_pysty.gif"},"children":[]}]},{"type":"element","tagName":"programming-exercise","properties":{"name":"Längs med kanten","tmcname":"osa13-06_langs_med_kanten"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Skapa en animation där roboten följer fönstrets omkrets. Slutresultatet ska se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/b313e2cd6e747c9b47375655616b0e2d/pygame_kierto.gif"},"children":[]}]},{"type":"element","tagName":"programming-exercise","properties":{"name":"Två robotar","tmcname":"osa13-07_tva_robotar"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Skapa en animation där två robotar rör sig fram och tillbaka till vänster och höger. Den nedre roboten ska röra sig med dubbelt så hög hastighet som den övre. Slutresultatet ska se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/5b2b134a4afcdbaa9c11796d3cadb5e2/pygame_liike2.gif"},"children":[]}]},{"type":"element","tagName":"programming-exercise","properties":{"name":"Ringlek","tmcname":"osa13-08_ringlek"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Skapa en animation där tio robotar går runt i en cirkel. Slutresultatet ska se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/c8832b391e97f55d98358c8f0e5bfd57/pygame_piiri.gif"},"children":[]}]},{"type":"element","tagName":"programming-exercise","properties":{"name":"Studsande boll","tmcname":"osa13-09_studsande_boll"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Skapa en animation där en boll studsar från fönstrets kanter. Slutresultatet ska se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/e9503906920a8a19bc3a33143b0dde81/pygame_pallo.gif"},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Övningsmallen innehåller bilden "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"boll.png"}]},{"type":"text","value":"."}]}]},{"type":"element","tagName":"programming-exercise","properties":{"name":"Robot invasion","tmcname":"osa13-10_robot_invasion"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Skapa en animation där robotar faller från himlen slumpmässigt. När en robot når marken börjar den röra sig åt vänster eller höger och försvinner till slut från skärmen. Slutresultatet ska se ut så här:"}]},{"type":"element","tagName":"img","properties":{"src":"/23bd928da4c554324efdf7de4806cc60/pygame_invaasio.gif"},"children":[]}]}]},"html":"

Efter den här delen

Många spel har rörliga karaktärer, så ett logiskt nästa steg är att skapa animationer. Vi kan skapa en illusion av rörelse genom att rita samma bild på olika ställen på skärmen och tajma ändringarna på rätt sätt.

Skapa en animation

Följande kod skapar en animation där en robot rör sig från vänster till höger i ett pygame-fönster:

import pygame\n\npygame.init()\nfonster = pygame.display.set_mode((640, 480))\n\nrobot = pygame.image.load(\"robot.png\")\n\nx = 0\ny = 0\nklocka = pygame.time.Clock()\n\nwhile True:\n    for handelse in pygame.event.get():\n        if handelse.type == pygame.QUIT:\n            exit()\n\n    fonster.fill((0, 0, 0))\n    fonster.blit(robot, (x, y))\n    pygame.display.flip()\n\n    x += 1\n    klocka.tick(60)

När detta exekveras, borde resultatet se ut så här:

Låt oss ta en närmare titt på de instruktioner som är inblandade. Om vi vill spåra bildens rörelse på skärmen måste vi veta var den befinner sig. Därför har vi två variabler för koordinaterna för bildens övre vänstra hörn:

x = 0\ny = 0

Vi har även en klocka, som vi använder för att se till att animationens hastighet är korrekt:

klocka = pygame.time.Clock()

Huvudloopen ritar bilden på sin aktuella plats vid varje iteration:

    fonster.fill((0, 0, 0))\n    fonster.blit(robot, (x, y))\n    pygame.display.flip()

Först fyller metoden fill fönstret med svart, precis som tidigare. Färgen skickas som en tupel som innehåller RGB-värdena för färgen. I det här fallet är argumentet (0, 0, 0), vilket innebär att alla tre komponenterna - röd, grön och blå - har värdet 0. Varje komponent kan ha ett värde mellan 0 och 255. Om vi skickar (255, 255, 255) som argument får vi alltså ett vitt fönster, och med (255, 0, 0) får vi ett rött fönster. RGB-färgkoder utgör ryggraden i digital färgläggning, och det finns många verktyg online för att arbeta med dem, till exempel RGB Color Codes Chart.

När fönstret har fyllts med färg ritas bilden på den angivna platsen med blit-metoden. Sedan uppdateras innehållet i fönstret med funktionen pygame.display.flip.

Slutligen ökas värdet som lagras i x, vilket gör att bilden flyttas en pixel åt höger för varje iteration:

    x += 1

Klock-metoden tick kallas i slutet:

    klocka.tick(60)

Metoden tick tar hand om hastigheten på animationen. Argumentet 60 anger att loopen ska exekveras 60 gånger per sekund, vilket innebär att bilden förflyttas 60 pixlar åt höger varje sekund. Detta motsvarar ungefär det värde för FPS eller bilder per sekund som används i spel.

I princip ser tick-metoden till att animationen körs med samma hastighet på alla datorer. Om det inte fanns någon sådan timing skulle animationens hastighet bero på datorns hastighet.

Studsa av en vägg

Den föregående animationen var annars utmärkt, men när roboten nådde en vägg fortsatte den bara att försvinna ur syn. Låt oss få roboten att studsa mot väggen.

import pygame\n\npygame.init()\nfonster = pygame.display.set_mode((640, 480))\n\nrobot = pygame.image.load(\"robot.png\")\n\nx = 0\ny = 0\nhastighet = 1\nklocka = pygame.time.Clock()\n\nwhile True:\n    for handelse in pygame.event.get():\n        if handelse.type == pygame.QUIT:\n            exit()\n\n    fonster.fill((0, 0, 0))\n    fonster.blit(robot, (x, y))\n    pygame.display.flip()\n\n    x += hastighet\n    if hastighet > 0 and x+robot.get_width() >= 640:\n        hastighet = -hastighet\n    if hastighet < 0 and x <= 0:\n        hastighet = -hastighet\n\n    klocka.tick(60)

Exekvering av koden ovan borde se ut så här:

Det finns en ny variabel, hastighet, som bestämmer rörelseriktningen. Om värdet är över noll sker förflyttningen åt höger och om det är under noll sker förflyttningen åt vänster. I det här fallet rör sig roboten åt höger om värdet är 1, åt vänster om värdet är -1.

Följande rader gör att roboten studsar mot sidoväggarna:

    if hastighet > 0 and x+robot.get_width() >= 640:\n        hastighet = -hastighet\n    if hastighet < 0 and x <= 0:\n        hastighet = -hastighet

Om hastigheten är över noll så att roboten rör sig åt höger, och högerkanten på bilden går utanför fönstrets högra kant, vänds riktningen och roboten börjar röra sig åt vänster. På samma sätt, om hastigheten är under noll så att roboten rör sig åt vänster, och bildens vänstra kant når fönstrets vänstra kant, vänds riktningen igen och roboten börjar röra sig åt höger igen.

Detta gör att roboten rör sig på en bana från fönstrets vänstra kant till den högra kanten, och tillbaka till vänster, och sedan till höger igen, upprepat i all oändlighet.

Rotation

Låt oss skapa ytterligare en animation. Den här gången ska roboten rotera i en cirkel runt fönstrets mitt:

import pygame\nimport math\n\npygame.init()\nfonster = pygame.display.set_mode((640, 480))\n\nrobot = pygame.image.load(\"robot.png\")\n\nvinkel = 0\nklocka = pygame.time.Clock()\n\nwhile True:\n    for handelse in pygame.event.get():\n        if handelse.type == pygame.QUIT:\n            exit()\n\n    x = 320+math.cos(vinkel)*100-robot.get_width()/2\n    y = 240+math.sin(vinkel)*100-robot.get_height()/2\n\n    fonster.fill((0, 0, 0))\n    fonster.blit(robot, (x, y))\n    pygame.display.flip()\n\n    vinkel += 0.01\n    klocka.tick(60)

Exekvering av koden ovan borde se ut så här:

Rotation i en relativt exakt cirkel uppnås med hjälp av några grundläggande trigonometriska funktioner. Variabeln vinkel innehåller vinkeln för robotens position i förhållande till fönstrets mittpunkt och den horisontella linjen som går genom fönstret. Sinus- och cosinusfunktionerna från Pythons matematikbibliotek används här för att beräkna koordinaterna för robotens position:

        x = 320+math.cos(vinkel)*100-robot.get_width()/2\n        y = 240+math.sin(vinkel)*100-robot.get_height()/2

Roboten roterar runt en cirkel med radien 100 runt fönstrets mittpunkt. Hypotenusan i detta scenario är cirkelns radie. Cosinusfunktionen anger längden på den angränsande sidan i en rätvinklig triangel i förhållande till hypotenusan, vilket innebär att den ger oss platsens x-koordinat. Sinusfunktionen ger längden på den motsatta sidan, dvs. y-koordinaten. Platsen justeras sedan för bildens storlek, så att cirkelns mittpunkt ligger i fönstrets mittpunkt.

För varje iteration ökar storleken på vinkel med 0,01. Eftersom vi använder radianer är en hel cirkel 2π, vilket motsvarar ca 6,28. Det tar cirka 628 iterationer för roboten att gå en hel cirkel, och med 60 iterationer per sekund tar detta drygt 10 sekunder.

Skapa en animation där roboten rör sig upp och ner i en ändlös loop. Slutresultatet ska se ut så här:

Skapa en animation där roboten följer fönstrets omkrets. Slutresultatet ska se ut så här:

Skapa en animation där två robotar rör sig fram och tillbaka till vänster och höger. Den nedre roboten ska röra sig med dubbelt så hög hastighet som den övre. Slutresultatet ska se ut så här:

Skapa en animation där tio robotar går runt i en cirkel. Slutresultatet ska se ut så här:

Skapa en animation där en boll studsar från fönstrets kanter. Slutresultatet ska se ut så här:

Övningsmallen innehåller bilden boll.png.

Skapa en animation där robotar faller från himlen slumpmässigt. När en robot når marken börjar den röra sig åt vänster eller höger och försvinner till slut från skärmen. Slutresultatet ska se ut så här:

","frontmatter":{"path":"/osa-13/2-animation","title":"Animation"},"fileAbsolutePath":"/home/runner/work/ohjelmointi-26-sv/ohjelmointi-26-sv/data/osa-13/2-animation.md"},"allPages":{"edges":[{"node":{"id":"3823106d-d5b4-54fc-ab67-c9717c628c00","frontmatter":{"path":"/","title":"Info om kursen"}}},{"node":{"id":"dd7e5652-0011-5cc2-8a7c-c07fca8a56ba","frontmatter":{"path":"/bedomningar-och-prov","title":"Bedömning och prov"}}},{"node":{"id":"7ee945da-eb70-5822-b337-58f9871c566a","frontmatter":{"path":"/alla-uppgifter","title":"Alla uppgifter"}}},{"node":{"id":"6e80e276-0b56-526e-93d9-5ab8823c6611","frontmatter":{"path":"/frontmatter-guide","title":"Frontmatter-guide"}}},{"node":{"id":"7dadae75-1bf2-549f-bb24-5e00c8421489","frontmatter":{"path":"/stod","title":"Handledning och stöd"}}},{"node":{"id":"b1f9be34-f77d-51c9-83c2-d2d3b1f88e7c","frontmatter":{"path":"/onlinetent","title":"Nättentamen 4.6."}}},{"node":{"id":"4e153253-62e1-5e29-b920-4512181e99a0","frontmatter":{"path":"/onlinetent-ohja","title":"ProgFK onlinetent 28.2.2026"}}},{"node":{"id":"5ba54609-9e23-5f8a-bbb1-3501116bd674","frontmatter":{"path":"/onlinetent-ohpe","title":"ProgGK onlinetent 17.1.2026"}}},{"node":{"id":"15a016f4-0a3d-5ec9-8236-533e57968b89","frontmatter":{"path":"/felanmalningar","title":"Vanliga felmeddelanden"}}},{"node":{"id":"416d07bf-b149-5ede-9d73-ea96ebbe00a2","frontmatter":{"path":"/sanasto","title":"Sanasto"}}},{"node":{"id":"70c6dbee-fa15-5924-a037-5b093295a075","frontmatter":{"path":"/osa-1/1-introduktion","title":"Introduktion"}}},{"node":{"id":"677341cb-d819-5a66-a348-fe483d9d22dd","frontmatter":{"path":"/ofta-stallda-fragar","title":"Ofta ställda frågor"}}},{"node":{"id":"10acce17-6b8d-5a7a-96ef-df73c32033da","frontmatter":{"path":"/osa-1/5-villkorssatser","title":"If-satser"}}},{"node":{"id":"adf0c95e-e532-52ac-acb7-41ecca35f001","frontmatter":{"path":"/osa-1","title":"Modul 1"}}},{"node":{"id":"337cbcae-fea0-535f-a4b7-07d0558220d7","frontmatter":{"path":"/osa-1/4-rakneoperationer","title":"Räkneoperationer"}}},{"node":{"id":"94008673-2d10-5ad1-af95-83b5478b3113","frontmatter":{"path":"/osa-10/1-klasshierarkier","title":"Klasshierarkier"}}},{"node":{"id":"3d48575e-5585-5b61-81ed-fe7585ea7593","frontmatter":{"path":"/osa-10/2-atkamstmodifierare","title":"Åtkomstmodifierare"}}},{"node":{"id":"fd6c2729-204f-5955-84d7-1ee8ed9b243b","frontmatter":{"path":"/osa-10/3-objektorienterade-programmeringstekniker","title":"Objektorienterade programmeringstekniker"}}},{"node":{"id":"648ed3ec-8a44-533a-9b88-7ef8fb7a1314","frontmatter":{"path":"/osa-10/4-storre-applikation","title":"Att utveckla en större applikation"}}},{"node":{"id":"abc32f5b-5700-5a16-b351-3bb0fd9e9b3f","frontmatter":{"path":"/osa-10","title":"Modul 10"}}},{"node":{"id":"b6612d3d-6ef9-5537-b0cf-62a01d4de20e","frontmatter":{"path":"/osa-1/3-mer-om-variabler","title":"Mer om variabler"}}},{"node":{"id":"b4146f07-9889-567c-bb26-315ca8375738","frontmatter":{"path":"/osa-11/1-list-comprehension","title":"Listbyggare"}}},{"node":{"id":"959073ca-1000-5d61-98e3-6a7151d95d71","frontmatter":{"path":"/osa-1/2-info-fran-anvandaren","title":"Information från användaren"}}},{"node":{"id":"a8daa43b-12ea-5482-9768-648407360e5d","frontmatter":{"path":"/osa-11/3-rekursion","title":"Rekursion"}}},{"node":{"id":"4dfa0d82-937f-597e-a323-1ffa57da8548","frontmatter":{"path":"/osa-11/2-mer-om-comprehensions","title":"Mer om listbyggare"}}},{"node":{"id":"848a81c4-fc8c-55cf-99ad-333703ef6d09","frontmatter":{"path":"/osa-11/4-lisaa-esimerkkeja","title":"Fler exempel på rekursion"}}},{"node":{"id":"bd0cfdba-8571-59be-bcfc-b681838806c6","frontmatter":{"path":"/osa-11","title":"Modul 11"}}},{"node":{"id":"d2e288a6-dc52-5b69-b9c9-7c967e3ecd14","frontmatter":{"path":"/osa-12/3-funktionell-programmering","title":"Funktionell programmering"}}},{"node":{"id":"e4a0179a-cac6-5b2f-b1d0-e0db6f5b4339","frontmatter":{"path":"/osa-12/4-reguljara-uttryck","title":"Reguljära uttryck"}}},{"node":{"id":"655d9900-5214-5ba4-88d7-a81fd819b0a0","frontmatter":{"path":"/osa-12","title":"Modul 12"}}},{"node":{"id":"10a6b4aa-f106-50e6-9d72-39e500891fd8","frontmatter":{"path":"/osa-12/2-generatorer","title":"Generatorer"}}},{"node":{"id":"af6df246-f5d2-583d-9f07-5aa9736ff64f","frontmatter":{"path":"/osa-13/1-pygame","title":"Pygame"}}},{"node":{"id":"d7395cb0-da7f-5acf-bf09-fd1035b36e81","frontmatter":{"path":"/osa-13/2-animation","title":"Animation"}}},{"node":{"id":"fef7b1d3-58ba-5d58-8637-0e14a8f584a6","frontmatter":{"path":"/osa-12/1-funktioner-som-argument","title":"Funktioner som argument"}}},{"node":{"id":"bd405169-a47c-5eba-986b-4506b39036ac","frontmatter":{"path":"/osa-13/4-fler-pygame-tekniker","title":"Fler pygame-tekniker"}}},{"node":{"id":"a9357b87-636c-5d96-b46b-bbb6a421f6d0","frontmatter":{"path":"/osa-13/3-handelser","title":"Händelser"}}},{"node":{"id":"78b8d6cc-7e14-5090-b43c-1513e8069e0c","frontmatter":{"path":"/osa-13","title":"Modul 13"}}},{"node":{"id":"5f9e405b-ae8f-5181-b1ae-ff2f4e6ad6da","frontmatter":{"path":"/osa-14/1-spelprojekt","title":"Spelprojekt"}}},{"node":{"id":"6e0e1b55-3ed4-56a8-9580-cd451bb7edde","frontmatter":{"path":"/osa-14/2-robot-och-ladar","title":"Robot och lådor"}}},{"node":{"id":"7f22ddd1-54e5-548f-b8d1-07863a79e2df","frontmatter":{"path":"/osa-14","title":"Modul 14"}}},{"node":{"id":"fea4657b-129f-5bb5-8645-17f84341e4b6","frontmatter":{"path":"/osa-2/1-terminologi","title":"Programmeringsterminologi"}}},{"node":{"id":"8c86392d-05ca-5e03-bf19-9e18db4c3578","frontmatter":{"path":"/osa-2/2-else-elif","title":"Mera om if-satser"}}},{"node":{"id":"4272a508-fa3f-5c99-b0d0-ca0a77dcbd88","frontmatter":{"path":"/osa-2/3-kombinera-villkor","title":"Kombinera villkor"}}},{"node":{"id":"2a9f88b8-4fe8-5fcb-9dfe-b4d98dde5d42","frontmatter":{"path":"/osa-14/3-fardigstallande-av-spelet","title":"Färdigställande av spelet"}}},{"node":{"id":"a620e53b-7d15-54ea-9a40-5d549bf3fddc","frontmatter":{"path":"/osa-14/4-ditt-eget-sepl","title":"Ditt eget spel"}}},{"node":{"id":"6a0f5405-e6cb-581d-92e3-c8af9ad4e7c2","frontmatter":{"path":"/osa-3/1-loopar-med-villkor","title":"Loopar med villkor"}}},{"node":{"id":"a131e4e2-8f05-5986-ab20-e06d9ed60dbe","frontmatter":{"path":"/osa-3/2-behandla-strangar","title":"Behandla strängar"}}},{"node":{"id":"29bc027e-c4f5-5d80-9e6a-bca75ee73682","frontmatter":{"path":"/osa-3/3-mer-om-loopar","title":"Mera om loopar"}}},{"node":{"id":"ed81d1ed-bbbb-573c-a017-e49e4ccd3d56","frontmatter":{"path":"/osa-3/4-definiera-funktioner","title":"Definiera funktioner"}}},{"node":{"id":"f9cdcf8a-269d-5ddb-9346-9ca23e48ef7e","frontmatter":{"path":"/osa-3","title":"Modul 3"}}},{"node":{"id":"8c15b7c7-809b-5ea5-a801-7d20819960ea","frontmatter":{"path":"/osa-4/1-vscode","title":"Editorn Visual Studio Code, Pythontolken och det inbyggda debuggningsverktyget"}}},{"node":{"id":"0f597439-5fd6-5ebf-a758-51fa680510d6","frontmatter":{"path":"/osa-4/2-mer-om-funktioner","title":"Mer om funktioner"}}},{"node":{"id":"d61169f7-0d24-5b3c-8b8c-6f3001453119","frontmatter":{"path":"/osa-4/3-listor","title":"Listor"}}},{"node":{"id":"0cc0967d-12d5-5877-966c-83262ee2d053","frontmatter":{"path":"/osa-4/4-iteration","title":"Iteration"}}},{"node":{"id":"b7f5aab0-16f5-57ea-be99-ef776e766449","frontmatter":{"path":"/osa-4/5-utskrift","title":"Formatera utskrift"}}},{"node":{"id":"7ce1ae54-08a7-55c5-8fdf-e66c163be7c5","frontmatter":{"path":"/osa-4","title":"Modul 4"}}},{"node":{"id":"7616bfc3-86a8-51ad-a63d-f62e70d684f7","frontmatter":{"path":"/osa-5/1-mer-om-listor","title":"Mer om listor"}}},{"node":{"id":"2754089d-7b6b-5a07-98f8-ed47c35f0f1e","frontmatter":{"path":"/osa-5/2-referenser","title":"Referenser"}}},{"node":{"id":"e44de044-469b-5a0c-b484-8b1c6d76b36e","frontmatter":{"path":"/osa-5/4-tuple","title":"Tuple"}}},{"node":{"id":"1777675c-c2e5-5912-9351-6bf786995e74","frontmatter":{"path":"/osa-4/6-strangar-listor","title":"Mera strängar och listor"}}},{"node":{"id":"f5608366-0cdb-5799-ad10-c1ae5bf31ff5","frontmatter":{"path":"/osa-2/4-loopar","title":"Enkla loopar"}}},{"node":{"id":"335a567d-d08f-56d6-8449-9d4bfb7dbbf5","frontmatter":{"path":"/osa-2","title":"Modul 2"}}},{"node":{"id":"05201f8b-92c3-5f20-aa64-572c040a44ef","frontmatter":{"path":"/osa-6/2-skriva-filer","title":"Skriva filer"}}},{"node":{"id":"bc19aa61-1a37-5b73-bd20-0c3994c3a7cf","frontmatter":{"path":"/osa-6/3-fel","title":"Förbered dig på fel"}}},{"node":{"id":"9c4ca0dd-1be2-5b8f-a357-61049541022a","frontmatter":{"path":"/osa-6/1-lasa-filer","title":"Läsa filer"}}},{"node":{"id":"05a28a78-3f81-5cb4-8f94-9a16288789c8","frontmatter":{"path":"/osa-6/4-lokala-globala-variabler","title":"Lokala och globala variabler"}}},{"node":{"id":"2f89b471-3e51-5519-9173-c8029a4a5bf7","frontmatter":{"path":"/osa-6","title":"Modul 6"}}},{"node":{"id":"cda20318-6650-5b01-96a7-c8a9436ea427","frontmatter":{"path":"/osa-7/1-moduler","title":"Moduler"}}},{"node":{"id":"c0858900-47db-5c88-8875-147a8e652fe4","frontmatter":{"path":"/osa-5/3-lexikon","title":"Lexikon"}}},{"node":{"id":"11da0cd6-66de-5139-aeea-f6536ce49cca","frontmatter":{"path":"/osa-7/2-slumpmassighet","title":"Slump"}}},{"node":{"id":"2190a210-ac82-5c3e-8671-037f9247c83f","frontmatter":{"path":"/osa-7/3-tid-datum","title":"Tid och datum"}}},{"node":{"id":"9970fc94-eb27-5148-b31b-e887b737b7b4","frontmatter":{"path":"/osa-7/4-behandla-data","title":"Behandla data"}}},{"node":{"id":"9de0b38c-9ab2-5dca-918f-53f58d473b4e","frontmatter":{"path":"/osa-7/5-egna-moduler","title":"Skapa dina egna moduler"}}},{"node":{"id":"6c06e867-814c-5c2c-b0d6-d6cfaaf92234","frontmatter":{"path":"/osa-5","title":"Modul 5"}}},{"node":{"id":"f7d5f344-d3b4-56c6-bf18-45edc2245759","frontmatter":{"path":"/osa-8/4-metoder-i-egna-klasser","title":"Metoder i egna klasser"}}},{"node":{"id":"303465de-b86a-519b-b1b5-9711b03072d9","frontmatter":{"path":"/osa-8/5-fler-exempel","title":"Fler exempel"}}},{"node":{"id":"a85852ab-8cf8-52b4-8872-4c73d5821319","frontmatter":{"path":"/osa-9/1-objekt-och-referenser","title":"Objekt och referenser"}}},{"node":{"id":"b6cd6b79-fcb4-535d-8d00-b4f849f4647f","frontmatter":{"path":"/osa-9/3-inkapsling","title":"Inkapsling"}}},{"node":{"id":"c6757168-dbea-5c4f-aa4e-c2c3bb0ca423","frontmatter":{"path":"/osa-9/4-metodernas-rackvidd","title":"Metodernas räckvidd"}}},{"node":{"id":"601766bc-2985-5820-a4a3-32bbb761c69b","frontmatter":{"path":"/osa-7/6-funktionaliteter-python","title":"Flera funktionaliteter i Python"}}},{"node":{"id":"08ceb5d1-6e8e-599a-995d-a1125f7a1f80","frontmatter":{"path":"/osa-9/5-klassattribut","title":"Klassattribut"}}},{"node":{"id":"b1f13f0c-169e-519f-9f42-f572bebd8535","frontmatter":{"path":"/osa-9","title":"Modul 9"}}},{"node":{"id":"4b4101dc-9e1f-5a4a-bb4e-dbb6a4ba5e0d","frontmatter":{"path":"/osa-8/3-egna-klasser","title":"Egna klasser"}}},{"node":{"id":"35f36261-94d8-509f-9fcb-59b3e08fc6a1","frontmatter":{"path":"/osa-8/2-klasser-och-objekt","title":"Klasser och objekt"}}},{"node":{"id":"53079b0b-f0d2-5c35-83a0-4f713e57ce72","frontmatter":{"path":"/osa-8/1-objekt-och-metoder","title":"Objekt och metoder"}}},{"node":{"id":"954e5006-2925-5035-a27c-10e05897cfa4","frontmatter":{"path":"/osa-9/6-fler-exempel-med-klasser","title":"Fler exempel med klasser"}}},{"node":{"id":"f1eeb001-f445-57c9-b2e7-380dabc25b86","frontmatter":{"path":"/osa-8","title":"Modul 8"}}},{"node":{"id":"ccc63fff-7834-5270-b69c-944db644a9ad","frontmatter":{"path":"/osa-7","title":"Modul 7"}}},{"node":{"id":"75ae0566-a8bf-5305-aee3-4c5bc0d2d5e9","frontmatter":{"path":"/osa-9/2-objekt-som-attribut","title":"Objekt som attribut "}}}]}},"pageContext":{}}, "staticQueryHashes": ["1357757885","994120085"]}