Aula I - Computação Gráfica Cristina Jung - Design Blog de Desenvolvimento Web, com tutoriais de Flash, desenvolvimento de apps em ActionScript. Desenvolvimento.

Apresentação em tema: "Aula I - Computação Gráfica Cristina Jung - Design Blog de Desenvolvimento Web, com tutoriais de Flash, desenvolvimento de apps em ActionScript. Desenvolvimento."— Transcrição da apresentação:

1 Aula I - Computação Gráfica Cristina Jung - Design Blog de Desenvolvimento Web, com tutoriais de Flash, desenvolvimento de apps em ActionScript. Desenvolvimento de interfaces gráficas. Desenvolvimento em HTML5, CSS, CSS3 e jQuery

2 Conteúdos Aula I: ●Introdução a disciplina de Computação Gráfica: O que é e onde se aplica a Computação Gráfica ●Tipos de imagens: Vetoriais e Rasters. ●Teoria de cores ●Modelos de cores aplicadas para web ●Teoria das Formas (Gestalt) ●Profundidade de Bits ●O que é SVG? ●O que é o Canvas? ●Diferença entre eles. ●Como é o desenvolvimento em SVG, como é o desenvolvimento em Canvas. ●O que é WebGL. Relação entre WebGL e navegadores.

3 O que é Computação Gráfica? É a área da computação destinada a criação, edição, construção e manipulação de imagens. É feita em modo de dados e envolve desde uma imagem simples até a modelagem de um ambiente de realidade virtual. Se pensarmos em um simples desenho ou mesmo a construção de um ambiente de um game, a CG está presente, de diversas formas e características específicas a cada modelo exigido

4 História Na história, parece existir consenso entre os pesquisadores da origem da Computação Gráfica. O primeiro computador a possuir recursos gráficos de visualização de dados numéricos foi o "Whirlwind I" (furacão), desenvolvido pelo MIT. Este equipamento foi desenvolvido, em 1950, com finalidades acadêmicas e também possivelmente militares pois logo em seguida o comando de defesa aérea dos EUA desenvolveu um sistema de monitoramento e controle de vôos (SAGE - Semi-Automatic Ground Enviroment) que convertia as informações capturadas pelo radar em imagem em um tubo de raios catódicos (na época uma invenção recente) no qual o usuário podia apontar com uma caneta ótica. Ocorre que nesta época os computadores eram orientados para fazer cálculos pesados para físicos e projetistas de mísseis não sendo próprios para o desenvolvimento da Computação Gráfica.

5 Em 1962, surgiu uma das mais importantes publicações de Computação Gráficade todos os tempos, a tese do Dr. Ivan Sutherland ("Sketchpad - A Man-Machine Graphical Communication System"), propunha uma forma de inteção muito semelhante ao que hoje chamados de interfaces WIMP – Window-Icon-Menu-Pointer. Esta publicação chamou a atenção das indústrias automobilísticas e aeroespaciais americanas. Os conceitos de estruturação de dados bem como o núcleo da noção de Computação Gráfica interativa levaram a General Motors a desenvolver o precursor dos primeiros programas de C.A.D. Logo em seguida diversas outras grandes corporações americanas seguiram este exemplo sendo que no final da década de 60 praticamente toda a indústria automobilística e aeroespacial se utilizava de softwares de CAD. Fonte: https://www.inf.pucrs.br/~pinho/CG/Aulas/Intro/intro.htm

6 Qual a aplicação da Computação Gráfica? Sistemas como: - CAD/CAM/CAE ("computer-aided design /manufacture/engineering" - projeto/manufatura/engenharia auxiliada por computador), animação e efeitos especiais (para publicidade e entretenimento), apresentação gráfica de dados (economia, administração, estatística) e, mais recente, em visualização de dados tridimensionais produzidos por simulação ou coletados por equipamentos diversos como, por exemplo, tomógrafos e satélites meteorológicos. Estas técnicas permitem processos de modelagem de objetos, a representação de dados coletados de formas distintas, a geração de imagens com graus variáveis de realismo, entre outros. Além disso, costumamos dividir a CG de acordo com a dimensão em que trabalhamos, ou seja o 2D e o 3D.

7 as aplicações da Computação Gráfica compreendem 1 - Interface gráfica com o usuário (GUI): A referência à interface gráfica abrange os dispositivos sócio-técnicos que garantem o contato entre um aparelho eletrônico (computador) e o meio ambiente (homem-mundo). As janelas, os ícones, os menus e os ponteiros são elementos das interfaces gráficas de usuário. Os mesmos carregam significações subjetivas (modelos de interações) de cada agente da interação (usuário e projetista da interface) e que se manifestam na imagem externa da interface (parte aparente ao usuário). 2 - Traçado interativo de gráficos e visualizações: Outro importantíssimo campo dentro da Computação Gráfica é a visualização de dados através de gráficos. Ela consiste basicamente na geração de imagens a partir de um conjunto de dados. Este dados podem ser gerados por de forma interativa ou por modelos que simule um fenômeno real como por exemplo, o comportamento de partículas durante uma reação química.

8 3 - Editoração Eletrônica: Consiste na elaboração gráfica de publicações por computador, com a mesma qualidade que o processo convencional. Com os programas de Editoração Eletrônica é possível, antes de ter-se o material impresso por uma gráfica, obter uma idéia precisa de como ficará o produto final. Com isto as alterações podem ser feitas com facilidade antes mesmo da impressão do primeiro exemplar. O que, sem dúvidas, diminui os custos de produção e aumenta a qualidade da publicação. 4 - CAD - Computer Aided Design: Refere-se ao Projeto Assistido por Computador, consiste basicamente de sistemas capazes de auxiliar um projetista(mecânico, elétrico, civil) a desenvolver suas idéias de forma mais rápida. Os sistemas de CAD são normalmente entendidos como programas capazes de fazer desenhos. De fato, são, em grande parte, isto pois com um CAD o processo de criação e, principalmente, de alteração de desenhos fica muito facilitado. Porém, CAD não é somente isto, um dos principais avanços que alguns destes sistemas trazem em relação ao processo original de projeto é sua capacidade de fazer simulações. Por exemplo, existem sistemas capazes de determinar o comportamento de uma laje de concreto quando esta for submetida a um certo esforço, outros programas podem mostrar como ficaria a iluminação de uma sala com a colocação de uma janela em uma certa parede.

9 5 - Realidade Virtual: Pode ser definida como uma técnica avançada de construção de interfaces tridimensionais altamente interativas, usando dispositivos não convencionais de entrada e saída. Sua aplicação pode dar-se nas mais diversas áreas do conhecimento, utilizando ou desenvolvendo as habilidades naturais dos usuários para executar operações, através de acessos tridimensionais imersivos e multisensoriais a ambientes virtuais. Essa área envolve conhecimentos sobre fundamentos de computação gráfica tridimensional, plataformas computacionais de alto desempenho, dispositivos multisensoriais de entrada e saída, softwares e linguagens para desenvolvimento de aplicações de realidade virtual, modelagem e animação tridimensional, simulação em tempo real, sistemas distribuídos, projeto de interfaces, desenvolvimento de software, e análise de fatores humanos. É interessante fazer uso de equipamentos de alto desempenho, dispositivos especiais e softwares específicos para o desenvolvimento de ambientes virtuais e aplicações com interfaces tridimensionais. 6 - Simulação e animação 7 - Arte 8 - Controle/Visualização de processos 9 - Cartografia

10 Tipos de imagens em CG Vetoriais: Uma imagem vetorial é uma imagem geometricamente composta, por meio de utilização de primitivas geométricas como os pontos, linhas, polígonos, círculos, etc. Estas imagens são baseadas em vetores, também chamados de caminhos. Estes caminhos são manipulados por meio de nós e, estes nós podem ser simétricos e não simétricos. Os eixos dos vetores (x e y para o 2D e x, y e z para o 3D) determinam o caminho, a direção e as proporções da forma.

11 Uma característica das imagens vetoriais é que: por ser geometricamente compostas, ela nunca perde a sua resolução e sua qualidade visual será sempre a mesma, não importando o seu tamanho. Podemos ter uma arte vetor para imprimirmos em um lápis e, a mesma arte para um outdoor - sempre ficará igual.

12 Rasters: Também chamada de Bitmap (mapa de Bits), são imagens que contém descrição e definição em cada pixel, em cada célula que forma o espectro gráfico. É como se fossem montadas por um mosaico, onde cada pixel possui um lugar específico e uma cor definida. Em algumas literaturas também encontramos este tipo de imagem como uma oposição às imagens vetoriais. Um bitmap necessita de manipulação específica para ela, pois trabalhamos de forma interpolada, booleanas ou mesmo matricial. Um bitmap pode ser monocromático, em escala de cinza ou colorido. Normalmente os pixels são formados no padrão RGB, do inglês Red, Green, Blue, que utiliza três números inteiros para representar as cores vermelho, verde e azul ou RGBA, quando o formato possui transparência (sendo A o nível de alfa de cada pixel). Para mídias impressas as imagens bitmap ou raster utilizam o modo de cor CMYK (Ciano, Magenta, Amarelo e Preto).

13

14 Teoria das Cores O uso das cores é tão importante que define a sensação do internauta que acessa o nosso website. Muitos podem achar que o uso adequado da cor é frufru!! De forma alguma! Os esquemas de cores fazem parte do desenvolvimento do website!

15 Harmonia Analógica: É a harmonia resultante de uma cor primária combinada com duas cores adjacentes no círculo cromático. Uma cor é trabalhada como dominante enquanto que as adjacentes são utilizadas para enriquecer a harmonia. -

16 Harmonia Complementar: Cores complementares são aquelas que mais oferecem contraste entre si. De acordo com a definição de Michel Eugene Chevreul (um químico francês), no século XIX, a cor complementar de uma matriz é aquela que mais absorve seu espectro.

17 - Harmonia Triádica: É a harmonia resultante quando usamos três cores equidistantes no circulo cromático. Muito popular entre os artistas por oferece um alto contraste visual, ao mesmo tempo que conserva o balanço e a riqueza das cores.

18 - Harmonia de Complemento Dividido: É a harmonia de cores resultante da seleção de dois pares de cores complementares entre si. Chamado por alguns de tetra ou retângulo, estas combinações são as mais ricas de todas as harmonias, pois utiliza quarto cores sendo elas complementares em pares.

19 Exercicios https://www.gimpbrasil.org/2009/09/criando-figuras-trancadas.html