CES-10 INTRODUÇÃO À COMPUTAÇÃO Aulas Práticas – 2013 Capítulo VI Desenhos e Animação

CES-10 INTRODUÇÃO CES-10 INTRODUÇÃO À COMPUTAÇÃOÀ COMPUTAÇÃO

Aulas Práticas – 2013Aulas Práticas – 2013

Capítulo VI Capítulo VI

Desenhos e AnimaçãoDesenhos e Animação

Arquivos fornecidos para a aulaArquivos fornecidos para a aula::

CES10 Prat 6 2013.ppt: CES10 Prat 6 2013.ppt: Slides da aulaSlides da aula

lab_6_ces10_2013.doc:lab_6_ces10_2013.doc: proposta do Lab 6 proposta do Lab 6

Graficos_DevCpp.pdf: Graficos_DevCpp.pdf: instruções do Prof. Paulo instruções do Prof. Paulo André para utilização do modo gráfico (Aba André para utilização do modo gráfico (Aba ArtigosArtigos da página do prof)da página do prof)

Graficos_DevCpp.zip:Graficos_DevCpp.zip: arquivos com código de arquivos com código de rotinas gráficas para incluir no rotinas gráficas para incluir no Dev Dev (Aba (Aba CódigosCódigos da página do prof)da página do prof)

Instrucoes_CONIO2.pdf:Instrucoes_CONIO2.pdf: instruções do Prof. instruções do Prof. Paulo André para controle do cursor no modo texto Paulo André para controle do cursor no modo texto do do Dev Dev (Aba (Aba ArtigosArtigos da página do prof) da página do prof)

conio2.zip: conio2.zip: arquivos para a biblioteca arquivos para a biblioteca conio2conio2 a ser a ser utilizada no utilizada no Dev Dev (Aba (Aba CódigosCódigos da página do prof) da página do prof)

Programa 6.1: Posicionamento do cursor no Programa 6.1: Posicionamento do cursor no vídeo-textovídeo-texto

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int col, lin; char c;int col, lin; char c;

printf ("Maximize a tela e digite algo: "); printf ("Maximize a tela e digite algo: ");

getche (); getche ();

clrscr ();clrscr ();

printf ("Posicionar cursor? (s/n): "); printf ("Posicionar cursor? (s/n): ");

c = getche();c = getche();

while (c == 's' || c == 'S') {while (c == 's' || c == 'S') {

printf ("\rDigite a coluna e a linha: ");printf ("\rDigite a coluna e a linha: ");

scanf ("%d%d", &col, &lin);scanf ("%d%d", &col, &lin);

gotoxy (col, lin); getche ();gotoxy (col, lin); getche ();

gotoxy (1, 1);gotoxy (1, 1);

printf (" ");printf (" ");

printf ("\rPosicionar cursor? (s/n): "); c = getche();printf ("\rPosicionar cursor? (s/n): "); c = getche();

}}

}}

Copiar, salvar e executar no Borland

clrscr (conio.h): apaga a tela\r: reescreve a 1ª linha da telaPosiciona o cursor nas coordenadas desejadas – digitar um caractere

Posiciona o cursor na coluna e linha 1Apaga a 1ª linha\r: reescreve a 1ª linha da tela

Para executar no Dev, devem ser copiados os arquivos referentes ao conio2.h

Programa 6.2: Desenho de segmentos de Programa 6.2: Desenho de segmentos de retas com ‘*’retas com ‘*’

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int a, b, i;int a, b, i;

printf ("Maximize a tela e digite algo!");printf ("Maximize a tela e digite algo!");

getche ();getche ();

clrscr ();clrscr ();

for (a=1, b=1, i=1; i<=10; a+=8, b+=2, i++) {for (a=1, b=1, i=1; i<=10; a+=8, b+=2, i++) {

gotoxy (a, b); printf ("********");gotoxy (a, b); printf ("********");

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Copiar, salvar e executar no Borland

Na tela

Sempre posiciona o cursor na posição [a, b]

Inicialmente [a, b] = [1, 1]

A cada repetição a+=8 e b+=2

Programa 6.3: Determinação dos limites do Programa 6.3: Determinação dos limites do gotoxygotoxy

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int i;int i;

printf ("Maximize a tela e digite algo!");printf ("Maximize a tela e digite algo!");

getche ();getche ();

clrscr ();clrscr ();

for (i=1; i<=80; i++) {for (i=1; i<=80; i++) {

gotoxy (i, i); printf ("%d", i%10);gotoxy (i, i); printf ("%d", i%10);

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Copiar, salvar e executar no Borland

O programa vai tentar escrever o valor de i%10 na diagonal de uma tela 80x80

Ver resultado a seguir

Limites:

Coluna 80Linha 44

Programa 6.4: Passeio do ‘*’ pelo vídeo-textoPrograma 6.4: Passeio do ‘*’ pelo vídeo-texto

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int i, j, demora = 100000000;int i, j, demora = 100000000;

printf ("Maximize a tela e digite algo: "); printf ("Maximize a tela e digite algo: ");

getche (); clrscr ();getche (); clrscr ();

for (i = 10; i <= 60; i++) {for (i = 10; i <= 60; i++) {

gotoxy (i, 5); printf (" *");gotoxy (i, 5); printf (" *");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

for (i = 6; i <= 40; i++) {for (i = 6; i <= 40; i++) {

gotoxy (61, i-1); printf (" ");gotoxy (61, i-1); printf (" ");

gotoxy (61, i); printf ("*");gotoxy (61, i); printf ("*");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Copiar, salvar e executar no Borland

Programa 6.4: Passeio do ‘*’ pelo vídeo-textoPrograma 6.4: Passeio do ‘*’ pelo vídeo-texto

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int i, j, demora = 100000000;int i, j, demora = 100000000;

printf ("Maximize a tela e digite algo: "); printf ("Maximize a tela e digite algo: ");

getche (); clrscr ();getche (); clrscr ();

for (i = 10; i <= 60; i++) {for (i = 10; i <= 60; i++) {

gotoxy (i, 5); printf (" *");gotoxy (i, 5); printf (" *");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

for (i = 6; i <= 40; i++) {for (i = 6; i <= 40; i++) {

gotoxy (61, i-1); printf (" ");gotoxy (61, i-1); printf (" ");

gotoxy (61, i); printf ("*");gotoxy (61, i); printf ("*");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Para i = 10, na linha 5:

Escreve ‘ ’ na coluna 10 e ‘*’ na coluna 11

Para i = 11, na linha 5:

Escreve ‘ ’ na coluna 11, apagando ‘*’

Escreve ‘*’ na coluna 12

Dá a impressão de movimento do ‘*’ uma posição p/direita

Para i = 60, ‘*’ vai para a coluna 61

Programa 6.4: Passeio do ‘*’ pelo vídeo-textoPrograma 6.4: Passeio do ‘*’ pelo vídeo-texto

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int i, j, demora = 100000000;int i, j, demora = 100000000;

printf ("Maximize a tela e digite algo: "); printf ("Maximize a tela e digite algo: ");

getche (); clrscr ();getche (); clrscr ();

for (i = 10; i <= 60; i++) {for (i = 10; i <= 60; i++) {

gotoxy (i, 5); printf (" *");gotoxy (i, 5); printf (" *");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

for (i = 6; i <= 40; i++) {for (i = 6; i <= 40; i++) {

gotoxy (61, i-1); printf (" ");gotoxy (61, i-1); printf (" ");

gotoxy (61, i); printf ("*");gotoxy (61, i); printf ("*");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Faz ‘*’ permanecer numa posição durante um t perceptível

O valor 100.000.000 para ‘demora’ é experimental

Esse valor pode variar com o computador

Programa 6.4: Passeio do ‘*’ pelo vídeo-textoPrograma 6.4: Passeio do ‘*’ pelo vídeo-texto

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int i, j, demora = 100000000;int i, j, demora = 100000000;

printf ("Maximize a tela e digite algo: "); printf ("Maximize a tela e digite algo: ");

getche (); clrscr ();getche (); clrscr ();

for (i = 10; i <= 60; i++) {for (i = 10; i <= 60; i++) {

gotoxy (i, 5); printf (" *");gotoxy (i, 5); printf (" *");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

for (i = 6; i <= 40; i++) {for (i = 6; i <= 40; i++) {

gotoxy (61, i-1); printf (" ");gotoxy (61, i-1); printf (" ");

gotoxy (61, i); printf ("*");gotoxy (61, i); printf ("*");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Para i = 6, na coluna 61:

Escreve ‘ ’ na linha 5, apagando ‘*’

Escreve ‘*’ na linha 6

Dá a impressão de movimento do ‘*’ uma posição p/baixo

Para i = 40, ‘*’ vai para a linha 40

Programa 6.4: Passeio do ‘*’ pelo vídeo-textoPrograma 6.4: Passeio do ‘*’ pelo vídeo-texto

#include <stdio.h>#include <stdio.h>

#include <conio.h>#include <conio.h>

void main () {void main () {

int i, j, demora = 100000000;int i, j, demora = 100000000;

printf ("Maximize a tela e digite algo: "); printf ("Maximize a tela e digite algo: ");

getche (); clrscr ();getche (); clrscr ();

for (i = 10; i <= 60; i++) {for (i = 10; i <= 60; i++) {

gotoxy (i, 5); printf (" *");gotoxy (i, 5); printf (" *");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

for (i = 6; i <= 40; i++) {for (i = 6; i <= 40; i++) {

gotoxy (61, i-1); printf (" ");gotoxy (61, i-1); printf (" ");

gotoxy (61, i); printf ("*");gotoxy (61, i); printf ("*");

for (j = 1; j <= demora; j++);for (j = 1; j <= demora; j++);

}}

printf ("\n\nDigite algo para encerrar: ");printf ("\n\nDigite algo para encerrar: ");

getch ();getch ();

}}

Também faz ‘*’ permanecer numa posição durante um t perceptível

Rotinas gráficas:Rotinas gráficas:

Rotinas gráficasRotinas gráficas são necessárias para vários são necessárias para vários programas profissionaisprogramas profissionais

A A Linguagem CLinguagem C padrão não define rotinas padrão não define rotinas gráficasgráficas

Foram criados independentemente vários Foram criados independentemente vários conjuntos de rotinas gráficas, tais como o conjuntos de rotinas gráficas, tais como o Microsoft C/C++Microsoft C/C++ para DOS e o para DOS e o Borland Borland Graphics InterfaceGraphics Interface ( (BGIBGI))

Nestas aulas será utilizada a Nestas aulas será utilizada a BGImBGIm, que é uma , que é uma versão da versão da BGI BGI para o ambiente para o ambiente Dev C++Dev C++

Instalação da Biblioteca BGI no ambiente Dev Instalação da Biblioteca BGI no ambiente Dev C++:C++:

Arquivos necessários Arquivos necessários (compactados em (compactados em Graficos_DevCpp.zipGraficos_DevCpp.zip)): :

graphics.h: graphics.h: copiar em copiar em C:\Dev-Cpp\include C:\Dev-Cpp\include libbgi.a: libbgi.a: copiar em copiar em C:\Dev-Cpp\libC:\Dev-Cpp\lib

Uso de projetos:Uso de projetos:

Para trabalhar em Para trabalhar em modo gráficomodo gráfico será será necessário utilizar o conceito de necessário utilizar o conceito de projeto projeto

ProjetoProjeto é um é um containercontainer que armazena todos que armazena todos os elementos (os elementos (arquivosarquivos) que compõem um ) que compõem um programaprograma

Criando um novo projeto no ambiente Dev-C++:Criando um novo projeto no ambiente Dev-C++:

Clicar no menu Clicar no menu "File""File" e selecionar e selecionar "New""New", , "Project... "Project... ""

Escolher Escolher "Empty Project""Empty Project" e certificar-se de que a e certificar-se de que a opção opção "C++ project""C++ project" está selecionada está selecionada

Escolher um Escolher um nomenome para o projeto para o projeto Pode-se dar qualquer nome válido para um arquivoPode-se dar qualquer nome válido para um arquivo O nome do projeto será o nome do executável a ser O nome do projeto será o nome do executável a ser

geradogerado

Após escolher o nome, clicar Após escolher o nome, clicar "OK ""OK "

O O Dev-C++Dev-C++ irá perguntar irá perguntar onde salvaronde salvar o projeto: o projeto: Escolher um Escolher um diretório apropriadodiretório apropriado e salvar o e salvar o

projetoprojeto

Criando ou adicionando arquivos ao projeto:Criando ou adicionando arquivos ao projeto:

Duas formas:Duas formas:

Clicar no menu Clicar no menu "File""File" e selecionar e selecionar "New "New Source File"Source File" ou ou

Clicar no menu Clicar no menu "Project""Project" e selecionar e selecionar "New "New File"File"

Então é só Então é só editareditar o arquivo com o programa e o arquivo com o programa e salvarsalvar

Configuração do uso da biblioteca gráfica no Configuração do uso da biblioteca gráfica no projeto:projeto:

Criado o projeto, é preciso mandar o Criado o projeto, é preciso mandar o Dev-C++Dev-C++ utilizar a biblioteca utilizar a biblioteca BGImBGIm (que implementa a (que implementa a BGIBGI para o Dev-C++) para o Dev-C++)

Isto é feito através da janela Isto é feito através da janela "Project "Project Options"Options"

A seguir, um conjunto de A seguir, um conjunto de passospassos para realizar para realizar essa tarefaessa tarefa

Passos para a configuração do uso da BGIm:Passos para a configuração do uso da BGIm:

Clicar no menu Clicar no menu "Project""Project" e escolher e escolher "Project "Project Options"Options"

Clicar na tab Clicar na tab "Geral""Geral" e selecione e selecione "Win32 GUI""Win32 GUI"

Clicar na tab Clicar na tab "Parameters""Parameters"

No campo No campo "Linker""Linker", digite o seguinte texto:, digite o seguinte texto:

-lbgi-lbgi

-lgdi32-lgdi32

-lcomdlg32-lcomdlg32

-luuid-luuid

-loleaut32-loleaut32

-lole32-lole32

Clicar OK

Programa 6.5: Desenho simples no vídeo-Programa 6.5: Desenho simples no vídeo-gráficográfico

#include <stdio.h>#include <stdio.h>

#include <graphics.h>#include <graphics.h>

int main () {int main () {

int i, j, left, top, bottom, right;int i, j, left, top, bottom, right;

initwindow (700, 500, "Primeiro Programa initwindow (700, 500, "Primeiro Programa Grafico");Grafico");

getch ();getch ();

left = 10; right = 600; top = 10; bottom = 200;left = 10; right = 600; top = 10; bottom = 200;

for (i = top; i <= bottom; i++)for (i = top; i <= bottom; i++)

for (j = left; j <= right; j++)for (j = left; j <= right; j++)

putpixel (j, i, MAGENTA); putpixel (j, i, MAGENTA);

getch ();getch ();

closegraph ( );closegraph ( );

}}

- Criar projeto- Adicionar este arquivo ao projeto- Configurar o projeto para o uso da BGI- Salvar e executar

Programa 6.5: Desenho simples no vídeo-Programa 6.5: Desenho simples no vídeo-gráficográfico

#include <stdio.h>#include <stdio.h>

#include <graphics.h>#include <graphics.h>

int main () {int main () {

int i, j, left, top, bottom, right;int i, j, left, top, bottom, right;

initwindow (700, 500, "Primeiro Programa initwindow (700, 500, "Primeiro Programa Grafico");Grafico");

getch ();getch ();

left = 10; right = 600; top = 10; bottom = 200;left = 10; right = 600; top = 10; bottom = 200;

for (i = top; i <= bottom; i++)for (i = top; i <= bottom; i++)

for (j = left; j <= right; j++)for (j = left; j <= right; j++)

putpixel (j, i, MAGENTA); putpixel (j, i, MAGENTA);

getch ();getch ();

closegraph ( );closegraph ( );

}}

Colore o pixel [j, i] com a cor MAGENTA

Abre uma janela com título, de 700 colunas e 500 linhas

Lista de cores disponíveis na BGI:Lista de cores disponíveis na BGI:

Programa 6.6: Desenho de várias figurasPrograma 6.6: Desenho de várias figuras

#include <stdio.h>#include <stdio.h>

#include <graphics.h>#include <graphics.h>

int main () {int main () {

int i, j, left, top, bottom, right;int i, j, left, top, bottom, right;

/* Abrir janela grafica *//* Abrir janela grafica */

initwindow (700, 500, "Varias Figuras");initwindow (700, 500, "Varias Figuras");

/* Colorir uma area quadrada de pixels *//* Colorir uma area quadrada de pixels */

getch ();getch ();

left = 160; right = 400; top = 80; bottom = 320;left = 160; right = 400; top = 80; bottom = 320;

for (i = top; i <= bottom; i++)for (i = top; i <= bottom; i++)

for (j = left; j <= right; j++) for (j = left; j <= right; j++)

putpixel (j, i, RED);putpixel (j, i, RED);

/* Desenhar as bordas de um quadrado *//* Desenhar as bordas de um quadrado */

getch (); getch ();

setcolor (YELLOW);setcolor (YELLOW);

rectangle (left, top, right, bottom);rectangle (left, top, right, bottom);

/* Desenhar as bordas de um circulo *//* Desenhar as bordas de um circulo */

getch (); getch ();

setcolor (LIGHTBLUE);setcolor (LIGHTBLUE);

circle (280, 200, 120);circle (280, 200, 120);

/* Desenhar um segmento de reta *//* Desenhar um segmento de reta */

getch (); getch ();

setcolor (WHITE);setcolor (WHITE);

line (40, 480, 640, 80);line (40, 480, 640, 80);

/* Preencher um retangulo com textura e cor *//* Preencher um retangulo com textura e cor */

getch ();getch ();

left = 80; right = 560; top = 400; bottom = 420;left = 80; right = 560; top = 400; bottom = 420;

setfillstyle(11, LIGHTBLUE);setfillstyle(11, LIGHTBLUE);

bar (left, top, right, bottom);bar (left, top, right, bottom);

/* Escrever um texto *//* Escrever um texto */

getch (); getch ();

setbkcolor(BROWN);setbkcolor(BROWN);

outtextxy(50, 250, "Teste"); outtextxy(50, 250, "Teste");

/* Fechar janela grafica *//* Fechar janela grafica */

getch ();getch ();

closegraph ( );closegraph ( );

}}

Mais detalhes sobre rotinas gráficas:

Manual do Prof. Paulo André Castro

Sites da Internet