Top Banner
API para transformação de imagem em cartum utilizando plataforma iOS Acadêmico – Christian Hess Orientador – Dalton Solano dos Reis
38

APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Nov 17, 2018

Download

Documents

lyanh
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

API  para  transformação  de  imagem  em  cartum  

utilizando  plataforma  iOS

Acadêmico – Christian Hess Orientador – Dalton Solano dos Reis

Page 2: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Roteiro da apresentação �  Introdução �  Fundamentação teórica �  Desenvolvimento

�  Especificação / Implementação �  Resultado e discussões �  Conclusões / Extensões

�  Demonstração

Page 3: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Introdução •  Contextualização

Page 4: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Introdução • Objetivos do trabalho

• Explorar o potencial da plataforma iOS frente a algoritmos de computação gráfica

• Aplicar algoritmos e técnicas de cartoon rendering sobre imagens

• Construir uma ferramenta para transformação de imagens em cartum

Page 5: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Cartum

Page 6: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Cartum o Destaque de bordas o Pouca quantidade de cores

Page 7: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Detecção de bordas – Filtro Canny

1.  Transformação em tons de cinza 2.  Filtro gaussiano para suavização

(diminuição de ruídos)

3.  Filtro de Sobel (destacar bordas)

4.  Limiar com histerese (remoção de bordas falsas)

5.  Supressão não máxima (afinamento de bordas)

Page 8: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Detecção de bordas – Filtro Canny

Direção do gradiente da borda (perpendicular a direção da borda)

Direção da borda

Intensidade da borda (força da borda)

Page 9: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Detecção de bordas – Filtro Canny

Intervalos de ângulos

Page 10: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Detecção de bordas – Filtro Canny

T1 = Limiar baixo T2 = Limiar alto

• Borda verdadeira, se I > T2 • Possível borda, se T1 > I > T2 • Borda descartada, se I < T1

I = Intensidade da borda

Page 11: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Detecção de bordas – Filtro Canny

Imagem normal Supressão Não Máxima Limiar com histerese

Page 12: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica � Segmentação de cores - Mean Shift

Imagem normal Imagem segmentada

Page 13: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica � Segmentação de cores - Mean Shift

Page 14: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica � Segmentação de cores - Mean Shift

Page 15: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica � Segmentação de cores - Mean Shift

Page 16: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica � Segmentação de cores - Mean Shift

Page 17: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica � Segmentação de cores - Mean Shift

�  EDISON (Edge Detection and Image Segmentation System)

�  OpenCV

Page 18: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Trabalhos correlatos

o Adobe Photoshop Express e Photo fx Ultra

Page 19: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fundamentação teórica •  Trabalhos correlatos o Cartoon rendering e shading 3D

Jeronimo Venetillo (2004/2005)

Page 20: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento • Requisitos

• Permitir a transformação de imagens JPEG ou PNG para cartum utilizando filtros e algoritmos específicos (RF)

• Permitir informar uma única imagem (RF) • Permitir visualizar e salvar a imagem transformada (RF)

• Implementação na linguagem Objective-C em ambiente Xcode (RNF)

• Utilizar plataforma iOS (RNF) • Possuir código fonte documentado (RNF) • Estar funcionando no Simulador do iPhone e no iPad (RNF)

Page 21: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento • Especificação

Page 22: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento • Especificação

Page 23: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento • Especificação

Page 24: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual
Page 25: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento • Técnicas e ferramentas utilizadas

• Xcode

• iOS SDK • Repositório SVN [XP-Dev.com] • Simulador iPhone • iPad 2 3G 32GB • Doxygen

Page 26: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

ToonLib.mm

Page 27: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Mean Shift

Page 28: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Filtro Canny

Page 29: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento Operacionalidade

Page 30: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento Resultados e discussões

• Aspecto visual satisfatório com EDISON porém pobre com OpenCV

• Alto consumo de processamento e memória ao utilizar EDISON com determinados parâmetros e imagens grandes

Page 31: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento Resultados e discussões

17,19 59,44

232,30

941,54

17,21 60,28

217,48

0,00 0,00

100,00

200,00

300,00

400,00

500,00

600,00

700,00

800,00

900,00

1000,00

256 x 192 512 x 384 1.024 x 771 2.048 x 1.536

Con

sum

o de

mem

ória

, em

MegaBytes

Tamanho da imagem, em pixels

Memória - EDISON

2,88 10,98

44,30

171,90

2,88 10,98

44,30

171,90

0,00

20,00

40,00

60,00

80,00

100,00

120,00

140,00

160,00

180,00

200,00

256 x 192 512 x 384 1.024 x 771 2.048 x 1.536

Con

sum

o de

mem

ória

, em

MegaBytes

Tamanho da imagem, em pixels

Memória - OpenCV

Page 32: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Desenvolvimento Resultados e discussões

447 2.061

9.567

42.592

2.220

10.070

47.520

0

0

5.000

10.000

15.000

20.000

25.000

30.000

35.000

40.000

45.000

50.000

256 x 192 512 x 384 1.024 x 771 2.048 x 1.536 Te

mpo

de

pro

cess

amen

to, em

mil

isse

gund

os

Tamanho da imagem, em pixels

Processamento - EDISON

70 265 1.130

4.440 450

1.840

7.060

28.290

0

5.000

10.000

15.000

20.000

25.000

30.000

256 x 192 512 x 384 1.024 x 771 2.048 x 1.536 Tem

po

de

pro

cess

amen

to, em

mil

isse

gund

os

Tamanho da imagem, em pixels

Processamento - OpenCV

Page 33: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Conclusões

• Foi possível obter uma imagem transformada com estilo muito próximo a um cartum

• Melhor aspecto visual utilizando biblioteca a EDISON sendo eficaz porém não produtiva

• Limite no tamanho de imagens (1.743.000 pixels)

Page 34: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Extensões

• Otimização ou troca do algoritmo Mean Shift

• Processamento de sub-imagens para evitar o limite de tamanho de imagem

• Criar uma interface com funcionalidades para permitir a criação de histórias em quadrinhos

Page 35: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Demonstração

Page 36: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Obrigado! FIM

Page 37: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Documentação on-line

http://www.inf.furb.br/gcg/files/TCC2011-2-04-ChristianHess_documentacao.zip

Page 38: APIparatransformaçãode imagememcartum$ …campeche.inf.furb.br/tccs/2011-II/TCC2011-2-04-AP-ChristianHess.pdf · com estilo muito próximo a um cartum • Melhor aspecto visual

Fórmulas

!(x, y) = arctan GyGx!

"#

$

%&

!f =mag(!f ) = Gx2 +Gy2Intensidade do gradiente

Direção da borda