RESOLUÇÃO - (032 99116 - 4945) RELATÓRIO DE AULA PRÁTICA COMPUTAÇÃO GRÁFICA E PROCESSAMENTO DE IMAGENS

Prévia do material em texto

Roteiro 
Aula Prática 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
COMPUTAÇÃO GRÁFICA E PROCESSAMENTO DE 
IMAGENS 
(032 99116 - 4945) 
 
Precisando da resolução correta, nas Normas ABNT e feita passo a 
passo deste trabalho? 
Teremos o prazer em te ajudar, nas provas, relatórios de estágio, TCC 
e demais atividades da sua faculdade!!! 
 
Garantia de conceito excelente, temos a pronta entrega resolução 
padrão feita passo a passo, bem explicado, ou se preferir fazemos pra 
você de forma exclusiva sob encomenda. 
COMPRE ATRAVÉS DO WHATS (032 99116 - 4945) 
ROTEIRO DE AULA PRÁTICA 
 
NOME DA DISCIPLINA: COMPUTAÇÃO GRÁFICA E PROCESSAMENTO DE IMAGENS 
 
 
Unidade: 1 - INTRODUÇÃO À COMPUTAÇÃO GRÁFICA 
Seção: 3 - REPRESENTAÇÕES DA IMAGEM 
 
 
OBJETIVOS 
Definição dos objetivos da aula prática: 
Os objetivos desta aula prática são: 
1. Aplicar os conhecimentos da unidade no desenvolvimento de um primeiro programa 
de criação e manipulação de imagem vetorial. 
2. Aplicar os conhecimentos da unidade no desenvolvimento de um primeiro programa 
de criação e manipulação de imagem matricial. 
3. Implementar a conversão de imagens vetoriais com retas e círculos para imagem 
bitmap. 
 
INFRAESTRUTURA 
Instalações – Materiais de consumo – Equipamentos: 
LABORATÓRIO DE INFORMÁTICA 
EQUIPAMENTOS: 
• Desktop Engenharia Positivo Master D3400 
~ 1 por aluno ou dupla 
 
 
 
 
SOLUÇÃO DIGITAL 
• PILLOW 5.2+ (Biblioteca) 
 
Pillow 5.2+ - é uma biblioteca de processamento de imagens para Python, que permite a abertura, 
manipulação e salvamento de imagens em vários formatos. 
• PYCAIRO 1.17+ (Biblioteca) 
 
Pycairo 1.17+ - é uma biblioteca de gráficos vetoriais 2D para Python, que permite a criação de 
gráficos personalizados de alta qualidade. 
 
 
2 
• IDLE(PYTHON) (Software) 
 
IDLE(Python): É um ambiente de desenvolvimento integrado (IDE) para a linguagem de 
programação Python. Ele é usado principalmente para desenvolvimento de aplicativos em Python 
e inclui recursos como realce de sintaxe, depuração, controle de versão e muito mais. 
 
 
 
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI) 
Não se aplica. 
 
 
PROCEDIMENTO/ATIVIDADE nº 1 (Físico) 
 
 
 
ATIVIDADE PROPOSTA: 
 
Criação de imagem vetorial com retas e círculos e transformação em imagem matricial. 
 
PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE: 
 
Para a execução desta atividade, você deverá criar e executar um primeiro programa em 
Python. O primeiro programa serve apenas para conhecer o ambiente de desenvolvimento, 
pois apenas imprime textos na tela. 
 
Em seguida você deverá implementar três passos: 
1) criar uma imagem vetorial com dois segmentos de reta e um círculo, 
2) desenhar um círculo em formato matricial 
3) desenhar segmentos de reta em formato matricial. Esses três passos deverão ser 
implementados nos procedimentos passo1(), passo2() e passo3(), respectivamente, junto com 
funções auxiliares sugeridas ao longo da atividade. 
 
Crie e execute seu primeiro programa em Python 
Para criar seu primeiro programa a partir de um template, faça: 
1. Abra o IDLE (Python Shell). 
2. Vá em File->Open e abra o arquivo cgpi1tmp.py. 
3. Altere o cabeçalho do arquivo, preenchendo devidamente seu nome e número de 
matrícula (colocar todos os nomes e números de matrícula se o trabalho for realizado 
em grupo). 
4. Salve o arquivo com o nome cgpi1.py. Siga o padrão de nomenclatura! O nome do arquivo em 
Python é o nome do módulo e não deve conter acentos, espaços ou 
caracteres especiais. 
 
3 
5. Execute o programa clicando em Run->Run Module e veja o que é impresso na tela 
do Python Shell. 
6. No shell, digite ‘import cgpi1.py’ e e veja que o resultado deve ser o mesmo. 
A indentação é essencial na linguagem Python, pois é a indentação que define os escopos. 
Quando se faz um ‘import cgpi1.py’ o módulo cgpi1 (definido no arquivo cgpi1.py) é carregado 
e todo o código sem indentação (a partir da linha print('Início da Prática')) é executado como 
um script. 
Crie uma imagem vetorial 
Para criar uma imagem vetorial você deverá importar módulos no início do arquivo, criar a 
função criaImagemVetorial() e preencher o procedimento passo1(). Faça: 
1. Importe o cairo, que será utilizado em todos os passos a seguir. 
2. Crie a função criaImagemVetorial() que: 
a. inicializa a variável v como uma imagem vetorial do tipo SVG 
(cairo.SVGSurface) a ser escrita no arquivo cgpi1.svg; 
b. adicione a v um segmento de reta preto, partindo da coordenada (0.2,0.3) 
até a coordenada (0.8,0.7); 
c. adiciona a v um segmento de reta cinza escuro, partindo da coordenada 
(0.8,0.3) até a coordenada (0.2,0.7); 
d. adicione a v um círculo cinza claro, com centro na coordenada (0.5,0.5) e raio 
0.3; 
e. salva a imagem cgpi1.svg, chamando pela última vez context.stroke(). 
f. retorna v. 
3. Preencha o procedimento passo1() que: 
a. chama a função criaImagemVetorial(); 
b. salva a imagem criada em formato PNG no arquivo cgpi1.png. 
4. Abra o arquivo cgpi1.svg em um editor de texto. Trata-se de um arquivo XML 
descritor de imagem. 
5. Visualize a imagem cgpi1.svg em um browser. O browser desenha a imagem descrita 
no arquivo SVG e exibe. 
6. Visualize a imagem cgpi1.png em um visualizador de imagens qualquer. A imagem 
PNG é criada com um fundo transparente, mas alguns visualizadores de imagens irão 
colocar um fundo branco. 
A imagem resultante deverá ser como a da Figura 1. 
 
 
 
Figura 1 – Resultado esperado para o Passo 1. 
 
 
 
4 
 
Fonte: o Autor. 
 
 
Note na Figura 1 que o segmento de reta cinza escuro passa por cima do segmento de reta 
preto, portanto no ponto de cruzamento a cor é cinza escuro. Note também que o círculo cinza 
claro passa por cima dos dois segmentos de reta e, por isso, os pontos de cruzamento são na 
cor cinza claro. Isto se deve à ordem em que os elementos são adicionados à imagem. 
Desenhe um círculo em formato matricial 
Para desenhar um círculo em formato matricial, você deverá importar módulos no início do 
arquivo, criar uma nova função e preencher o procedimento passo2(). 
Faça: 
1. Importe o numpy. 
2. No procedimento passo2(), crie a variável f como uma imagem matricial 
(NumPyarray) de 201x201 pixels em níveis de cinza, mas com todos os valores em 
branco. 
3. Implemente a função desenhaCirculo(f,c,r,g), que desenha sobre a imagem em níveis 
de cinza f, passada como parâmetro, um círculo de nível de cinza g, com centro na 
coordenada c e raio r, onde f é um NumPy array, c é uma coordenada (xc,yc), xc e yc 
inteiros, e r é o raio em pixels, um número inteiro. Trata-se da implementação do 
algoritmo de desenho de círculo apresentado nesta seção. 
4. Novamente no procedimento passo2(), desenhe um círculo cinza claro (g=230) de 
centro (100,100) e raio 60 pixels sobre a imagem f, chamando a função 
desenhaCirculo(f,(100,100),60,230) . 
5. Salve a imagem em formato PNG e abra em um visualizador de imagens. 
Você deverá ver uma imagem como a da Figura 2. 
 
Figura 2 – Resultado esperado para o Passo 2. 
 
 
 
 
 
5 
 
Fonte: o Autor. 
 
 
Desenhe retas e converta a imagem vetorial para matricial 
Para executar esta atividade, você deverá criar uma nova função e preencher o procedimento 
passo3(). Considere v a imagem vetorial criada pela função criaImagemVetorial no Passo 1. 
Faça: 
1. Implemente a função desenhaReta(f,p,q,g), que desenha sobre a imagem f um 
segmento de reta de nível de cinza g que se inicia no ponto p e termina no ponto q, 
ambos de coordenadas inteiras. Trata-se da implementação do algoritmo de desenho 
de reta apresentado nesta seção. 
2. Crie a variável f como uma imagem matricial (NumPyarray)de201x201pixels em 
níveis de cinza. 
3. Desenhe sobre f o primeiro segmento de reta de v (preto). Para converter as 
coordenadas reais de v para as coordenadas inteiras de f, simplesmente multiplique a 
coordenada real pela largura (coordenada x) ou altura (coordenada y)de f e converta 
o resultado para inteiro. Exemplo: o ponto (0.2,0.7) será (round(0.2*201), 
round(0.7*201)), ou seja (40,141). 
4. Desenhe sobre f o segundo segmento de reta de v (cinza escuro), usando a mesma 
conversão do passo anterior. 
5. Desenhe sobre f o círculo de v (cinza claro), usando o mesmo raciocínio dos passos 
anteriores. Para converter o raio do círculo para inteiro faça o mesmo que na conversão 
de coordenadas. 
Salve a imagem f em formato PNG e abra em um visualizador de imagens. Você deverá ver algo 
similar à Figura 3, que é uma imagem parecida com a imagem obtida no Passo 1. A diferença 
desta imagem para a imagem obtida no Passo 1 é apenas a espessura das linhas. 
 
Figura 3 – Resultado esperado para o Passo 3. 
 
 
 
 
6 
 
 
Fonte: o Autor. 
 
 
CHECKLIST: 
 
1. Aplicar os conhecimentos da unidade no desenvolvimento de um primeiro programa 
de criação e manipulação de imagem vetorial. 
2. Aplicar os conhecimentos da unidade no desenvolvimento de um primeiro programa 
de criação e manipulação de imagem matricial. 
3. Implementar a conversão de imagens vetoriais com retas e círculos para imagem 
bitmap. 
PROCEDIMENTO/ATIVIDADE nº 2 (Digital) 
 
 
 
ATIVIDADE PROPOSTA: 
 
Criação de imagem vetorial com retas e círculos e transformação em imagem matricial. 
 
PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE: 
 
Para a execução desta atividade, você deverá criar e executar um primeiro programa em 
Python. O primeiro programa serve apenas para conhecer o ambiente de desenvolvimento, 
pois apenas imprime textos na tela. 
 
Em seguida você deverá implementar três passos: 1) criar uma imagem vetorial com dois 
segmentos de reta e um círculo, 2) desenhar um círculo em formato matricial e 3) desenhar 
segmentos de reta em formato matricial. Esses três passos deverão ser implementados nos 
procedimentos passo1(), passo2() e passo3(), respectivamente, junto com funções auxiliares 
sugeridas ao longo da atividade. 
 
Crie e execute seu primeiro programa em Python 
 
7 
Para criar seu primeiro programa a partir de um template, faça: 
1. Abra o IDLE (Python Shell). 
 
2. Vá em File->Open e abra o arquivo cgpi1tmp.py. 
 
3. Altere o cabeçalho do arquivo, preenchendo devidamente seu nome e número de 
matrícula (colocar todos os nomes e números de matrícula se o trabalho for realizado 
em grupo). 
 
4. Salve o arquivo com o nome cgpi1.py. Siga o padrão de nomenclatura! O nome do 
 
 
arquivo em Python é o nome do módulo e não deve conter acentos, espaços ou 
caracteres especiais. 
5. Execute o programa clicando em Run->Run Module e veja o que é impresso na tela 
do Python Shell. 
 
6. No shell, digite ‘import cgpi1.py’ e e veja que o resultado deve ser o mesmo. 
A indentação é essencial na linguagem Python, pois é a indentação que define os escopos. 
Quando se faz um ‘import cgpi1.py’ o módulo cgpi1 (definido no arquivo cgpi1.py) é carregado 
e todo o código sem indentação (a partir da linha print('Início da Prática')) é executado como 
um script. 
 
Crie uma imagem vetorial 
Para criar uma imagem vetorial você deverá importar módulos no início do arquivo, criar a 
função criaImagemVetorial() e preencher o procedimento passo1(). Faça: 
 
1. Importe o cairo, que será utilizado em todos os passos a seguir. 
 
 
2. Crie a função criaImagemVetorial() que: 
a. inicializa a variável v como uma imagem vetorial do tipo SVG 
(cairo.SVGSurface) a ser escrita no arquivo cgpi1.svg; 
b. adicione a v um segmento de reta preto, partindo da coordenada (0.2,0.3) 
até a coordenada (0.8,0.7); 
c. adiciona a v um segmento de reta cinza escuro, partindo da coordenada 
(0.8,0.3) até a coordenada (0.2,0.7); 
d. adicione a v um círculo cinza claro, com centro na coordenada (0.5,0.5) e raio 
0.3; 
 
8 
e. salva a imagem cgpi1.svg, chamando pela última vez context.stroke(). 
f. retorna v. 
 
 
3. Preencha o procedimento passo1() que: 
a. chama a função criaImagemVetorial(); 
b. salva a imagem criada em formato PNG no arquivo cgpi1.png. 
 
 
4. Abra o arquivo cgpi1.svg em um editor de texto. Trata-se de um arquivo XML 
descritor de imagem. 
 
5. Visualize a imagem cgpi1.svg em um browser. O browser desenha a imagem descrita 
no arquivo SVG e exibe. 
 
6. Visualize a imagem cgpi1.png em um visualizador de imagens qualquer. A imagem 
PNG é criada com um fundo transparente, mas alguns visualizadores de imagens irão 
colocar um fundo branco. 
A imagem resultante deverá ser como a da Figura 1. 
 
 
Figura 1 – Resultado esperado para o Passo 1. 
 
 
 
 
Fonte: o Autor. 
 
 
Note na Figura 1 que o segmento de reta cinza escuro passa por cima do segmento de reta 
preto, portanto no ponto de cruzamento a cor é cinza escuro. Note também que o círculo cinza 
claro passa por cima dos dois segmentos de reta e, por isso, os pontos de cruzamento são na 
cor cinza claro. Isto se deve à ordem em que os elementos são adicionados à imagem. 
 
Desenhe um círculo em formato matricial 
 
 
9 
Para desenhar um círculo em formato matricial, você deverá importar módulos no início do 
arquivo, criar uma nova função e preencher o procedimento passo2(). 
 
Faça: 
1. Importe o numpy. 
 
2. No procedimento passo2(), crie a variável f como uma imagem matricial 
(NumPyarray) de 201x201 pixels em níveis de cinza, mas com todos os valores em 
branco. 
 
3. Implemente a função desenhaCirculo(f,c,r,g), que desenha sobre a imagem em níveis 
de cinza f, passada como parâmetro, um círculo de nível de cinza g, com centro na 
coordenada c e raio r, onde f é um NumPy array, c é uma coordenada (xc,yc), xc e yc 
inteiros, e r é o raio em pixels, um número inteiro. Trata-se da implementação do 
algoritmo de desenho de círculo apresentado nesta seção. 
 
4. Novamente no procedimento passo2(), desenhe um círculo cinza claro (g=230) de 
centro (100,100) e raio 60 pixels sobre a imagem f, chamando a função 
desenhaCirculo(f,(100,100),60,230) . 
 
5. Salve a imagem em formato PNG e abra em um visualizador de imagens. 
Você deverá ver uma imagem como a da Figura 2. 
 
Figura 2 – Resultado esperado para o Passo 2. 
 
 
 
Fonte: o Autor. 
 
Desenhe retas e converta a imagem vetorial para matricial 
 
 
10 
Para executar esta atividade, você deverá criar uma nova função e preencher o procedimento 
passo3(). Considere v a imagem vetorial criada pela função criaImagemVetorial no Passo 1. 
Faça: 
 
1. Implemente a função desenhaReta(f,p,q,g), que desenha sobre a imagem f um 
segmento de reta de nível de cinza g que se inicia no ponto p e termina no ponto q, 
ambos de coordenadas inteiras. Trata-se da implementação do algoritmo de desenho 
de reta apresentado nesta seção. 
 
2. Crie a variável f como uma imagem matricial (NumPyarray)de201x201pixels em 
níveis de cinza. 
 
3. Desenhe sobre f o primeiro segmento de reta de v (preto). Para converter as 
coordenadas reais de v para as coordenadas inteiras de f, simplesmente multiplique a 
coordenada real pela largura (coordenada x) ou altura (coordenada y) de f e converta 
o resultado para inteiro. Exemplo: o ponto (0.2,0.7) será (round(0.2*201), 
round(0.7*201)), ou seja (40,141). 
 
4. Desenhe sobre f o segundo segmento de reta de v (cinza escuro), usando a mesma 
conversão do passo anterior. 
 
5. Desenhe sobre f o círculo de v (cinza claro), usando o mesmo raciocínio dos passos 
anteriores. Para converter o raio do círculo para inteiro faça o mesmo que na conversão 
de coordenadas. 
 
Salve a imagem f em formato PNG e abra em um visualizador de imagens. Você deverá ver algo 
similar à Figura 3, que é uma imagem parecida com a imagem obtida no Passo 1. A diferença 
desta imagem para a imagem obtida no Passo 1 é apenas a espessura das linhas. 
 
Figura 3 – Resultado esperado para o Passo 3. 
 
 
 
 
 
 
 
 
 
11 
 
Fonte: o Autor. 
 
CHECKLIST: 
 
1. Aplicar os conhecimentos da unidade no desenvolvimento de um primeiro programa 
de criação e manipulaçãode imagem vetorial. 
2. Aplicar os conhecimentos da unidade no desenvolvimento de um primeiro programa 
de criação e manipulação de imagem matricial. 
3. Implementar a conversão de imagens vetoriais com retas e círculos para imagem 
bitmap. 
 
 
 
 
RESULTADOS 
Resultados de Aprendizagem: 
Saber reconhecer as áreas da computação gráfica, dos fundamentos das imagens e dos formatos 
de imagens. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12 
	OBJETIVOS
	INFRAESTRUTURA
	LABORATÓRIO DE INFORMÁTICA EQUIPAMENTOS:
	SOLUÇÃO DIGITAL
	2
	EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI)
	PROCEDIMENTO/ATIVIDADE nº 1 (Físico)
	PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE:
	3
	4
	5
	6
	CHECKLIST:
	PROCEDIMENTO/ATIVIDADE nº 2 (Digital)
	PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE:
	7
	8
	9
	10
	11
	CHECKLIST:
	RESULTADOS