Algoritmo 4.10 Implementação em JavaScript da DCT/IDCT (Parte 2)
3.1 Aplicações: JavaScript e Java
3.1.2 Filtros
3.1.2.4 Filtros Personalizados Vídeo
Os filtros personalizados desenvolvidos para serem aplicados no vídeo em “tempo real”, apresentando 1,2ms de atraso na sua visualização, levam em consideração os fil- tros gráficos, que são obtidos com o uso de uma propriedade muito conhecida pelos designers, o CSS (Cascading Style Sheets) filtre, destinado a aplicar efeitos em um ele- mento da marcação HTML (Hypertext Markup Language) [35].
No caso, o CSS é um mecanismo para adicionar estilo a um documento web, para ele funcionar na linguagem Java foi preciso criar um algoritmo em Lisp, que vem de List Processing (a lista é a estrutura de dados fundamental desta linguagem). Tanto os dados como o programa são representados como listas, o que permite que a lingua- gem manipule o código fonte como qualquer outro tipo de dados [36], com isso, ele interpreta o HTML/CSS e converte para o Java, como apresentado no Algoritmo 3.5. Algorithm 3.5Implementação em Lisp do CSS filtre.
((send "<html><head><title>") (send (progn*title*))
(send«/title></head><body><table><tr><th>n</th><th>n<sup>2 </sup></th></tr>")
(send (progn(with-output-to-string (strm) (dolist(n n-lst)
(format strm "&<tr><td> A</td><td> A</td></tr>" n (exptn2))))))
(send "</table></body></html>")) (defunread-template (template)
(mappend #’(lambda(lst2) (list‘(send ,(first lst2) strm) (read-from-string
(formatnil"(send (progn % A %) strm)" (second lst2)))))
(split-template-into-pairs template)))
(defuncall-template (pn &optional (strm*standard-output*) ht) (funcall(load-template pn) strm ht))
(defunload-template (pn)
(eval‘#’(lambda(&optional (strm*standard-output*) ht) ,(read-template (slurp-file pn)))))
Capítulo 3. Metodologia 64
O CSS filtre altera somente a camada superior da imagem, manipulando os pixels, sem precisar aplicar nenhum processo criterioso de convolução. Os filtros desenvolvi- dos foram:
Blur: Esse filtro aplicará desfoque gaussiano aos quadros. Tendo que inserir o valor do comprimento que determinará quantos pixels precisarão ser mesclados. Isso implica que, quanto maior o valor, mais desfoque no quadro terá. O valor 0 será usado se não especificar o parâmetro, além de, não aceitar valores negativos [35] [37]. Na Figura 3.16, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.6, apresenta a implementação do filtro.
Figura 3.16 – Filtro Blur em vídeo [37].
Algorithm 3.6Implementação do filtro Blur em CSS.
img{ -webkit-filter: blur(<length>px); -moz-filter: blur(<length>px); -ms-filter: blur(<length>px); -o-filter: blur(<length>px); filter: blur(<length>px); }
Capítulo 3. Metodologia 65
Brightness: Esse filtro aplicará um multiplicador linear aos quadros, tornando-os mais claros ou escuros, comparando aos originais. Aceita números ou valores percen- tuais e não aceita valores negativos. Com 0%, o quadro fica todo preto e com 100%, um quadro sem mudanças. Valores mais altos resultarão em quadros mais claros. Um valor alto suficiente deixará o quadro praticamente branco [35] [37]. Na Figura 3.17, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.7, apresenta a implementação do filtro.
Figura 3.17 – Filtro Brightness em vídeo [37].
Algorithm 3.7Implementação do filtro Brightness em CSS.
img{
-webkit-filter: brightness([ <number> | <percentage> ]); -moz-filter: brightness([ <number> | <percentage> ]); -ms-filter: brightness([ <number> | <percentage> ]); -o-filter: brightness([ <number> | <percentage> ]); filter: brightness([ <number> | <percentage> ]); }
Contrast: Esse filtro altera o contraste dos quadros. Aceita números ou valores percentuais e não aceita valores negativos. O valor 0% dará um quadro totalmente cinza e o de de 100% não causa qualquer efeito. Valores maiores que 100% produzirão
Capítulo 3. Metodologia 66
quadros com alto contraste [35] [37]. Na Figura 3.18, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.8, apresenta a implementação do filtro.
Figura 3.18 – Filtro Contrast em vídeo [37].
Grayscale: Esse filtro tornará os quadros em tons de cinza. 0% deixa o quadro inalterado, enquanto 100% fará o quadro completamente em tom de cinza. Qualquer valor entre esses dois, será um multiplicador linear para esse efeito e não aceita va- lores negativos [35] [37]. Na Figura 3.19, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.9, apresenta a implementação do filtro.
Capítulo 3. Metodologia 67
Algorithm 3.8Implementação do filtro Contrast em CSS.
img{
-webkit-filter: contrast([ <number> | <percentage> ]); -moz-filter: contrast([ <number> | <percentage> ]); -ms-filter: contrast([ <number> | <percentage> ]); -o-filter: contrast([ <number> | <percentage> ]); filter: contrast([ <number> | <percentage> ]); }
Algorithm 3.9Implementação do filtro Grayscale em CSS.
img{
-webkit-filter: grayscale([ <number> | <percentage> ]); -moz-filter: grayscale([ <number> | <percentage> ]); -ms-filter: grayscale([ <number> | <percentage> ]); -o-filter: grayscale([ <number> | <percentage> ]); filter: grayscale([ <number> | <percentage> ]); }
Hue-rotate: Esse filtro aplicará uma rotação de matriz aos quadros. O parâmetro (em valor angular) determinará o número de graus ao redor do círculo de cor que o quadro será ajustado. Com 0deg, o quadro ficará inalterado, igualmente com 360deg, já que o número de graus está exatamente sobre o mesmo ponto do círculo de cor [35] [37]. Na Figura 3.20, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.10, apresenta a implementação do filtro.
Capítulo 3. Metodologia 68
Algorithm 3.10Implementação do filtro Hue-rotate em CSS.
img{ -webkit-filter: hue-rotate(<angle>); -moz-filter: hue-rotate(<angle>); -ms-filter: hue-rotate(<angle>); -o-filter: hue-rotate(<angle>); filter: hue-rotate(<angle>); }
Invert: Esse filtro inverterá o quadro. A quantidade de inversão dependerá do valor passado como parâmetro. 0% causará nenhum efeito ao quadro, por outro lado, 100% inverterá completamente e 50% gerará um quadro totalmente cinza. Qualquer valor entre os extremos será um multiplicador linear e não aceita valores negativos [35] [37]. Na Figura 3.21, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.11, apresenta a implementação do filtro.
Figura 3.21 – Filtro Invert em vídeo [37].
Algorithm 3.11Implementação do filtro Invert em CSS.
img{
-webkit-filter: invert([ <number> | <percentage> ]); -moz-filter: invert([ <number> | <percentage> ]); -ms-filter: invert([ <number> | <percentage> ]); -o-filter: invert([ <number> | <percentage> ]); filter: invert([ <number> | <percentage> ]); }
Capítulo 3. Metodologia 69
Opacity: O filtro de opacidade aplica transparência ao quadro. 0% significa ter 0% de opacidade, ou seja, transparência total. Similarmente, 100% resulta em um qua- dro totalmente opaco [35] [37]. Na Figura 3.22, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.12, apresenta a implementação do filtro.
Figura 3.22 – Filtro Opacity em vídeo [37].
Algorithm 3.12Implementação do filtro Opacity em CSS.
img{
-webkit-filter: opacity([ <number> | <percentage> ]); -moz-filter: opacity([ <number> | <percentage> ]); -ms-filter: opacity([ <number> | <percentage> ]); -o-filter: opacity([ <number> | <percentage> ]); filter: opacity([ <number> | <percentage> ]); }
Saturate: Esse filtro determina a saturação do quadro. A saturação depende do valor passado e não aceita usar valores negativos. 0%, valor mínimo, o quadro estará totalmente não saturado e com saturação em 100%, o quadro fica inalterado. Somente usar valores acima de 100%, para quadros supersaturados [35] [37]. Na Figura 3.23, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.13, apresenta a implementação do filtro.
Capítulo 3. Metodologia 70
Figura 3.23 – Filtro Saturate em vídeo [37].
Sepia: O filtro transforma os quadros em tons de sépia (uma cor marrom-avermelhada). Com 100%, será totalmente sépia e com 0% o quadro ficará inalterado. Valores interme- diários serão multiplicadores lineares para o filtro e não aceita usar valores negativos [35] [37]. Na Figura 3.24, vários exemplos da aplicação do filtro são visualizados, e o Algoritmo 3.14, apresenta a implementação do filtro.
Capítulo 3. Metodologia 71
Algorithm 3.13Implementação do filtro Saturate em CSS.
img{
-webkit-filter: saturate([ <number> | <percentage> ]); -moz-filter: saturate([ <number> | <percentage> ]); -ms-filter: saturate([ <number> | <percentage> ]); -o-filter: saturate([ <number> | <percentage> ]); filter: saturate([ <number> | <percentage> ]); }
Algorithm 3.14Implementação do filtro Sepia em CSS.
img{
-webkit-filter: sepia([ <number> | <percentage> ]); -moz-filter: sepia([ <number> | <percentage> ]); -ms-filter: sepia([ <number> | <percentage> ]); -o-filter: sepia([ <number> | <percentage> ]); filter: sepia([ <number> | <percentage> ]); }