Aula Gráfica de LP2 Professor: André Santos Monitor: José Edson.

Apresentação em tema: "Aula Gráfica de LP2 Professor: André Santos Monitor: José Edson."— Transcrição da apresentação:

1 Aula Gráfica de LP2 Professor: André Santos Monitor: José Edson

2 Introdução Como abrir uma janela em Haskell? module Tela where import Graphics import OldLib import Compatibility -- import GraphicsDraw(drawBufferedPicture) -- Eh requerida por alguns Drivers main :: IO () main = runGraphics (do w <- openWindow "Projeto de LP2" (300, 300) draw w (text (100, 100) "Haskell") draw w (text (50, 200) "Craft of Functional Programming") getKey w closeWindow w )

3 Analisando... rungraphics :: IO() -> IO() Chama a parte gráfica. openWindow :: String -> Point -> IO Window Abre uma janela, especificando o título e o tamanho. Ex.: w <- openWindow "Projeto de LP2" (300, 300) main :: IO () main = runGraphics (do [ lista de comandos ]) Título Tamanho “janela”

4 Analisando... draw :: Window -> Picture -> IO() Desenha uma figura na janela. Texto, elipse, retangulo E.: draw w (text (100, 100) "Haskell") Point Variável “janela”

5 text :: Point -> String -> Picture Cria uma figura que é uma string no ponto dado getKey :: Window -> IO() Espera o pressionamento de uma tecla. closeWindow :: Window -> IO() Fecha a janela. Analisando...

6 Pictures Outras figuras que podem ser desenhadas na tela: empty :: Picture ellipse :: Point -> Point -> Picture shearEllipse :: Point -> Point -> Point -> Picture line :: Point -> Point -> Picture polyline :: [Point] -> Picture polygon :: [Point] -> Picture polyBezier :: [Point] -> Picture text :: Point -> String -> Picture

7 Modificadores de Figuras withFont :: Font -> Picture -> Picture withTextColor :: RGB -> Picture -> Picture withTextAlignment :: Alignment -> Picture -> Picture withBkColor :: RGB -> Picture -> Picture withBkMode :: BkMode -> Picture -> Picture withPen :: Pen -> Picture -> Picture withBrush :: Brush -> Picture -> Picture As figuras podem ser modificadas de várias formas. Alguns dos modificadores são:

8 Exemplo com Cores module Tela where import Graphics import OldLib import GraphicsDraw(drawBufferedPicture) import GColor main :: IO () main = runGraphics (do w <- openWindow "Projeto de LP2 - JOGO DA VELHA" (400, 300) draw w background draw w tabuleiro draw w divisoes getKey w closeWindow w ) background :: Picture background = (withRGB (RGB 135 135 135) (polygon [(0,0),(0,300),(400,300),(400,0)])) tabuleiro :: Picture tabuleiro = (withRGB (RGB 170 170 170) (polygon [(50,50),(50,250),(250,250),(250,50)])) divisoes :: [Picture] divisoes = over ( (withCor Preto (polyline [(250,50),(50,50),(50,250)])), (withCor Branco (polyline [(50,250),(250,250),(250,50)])) ) draw :: Window -> Picture -> IO() GColor não é pré-definida!!

9 GColor module GColor where import Graphics -- Estrutura de cores data Cor = Amarelo | Azul | Branco | Preto | Magenta deriving (Eq, Ord, Bounded, Enum, Ix, Show, Read) -- funcao que utiliza cores especificadas ------ withCor :: Color -> Picture -> Picture withCor Amarelo y = withRGB (RGB 255 255 0) y withCorAzul y = withRGB (RGB 0 0 255) y withCor Branco y = withRGB (RGB 255 255 255) y withCor Preto y = withRGB (RGB 0 0 0) y withCor Magenta y = withRGB (RGB 255 0 255) y

10 Cores pré-definidas data Color = Black | Blue | Green | Cyan | Red | Magenta | Yellow | White deriving (Eq, Ord, Bounded, Enum, Ix, Show, Read) Nestes casos não é preciso trabalhar com RGB

11 Combinando Pictures over (withBrush red $ polygon [(200,200),(400,200),(300,400)]) (withBrush blue $ polygon [(100,100),(500,100),(500,500),(100,500)]) overMany [(withBrush blue $ polygon [(250,200),(350,200),(350,250),(250,250)]), (withBrush red $ polygon [(200,200),(400,200),(300,400)]), (withBrush blue $ polygon [(100,100),(500,100),(500,500),(100,500)])] over recebe apenas duas figuras, enquanto overMany recebe uma lista. over :: Picture -> Picture -> Picture overMany :: [Picture] -> Picture

12 Exemplo main :: IO () main = runGraphics (do w <- openWindow "Projeto de LP2 - JOGO DA VELHA" (400, 300) draw w (overMany (quadrados ++ divisoes ++ tabuleiro ++ background)) --draw w tabuleiro --draw w divisoes --draw w (overMany quadrados) getKey w closeWindow w ) background :: [Picture] background = [(withRGB (RGB 135 135 135) (polygon [(0,0),(0,300),(400,300),(400,0)]))] tabuleiro :: [Picture] tabuleiro = [(withRGB (RGB 170 170 170) (polygon [(50,50),(50,250),(250,250),(250,50)]))] Para adaptar-se ao “overMany” as funções background, tabuleiro e divisoes, retornam uma lista de Picture.

13 Continuação do Exemplo divisoes :: [Picture] divisoes = [over (withCor Preto (polyline [(250,50),(50,50),(50,250)])) (withCor Branco (polyline [(50,250),(250,250),(250,50)]))] quadrados :: [Picture] quadrados = linha 9 linha :: Int -> [Picture] linha 0 = [] linha n | (n>=1 && n<=3) = auxLinha n 55 115 | (n>=4 && n<=6) = auxLinha (n-3) 55 180 ++ linha 3 | (n>=7 && n<=9) = auxLinha (n-6) 55 245 ++ linha 6 auxLinha :: Int -> Int -> Int -> [Picture] auxLinha 0 _ _ = [] auxLinha n x y = [(withCor Branco (polyline [(x,y),(x,y-60),(x+60,y-60)])), (withCor Preto (polyline [(x,y),(x+60,y),(x+60,y-60)]))] ++ auxLinha (n-1) (x+65) y

14 Window getPicture :: Window -> IO Picture setPicture :: Window -> Picture -> IO () Estas funções são muito utilizadas quando temos um IO Picture e queremos retornar um IO (). Elas são usadas tanto na definição de “draw”, como na de clearWindow. draw :: Window -> Picture -> IO () draw w p = do oldPicture IO () clearWindow w = setPicture w empty

15 Mouse Events getLBP :: Window -> IO Point getRBP :: Window -> IO Point getButton :: Window -> Bool -> Bool -> IO Point Existem três funcões para o uso do mouse. getLBP e getRBP esperam o pressionamento do botões esquerdo e direito do mouse. Ambas funções são definidas usando getButton, o qual pode ser utilizada para os botões esquerdo e direito tanto para pressionar e soltar. getLBP w = getButton w True True getRBP w = getButton w False True True para o esquerdo, False para o direito. True para pressionar, False para soltar.

16 Exemplo3 - Uso do Mouse module Tela where import Graphics import GColor main :: IO () main = runGraphics (do w <- openWindow "Projeto de LP2 - JOGO DA VELHA" (400, 300) draw w (overMany (quadrados ++ divisoes ++ tabuleiro ++ background)) >> getLBP w >>= \ ponto -> modificar w ponto getKey w closeWindow w ) modificar :: Window -> (Int,Int) -> IO() modificar w (x,y) | (x>=55)&&(x =55)&&(y<=115) = draw w (withCor Magenta (polygon [(55,55),(55,115),(115,115),(115,55)]))| |otherwise = draw w (withCor Preto (text (30,30) "LUGAR ERRADO!"))

17 Bitmaps import GraphicsBitmap(drawStretched,load) readBitmap filename = load filename >>= \ (bm,sz) -> return bm modificar :: Window -> (Int,Int) -> IO() modificar w (x,y) | (x>=55)&&(x =55)&&(y<=115) = readBitmap “logo3.bmp" >>= \teste -> draw w (drawStretched (55,55) (115,115) teste) | otherwise = draw w (withCor Preto (text (30,30) "LUGAR ERRADO!"))