Décima Oitava Aula: 28/02/2011 (Computação Gráfica)

 

FILTROS GRÁFICOS e MATRIZES em IMAGENS

O professor primeiramente revisou as aulas passadas sobre cores, imagens e limiarização. 

Sobre as cores, explicou a formação aditiva e subtrativa, esta por pigmentação e aquela por luz. Na pigmentação (tinta), utiliza-se o espaço de cores CMYK (Cyan-Magenta-Yellow-blacK). Pela iluminação, utiliza-se o espaço de cores RGB (Red-Green-Blue). 

As imagens têm vários formatos, como por exemplo JPEG (Joint Photographic Experts Group) que armazena 24 bits para as imagens, podendo exibir 16 milhões de cores. Seu método de compressão elimina as cores não captadas pelos olhos humanos. O tipo GIF (Graphics Interchange Format), que armazena somente uma paleta de 256 cores, por isso os arquivos nesse formato ocupam pouco espaço.

LIMIARIZAÇÃO (Thresholding):

É o método no qual, por meio do histograma (representação gráfica de distribuição de frequências de cor de uma imagem em preto e branco ou escala de cinza), transforma-se uma imagem definida a níveis de cinza em preto e branco. O método procurar o nível de limiarização ótimo que divide o histograma em duas classes.

FILTROS:

Finalmente, os filtros de imagem. Para que servem? Unicamente para eliminr ruídos na imagem, isto é, informação inútil da imagem. Ruído não é somente uma imagem com pontos estranhos, marcas de digitais de dedos, ofuscação, mas sim aquilo que impede a finalidade da imagem. Um dos ruídos mais comuns é o salt & pepper.

MATRIZES DE CONVOLUÇÃO:

Toda imagem pode ser representada por uma matriz, geralmente uma matriz de pontos (pixels), por exemplo: 

A maioria dos filtros são processados através da matriz de convolução. Mas, o que é convolução? É cálculo matemático entre duas matrizes, uma sendo a matriz da imagem e a outra é a matriz de convolução. A operação é a soma dos resultados da multiplicação de cada elemento da matriz com a matriz da imagem. Os valores resultantes substitutem os pixels originais da imagem.

Exemplos de Matrizes de Convolução:

Esta última matriz, Emboss, é muito utilizada para simular efeitos 3D, também chamado de Bump Mapping (simulação de efeito 3D através da iluminação).

Cada mudança dos valores da matriz de convolução mudará a imagem.


Finalmente, preciso instalar o aplicativo GIMP, software comparável ao Photoshop, mas de graça. Com o Gimp, e possível testar as matrizes de convolução e filtros para aprender mais.

O professor pediu para escolhermos uma imagem e, através da matriz e dos filtros do Gimp, transformássemos a imagem somente em contornos de preto com fundo branco.

Ah, estou com muito sono. Olhem a hora da postagem!!!

Abraços!

Décima Primeira Aula: 16/02/2011 (Aplicações para Internet)

HELLO WORLD!

O professor não ensinou o básico do Flash CS 5, pois não podemos perder tempo e o melhor mesmo é partir para o ActionScript. 

Podemos começar a escrever em ActionScript direto no frame.

O primeiro comando aprendido é o "trace()", função que escreve na saída (utilizado para informar mensagens para o programador durante a fase de teste) do Flash a frase contida entre parênteses. O comando trace("Hello World!")  foi a primeira frase que colocamos. Lembrar que os comandos, funções e variáveis são case sensitive, ou seja, precisa saber se usa letra maiúscula ou minúscula para não dar erro. 

Faltou um pouco de didática do professor para explicar o que são variável e função.

Variáveis são referências a determinado espaço na memória reservado para armazenar informações. Por exemplo, o comando var n = 5 reserva um espaço na memória, cujo endereço é referenciado por "n" para guardar o valor "5". 

Função contém um conjunto de comandos e que pode retornar um valor. 

Utilizamos "\*"    "*\"  para inserir comentários dentro do próprio código para ajudar a entende-lo pelo programador. 

ESCREVENDO NO PALCO:

Para escrever no "Palco" ou Stage é necessário utilizar as propriedades de texto do Flash.

import flash.text.TextField;     

//aqui nós importamos a biblioteca da classe TextField do Flash para utilizar as propriedades de texto.

var objetoTexto:TextField = new TextField();

//criamos uma variável "objetoTexto" do tipo TextField (classe/objeto) e reservamos, com o "new", um espaço na memória para guardar os futuros valores de objetoTexto.

objetoTexto.Text = "Hello World!";

//guardamos a frase "Hello World!" (entre aspas mesmo) na propriedade "Text" da variável objetoTexto.

addChild(objetoTexto);

//esse comando inclui o texto na stage. Child ("Filho") é assim considerado porque a stage é o objeto Pai ("Parent").

Na Programação Orientada a Objetos (POO ou OOP), utiliza-se a idéia de hierarquia parental entre objetos/classes para tornar mais dinâmico e eficiente a codificação. É imprescindível na programação de jogos entender a OOP.

Por exemplo, o objeto Stage é um Parent que pode conter Childs do tipo imagem, texto, animação etc.

Bom, essa aula foi só isso mesmo. É importante sempre fazer o primeiro programa "Hello World", pois, como disse o Gustavo Guanabara (o guanabara.info, link na coluna ao lado), isso tira a "zica" - quem não fizer esse programa, vai se tornar um péssimo programador.

Décima Aula: 14/02/2011 (Computação Gráfica)

SISTEMAS DE CORES

Espaço de Cores RGB:

As cores Red-Green-Blue são adotadas no sistema computacional para formar as cores pelo processo aditivo (luminoso). Quando as frequências dessas cores se misturam, formam outras cores, como magenta, amarelo, e ciano. Cada uma dessas cores básicas contém 256 tonalidades, variando entre 0 a 255.

Quando as cores RGB são misturadas no seu valor máximo, 255, forma-se a cor branca (união de todas as cores). Pode-se verificar isso na prática através do Disco de Newton, no qual um disco com essas três cores é girado a uma velocidade em que aparentemente as cores se misturam, ocorrendo a formação da cor branca.

Na ausência das três cores, ou seja, cada uma das cores RGB tem valor 0 (zero), forma-se a cor preta, ou simplesmente há ausência de cor.

Cubo Cromático:

O Cubo Cromático é um meio de entender graficamente como se formam as cores. Por exemplo, seguindo os pontos da cor azul e da cor verde, as linhas se encontram onde forma-se o ciano. Preto e branco estão em posições totalmente opostas. E assim por diante. 

vermelho + azul + verde = branco

vemelho + azul = magenta

vermelho + verde = amarelo

verde + azul = ciano

Pixels e Cores:

Pixels são pontos na tela do computador. Quanto mais pontos, ou pixels, mais detalhista e melhoradas as imagens ficam. A palavra Pixel surgiu da aglutinação de Picture Element (“Elemento de Imagem”), formando Pic+El = Picel, ou seja, Pixel. Cada pixel na tela contem valores para vermelho, verde e azul, que são convertidos em diferentes intensidades e voltagens através da correção de gama.

Os Bits das Cores:

Bit é uma palavra que surgiu da aglutinação da redução das palavras Binary Digit (“Dígito Binário”), que designa os dois valores que os computadores compreendem: 0 e 1. Enquanto nós utilizamos o sistema decimal (0...9) para representar valores, o computador utiliza somente esses dois números. Vale lembrar que 8 bits equivale a 1 byte.

Geralmente, para cada cor do sistema RGB um adaptador gráfico típico utiliza até 8 bits para representá-lo. Assim, para cada pixel, há utilização de até 24 bits (8+8+8). Portanto, convertendo 8 bits em números decimais, encontra-se o valor 2^8 = 256. Então, para cada cor, há 256 intensidades de cor (0...255). Finalmente, no sistema de 24 bits, há aproximadamente 16 milhões (256^3 = 16.777.216) diferentes combinações de cores (tonalidade, saturação e brilho).

Além da representação binária e decimal, há a representação hexadecimal, que será visto posteriormente.

Mas, todavia, porém, não obstante, o olho humano só detecta 5 milhões de tonalidades de cor, ou seja, os outros 11 milhões não são detectados por nós. O que fazer com esse milhões “inúteis”? Essa é a tarefa do processamento de compactação de imagens, reduzindo o tamanho dos arquivos no computador. Com a compactação, elimina-se esses 11 milhões de combinações.

Espaço de Cores CMYK:

CMYK ou Cyan-Magenta-Yellow-blacK (ciano, magenta, amarelo e preto) é outro sistema de cores que é utilizado para formar outras cores pelo processo subtrativo (pigmentação). Conforme mostrado acima no Cubo Cromático, as cores ciano, magenta, amarelo e preto são composições das cores vermelho(R), verde(G) e azul (B). O seu processo subtrativo ocorre quando todas as cores da luz branca são absorvidas pelo material, exceto a cor que é refletida.

Esse sistema de cores é utilizado pelas impressoras (por isso os cartuchos de tinta contêm as cores ciano, magenta e amarelo), imprensas, fotocopiadoras. A cor preta pode ser formada pela união das três cores CMY, mas não seria o preto puro e por isso existem cartuchos de tinta que contêm somente a cor preta.

O sistema de cor CMYK tem um espectro de cor muito menor do que o sistema RGB e este é o motivo porque não é possível uma impressão da imagem em papel idêntica à vista no monitor do computador.

Outros Sistemas de Cores:

Existem os padrões HLS, HSV, IHS, YCrCb que são muito diferentes dos sistemas acima e são mais utilizados pelos artistas. O sistema HLS (Hue, Light & Saturation) adota as composições de Matiz (Hue), Luminosidade (Light) e Saturação (Saturation) para formar as cores. O sistema YCrCb é adotado na formação das imagens das televisões digitais.

Nona Aula: 11/02/2011 (Interface Humano-Computador)

Diferença entre iteração e interação?

Iteração: é o famoso loop da programação de computadores, utilizado para repetir ações várias vezes até que uma condição seja completada. 

Interação: é um acontecimento que ocorre quando uma ação de uma coisa gera uma reação em outra coisa. No nosso caso, é quando uma pessoa interage com um computador, aquele fazendo uma ação pela qual este reage.

INTERFACE HUMANO-COMPUTADOR:

É uma disciplina multidisciplinar que abrange: Ciência da Computação, Psicologia Cognitiva, Sociologia, Artes, Design, Ergonomia, Semiótica, Linguística entre outras ciências.

O principal objetivo de IHC é criar ou melhorar as interfaces de modo que o computador se torne uma ferramenta útil, eficiente, de fácil utilização e seguro contra erros e falhas do usuário . Também busca desvendar as relações entre usuário e o computador a partir de diversos pontos de vista para melhorar as técnicas de desenvolvimento de interfaces. 

AS INTERFACES ATRAVÉS DO TEMPO:

Na década de 1950, a interação entre o homem e a máquina (antigos mainframes) ocorria através de painéis e placas, sendo o homem um especialista (geralmente engenheiros e cientistas). 

Nos anos de 1960 e 1970, começaram a surgir as primeiras linguagens de programação, como ASSEMBLY, FORTRAN, COBOL que facilitou o uso dos computadores através de códigos que o computador podia traduzir para o processador.

Na década de 1980, surgiram os sistemas operacionais que facilitaram os comandos, tornando-os mais intuitivos e rápidos. MicroSoft Disk Operating System, mais conhecido como MS-DOS, foi um dos mais conhecidos sistemas, criado pela Microsoft por encomenda da famigerada IBM. O uso do MS-DOS perdurou até meados da década de 1990. E que época...eu adorava utilizar o DOS (depois de um tempinho aprendendo os comandos!), parecia que eu tinha o comando total do computador (mera ilusão...). Não era que nem usar o Windows, todo facinho, facinho.

 

Depois da era DOS, surgiram as primeiras interfaces GUI - Graphical User Interface, sendo o principal e mais impactante entre os usuários de computador pessoal (PC) o encontrado no sistema Windows. O Windows 3.0/3.11 era um aplicativo que dependia do DOS e utiliza o "rato" (mouse) para acessar suas funções. O Windows 95 foi o sucessor do DOS como sistema operacional e revolucionou a interface gráfica.

Graças às interfaces inteligentes, houve a possibilidade de desenvolver sistemas GUI para dispositivos móveis, aperfeiçoamento da tecnologia de displays, novas técnicas de entrada e saída de dados e difusão do computador para as minorias.

Atualmente, a IHC voltou-se muito mais para os dispositivos móveis, cada vez mais utilizados no dia-a-dia (celulares touchscreen, smartphones, tablets etc.). 

INTERFACES ATUAIS:

Algumas características comuns das interfaces atuais: extrema utilização de imagens para representar comandos, facilidade de uso para todos os níveis de usuário, facilidade de aprendizagem, sistema intuitivo para gerenciamento e configuração, personalização do visual.

DESIGN DE INTERFACES:

Ao projetar a interface, deve-se levar em conta quatro propriedades básicas:

Mapeamento Natural: utilização de padrões e símbolos bem estabelecidos e conhecidos pelo usuário.

Visibilidade dos Controles: tamanho, quantidade dos controles, bem como a proporção com relação ao espaço disponível.

Reconhecimento X Recordação: aprendizado baseado em tentativa e erro, gravando assim o caminho seguido anteriormente para atingir determinado objetivo. Na próxima vez que for utilizada a interface, haverá um reconhecimento automático.

Feeback: sempre responder às ações do usuário.

BIBLIOGRAFIA:

NORMAN, Donald. Design do dia a dia. Rio de Janeiro. Rocco, 2006.

Por que alguns produtos satisfazem os consumidores, enquanto outros os deixam completamente frustrados? Em 'O design do dia-a-dia', o especialista em usabilidade Donald A. Norman analisa essa questão, mostrando que a dificuldade em manipular certos produtos e entender seu funcionamento não é causada pela incapacidade do usuário, mas sim por uma falha no design do que foi fabricado. Para o autor, design é mais do que dar uma bela aparência a alguma coisa - é um ato de comunicação, que transmite a essência da operação do objeto e implica o conhecimento do público para o qual ele foi criado. O livro apresenta quatro princípios fundamentais do design - modelos conceituais; feedback ou retorno de informações; restrições; e affordances. Ao longo dos capítulos, Donald A. Norman dá exemplos de produtos adequados e inadequados, além de mostrar de que forma o excesso de tecnologia pode comprometer a facilidade de utilização do que foi fabricado. Ele também ressalta a importância do poder de observação. Sabendo olhar com atenção a si mesma e aos outros, cada pessoa se torna capaz de contribuir para a melhoria da qualidade de vida da população em geral. As dicas, análises e considerações reunidas neste livro tornam sua leitura interessante não só para quem trabalha com a fabricação de produtos, mas para todos nós, que diariamente temos que lidar com as engenhocas criadas por nossos semelhante. (Fonte: Falando de Design).

Oitava Aula: 10/02/2010 (Programação de Computadores)

 

Logo após a aula de Plataforma de Jogos fomos ao laboratório para a aula de Programação de Computadores. 

O Professor explicou um pouco mais sobre Game Maker e confessou que realmente é um aplicativo de desenvolvimento limitado, não muito utilizado, mas que servirá para aprender o básico da programação de jogos. Futuramente, aprenderemos XNA (plataformas PC e Xbox 360). 

A primeira coisa que aprendemos foi abrir, no Game Maker versão 8.0, o arquivo de exemplo treasure.gmk (a extensão dos arquivos são “.gmk”). Tal arquivo contém um projeto de jogo chamado Explorer, um Pac-Man cujo protagonista lembra Indiana Jones.

Explorer feito em Game Maker

Aprendemos apenas um pouco de como alterar background, alterar cores das imagens já existentes, enfim, manipular os objetos que já existiam no exemplo. No dia deste post, irei aprender a linguagem de programação GML (assim espero...).