Curso de Basic
Plotando Gráficos


Você está em: MarMSX >> Cursos >> BASIC   Os gráficos são muito úteis para a visualização de dados e funções, fornecendo uma melhor compreensão e análise dos mesmos.


  O sistema de coordenadas da tela do MSX e de gráficos

  O sistema de coordenadas da tela do MSX tem a origem no canto superior esquerdo. O eixo X (horizontal) cresce da esquerda para a direita e o eixo Y (vertical) cresce do topo da tela para a parte de baixo. Além disso, o tamanho da tela (número de pontos) é limitado. Observe a figura a seguir.



  Para o modos de tela screen 2, temos 256 colunas e 192 linhas. Os modos de tela screen 5 e 8, temos 256 colunas e 212 linhas. Já nas screens 6 e 7, temos 512 colunas e 212 linhas.

  Um gráfico é uma representação visual de um conjunto de dados ou função, no qual difere ligeiramente do sistema de coordenadas de tela do MSX, uma vez que a origem se localiza no canto inferior esquerdo e cresce de baixo para cima. Além disso, o tamanho do gráfico é variável, podendo ser menor ou maior que a quantidade de pontos disponíveis nos modos de tela do MSX.
  A figura a seguir mostra o sistema de coordenadas padrão para um gráfico.



  Para adaptar o formato gráfico padrão para a tela do MSX, iremos necessitar de algumas transformações. A primeira delas é inverter o sentido do eixo Y da tela. A outra é adaptar o tamanho do gráfico ao tamanho da tela do MSX, através de uma transformação de escala.


  Deslocando a origem e adaptando a escala

  O primeiro passo a ser dado é adaptar a origem do eixo de coordenadas X e Y do sistema para a tela do MSX.
  A origem da tela do MSX é no canto superior esquerdo. Além disso, o eixo Y possui orientação invertida, ou seja, cresce de cima para baixo.
  De forma a determinar a origem do eixo X,Y para qualquer posição da tela, será aplicada a seguinte transformação de translação: 
Tx = Ox + X
Ty = Oy - Y
  Onde:   Essas equações de transformação de translação vão mais além: além de inverter o sentido do eixo Y, elas permitem deslocar a origem da tela para qualquer posição.
  Observe o programa em Basic a seguir. 
10 SCREEN 2
20 OX=128 : OY=95 : ' Coordenadas de origem
30 X=0 : Y=0 : ' Coordenadas do mundo real
40 ' Inicia calculo de transformacao
50 TX = OX + X
60 TY = OY - Y
70 ' Plota o ponto na tela
80 PSET (TX,TY),15
90 GOTO 90

  No programa anterior, eu defini o sistema de coordenadas para o centro da tela do MSX (128,95). Quando eu defino X e Y como 0,0, o ponto é plotado no centro da tela.

  Essa transformação sozinha é insuficiente para plotar corretamente o gráfico na tela, isto porque estamos limitado ao tamanho da tela do MSX. Assim, se o espaço ocupado pelo conjunto de dados for menor que o tamanho da tela, estará concentrado a uma parte específica da tela. E quando for maior, parte dele não estará visível.



  Esse problema é facilmente corrigido através do controle da escala do gráfico. A escala irá adaptar o espaço ocupado pelos dados para o tamanho da tela do MSX.
  A escala é modificada a partir da seguinte transformação: 
Tx = X * Sx
Ty = Y * Sy
  Onde Sx é a escala no eixo X, enquanto que Sy é a escala no eixo Y.

  O programa em Basic a seguir irá demonstrar o conceito de escala. Imagine que tenho um conjunto de pontos para um espaço que vai de 0 a 511 em X e de 0 a 383 em Y. Para adaptar a tela screen 2, devemos reduzir aproximadamente à metade os valores das coordenadas.
10 SCREEN 2
20 X=300 : Y= 300 : ' Coordenadas do mundo
30 ' Transformacao em escala
40 TX = X * 0.5
50 TY = Y * 0.5
60 PSET (TX, TY),15
70 GOTO 70

  A coordenada no meu sistema de 300,300 iria plotar o ponto fora da tela do MSX. Entretanto, com a transformação em escala, meu ponto será plotado na coordenada 150,150 da tela do MSX, que faz parte do espaço de tela da screen 2.
  Na próxima seção será mostrado como calcular a escala.

  A transformação anterior não leva em consideração a transformação de translação, vista no inicio dessa seção. Dessa forma, vamos juntar as duas transformações em uma só.

  Juntando as duas transformações, temos: 
Tx = Ox + (X * Sx)
Ty = Oy - (Y * Sy)


  Sofisticando um pouco mais o gráfico

  Vimos na seção anterior como adaptar as coordenadas do gráfico às coordenadas de tela do MSX. Nosso objetivo agora é calcular a escala com base na definição da área do gráfico.
  Muitas linguagens de simulação de dados, como o Matlab/Octave e R, permitem ajustar a área do gráfico com base na altura e largura. Assim, o usuário fornece os valores X,Y mínimos e X,Y máximos, e o sistema ajusta os dados para essa configuração.
  A nossa tarefa é então criar um relacionamento entre o retângulo da tela do MSX e o retângulo do gráfico. Além disso, podemos também redefinir a área útil da tela do MSX, introduzindo margens.



  A adaptação de escala entre os retângulos do MSX e do gráfico é feita da seguinte forma: 
Sx = (MSX_Xf - MSX_Xi) / (Xf - Xi)
Sy = (MSX_Yf - MSX_Yi) / (Yf - Yi)
  Onde:
  Por exemplo, se em meu sistema o eixo X variar de 0 a 511, a escala Sx irá valer 0,4990, ou seja, a tela do MSX é aproximadamente a metade da tela do meu gráfico.
Sx = (255-0) / (511-0) = 255 / 511 = 0,4990

  Para inserir margens na tela do MSX, alteramos as coordenadas dos numeradores das equações. Por exemplo, para uma margem de 10 pixels em todas as direções, temos: 
Sx = (245-10) / (Xf-Xi)
Sy = (181-10) / (Yf-Yi)
  Uma margem de 10 pixels soma o valor 10 às coordenadas iniciais, enquanto que subtrai 10 das coordenadas finais.

  Podemos calcular automaticamente a origem do gráfico? A resposta é sim.
  Quando definimos o relacionamento entre as coordenadas do mundo e da tela do MSX, o valor de Ox e Oy podem ser calculados com base nessa transformação. É só pedir para calcular a coordenada de tela correspondente à coordenada 0,0.
  As equações de transformação apresentadas nas seções anteriores necessitam das coodenadas de origem para calcular as coordenadas da tela.
  De modo a calcular automaticamente a origem, como é feito em maioria dos aplicativos de gráficos, iremos realizar algumas alterações nas equações de transformação. 
Tx = (X-Xi)*Sx
Ty = MSX_Yf - (Y-Yi)*Sx


  Plotando pontos na tela do MSX

  Uma vez conhecidas as transformações que irão ajudar a plotar os pontos no MSX, vamos plotar um ponto.
  Seja o ponto P(4,5) e o seguinte intervalo em X [-1; 10] e Y [-1; 10] do mundo real.
  Assim, temos: 
Xi = -1 e Xf = 10
Yi = -1 e Yf = 10

  Agora já estamos pronto para desenhar a função na tela. O programa a seguir desenha o ponto P. 
5 ' Funcoes de transformacao
10 DEF FN TX(X) = (X-XI)*SX
20 DEF FN TY(Y) = 191-(Y-YI)*SY
25 ' Area do grafico - usuario
30 XI=-1 : XF=10 : YI=-1: YF=10
35 ' Calcula escala
40 SX = (255-0) / (XF-XI)
50 SY = (191-0) / (YF-YI)
55 ' Calcula origem
60 OX = FN TX(0) : OY = FN TY(0)
100 SCREEN 2
105 ' Desenha eixos
110 LINE(OX,0)-(OX,191),15
120 LINE(0,OY)-(255,OY),15
200 ' Desenha ponto
210 XX = FN TX(4)
220 YY = FN TY(5)
230 PSET(XX,YY),10
240 GOTO 240

  O resultado é:

 


  O programa anterior pode ser reescrito de forma a plotar quantos pontos quisermos.
  Além disso, observa-se no exemplo anterior, que um ponto não é muito visível. Podemos substituir a plotagem de ponto por uma cruz.
  Assim, temos: 
10 DEF FN TX(X) = (X-XI)*SX
20 DEF FN TY(Y) = 191-(Y-YI)*SY
25 ' Area do grafico - usuario
30 XI=-1 : XF=10 : YI=-1: YF=10
35 ' Calcula escala
40 SX = (255-0) / (XF-XI)
50 SY = (191-0) / (YF-YI)
55 ' Calcula origem
60 OX = FN TX(0) : OY = FN TY(0)
100 SCREEN 2
105 ' Desenha eixos
110 LINE(OX,0)-(OX,191),15
120 LINE(0,OY)-(255,OY),15
130 GOSUB 300 : ' Carrega pontos em P
200 ' 
201 ' Desenha pontos
202 '
210 FOR I=1 TO NP
220 XX=FN TX(P(I,1)) : YY=FN TY(P(I,2))
230 LINE(XX-3,YY)-(XX+3,YY),10
240 LINE(XX,YY-3)-(XX,YY+3),10
250 NEXT I
260 GOTO 260
300 '
301 ' Define 4 pontos
302 '
310 NP=4
320 DIM P(NP,2)
330 FOR I=1 TO NP
340 READ P(I,1),P(I,2)
350 NEXT I
360 RETURN
370 DATA 4,5
380 DATA 1,1
390 DATA 7,1
400 DATA 8,9
  O resultado é:

 



  Plotando funções na tela do MSX

  Serão utilizadas funções trigonométricas para ilustrar como plotar funções no MSX.
  O intervalo de X para essas funções é [0; 2*PI]. O intervalo de Y para essas funções é [-1; 1].
  Nos exemplos anteriores, definimos uma margem para os eixos nas coordenadas do mundo real quando inserimos os limites iniciais em -1. Iremos fazer o mesmo para as funções trigonométricas a seguir.
  Assim, temos: 
Xi = -1 e Xf = 2*PI
Yi = -1 e Yf = 1

  O programa a seguir irá plotar a função seno. 
10 DEF FN TX(X) = (X-XI)*SX
20 DEF FN TY(Y) = 191-(Y-YI)*SY
24 DEF FN E(X) = SIN(X)
25 ' Area do grafico - usuario
30 XI=-1 : XF=2*3.14159 : YI=-1: YF=1
35 ' Calcula escala
40 SX = (255-0) / (XF-XI)
50 SY = (191-0) / (YF-YI)
55 ' Calcula origem
60 OX = FN TX(0) : OY = FN TY(0)
100 SCREEN 2
105 ' Desenha eixos
110 LINE(OX,0)-(OX,191),15
120 LINE(0,OY)-(255,OY),15
200 '
201 ' Desenha funcao
202 '
210 YY = FN TY(FN E(0))
220 PRESET(OX,YY)
230 FOR X=0 TO 2*3.14159 STEP .1
240 XX = FN TX(X)
250 YY = FN TY(FN E(X))
260 LINE -(XX,YY),10
270 NEXT X
280 X=2*3.14159
290 XX=FN TX(X) : YY=FN TY(FN E(X))
300 LINE -(XX,YY),10
310 GOTO 310
  Obs: o comando LINE -(XX,YY) traça uma linha do ponto atual até a coordenada XX,YY. O primeiro ponto é definido nas linhas 210 e 220 e o último nas linhas 280-300, garantindo que este seja plotado.

  O resultado é:

 


  No caso de funções, deve-se ligar o ponto atual ao ponto anterior através de uma linha, uma vez que a plotagem dos pontos somente não dá continuidade ao desenho.
  A figura a seguir ilustra a plotagem de pontos em vez de linhas.

 


  O STEP da linha 230 define a suavização da curva. Quanto maior o intervalo, menos suave a curva. Veja o exemplo com STEP 0.7:

 


  Agora vamos plotar o cosseno. Para isso, substituir a linha 30 por: 
30 DEF FN E(X) = COS(X)
  O resultado é:

 



  Trabalhando com dados reais

  Vamos utilizar a screen 7 para plotar os dados da medição feita no comprimento e largura das pétalas de três tipos de flores íris [1]. 
10 DEF FN TX(X) = (X-XI)*SX
20 DEF FN TY(Y) = 211-(Y-YI)*SY
25 ' Area do grafico - usuario
30 XI=0 : XF=7 : YI=0: YF=3
35 ' Calcula escala
40 SX = (511-0) / (XF-XI)
50 SY = (211-0) / (YF-YI)
55 ' Calcula origem
60 OX = FN TX(0) : OY = FN TY(0)
100 SCREEN 7
105 ' Desenha eixos
110 LINE(OX,0)-(OX,211),15
120 LINE(0,OY)-(511,OY),15
130 GOSUB 300 : ' Carrega pontos em P
200 ' 
201 ' Desenha pontos
202 '
210 FOR I=1 TO NP
215 IF I<51 THEN C=8 ELSE IF I<101 THEN C=2 ELSE C=5
220 XX=FN TX(P(I,1)) : YY=FN TY(P(I,2))
230 LINE(XX-3,YY)-(XX+3,YY),C
240 LINE(XX,YY-3)-(XX,YY+3),C
250 NEXT I
260 GOTO 260
300 '
301 ' Define 150 pontos
302 '
310 NP=150
320 DIM P(NP,2)
330 FOR I=1 TO NP
340 READ P(I,1),P(I,2)
350 NEXT I
360 RETURN
400 DATA 1.4,0.2,1.4,0.2,1.3,0.2,1.5,0.2,1.4,0.2,1.7,0.4
410 DATA 1.4,0.3,1.5,0.2,1.4,0.2,1.5,0.1,1.5,0.2,1.6,0.2
430 DATA 1.4,0.1,1.1,0.1,1.2,0.2,1.5,0.4,1.3,0.4,1.4,0.3
440 DATA 1.7,0.3,1.5,0.3,1.7,0.2,1.5,0.4,1.0,0.2,1.7,0.5
450 DATA 1.9,0.2,1.6,0.2,1.6,0.4,1.5,0.2,1.4,0.2,1.6,0.2
460 DATA 1.6,0.2,1.5,0.4,1.5,0.1,1.4,0.2,1.5,0.2,1.2,0.2
470 DATA 1.3,0.2,1.4,0.1,1.3,0.2,1.5,0.2,1.3,0.3,1.3,0.3
480 DATA 1.3,0.2,1.6,0.6,1.9,0.4,1.4,0.3,1.6,0.2,1.4,0.2
490 DATA 1.5,0.2,1.4,0.2,4.7,1.4,4.5,1.5,4.9,1.5,4.0,1.3
500 DATA 4.6,1.5,4.5,1.3,4.7,1.6,3.3,1.0,4.6,1.3,3.9,1.4
510 DATA 3.5,1.0,4.2,1.5,4.0,1.0,4.7,1.4,3.6,1.3,4.4,1.4
520 DATA 4.5,1.5,4.1,1.0,4.5,1.5,3.9,1.1,4.8,1.8,4.0,1.3
530 DATA 4.9,1.5,4.7,1.2,4.3,1.3,4.4,1.4,4.8,1.4,5.0,1.7
540 DATA 4.5,1.5,3.5,1.0,3.8,1.1,3.7,1.0,3.9,1.2,5.1,1.6
550 DATA 4.5,1.5,4.5,1.6,4.7,1.5,4.4,1.3,4.1,1.3,4.0,1.3
560 DATA 4.4,1.2,4.6,1.4,4.0,1.2,3.3,1.0,4.2,1.3,4.2,1.2
570 DATA 4.2,1.3,4.3,1.3,3.0,1.1,4.1,1.3,6.0,2.5,5.1,1.9
580 DATA 5.9,2.1,5.6,1.8,5.8,2.2,6.6,2.1,4.5,1.7,6.3,1.8
590 DATA 5.8,1.8,6.1,2.5,5.1,2.0,5.3,1.9,5.5,2.1,5.0,2.0
600 DATA 5.1,2.4,5.3,2.3,5.5,1.8,6.7,2.2,6.9,2.3,5.0,1.5
610 DATA 5.7,2.3,4.9,2.0,6.7,2.0,4.9,1.8,5.7,2.1,6.0,1.8
620 DATA 4.8,1.8,4.9,1.8,5.6,2.1,5.8,1.6,6.1,1.9,6.4,2.0
630 DATA 5.6,2.2,5.1,1.5,5.6,1.4,6.1,2.3,5.6,2.4,5.5,1.8
640 DATA 4.8,1.8,5.4,2.1,5.6,2.4,5.1,2.3,5.1,1.9,5.9,2.3
650 DATA 5.7,2.5,5.2,2.3,5.0,1.9,5.2,2.0,5.4,2.3,5.1,1.8
  [1] Fonte dos dados: Repositório da UCI em http://archive.ics.uci.edu/ml/index.php

  Resultado:

 

  Os pontos em vermelho são flores íris do tipo setosa, verde versicolor e azul virgínica.


  Outros tipos de gráficos

  Na seção MSX Basic, há um programa que desenha três tipos de gráficos: barra, linear e 3D.

 



<< Anterior Basic Próxima >>