UmaFerramentaDidatica-Benicio-2022

Prévia do material em texto

Anderson Rodrigo Gomes Benício
Uma ferramenta didática para ensino de
filtragem no domínio espacial usando
OpenCV.js
Natal – RN
Janeiro de 2022
Anderson Rodrigo Gomes Benício
Uma ferramenta didática para ensino de filtragem no
domínio espacial usando OpenCV.js
Trabalho de Conclusão de Curso, submetido
como parte dos requisitos necessários para
conclusão do curso de Engenharia de Com-
putação pela Universidade Federal do Rio
Grande do Norte
Orientador: Prof. Dr. Agostinho de Medeiros
Brito Junior
Universidade Federal do Rio Grande do Norte – UFRN
Departamento de Engenharia de Computação e Automação – DCA
Curso de Engenharia de Computação
Natal – RN
Janeiro de 2022
Anderson Rodrigo Gomes Benício
Uma ferramenta didática para ensino de filtragem no
domínio espacial usando OpenCV.js
Trabalho de Conclusão de Curso, submetido
como parte dos requisitos necessários para
conclusão do curso de Engenharia de Com-
putação pela Universidade Federal do Rio
Grande do Norte
Orientador: Prof. Dr. Agostinho de Medeiros
Brito Junior
Trabalho aprovado. Natal – RN, 08 de Janeiro de 2022:
Prof. Dr. Agostinho de Medeiros Brito Junior - Orientador
UFRN
Prof. Dr. Marcelo Borges Nogueira - Convidado
UFRN
Prof. Dr.Allan de Medeiros Martins - Convidado
UFRN
Natal – RN
Janeiro de 2022
Benício, Anderson Rodrigo Gomes.
 Uma ferramenta didática para ensino de filtragem no domínio
espacial usando OpenCV.js / Anderson Rodrigo Gomes Benício. -
2022.
 37 f.: il.
 Monografia (graduação) - Universidade Federal do Rio Grande
do Norte, Centro de Tecnologia, Curso de Engenharia da
Computação de Automação, Natal, RN, 2022.
 Orientador: Prof. Dr. Agostinho de Medeiros Brito Junior.
 1. Convolução digital - Monografia. 2. Processamento digital
de imagens - Monografia. 3. Filtragem - Monografia. I. Brito
Junior, Agostinho de Medeiros. II. Título.
RN/UF/BCZM CDU 621.397.331
Universidade Federal do Rio Grande do Norte - UFRN
Sistema de Bibliotecas - SISBI
Catalogação de Publicação na Fonte. UFRN - Biblioteca Central Zila Mamede
Elaborado por Ana Cristina Cavalcanti Tinôco - CRB-15/262
Dedico esse trabalho a Jordana Carneiro de Souza, que me deu amor e força nos
momentos finais da minha graduação.
AGRADECIMENTOS
Agradeço a minha família e amigos por todos os momentos e apoios ao longo dessa
graduação. A todos os professores que me influenciaram na minha trajetória. Em especial
o professor Agostinho de Medeiros Brito Júnior, pela orientação e pelos conselhos durante
o desenvolvimento deste trabalho.
”O que sabemos é uma gota; o que ignoramos é um oceano. Mas o que seria o oceano se
não infinitas gotas?”
– Sir Isaac Newton
RESUMO
Ferramentas tradicionais utilizadas para realizar filtragem no domínio do espaço e con-
volução digital geralmente não são muito efetivas em sua função didática. Ferramentas
interativas, por outro lado, podem ser extremante úteis para cumprir essa missão nos cursos
de processamento digital de imagens, sendo usadas para demonstrações e desenvolvimento
de novos tipos de filtros. Além disso, esse tipo de ferramenta pode ser útil para evidenciar
como os elementos de um filtro influenciam no resultado de uma filtragem. Esse trabalho
propõe um ferramenta didática como uma opção para os professores e alunos de processa-
mento digital de imagens, trazendo uma nova maneira de exibir e comparar as diferenças
entre a imagem e sua versão filtrada, em um modelo de revelação do antes e depois da
filtragem. O trabalho a seguir descreve o processo de convolução digital de imagens, a
filtragem no domínio da frequência, as ferramentas utilizadas para o seu desenvolvimento,
seus recursos, utilidades e compara seu uso como ferramenta de ensino em relação as
ferramentas tradicionais.
Palavras-chaves: Processamento Digital de Imagens. Convolução Digital. Filtragem.
ABSTRACT
Traditional tools used to perform filtering in the space domain and digital convolution
are generally not very effective in their didactic function. Interactive tools, on the other
hand, can be extremely useful to fulfill this mission in digital image processing courses,
being used for demonstrations and development of new types of filters. In addition, this
type of tool can be useful to show how the elements of a filter influence the result of
a filtering. This work proposes a didactic tool as an option for teachers and students
of digital image processing, bringing a new way to display and compare the differences
between the image and its filtered version, in a model of revelation of before and after
filtering. The following work describes the process of digital convolution of images, filtering
in the frequency domain, the tools used for its development, its resources, utilities and
compares its use as a teaching tool in relation to traditional tools.
Keywords: Digital Image Processing. Digital Convolution. Filtering.
LISTA DE ABREVIATURAS E SIGLAS
PDI Processamento Digital de Imagens
SUMÁRIO
1 INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1 Justificativa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.2 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.1 Objetivo Geral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.2 Objetivos Específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.3 Estrutura do Trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2 CONVOLUÇÃO DIGITAL E FILTRAGEM DE IMAGENS NO DO-
MÍNIO ESPACIAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.1 Matriz da Imagem Digital . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2 Convolução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3 Filtragem de Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.4 Tipos de Filtros Espaciais . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.5 Ensino de Convolução Digital . . . . . . . . . . . . . . . . . . . . . . . 21
3 A FERRAMENTA DESENVOLVIDA . . . . . . . . . . . . . . . . . . 23
4 RESULTADOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5 CONCLUSÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
REFERÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
11
1 INTRODUÇÃO
Ensinar é um desafio. Encontrar os melhores caminhos para semear no aluno o
desejo pelo conhecimento é algo que sempre motiva os professores em sua jornada, e a
presença de ferramentas lúdicas que pavimentem esse caminho é sempre bem vinda.
O processamento de imagens consiste em tomar os dados de uma imagem digital e
transformá-los de forma a obter um conjunto de características de interesse (GONZALEZ;
WOODS, 2008). Para tanto, é necessário poder computacional agregando várias teorias
matemáticas e lógicas, como conjuntos, matrizes e integrais. A teoria da convolução é uma
das ferramentas utilizadas dentro deste campo. Como ela pode ser utilizada para encontrar
respostas de sistemas lineares invariantes no tempo, ela tem aplicabilidade em diversos
campos da ciência e da engenharia, como por exemplo, eletrônica, eletrodinâmica, estática,
aerodinâmicas, dentre outras. Dentro de processamento digital de imagens, a convolução
de matrizes é bastante aplicada para as operações de filtragem no domínio do espaço.
As tecnologias que utilizam processamento digital de imagens tem se tornado
atualmente cada mais vez importantes e necessárias. Elas são usadas tanto no marketing e
entretenimento quanto nas áreas cientificas e militares. É visível como cada dia mais essas
aplicações se tornam parte do nosso dia-a-dia, aparecendo tanto dentro de softwares de
aparelhos celulares para o público em geral, como em grandes empresas que trabalham com
imagens de qualquer forma, como redes sociais, agências espaciais e redes técnico-médicas.
A filtragem, por exemplo, é uma técnica de processamento de imagens que opera
sobre uma imagem digital com o objetivo, namaioria das vezes, de eliminar ruídos. Ela
pode ser aplicada para melhoramento de imagens de vários tipos, como restaurar um foto
antiga marcada pelo tempo, eliminar linhas causadas por interferências em imagens de
satélite, realçar detalhes em imagens feitas por raio x ou ultrassom, dentre outras. Podemos
ver um na Figura 1, algumas imagens que podem ser melhoradas por técnicas de filtragem
(Imagens retiradas de https://pixabay.com e editadas). Entretanto, o ensino desse tipo de
técnica carece de ferramentas práticas e com apelos visuais para ensinar e aprender sobre
os conceitos não triviais que operam para a realização desses processos.
Capítulo 1. Introdução 12
Figura 1 – Imagens ruins (Imagem de satélite com ruído, foto antiga marcada pelo tempo,
raio-x em que a pessoa se moveu)
A filtragem de imagens no domínio espacial é uma transformação que manipula
os valores dos pixeis de uma imagem digital atuando diretamente neles e considerando
seus pixeis vizinhos como parâmetros. Ela trabalha na imagem interpretando-a como uma
matriz, percorrendo-a por inteiro e modificando seus valores através de convolução de
matrizes. Para isso, ela utiliza uma matriz máscara, também chamada de kernel.
Durante o aprendizado prático desse processo, muitas vezes, se torna difícil compre-
ender como cada elemento do núcleo de convolução da matriz máscara altera o escopo de
uma imagem. Além disso, entender a relação que o núcleo de convolução tem com o efeito
final sobre a imagem é essencial para compreender o processo de convolução.
Para ajudar a melhorar a compreensão desta teoria e a criação de filtros apropriados
para as imagens, o presente trabalho trata do desenvolvimento de uma ferramenta interativa
que opera em um navegador web destinada ao ensino de fundamentos de convolução digital,
filtros espaciais e seus efeitos em uma imagem. A ferramenta permite que o usuário
modifique as propriedades de um núcleo de convolução e verifique em tempo real o efeito
da filtragem, comparando a imagem original com o resultado da filtragem através da
interação das duas imagens superpostas. Essa funcionalidade permite uma visualização
onde o próprio aluno ou o professor pode fazer uma transição em uma mesma área de
trabalho do antes e depois da filtragem e melhor perceber os efeitos gerados do filtro que
escolheu.
1.1 Justificativa
Conceitos de Filtragem de imagens no domínio espacial são muito bem explicados
na literatura disponível (GONZALEZ; WOODS, 2008). Entretanto, o ensino da teoria
Capítulo 1. Introdução 13
é enriquecido quando exemplos são também apresentados aos alunos. Encontra-se na
Internet algumas páginas ou vídeos sobre o assunto procurando explicar como ocorre a
filtragem no domínio espacial. A maioria delas é associada a algum código em linguagens
de programação e bibliotecas mais atuais, como python com OpenCV (ITSEEZ, 2015),
ensinando qual deverá ser a chamada para alguma função de filtro em uma linha de código
dentro do programa. Permitem também a possibilidade de que o usuário (que é exigido que
já conheça bem sobre o assunto), escreva um vetor de entrada para ser a matriz máscara
que operará sobre a imagem de entrada.
Alguns professores e alunos de processamento digital de imagens podem recorrer
ao MATLAB ou ao GIMP quando precisam de alguma ferramenta para o ensino ou
aprendizado de filtragem no domínio do espaço.
O MATLAB é um software pago destinado ao calculo de matrizes, em tese, ideal
para o aprendizado de convolução digital, porém, ele se utiliza do mesmo tipo de chamadas
de função em linhas de código e inserção de vetores criados para exibir uma imagem de
saída. Após a operação, o programa exibe uma janela com a imagem de entrada e outra
com a imagem de saída, isso se o usuário tiver escrito a chamada das funções de mostrar
as respectivas janelas. Como uma opção gratuita, existe o Scilab, que é uma versão em
código aberto e com menos opções de funções. Ele reproduz a técnica de forma semelhante
ao MATLAB. Podemos ver na Figura 2 o Layout do MATLAB.
Figura 2 – Funcionamento de matrizes de convolução no MATLAB
Capítulo 1. Introdução 14
O Gimp é um programa editor de imagens gratuito e de código aberto. Por si
só, ele possui uma gama de ferramentas, dentre elas, filtragem espacial e a possibilidade
de trabalhar diretamente na matriz máscara do filtro que quiser criar. Ele mostra uma
janela com as entradas numéricas para inserção dos elementos da matriz e possui até uma
pequena área em que dá ao usuário a ideia prévia de como o filtro irá afetar a imagem de
entrada. Infelizmente, essa mini-prévia não permite contemplar totalmente as mudanças na
imagem e nem verificar as diferenças entre a imagem original e a filtrada após a operação.
Podemos ver na Figura 3 o Layout do GIMP.
Figura 3 – Funcionamento de matrizes de convolução no Gimp
Seria bastante interessante que houvesse uma ferramenta que pudesse suprir exata-
mente esses pontos em que as opções do contexto atual falham. A criação deste trabalho
possibilita que qualquer professor ou aluno possa ter acesso gratuito e fácil a uma ferra-
menta prática que ajuda no aprendizado da convolução digital. Por ser feita para operar
em um navegador web, não é necessário qualquer tipo de instalação, apenas estar online e
disposto a testar e compreender as técnicas de filtragem no domínio espacial.
1.2 Objetivos
1.2.1 Objetivo Geral
O objetivo geral deste trabalho é criar uma ferramenta prática para auxiliar no
ensino e aprendizagem de filtragem no domínio do espaço, dispondo de opções necessárias
para que isso ocorra, sendo uma ferramenta normalmente utilizada durante as aulas e
exercícios dos cursos de Processamento Digital de Imagens. A ferramenta também irá
possibilitar a facilidade de criação de diferentes filtros e até o uso para as finalidades
normais que os filtros espaciais já conhecidos possuem.
Capítulo 1. Introdução 15
1.2.2 Objetivos Específicos
O atual trabalho apresenta os seguintes objetivos específicos:
• Desenvolver uma ferramenta interativa onde o professor possa relacionar filtros
espaciais com seus efeitos em uma imagem.
• Permitir que a interação se dê em um navegador, relacionando a imagem a ser filtrada
com o efeito do filtro em tempo real, durante a mudança dos parâmetros do filtro.
1.3 Estrutura do Trabalho
O presente trabalho encontra-se dividido em 5 capítulos. No capítulo 2, é apresentada
a teoria da filtragem no domínio espacial, detalhando como o professor precisa relacionar
um núcleo de convolução com seus respectivos efeitos. No capítulo 3 é apresentada a
ferramenta OpenCV.js e outras bibliotecas de programação utilizadas, seus recursos e
modo de uso. No capítulo 4 é descrita a construção da ferramenta didática. No capítulo 5
são mostrados exemplos de uso, comparando o modo de ensino na nova ferramenta com o
modo em outras ferramentas. O capítulo 6 apresenta as conclusões finais, encerrando o
trabalho.
16
2 CONVOLUÇÃO DIGITAL E FILTRAGEM
DE IMAGENS NO DOMÍNIO ESPACIAL
Abordaremos neste capítulo a fundamentação teórica na qual esta ferramenta se
apoia para sua criação. Explicando como uma imagem digital pode ser interpretada por
um computador, a operação de convolução, a filtragem de imagens no domínio espacial,
alguns tipos de filtros espaciais comuns da literatura e como se ensina hoje a filtragem
espacial nos cursos de processamento digital de imagens.
2.1 Matriz da Imagem Digital
Uma imagem digital pode ser representada como uma matriz, onde cada elemento
da matriz é representado por um valor da intensidade da escala de cores de cada pixel.
Numa imagem em tons de cinza, por exemplo, o valor da intensidade de cinza dentro
de cada pixel pode variar de 0 a 255, sendo o zero o valor mais escuro (preto) e 255 o
valor mais claro (branco). Já em uma imagem colorida, cada pixel possui três valores
de intensidade para as cores que colorem os pixeis: os valores RGB (red, green, blue),
que indicam a quantidade de vermelho, verde e azul que um pixel tem, logo, a imagem
colorida digital pode serinterpretada como uma matriz de vetores com três elementos, ou,
três matrizes que guardam as informações daqueles pixeis. Esses valores representados de
cada pixel em uma sequência formam a imagem digital que visualizamos em um monitor.
Podemos ver nas Figuras 4 e 2.1 exemplos de representações matriciais de uma imagem
em tons de cinza e colorida (Imagens retiradas de https://pixabay.com e editadas).
Figura 4 – Zoom pixelado do Labrador e sua matriz representada em escalas de cinza
Capítulo 2. Convolução Digital e Filtragem de Imagens no Domínio Espacial 17
Figura 5 – Zoom pixelado do Labrador e sua matriz representada em RGB
2.2 Convolução
A convolução é uma operação de somatório do produto entre duas funções, ao
longo da região em que elas se sobrepõem, em razão do deslocamento existente entre
elas. O cálculo da convolução contínua é a integral do produto entre as duas funções no
intervalo em que elas são integráveis. Ou seja, dentro do intervalo em que duas funções
estão sobrepostas, uma terceira função é gerada a partir do cálculo da convolução entre
elas. Por isso, a convolução é comumente usada como uma ferramenta importante para
geração de filtros. Para o caso unidimensional, a convolução é definida por
(f ∗ g)(x) = h(x) =
∫ ∞
−∞
f(τ)g(x − τ)dτ (2.1)
Como as imagens possuem duas dimensões, largura e altura, a convolução tem que ser
bidimensional. Para este o caso, a convolução é definida por
(f ∗ g)(x, y) = h(x, y) =
∫∫ ∞
−∞
f(α, β)g(x − α, y − β)dαdβ (2.2)
Na área da computação, normalmente se é utilizado o cálculo discreto, por isso, é preciso
usar o somatório ao invés da integral. A convolução digital é então definida da forma
(f ∗ g)(x, y) = h(x, y) = 1
MN
M−1∑
m=0
N−1∑
n=0
f(m, n)g(x − m, y − n) (2.3)
A técnica de convolução de matrizes é aplicada usando a interpretação da imagem como
uma matriz de entrada f(x,y) convoluindo com a matriz máscara g(x,y), onde M e N são a
altura e largura da imagem.
2.3 Filtragem de Imagens
O processo de filtragem de imagens usando a técnica de convolução de matrizes
ocorre como uma adaptação da equação da convolução digital, nos seguintes moldes: uma
matriz denominada máscara é usada para convoluir com a imagem digital, servindo como
Capítulo 2. Convolução Digital e Filtragem de Imagens no Domínio Espacial 18
o núcleo de convolução e gerando uma terceira matriz que será a imagem filtrada. Existem
vários tipos conhecidos e utilizados de matrizes máscaras para realização da filtragem no
domínio espacial, cada uma delas aproximando um efeito de filtragem esperado para a
imagem. Elas geralmente têm um tamanho de linhas e colunas que varia entre 3 × 3 a 7 × 7.
A Figura 6 mostra um exemplo das matrizes de uma imagem de entrada, uma máscara
3 × 3 e uma imagem de saída, respectivamente.
Figura 6 – Matriz Imagem, Matriz máscara e Matriz resultado
Para que a filtragem espacial ocorra, a máscara percorre a imagem de entrada
fazendo a operação de convolução pixel a pixel e gerando uma imagem de saída. A matriz
máscara se posiciona, inicialmente, no pixel da primeira linha e coluna da matriz da
imagem de entrada e opera utilizando os valores dos pixeis vizinhos a ele para o cálculo.
Para tanto, o pixel na qual opera, será posicionado sobre o pixel central da matriz máscara,
multiplicando os valores um do outro, os valores de seus vizinhos serão multiplicados pelos
valores adjacentes ao pixel central da máscara. A soma de todas essas multiplicações será
o valor da imagem de saída respectivo à posição do pixel operado. A matriz máscara se
moverá para o pixel seguinte da matriz de entrada e realizará o mesmo processo, obtendo
um novo valor para o pixel seguinte da imagem de saída. A Figura 7 mostra a máscara
posicionada sobre o pixel da linha 2 e coluna 2 da matriz de entrada, obtendo 60 como o
valor das operações das matrizes.
Figura 7 – Cálculo da Convolução
Capítulo 2. Convolução Digital e Filtragem de Imagens no Domínio Espacial 19
Quando o pixel em que opera é um valor da borda da imagem de entrada, os valores
dos vizinhos inexistentes são considerados nulos. Dependendo da maneira como a filtragem
é construída, os pixeis próximos às bordas não são recalculados, apenas repetidos. A Figura
8 exemplifica o posicionamento da máscara sobre o pixel da linha 1 e coluna 1 da matriz
de entrada, na qual as bordas não possuem vizinhos.
Figura 8 – Cálculo nas bordas
No caso de uma imagem colorida, que possui três canais de intensidade de cores, a
máscara faz o cálculo em cima de cada um dos valores de intensidade, ou opera em cima
de apenas um dos valores RGB, conforme opção de uso.
2.4 Tipos de Filtros Espaciais
O tamanho das máscaras e os valores de seus parâmetros determinam o tipo de
filtragem que será produzido na imagem de saída. Existem diversos tipos de máscaras
conhecidas e utilizadas para diferentes objetivos. Eles podem ser: filtros de suavização,
filtros de realce e detectores de bordas. Os filtros de suavização são usados para redução
de ruídos, dando um leve borramento à imagem que atenua falhas em formatos de pontos,
linhas, curvas ou descontinuidades da imagem digital. O filtro da média e gaussiano são
exemplos de filtros lineares suavizantes. Podemos ver na Figura 9 um exemplo de filtro
suavizante sendo aplicado em uma imagem com ruído.
Figura 9 – Lenna, imagem original com ruído e suavizada com o filtro da Média
Capítulo 2. Convolução Digital e Filtragem de Imagens no Domínio Espacial 20
Na Figura 9, a imagem original da Lenna possui um ruído conhecido como "sal",
por ter vários pontos brancos na imagem. Um filtro de suavização, como o filtro da média,
pode atenuar este tipo de ruído. Dependendo do filtro escolhido, seu tamanho e parâmetros,
a suavização pode ser menor ou maior. Note que apesar da diminuição de qualidade na
imagem resultado, o borramento reduziu o ruído. O filtro da média pondera os valores da
imagem de forma que cada pixel é uma média do valor dele e de seus vizinhos, por isso,
ele traz esse borramento, por se tornar mais homogêneo com os pixeis adjacentes.
Os filtros de realce tem como objetivo destacar as transições de intensidade da
imagem. Recuperando as linhas de contraste dentro de imagem, podendo, por vezes,
serem agregadas à imagem original para ajustar estas linhas. O filtro laplaciano, hiboost e
derivativos são exemplos de filtros aguçantes. A figura 10 mostra um exemplo de filtro de
realce. (Imagens retiradas de https://pixabay.com e editadas)
Figura 10 – Labrador, imagem original e realçada com o filtro Hiboost
Os filtros detectores de bordas, assim como os de realce, exibem com muita clareza
as diferenças entre as transições de intensidade de uma imagem, entretanto, eles destacam
totalmente essas linhas, ignorando as cores de fundo e mostrando apenas os contornos
da imagem. Elas conseguem destacar as bordas da imagem por usarem máscaras com
valores positivos no centro da matriz e negativos em seus vizinhos, com isso, os valores
mais homogêneos dentro da matriz imagem serão zero, ou valores muito baixos após a
operação, enquanto os menos homogêneos, que normalmente são os contornos de uma
imagem, serão valores altos, sendo destacados na imagem resultado. Os filtros de sobel,
prewitt e Laplaciano Gaussiano são exemplos de filtros detectores de bordas.
Capítulo 2. Convolução Digital e Filtragem de Imagens no Domínio Espacial 21
Figura 11 – Paisagem, imagem original e filtrada com Sobel-x
A Figura 11 mostra o exemplo de um filtro detector de bordas horizontal (Imagens
retiradas de https://pixabay.com e editadas). Este tipo de filtro destaca as linhas e
contornos da imagem em uma varredura horizontal. Algo similar pode ser criado em um
filtro detector de bordas vertical, em que ele irá destacar as linhas e contornos da imagem
em uma varredura vertical. A diferença entre esse dois tipos de filtro é que, no horizontal,
as colunas da matriz máscara alternam entre valores negativos e positivos. Enquanto no
vertical, as linhas da matriz máscara é que alternam entre valores negativos e positivos.Todos os tipos de filtros mencionados nesta seção são filtros lineares, ou seja, filtros
que usam máscaras que ponderam os valores de intensidade ao percorrer a imagem durante
a convolução. Existem também os filtros não-lineares, que não operam fazendo a soma
ponderada dos pixels. Esses tipos de filtros, como o filtro da moda e mediana, por exemplo,
usam algorítimos diferentes, não utilizando a convolução digital da forma descrita neste
trabalho, e portanto, não serão abordados.
2.5 Ensino de Convolução Digital
Nos cursos de processamento digital de imagens, normalmente, os professores
explicam o conceito de convolução, matrizes de convolução e o método de convolução
digital, tal qual foi explicado neste capítulo. Eles mostram como as imagens podem gerar
uma matriz, os tipos de máscaras, explicam o passo-a-passo do cálculo e mostram os
resultados finais. Entretanto, a etapa de mostrar a ação dos filtros se resume em escolher
uma máscara conhecida e apresentar o resultado esperado.
Não há problema em mostrar o processo desta forma, pois é bastante razoável para
uma aula expositiva. Entretanto, a melhor forma de aprender e fixar um conhecimento
e uma habilidade é testá-la na prática e verificar os efeitos do conhecimento adquirido,
esmiuçar os detalhes que compõe aquele conhecimento e cometer erros durante o processo.
É preciso ver o processo acontecendo e vivenciá-lo, esse é o aprendizado duradouro,
principalmente quando o objeto de estudo é algo complexo. O mesmo deve ocorrer para o
Capítulo 2. Convolução Digital e Filtragem de Imagens no Domínio Espacial 22
aprendizado de convolução digital, que convenhamos, a teoria e os resultados práticos não
são triviais.
Uma ferramenta didática para o ensino de convolução digital deveria ser capaz de
proporcionar essa facilidade em controlar os aspectos dos elementos envolvidos e mostrar
rapidamente os efeitos de cada pequena mudança nesses elementos. Ainda, deve propiciar
um ambiente em que as comparações entre os elementos envolvidos e os efeitos criados por
eles sejam facilmente observados em detalhes, permitindo que o aluno descubra como os
parâmetros envolvidos na operação geram os efeitos correspondentes de forma lúdica.
23
3 A FERRAMENTA DESENVOLVIDA
Neste capítulo iremos abordar como a ferramenta foi desenvolvida, as tecnologias,
bibliotecas utilizadas e quais componentes e usos ela possui. Mostrando com detalhes cada
um deles.
A ferramenta foi desenvolvida utilizando HTML5, CSS e Javascritp com a biblioteca
OpenCV.js, sendo própria para ser utilizada em um navegador Web (REFSNES-DATA,
1998-2022). Por ser a atual versão da linguagem de marcação de texto, o HTML5 é mais
leve e funcional. Foram criadas três divisões principais dentro do layout: uma área para
carregar e mostrar as imagens, onde ficam os controles de deslizamento que alternam a
percentagem de exibição entre a imagem de entrada e a imagem de saída; uma área para as
entradas e controle da matriz máscara, que é o núcleo de convolução do filtro; e uma área
para listar e trazer para o filtro algumas das máscaras normalmente mais apresentadas
aos alunos em sala de aula. A Figura 12 mostra o Layout da ferramenta.
Figura 12 – Layout da ferramenta
Todos os códigos que operam para realizar as funções necessárias para o funcio-
namento da ferramenta foram escritas na linguagem de programação JavaScript, sendo
atualmente uma das principais tecnologias da rede mundial de computadores (World Wide
Web). Usando o interpretador V8, a máquina virtual do JavaScript torna o desempenho
bastante veloz, já que compila o código JavaScript para o formato nativo de máquina
antes da execução, fazendo com que ele rode à velocidade de um código binário compilado.
A Figura 13 mostra um trecho do código da ferramenta.
Capítulo 3. A Ferramenta desenvolvida 24
Figura 13 – Algumas chamadas de função em JavaScript
A biblioteca OpenCV.js foi utilizada para realizar as operações matemáticas de
convolução digital. O OpenCV (Open Source Computer Vision Library) é uma biblioteca
de código aberto que possui diversos tipos de algorítimos de desenvolvimento de visão
computacional. Ela é aberta para uso acadêmico e comercial, possuindo módulos para
Processamento de imagem com algoritmos para filtros de imagem.
A ferramenta transforma a imagem bitmap enviada pelo usuário em um objeto do
tipo cv.Mat, que disponibiliza a imagem na forma de matriz para permitir seu tratamento
com diversos algoritmos da biblioteca, entre eles o algoritmo de filtragem espacial. Seu uso
foi motivado pela rapidez com que realiza a convolução digital e ainda como motivador
para os alunos aprenderem a biblioteca. OpenCV é uma ferramenta amplamente usada na
indústria e um excelente recurso para fins de ensino de Processamento Digital de Imagens
e Visão Artificial.
A ferramenta desenvolvida em uma página ajuda no entendimento dos efeitos da
convolução digital. Ela possui uma área de navegação na parte superior que explica o que
são os filtros no domínio do espaço e dá alguma noção de como funcionam as matrizes de
convolução. Ensina também a ponderação dos valores de intensidade de um filtro linear
e exibe o cálculo que é feito dentro da convolução digital para a obtenção das imagens
filtradas.
Também explica como funciona a ferramenta com um tutorial simples do que fazer
para modificar os elementos do núcleo de convolução, usar os filtros já conhecidos e como
verificar o resultado da filtragem. Para acessar qualquer uma das informações, basta clicar
em qualquer elemento de navegação do topo da página.
O usuário pode carregar uma imagem para a área de exibição usando um dos
botões que ficam próximos a ela, bem como baixar a imagem filtrada após a convolução. A
ferramenta também possui a função de ajustar o tamanho da imagem carregada dentro da
área de exibição, caso a imagem ultrapasse o tamanho de 750 pixels de altura ou largura.
Entretanto, essa função opera apenas para a exibição dentro da área especificada. Logo, se
Capítulo 3. A Ferramenta desenvolvida 25
o usuário quiser baixar a imagem filtrada, ela será disponibilizada no seu tamanho original.
Ela também possui um controle deslizante que move duas imagens superpostas: a
imagem de entrada e a imagem filtrada pela máscara, dando ao usuário a possibilidade
de perceber com atenção os detalhes modificados pelo processo de filtragem. A ideia
das imagens superpostas com um controle de antes e depois foi vista no site da Elfsight.
(ELFSIGHT, 2022). Os controles podem ser movidos tanto horizontalmente quanto verti-
calmente. As Figuras 14 e 15 mostram um exemplos dos controles Horizontal e Vertical
em diferentes ajuste. (A Imagem mostrada na área de exibição da ferramenta foi retirada
de https://pixabay.com e editada).
Figura 14 – Controle deslizante Horizontal
Capítulo 3. A Ferramenta desenvolvida 26
Figura 15 – Controle deslizante Vertical
A parte direita da página possui uma área que permite que o usuário altere os
valores de cada elemento da matriz que é núcleo de convolução de seu filtro, podendo
escolher, inclusive, o tamanho de linhas e colunas da matriz dentre três opções: 3 × 3,
5 × 5 ou 7 × 7. Esses tamanhos geralmente são suficientes para se apresentar e exemplificar
o uso da filtragem no domínio espacial em uma aula expositiva. Além disso, é possível
multiplicar, dividir, somar ou subtrair todos os valores de uma vez por um valor escolhido,
bastando digitar o valor e clicar no botão especificado para isto. A Figura 16 mostra a
área de ajuste da Matriz Máscara do Filtro em diferentes escalas.
Figura 16 – Opções de tamanho da Matriz Máscara
Na parte inferior direita da página há uma lista com alguns filtros conhecidos, onde
o usuário pode escolher diretamente qual utilizar, bastando apenas clicar no nome do filtro
desejado. Muitos desses filtros são comumente apresentados em livros de processamento
digital de imagens e servem para dar efeitos conhecidos, geralmente relacionados com
algum tratamento matemático associado à convolução, por exemplo, derivadas de primeirae segunda ordem nos eixos horizontal ou vertical. Essa lista pode ser facilmente modificada
pela atualização do código da ferramenta.
Capítulo 3. A Ferramenta desenvolvida 27
Os elementos do filtro escolhido aparecem imediatamente na matriz máscara,
mudando inclusive para a quantidade de linhas e colunas que normalmente o compõem e
modificando automaticamente a imagem de saída. Além disso, o usuário pode mudar os
valores de cada elemento para personalizar o seu efeito desejado ou criar novos tipos de
filtros. Também pode ser escolhido se o resultado será mostrado em escalas de cinza ou
colorido. A Figura 17 as opções da lista de filtros da ferramenta.
Figura 17 – Lista de Filtros
Além de poder ser controlado a exibição do antes e depois da filtragem pelo controle
deslizante, a filtragem ocorre em tempo real, ou seja, no momento que o usuário muda
qualquer valor do núcleo de convolução, a imagem de saída já é modificado, sendo fácil de
perceber como aquele elemento modifica o resultado final. As Figuras 18 e 19 mostram a
diferença ao mudar um elemento da matriz máscara.
Figura 18 – Imagem com nove no elemento central do núcleo de convolução
Capítulo 3. A Ferramenta desenvolvida 28
Figura 19 – Imagem com dez no elemento central do núcleo de convolução
A ferramenta possui algumas limitações, por exemplo, ela não pode criar filtros
com mais de sete linhas e colunas, não possibilita a criação de filtros não-lineares e não
tem a opção de escolher em quais canais de cores os filtros irão atuar, limitando a escolha
do resultado a ser colorido ou preto e branco. Ela também não consegue armazenar novos
filtros em sua memória, como os valores de um filtro criado pelo usuário, tendo que ser
repetido manualmente em outro momento.
Para acessar a ferramenta, utilize o endereço:
https://andyrodrigo.github.io/Filtros
29
4 RESULTADOS
Neste capítulo iremos avaliar a utilização da ferramenta desenvolvida em comparação
com às outras opções atuais para o ensino e aprendizagem de filtragem no domínio espacial
e convolução digital nos cursos de Processamento Digital de Imagens. Faremos isso,
analisando através de imagens lado a lado da ferramenta deste trabalho e de três outras
existentes, mostrando o passo a passo de criação de filtros, comparação de antes e depois
da filtragem e mudança de parâmetros na máscara após a operação.
O Foco da ferramenta é o ensino e aprendizagem de filtragem no domínio espacial.
Por isso, ela pode e deve ser usada para mostrar os efeitos desse tipo de filtragem. Em uma
demonstração comum em sala de aula, o professor colocaria a imagem no programa que
realiza a filtragem, mostraria e criaria os elementos da matriz máscara e depois exibiria o
resultado final. Vejamos a seguir como esse processo ocorreria nas ferramentas tradicionais
e na nova ferramenta aqui apresentada.
Uma das ferramentas utilizadas é a criação do filtro e chamada de função dentro de
alguma linguagem de programação de alto nível, como Python, por exemplo. As Figuras
20 a 23 exemplificam o processo de filtragem usando uma linguagem de programação.
As imagens mostradas para esta comparação foram retiradas de uma aula sobre filtros
espaciais no youtube. (BATISTA, 2020)
Figura 20 – Comparando a criação de filtro com um IDE em uma linguagem de programa-
ção.
Passo 1: Na Figura 20 podemos ver no lado esquerdo da imagem a área de trabalho
em um ambiente de desenvolvimento. A imagem de entrada está salva na pasta do usuário
e foi atribuída como a variável "img1"dentro do programa. A matriz máscara foi escrita
como um vetor parâmetro de uma função de imagens, assim como a quantidade de
linhas e colunas. A imagem filtrada foi salva dentro da pasta do usuário com o nome
"araraBordas.jpg"após a compilação do programa.
O lado direito, mostra como a criação do filtro é feito na ferramenta proposta.
Capítulo 4. Resultados 30
Como o filtro escolhido pelo usuário é um detector de bordas 3 por 3, essa máscara em
questão já está na lista de filtros, bastando um clique para que ela seja carregada na matriz
máscara e a filtragem já ocorra na imagem sobreposta à original.
Figura 21 – Comparando apresentação de resultados.
Passo 2: No lado esquerdo Figura 21 destaca-se que o usuário teve que abrir a
figura gerada pelo programa para poder ver o resultado da filtragem. Na direita, o usuário
usou o controle deslizante para sobrepor completamente a imagem filtrada sobre a original,
podendo ver todo o resultado do filtro.
Figura 22 – Comparando percepção de diferenças com ambiente de desenvolvimento.
Passo 3: No lado esquerdo da Figura 22 o usuário abriu a imagem original para
poder comparar o resultado da filtragem. Na direita, o usuário usou o controle deslizante
para ver a imagem original novamente. Note que a comparação pode ser feita parcialmente,
invés de retornar o controle deslizante completamente, o usuário deixou um pouco da
imagem filtrada ainda em exibição e subiu o controle vertical, mantendo apenas uma
pequena área com a parte filtrada.
Capítulo 4. Resultados 31
Figura 23 – Comparando mudança de máscara com um ambiente de desenvolvimento.
Passo 4: No lado esquerdo da Figura 23 o usuário decidiu modificar a máscara
do filtro, para tanto, ele criou uma nova variável e atribuiu o valor dela a chamada da
função de filtragem com os novos elementos da máscara dentro de um vetor, tendo que
repetir os passos para mostrar o resultado da nova filtragem. À direita, podemos ver que
para modificar o filtro, basta mudar os elementos da matriz máscara e acompanhar os
resultados na exibição lateral, podendo, inclusive usar os controles deslizantes para definir
onde o acompanhamento ocorrerá dentro da imagem.
Veremos, então, como esse mesmo processo ocorre dentro do MATLAB, que é
feito para a manipulação de matrizes. As imagens mostradas para a comparação com o
MATLAB foram retiradas de um canal do youtube que mostra a aplicação de convolução
de imagens dentro do MATLAB. (ASJAD, 2018)
Figura 24 – Comparando criação de filtro com o MATLAB
Passo 1: Na Figura 24 do lado esquerdo temos a área de trabalho do MATLAB,
onde a matriz máscara foi criada com o nome "blur1"e as chamadas para exibir as duas
imagens em janelas separadas já estão nas linhas de código. À direita, temos a ferramenta
deste trabalho fazendo o mesmo processo em tempo real.
Capítulo 4. Resultados 32
Figura 25 – Comparando mostrar o resultado e perceber diferença com o MATLAB
Passos 2 e 3: Na Figura 25 lado esquerdo, o MATLAB exibe as duas imagens em
janelas, como pedido pelo usuário em suas chamadas de função. Para fazer a comparação,
é necessário, aproximar as imagens uma da outra e verificar com atenção os detalhes,
como em um jogo dos sete erros. À direita podemos ver como o controle deslizante facilita
esse processo de verificação de detalhes, basta imaginar duas imagens de um jogo de sete
erros sobrepostas desta maneira com um controle de "revelação", não havendo qualquer
dificuldade em perceber as diferenças. Para manter o resultado sem cor, o usuário usou a
opção "preto e branco", modificando a coloração da imagem imediatamente.
Figura 26 – Comparando mudança de máscara com o MATLAB
Passo 4: Na Figura 26 lado esquerdo, o usuário criou novos filtros dentro de matrizes
para poder testar os resultados, enquanto ele não escrever todos os elementos da matriz e
testar, não saberá o resultado final gerado. No lado direito, mesmo com apenas metade do
resultado em exibição, já sabemos que esse filtro não é muito interessante.
Por último, veremos como é esse processo no editor de imagens GIMP. As imagens
mostradas para a comparação com o GIMP foram retiradas de um canal do youtube que
explica como o filtro da matriz máscara funciona dentro do GIMP. (DRAKULIC, 2013)
Capítulo 4. Resultados 33
Figura 27 – Comparando criação de filtro com o GIMP
Passo 1: Na Figura 27 do lado esquerdo, temos a área de trabalho do GIMP, ele
também possui um controle com a entrada dos elementos da máscara, entretanto, tem a
limitação de cinco linha por conco colunas,o que não impede de criar uma matriz 3 por
3 dentro dele. Podemos ver que ele possui a opção de prever com o filtro agirá sobre a
imagem. Do lado direito, uma máscara de detecção de bordas também foi colocada, e os
controles deslizantes tentam simular o que o GIMP oferece para a previsão do resultado,
que na verdade já está aplicado na imagem filtrada sobreposta.
Figura 28 – Comparando mostrar o resultado e perceber diferença com o GIMP
Passos 2 e 3: Na Figura 28 lado esquerdo, a imagem foi filtrada, mas a imagem
original não está mais no editor de imagens. A comparação deve ser feita de alguma
outra forma, talvez usando o retorno da operação, ou abrindo uma janela com a imagem
de entrada. Á direita, a imagem filtrada está sobrepondo a imagem de entrada em
aproximadamente noventa porcento, podendo realizar a comparação devagar e percorrendo
toda a imagem, se quiser.
Capítulo 4. Resultados 34
Figura 29 – Comparando mudança de máscara com o GIMP
Passo 4: Na Figura 29 lado esquerdo, o usuário carregou novamente a imagem
original e abriu mais uma vez a janela para mudar o filtro, trocando as entradas dos
elementos da máscara e verificando pelo preview, como o filtro irá alterar a imagem. A
direita, a filtragem ocorreu simultaneamente com a mudança de cada uma dos elementos.
35
5 CONCLUSÃO
A ferramenta desenvolvida conseguiu atingir seu objetivo de ser uma opção interativa
em tempo real para o ensino de filtragem no domínio do espaço em imagens digitais.
Comparando com outras ferramentas, ela é a única que possui a opção de controlar a
exibição superposta da imagem de entrada e do resultado (antes e depois) para uma melhor
análise.
Ela também filtra rapidamente em tempo real ao modificar os valores dos elementos
do núcleo de convolução, por utilizar as funções otimizadas da biblioteca OpenCV dentro
do JavaScript. Utilizando a ferramenta é possível ao usuário reproduzir e alterar com
bastante facilidade os filtros lineares mais comuns em processamento de imagens, como os
filtros de suavização, aguçantes e detectores de bordas.
O foco da ferramenta desenvolvida é ser uma opção de fácil uso e acesso, onde
professores e alunos de cursos de processamento de imagens possam utilizar durante as
aulas e exercícios. Com a opção de baixar a imagem filtrada no tamanho original, também
é possível usar a ferramenta para remover ruídos que possam ser eliminados ou amenizados
pela filtragem no domínio espacial, obtendo imagens com melhoria de qualidade.
Entendendo os conceitos de filtragem no domínio do espaço, que podem ser lidos na
própria página da ferramenta, qualquer pessoa pode utilizá-la para observar as modificações
geradas pela máscara criada e obter as imagens filtradas pela ferramenta interativa.
Algumas melhorias podem ser implementadas na ferramenta no futuro, como a
possibilidade de salvar algum filtro criado na lista de filtros, a possibilidade de escolher
em quais canais RGB da imagem de entrada o filtro irá atuar quando a imagem estiver
colorida, a opção de criar filtros não lineares e expandir a opção para criação de filtros no
domínio da frequência.
36
REFERÊNCIAS
ASJAD, S. M. Application of 2D convolution via MATLAB. 2018. https:
//www.youtube.com/watch?v=DcLGkhc-sL0&t=714s&ab_channel=SyedMohammadAsjad,
[Online, acessado em 04/01/2022].
BATISTA, A. L. F. Computação Gráfica - Filtros espaciais (matrizes de convolução).
2020. https://www.youtube.com/watch?v=AhDGXuCKBhs&t=1381s&ab_channel=
AndréLuizFrançaBatista, [Online, acessado em 02/01/2022].
DRAKULIC, P. GIMP : Explaining how the "Convolution matrix"filter works. 2013. https:
//www.youtube.com/watch?v=DogFik9p6jM&t=284s&ab_channel=PeterDrakulic,
[Online, acessado em 03/01/2022].
ELFSIGHT. Before and After Slider. 2022. https://elfsight.com/
before-and-after-slider-widget/, [Online, acessado em 03/01/2022].
GONZALEZ, R. C.; WOODS, R. E. Digital image processing. Upper Saddle River,
N.J.: Prentice Hall, 2008. ISBN 9780131687288 013168728X 9780135052679 013505267X.
Disponível em: <http://www.amazon.com/Digital-Image-Processing-3rd-Edition/dp-
/013168728X>.
ITSEEZ. Open Source Computer Vision Library. 2015. https://github.com/itseez/
opencv.
REFSNES-DATA. W3schools. 1998–2022. https://www.w3schools.com/, [Online,
acessado em 02/01/2022].
https://www.youtube.com/watch?v=DcLGkhc-sL0&t=714s&ab_channel=SyedMohammadAsjad
https://www.youtube.com/watch?v=DcLGkhc-sL0&t=714s&ab_channel=SyedMohammadAsjad
https://www.youtube.com/watch?v=AhDGXuCKBhs&t=1381s&ab_channel=Andr�LuizFran�aBatista
https://www.youtube.com/watch?v=AhDGXuCKBhs&t=1381s&ab_channel=Andr�LuizFran�aBatista
https://www.youtube.com/watch?v=DogFik9p6jM&t=284s&ab_channel=PeterDrakulic
https://www.youtube.com/watch?v=DogFik9p6jM&t=284s&ab_channel=PeterDrakulic
https://elfsight.com/before-and-after-slider-widget/
https://elfsight.com/before-and-after-slider-widget/
http://www.amazon.com/Digital-Image-Processing-3rd-Edition/dp/013168728X
http://www.amazon.com/Digital-Image-Processing-3rd-Edition/dp/013168728X
https://github.com/itseez/opencv
https://github.com/itseez/opencv
https://www.w3schools.com/
	Folha de rosto
	Folha de aprovação
	Dedicatória
	Agradecimentos
	Epígrafe
	Resumo
	Abstract
	Lista de abreviaturas e siglas
	Sumário
	Introdução
	Justificativa
	Objetivos
	Objetivo Geral
	Objetivos Específicos
	Estrutura do Trabalho
	Convolução Digital e Filtragem de Imagens no Domínio Espacial
	Matriz da Imagem Digital
	Convolução
	Filtragem de Imagens
	Tipos de Filtros Espaciais
	Ensino de Convolução Digital
	A Ferramenta desenvolvida
	Resultados
	Conclusão
	Referências