3. programação gráfica - uel.br programacao... · para finalizar, todos os programas devem...

14
7 3. Programação Gráfica De uma forma geral, um programa de computador deve conter uma entrada de dados, algoritmos matemáticos para tratamento de dados e saídas para visualizar os resultados. A saída pode ser alfanumérica, contendo informações básicas junto aos resultados. Ou gráfica, que demanda a construção de uma representação visual dos resultados. A saída gráfica pode vir acompanhada das informações alfanuméricas. 3.1 Programas básicos Antes da programação gráfica, vamos introduzir alguns conceitos básicos de programação usando como foco os geradores de números aleatórios, rotinas computacionais que podem ser internos ou sub-rotinas externas. São baseados em algoritmos matemáticos operando sobre um número inicial (raiz), e simulam o sorteio de um número aleatório, em geral limitado entre 0 e 1. Para o próximo sorteio, o resultado anterior será usado como a nova raiz, e assim, sucessivamente. Um bom gerador deve simular a produção de uma quantidade estatisticamente significativa de números aleatórios com distribuição uniforme no intervalo [0,1]. Esses números, resultados de operações matemáticas, não são aleatórios de fato, sendo denominados números pseudo-aleatórios. No entanto, não faremos esta distinção. O quadro 1.1 mostra um programa simples para sortear um número aleatório, onde (1) é a função que chama o gerador de números aleatórios. A primeira linha contém um comentário, indicado pelo apóstrofo (‘) no início da linha. Linhas de comentários são ignoradas na execução dos programas. A terceira linha é um comando de impressão, no caso, de uma linha em branco. A quarta também é um comando de impressão: imprime o texto e, na sequência, o número aleatório sorteado. Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma pendência. Quadro 3.1: Sorteio de um número aleatório. Quando o programa é executado, abre-se uma janela (janela principal) onde o resultado é impresso, como mostra o quadro 3.2. Quadro 3.2: Saída com o número aleatório sorteado. A cada execução resulta um número diferente, como a sequência seguinte, por exemplo, obtida em 12 sorteios consecutivos: 0.90591908; 0.28233856; 0.13031044; 0.85118146; 0.95243551e-1; 0.88690009; 0.67271063; 0.67870354e-1; 0.43417535; 0.34253537; 0.77465078e-1; 0.30546759.

Upload: ngokiet

Post on 14-Dec-2018

219 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

7

3. Programação Gráfica

De uma forma geral, um programa de computador deve conter uma entrada de dados, algoritmos matemáticos para tratamento de dados e saídas para visualizar os resultados. A saída pode ser alfanumérica, contendo informações básicas junto aos resultados. Ou gráfica, que demanda a construção de uma representação visual dos resultados. A saída gráfica pode vir acompanhada das informações alfanuméricas.

3.1 Programas básicos

Antes da programação gráfica, vamos introduzir alguns conceitos básicos de programação usando como foco os geradores de números aleatórios, rotinas computacionais que podem ser internos ou sub-rotinas externas. São baseados em algoritmos matemáticos operando sobre um número inicial (raiz), e simulam o sorteio de um número aleatório, em geral limitado entre 0 e 1. Para o próximo sorteio, o resultado anterior será usado como a nova raiz, e assim, sucessivamente. Um bom gerador deve simular a produção de uma quantidade estatisticamente significativa de números aleatórios com distribuição uniforme no intervalo [0,1]. Esses números, resultados de operações matemáticas, não são aleatórios de fato, sendo denominados números pseudo-aleatórios. No entanto, não faremos esta distinção.

O quadro 1.1 mostra um programa simples para sortear um número aleatório, onde ���(1) é a função que chama o gerador de números aleatórios. A primeira linha contém um comentário, indicado pelo apóstrofo (‘) no início da linha. Linhas de comentários são ignoradas na execução dos programas. A terceira linha é um comando de impressão, no caso, de uma linha em branco. A quarta também é um comando de impressão: imprime o texto e, na sequência, o número aleatório sorteado.

Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma pendência.

Quadro 3.1: Sorteio de um número aleatório.

Quando o programa é executado, abre-se uma janela (janela principal) onde o

resultado é impresso, como mostra o quadro 3.2. Quadro 3.2: Saída com o número aleatório sorteado.

A cada execução resulta um número diferente, como a sequência seguinte, por exemplo, obtida em 12 sorteios consecutivos: 0.90591908; 0.28233856; 0.13031044; 0.85118146; 0.95243551e-1; 0.88690009; 0.67271063; 0.67870354e-1; 0.43417535; 0.34253537; 0.77465078e-1; 0.30546759.

Page 2: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

8

O quadro 3.3 mostra as linhas de comando para sortear um par de números aleatórios. O comando randomize 0.5, na primeira linha, define a raiz inicial, entre 0 e 1, para garantir que o programa forneça sempre o mesmo par de números aleatórios.

Quadro 3.3: Sorteio de um par de números aleatórios.

O quadro 3.4 a seguir mostra a saída do programa contendo o par sorteado de números

aleatórios. Toda a execução resultará sempre no mesmo resultado. Quadro 3.4: Saída mostrando o par de números aleatórios.

Os programas são estruturados numa sequência de linhas de comando. No entanto,

linhas de comando curtas podem ser escritas numa mesma linha separadas por dois pontos (:), desde que a estrutura lógica não seja afetada. É o caso da sequência dos comandos geradores de números aleatórios do quadro 3.3. Se desejar, qualquer linha de comando pode ser desativada inserindo um apóstrofe no início da linha, equivalente ao comando rem. Essa possibilidade é particularmente útil para verificar a real funcionalidade de uma linha de comando.

O programa do quadro 3.5 sorteia um número arbitrário de números aleatórios, definido pelo parâmetro de entrada na que é solicitado ao executar o programa através do comando input (terceira linha). A presença do comando randomize 0.5 faz com que os dois primeiros números sejam os mesmos do programa anterior, cujo resultado é mostrado no quadro 2.2.

Quadro 3.5: Sorteio de um número arbitrário de números aleatórios.

Page 3: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

9

O sorteio do número solicitado de números aleatórios é garantido pelo loop definido pelo marcador [inicio], a linha de comando ifnc < nagoto[inicio] e o contador nc cujo valor inicial é �� = 0.

O quadro 3.6 mostra o resultado do sorteio de cinco números aleatórios; os dois primeiros números são os mesmos do quadro 2.2.

Quadro 3.6: Sorteio de um número arbitrário de números aleatórios.

O programa seguinte, cuja estrutura é mostrada no quadro 3.7, talvez seja um

exemplo padrão para os aprendizes do Método de Monte Carlo. O objetivo é estimar o valor do número � considerando a razão ��/�� = �/4 entre o número de pontos contidos no

interior de um círculo de raio R e o número total de pontos contidos no quadrado de lado 2R, distribuídos uniformemente. Em princípio, a estimativa tende ao valor correto no limite �� → ∞, mas na prática a convergência é muito lenta, servindo apenas para propósitos

didáticos. A convergência lenta é uma das características do Método de Monte Carlo, mais apropriado para aplicações que não requeiram muita precisão.

Quadro 3.7: Estimativa do número � pelo Método de Monte Carlo.

O programa considera o raio unitário e a precisão de 0.0001 entre o valor estimado e

o valor assumindo � = 3.1416. O quadro 3.8 mostra o valor estimado após amostragem de 466 pontos.

Page 4: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

10

Quadro 3.8: Estimativa do número � em teste de 466 pontos.

3.2 Janelas gráficas

Programas com saídas gráficas são mais complexas que as de saída padrão alfanumérica, pois os elementos gráficos exigem um número maior de parâmetros de controle. O quadro 3.9 mostra a estrutura de um programa que abre uma janela gráfica para onde os elementos gráficos (como pontos, linhas, figuras, gráficos de funções, etc.) podem ser direcionados.

Quadro 3.9: Programa demonstrativo para saídas gráficas.

Ao executar o programa, abre-se uma janela (Janela Principal) para saída de informações alfanuméricas. A listagem mostra alguns dos parâmetros importantes para definir uma janela. DisplayWidth e DisplayHeight são nomes reservados para a largura e a altura da tela do monitor, em unidades de pixels, valores que dependem da dimensão e da resolução do aparelho e não podem ser modificados. WindowWidth e WindowHeight são outros nomes reservados que definem a largura e a altura da janela gráfica aberta pelo programa, cujos valores, por razões óbvias, devem ser menores que DisplayWidth e

Page 5: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

11

DisplayHeight. Neste programa, a janela é quadrada de lados correspondentes à metade da altura da tela do monitor. Outro par de nomes reservado é UpperLeftX e UpperLeftY, que definem as coordenadas do canto superior esquerdo da janela a partir do canto superior esquerdo do monitor. Neste caso, ("##$�%$&'(,"##$�%$&'*) = (150,150).

Quadro 3.10: Saída de dados na janela principal.

As variáveis midx e midy definem as coordenadas do centro da janela gráfica, que à primeira vista deveriam ser iguais a 384/2 = 192. A discrepância ocorre devido às molduras (veja figura 3.1), cujas larguras diminuem a área útil da janela gráfica. A largura de cada uma das molduras laterais verticais deve ser (192 − 183) = 9. A parte inferior da moldura horizontal deve ter a mesma largura, 9. A parte superior da moldura horizontal é mais larga, 384− (172 × 2 + 9) = 31. Veja as definições de midx e midy na quinta linha do programa listado no quadro 3.10.

Figura 3.1:

Janela gráfica do tipo

nsb (no scroll bar). O

pequeno círculo preto

com um ponto

vermelho no meio

demarca o centro da

janela.

(1 janela gráfica)

Nas linhas de comando do quadro 3.9, o comando nomainwin está desativada. A função deste comando é não abrir a janela principal, que no caso traz as informações listadas no quadro 3.10. Este quadro de informações é útil durante a fase de programação e nos ajustes finais, mas quase sempre desnecessário após a finalização.

Page 6: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

12

Os comandos do tipo #�3�'“5�&6�78çõ$; ∶ ”; �8�6; direcionam a impressão de informações e dados para a janela principal, em sequência.

A linha de comando 6#$�“?8�$@8A�á&3�8”&6�A�8#ℎ3�;_�;E8; #1 abre a janela gráfica, com as dimensões definidas antes, do tipo nsb (no scroll bars), sem barras de rolagem, com o nome #1. O nome pode ser qualquer conjunto de caracteres alfanuméricos precedido do símbolo #, e deve ser usado como endereço em todos os comandos que afetam esta janela. Por exemplo, o comando #�3�'#1, “'�8#�@6;$[GH3']". É sempre interessante incluir esta linha de comando após a abertura de janelas gráficas. A sua função é permitir o fechamento forçado da janela, encerrando o programa, direcionando para a linha de comando �@6;$#1. O comando #�3�'#1, “�6J�" prepara (abaixa) o pincel de impressão, sendo necessário ao iniciar uma rotina de impressões. Os comandos seguintes definem o tamanho do pincel e a cor usada. A impressão do ponto central vermelho, de coordenadas (73�K,73�L) segue o comando #�3�'#1, “;$';midx;"";73�L.

A sequência de comandos #�3�'#1, "ℎ67$": #�3�'#1, "�3��@$"; 5 posiciona o pincel no centro da janela e desenha um circulo se raio 5. E, para finalizar, o comando wait mantém a janela aberta indefinidamente até o seu fechamento forçado.

A tabela 3.1 relaciona os cinco tipos de janelas gráficas. Tabela 3.1: Relação dos cinco tipos de janelas gráficas.

graphics graphics window janelas gráficas

graphics_fs fs = full screen tela cheia

graphics_nsb nsb = no scroll bars sem barras de rolagem

graphics_fs_nsb fs_nsb = full screen and no scroll bars tela cheia e sem barras de rolagem

graphics_nf_nsb nf_nsb = no sizing frame and scroll bars não dimensionável e sem rolagem Agora vamos inserir, no programa do quadro 3.9, linhas de comando adicionais,

listados quadro 3.11, para adicionar o desenho de uma função paramétrica na janela gráfica (figura 3.1). O resultado é apresentado na figura 3.2. Por que a figura (coração) está invertida?

Quadro 3.11: Linhas de comando adicionais para uma função paramétrica.

A tela do computador foi desenvolvida para entrada de dados alfanuméricos seguindo o padrão da escrita ocidental, da esquerda para a direita e linhas de cima para baixo. Esse padrão é mantido para as telas e janelas gráficas, de modo que a origem (0,0) fica no canto superior esquerdo. Assim, ao desenhar figuras e gráficos, é necessário redefinir a origem das coordenadas, que no nosso exemplo é definido pelo par (73�K,73�L). A função paramétrica é

P K(Q) = � cos(Q)L(Q) = �;$�(Q) + S|cos(Q)| (−� ≤ Q ≤ �).(3.1)

Page 7: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

13

Figura 3.2:

Janela gráfica com o

desenho de uma

função paramétrica.

Invertida?

(2 função

paramétrica)

As coordenadas da tela devem ser transladadas como mostradas na quinta linha do

quadro 3.11. E inverter a coordenada vertical, fazendo KV = 73�K + K: LV = 73�L − L. Feitas todas as redefinições, resulta o desenho na orientação correta, figura 3.3.

Figura 3.3:

Janela gráfica com o

desenho de uma

função paramétrica

na orientação

correta.

(2a função

paramétrica)

Page 8: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

14

Incrementando um pouco mais, podemos pintar a figura, por exemplo, vermelho no interior e azul na parte externa. Não há necessidade de preencher totalmente as cores, vamos apenas usar pontos coloridos lançados aleatoriamente. Para preencher totalmente as cores, basta aumentar a espessura e o número de pontos. As linhas de comando adicionais estão no quadro 3.12, para lançamento total de dez mil pontos.

Quadro 3.12: Linhas de comando para lançar pontos internos e externos em cores diferentes.

O resultado é mostrado na figura 3.4 indicando, na parte superior, o lançamento de 1835 pontos internos (vermelhos) e, portanto, 8165 pontos externos (azuis). Significa que a área interna representa cerca de 18% da área do quadrado.

Figura 3.4:

Função paramétrica

com distribuição

uniforme de pontos e

a contagem dos

pontos internos.

(3 janela gráfica)

Page 9: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

15

É normal que se queira salvar o resultado que aparece na janela gráfica de uma maneira mais eficaz do que usar os recursos de cortar e colar do Windows. O quadro 5.5 traz as linhas de comando que permitem salvar, caso queira, a janela gráfica no formato BMP. A opção é apresentada através da janelinha mostrada na figura 3.5, onde se deve clicar na opção desejada.

Quadro 3.13: Linhas de comando para salvar a janela gráfica com a moldura.

A figura salva usando o procedimento do quadro 3.13 é a janela completa incluindo as

molduras próprias do Windows, lembrando que as molduras verticais e a horizontal inferior tem largura 9 e a horizontal superior, 3 × 9 = 28. Esses valores devem ser considerados como aproximados, e dependem dos tipos de janelas.

Figura 3.5:

Opção para salvar

ou não a figura da

janela gráfica.

Para salvar apenas a área útil da janela, sem as molduras, use o procedimento

mostrado no quadro 3.14. Na linha de comando #1“A$'E7#;��$$�00366344”, os pares (0, 0) e (366, 344) são as coordenadas do canto superior esquerdo e do canto inferior direito, respectivamente, da parte útil da janela gráfica. As coordenadas usadas no quadro 3.13, (−9,−31) e (384,384), são as coordenadas (aproximadas) das extremidades externas da janela.

Quadro 3.14: Linhas de comando para salvar a janela gráfica sem a moldura.

Page 10: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

16

A figura 3.6 traz apenas a parte interna da janela gráfica (figura 3.4), como normalmente desejamos salvar. Note que agora são 1923 pontos internos (1835 no caso anterior), lembrando que essa flutuação é normal no Método de Monte Carlo.

Figura 3.6:

A mesma ilustração

da figura 3.4 salva

sem a moldura da

janela gráfica.

(3a janela gráfica)

A última linha do comando do quadro 3.12, #�3�'#1, “&@H;ℎ”, tem a função de fixar

a figura e impedir que se apague ao ser encoberta por algum outro objeto externo.

Figura 3.7:

Estimativa do número �

usando a relação entre

os pontos internos ao

círculo e ao quadrado

4 estimativa de pi.

Page 11: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

17

Na secção 3.1 foi apresentado um programa (quadro 3.7) para estimar o número � pelo

Método de Monte Carlo. Vamos acrescentar uma janela gráfica para visualizar o processo acompanhando os lançamentos dos pontos na área quadrada e no círculo inscrito, terminando o processo ao atingir a precisão da ordem de �−#3($;'378�6) ≅ 0.0001. O quadro 3.15 mostra as linhas de comando e a janela gráfica ao final do processo na figura 3.7.

Note que dados numéricos, para serem exibidos na janela gráfica, devem ser convertidos em caracteres alfanuméricos (string’s), por exemplo, #3$ = ;'�$(#3).

Quadro 3.15: Programa para ilustrar o lançamento dos pontos na estimativa d o número �.

3.3 Cores

As cores são muito usadas para agregar informações de uma forma prática e intuitiva, de leitura instantânea. Por exemplo, não são necessárias muitas explicações para interpretar as diferentes cores usadas nas linhas de comando dos programas (comentários, comandos, parâmetros, funções, valores numéricos, etc.), tornando mais fácil visualizar as suas estruturas lógicas. As cores são também usadas nas saídas gráficas, podendo ter finalidades estéticas e ou utilitárias.

A figura 3.8 mostra a série de cores básicas com as suas denominações.

Page 12: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

18

.

Figura 3.8:

As cores básicas que

podem ser acessadas

pelos seus nomes.

(5 cores básicas)

O quadro 3.16 mostra as linhas de comando de um programa demonstrativo reduzido

para produzir uma janela gráfica similar à figura 3.8, porém com apenas três cores (vermelho, verde e azul), mostrado na figura 3.9.

Linhas de comando adicionais podem ser facilmente inseridas para obter as outras cores da figura 3.8, fazendo as devidas correções para o dimensionamento correto da janela gráfica.

Quadro 3.16: Programa demonstrativo para uso de cores.

Page 13: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

19

.

Figura 3.9:

Janela gráfica

contendo apenas

três cores.

(5c três cores)

O sistema RGB de cores fornece uma quantidade praticamente ilimitada de cores a

partir de diferentes combinações das três cores primárias, vermelho (red), verde (green) e azul (blue).

Figura 3.10:

Seleção de cores

usando o sistema

RGB.

(6 Cores (RGB))

São misturas das três cores primárias em gradações de 0 a 255. Por exemplo,

(25500) é o vermelho, (02550) o verde, (00255) o azul, (2552550) o amarelo, (000) o preto, (255255255) o branco, (2550255) a violeta, etc.

Page 14: 3. Programação Gráfica - uel.br Programacao... · Para finalizar, todos os programas devem conter, na última linha, o comando end para garantir que sejam encerrados sem nenhuma

20

O quadro 3.17 traz as linhas de comando de um programa demonstrativo reduzido para produzir uma janela gráfica similar à figura 3.9 com as três cores primárias (vermelho, verde e azul). Linhas de comando adicionais podem ser inseridas para obter as outras cores, com as

correções para o redimensionamento da janela gráfica, como a reproduzida na figura (3.10). Quadro 3.17: Programa demonstrativo para uso de cores no sistema RGB.