Olá, estudante!
Nesta lição, adentraremos ao cativante mundo das "Primitivas Gráficas em 2D" na Computação Gráfica, aprofundando nossa compreensão e explorando as nuances que envolvem esse conceito fundamental. Meu principal objetivo, é que você aprenda as habilidades necessárias para entender e aplicar as primitivas gráficas em 2D.
De início, você deve compreender o que são as Primitivas Gráficas em 2D, como: círculos, linhas, polígonos e retângulos. Você verá como essas formas básicas são importantes para criar gráficos e imagens em ambientes digitais, em seguida, o objetivo é que você consiga dominar as técnicas de desenho. Também entenderemos como escolher cores, espessuras de linha e estilos que contribuam para a qualidade estética de suas criações gráficas.
Você poderá se conectar com a prática para o mercado de trabalho, ao passo que avançamos nos estudos em busca de um bom embasamento sobre as primitivas gráficas em 2D, a qual é relevante na indústria de design gráfico, aplicativos móveis, mídia digital e desenvolvimento de jogos.
Ao finalizar a lição, você estará mais preparado para as rotinas, assim como para os desafios do mercado em constante evolução e, como mencionado, poderá contribuir em diversos projetos e construir interfaces com confiança, ajudando a moldar o mundo visual digital de amanhã.
Conte-me uma coisa: em algum momento você já parou e pensou em como as imagens que vemos nas telas de computadores, ou de aparelhos celulares, são geradas? Se nunca questionou quanto a isso, agora pode ser que tenha ficado pensativo sobre o assunto. Mas, se não souber como responder a esse questionamento, fique tranquilo, pois avançaremos juntos por conteúdos que esclarecerão dúvidas como essas. Como forma de dar um spoiler a você, digo que essas imagens são formadas por elementos básicos chamados do nome a qual trazemos a essa lição, primitivas gráficas.
O que de fato são essas primitivas gráficas? Uma analogia que pode trazer clareza sobre isso, é pensar nas primitivas gráficas como peças daquele bom e velho jogo de encaixes, o famoso Lego, podendo ser encaixados e criadas combinações que dão forma a objetos. Mas terei que lhe contar que há um desafio que enfrentamos ao estudar as primitivas gráficas 2D, a eficiência.
Neste sentido, é de suma importância que as imagens sejam desenhadas de forma eficiente para que não consumam muito poder de processamento, por outro lado, de igual tamanho a este desafio é a questão de compatibilidade, em que se espera que as primitivas gráficas sejam compatíveis com diversas plataformas e dispositivos.
Pensando na utilização, vale lembrar que as primitivas gráficas 2D causam impactos na nossa vida todos os dias, ainda que muitas vezes não seja possível perceber que isso ocorra diretamente. Vamos a alguns exemplos para compreender melhor? Elas podem ser úteis para criação de jogos eletrônicos e propagandas, inclusive para fins bélicos e militares. Um exemplo bem prático ao nosso contexto, é a sua utilização na criação de personagens para desenhos e jogos em que o desenvolvedor pode usar as primitivas gráficas para criar o corpo, rosto, características e detalhes como roupas e adereços, sobrepondo as imagens de modo a alcançar o resultado desejado.
Isto levanta questões relevantes para os profissionais da área, por exemplo: como garantir que primitivas gráficas sejam eficientes? Como garantir que primitivas gráficas sejam compatíveis com diferentes dispositivos e plataformas? Quais são os impactos sociais, econômicos e políticos das primitivas gráficas?
É muita coisa para aprender! Por isso, sem mais demora, vamos lá!
Hoje, iremos analisar uma situação real de um problema e como encontrar uma solução rápida e eficiente para ele. Pense que a empresa “Nosso Desenho de Cada Dia”, que atua no ramo de design gráfico, precisava criar uma interface nova para o seu software de edição de imagens; para fazer isso, a equipe de desenvolvimento decidiu que a nova interface seria baseada em primitivas gráficas 2D, pois isso possibilitaria uma maior flexibilidade e facilidade na criação e manipulação de objetos. Até aqui tudo bem, veremos mais à frente o quanto isso é comum no mundo do design gráfico.
A equipe começou a trabalhar no projeto, mas logo percebeu que havia um problema: a interface estava muito lenta e não estava respondendo tão bem quanto a equipe imaginava. Segundo foi apurado, isso aconteceu porque a renderização das primitivas gráficas estava sendo feita de forma ineficiente. Para resolver o problema, a equipe decidiu implementar um algoritmo de rasterização mais eficiente (veremos na contextualização como a rasterização age nesse processo).
Eles escolheram o algoritmo Bresenham, também chamado de algoritmo do Ponto Médio, porque ele se baseia no argumento de que um segmento de reta ao ser plotado deve ser contínuo, ou melhor, os pixels que compõem um segmento de reta devem ser vizinhos. Este algoritmo é capaz de desenhar círculos e linhas com precisão e de forma bem rápida, logo, com a implementação do novo algoritmo, as consequências passaram a ser positivas, pois a interface ficou mais rápida e também responsiva.
Para além da resolução desse problema, a equipe conseguiu adicionar novas funcionalidades ao software, como a criação de gradientes e sombras em objetos. Isso foi possível graças ao melhor funcionamento, foi um “plus” que a equipe conseguiu ao resolver o problema inicial. A relação desse caso com as primitivas gráficas em 2D é clara; se não tivessem o conhecimento adequado sobre as primitivas gráficas e os algoritmos de rasterização, a equipe não teria sido capaz de criar uma interface eficiente para o software da empresa “Nosso Desenho de Cada Dia”.
Você sabe o que é a renderização e rasterização?
De forma objetiva, podemos compreender a renderização como o processo de criar imagens com características realistas a partir de modelos 3D. Enquanto a rasterização é conhecida por ser a conversão de objetos gráficos em pixels.
Começaremos essa etapa ampliando nossos conhecimentos sobre as primitivas gráficas 2D, mas antes pergunto: você já ouviu falar sobre isso? Talvez já imagine o que poderia ser, entretanto, caso nunca tenha ouvido falar, pode ficar tranquilo porque vamos avançar juntos sobre esse tema. Vamos lá?
Vamos iniciar nossos estudos pelos conceitos básicos. Espero que você consiga compreender com clareza que as primitivas 2D são elementos fundamentais no campo da computação gráfica e na criação de imagens bidimensionais, que são comprimento e largura. Esses componentes formam a base para a construção de imagens, gráficos e interfaces de usuário em diversas aplicações, desde jogos e animações até softwares de design e processamento de imagens.
As primitivas gráficas permitem a criação de imagens mais elaboradas e complexas. Ao combinar elementos que até então eram simples, torna-se possível representar objetos, cenários e informações visuais de maneira eficiente. Tais primitivas são apoiadas por algumas teorias da área do cálculo, como álgebra e geometria, bem como o campo da computação, as equações contribuem para que haja exatidão e dispõem de um papel importante na renderização e manipulação desses elementos gráficos (CONCI; AZEVEDO, 2003).
Nesse sentido, Gonçalves (2014) apresenta a sua visão, dizendo que as primitivas gráficas em 2D são elementos gráficos básicos utilizados para criar imagens bidimensionais. Elas incluem linhas, pontos, círculos, retângulos e polígonos, e são base para a representação de objetos visuais em espaços bidimensionais, de forma que possuem um grau de importância na computação gráfica, uma vez que, para muitos desenvolvedores, as primitivas gráficas são os tijolos e blocos de construção essenciais nesta área.
Para que fique mais clara a sua compreensão sobre estes conceitos, vamos pensar em um programa de desenho básico, algo simples. Esse desenho usa primitivas gráficas, como formas e linhas para permitir que os usuários criem ilustrações e gráficos facilmente. Um outro exemplo, desta vez um pouco mais elaborado, mas que está presente no cotidiano da maioria dos jovens, as redes sociais, nas quais as primitivas gráficas estão presentes em aplicativos de edição de imagem que utilizamos para retocar ou fazer pequenos ajustes em fotos, ou criar artes digitais, ferramentas como pincéis e formas são primitivas gráficas que nós, enquanto usuários, utilizamos em diversos momentos.
Então surge uma pergunta: essas primitivas são eficazes apenas em programas mais simples e menos elaborados? Não exatamente! Há profissionais, como os designers gráficos e os engenheiros, que fazem uso destas primitivas gráficas em 2D para criar seus layouts, diagramas ou mesmo esboços, pois se torna uma maneira eficiente de representar conceitos visuais. Na área de desenvolvimento de jogos, as primitivas gráficas são usadas para criar personagens, ambientes e elementos interativos, com sprites e texturas, que são comuns em jogos em 2D.
Para os profissionais que atuam, e caso você também pense em trabalhar com visualização de dados, um analista de dados, um engenheiro de dados e gerente de projetos da tecnologia; o uso de primitivas gráficas como gráficos de barras e diagramas de dispersão é fundamental para tornar informações complexas mais compreensíveis.
No contexto de treinamentos e simulações virtuais, as primitivas gráficas são usadas para gerar ambientes virtuais que sejam realistas, como é o caso da realidade aumentada, ou “RA”, como é conhecida. Nas aplicações de realidade aumentada, as primitivas gráficas são utilizadas para sobrepor elementos virtuais ao mundo real, ou seja, acrescentar, trazer algo além do que já é visível, de forma a melhorar a experiência do usuário.
Pensando na parte dos códigos, a programação em si, sabemos que há as linguagens de programação voltadas para gráficos, como o Canvas HTML5 e OpenGL, que oferecem suporte para a manipulação de primitivas gráficas, no uso de elementos interativos como botões, ou caixas de seleção, ou barras de rolagem em interfaces de usuário, por exemplo, que são frequentemente criadas a partir de primitivas gráficas, tornando a interação do usuário mais intuitiva.
Perceba que realmente nos dispositivos móveis, como os smartphones e similares, as primitivas gráficas desempenham um papel relevante em jogos, aplicativos de edição de imagem ou outros. Ao se tratar de telas menores, o uso de primitivas gráficas permite uma representação visual eficiente de objetos, economizando recursos computacionais. Outra vantagem é que com o avanço da tecnologia, primitivas gráficas ganham recursos adicionais, como sombreamento, texturização e efeitos especiais, tornando-as ferramentas ainda mais poderosas.
Agora que vimos suas utilizações e como as primitivas gráficas (Figura 1) podem ser utilizadas nas mais diversas situações da computação gráfica, vamos entender como ela funciona, estudando o que são seus elementos. Vamos lá?
Ponto: um único ponto no espaço 2D, definido por suas coordenadas x e y.
Segmento de reta: uma linha reta que conecta dois pontos.
Polilinha: uma sequência de segmentos de reta que não se fecham.
Polígono: uma polilinha fechada.
Arco de elipse: uma curva que forma um arco de uma elipse.
Vamos trazer aqui alguns exemplos para deixar mais visual: um exemplo de ponto é o cursor do mouse em uma tela de computador. Um exemplo de segmento de reta é a linha que separa dois blocos de texto em um documento. Um exemplo de polilinha é a borda de um retângulo. Um exemplo de polígono é um círculo. Um exemplo de arco de elipse é a curva que forma a boca de um smiley.
A modelagem de objetos por meio de primitivas se dá por instanciação: como já citado anteriormente, uma linha é uma sequência de pontos, uma polilinha é uma sequência de linhas etc. Já quando nos referimos a uma circunferência, ela PODE ser vista como uma polilinha fechada em que o número de linhas define a qualidade da curva.
Em matemática, um ponto não tem dimensão, mas em Computação Gráfica (a partir de agora CG), um ponto é representado por um PIXEL. Cabe relembrar que: PIXEL (Picture Element) é a menor unidade gráfica manipulável e, ao contrário do PONTO, o PIXEL tem forma e dimensão, mas estes atributos não são, em geral, manipuláveis diretamente através de funções e dependem do hardware.
Enquanto na matemática o ponto está imerso no espaço R², na Computação Gráfica o pixel é um elemento de uma matriz de tamanho W (Width: largura) x H (Height: altura). Essa matriz pertence ao dispositivo gráfico de saída, cujas coordenadas pertencem ao N². Sendo assim, neste contexto, um Pixel possui propriedades fundamentais: Cor e Posição.
Podemos usar os sistemas de coordenadas para descrever os objetos modelados em um sistema 2D, pois servem para nos dar uma referência em termos de medidas do tamanho e posição dos objetos dentro de nossa área de trabalho. Temos como exemplos as coordenadas polares e as coordenadas esféricas (rádio e dois ângulos), em que um sistema de coordenadas é denominado Sistema de Referência se for um sistema de coordenadas para alguma finalidade específica. Vamos conhecer um pouco mais sobre o Sistema de Referência?
Sistema de Referência do Universo (SRU): descreve as Coordenadas do Universo (ou do Mundo). São coordenadas usadas normalmente na modelagem de objetos matemáticos, representado por XR e YR (R de reais) e representam as coordenadas reais de um ponto pertencente a R².
Sistema de Referência do Dispositivo (SRD): descreve as Coordenadas do Dispositivo gráfico de saída. Exemplo: 800x600 em cada frame de uma tela. Utilizaremos XP e YP (P de Pixel) para representar as coordenadas do pixel correspondente (inteiros positivos) na matriz gráfica (tela ou canvas), sendo mais específico, XP e YP representam os valores de determinada linha e coluna no dispositivo gráfico. Caso essas coordenadas expressem os VALORES REAIS de seus respectivos pontos no SRU, serão referidas como COORDENADAS LÓGICAS.
Sistema de Referência do Objeto (SRO): cada objeto pode ser modelado em um pequeno universo individual, muitas vezes coincide o centro do sistema de coordenadas com o centro de gravidade do objeto.
Sistema de Referência Normalizado (SRN): trabalha com as coordenadas normalizadas no intervalo [0, 1] ou [-1, 1]. Este sistema serve como um sistema de referência intermediário entre o SRU e o SRD, em que as coordenadas do universo são convertidas para um sistema de coordenadas padrão normalizado. Principal Aplicação: Tornar as imagens/objetos independentes do dispositivo.
SRU para SRD
O processo de conversão de pontos/objetos no espaço real para um pixel (elemento de uma matriz) com coordenadas inteiras positivas no dispositivo. A este processo damos o nome de Rasterização que, em outras palavras, nada mais é que a ocorrência da conversão de um primitivo para uma imagem bidimensional.
Tenho alguns exemplos de aplicações profissionais envolvendo as primitivas gráficas para mostrar, vamos lá? O primeiro exemplo é de um engenheiro, ele usa para criar um modelo 3D de um edifício. Outro exemplo é um designer gráfico, que usa primitivas gráficas para criar uma ilustração para um anúncio. E por fim, outro exemplo, um desenvolvedor de jogos que usa primitivas gráficas para criar um personagem em um jogo.
Além desses exemplos profissionais, também trago a você exemplos do nosso dia a dia envolvendo as aplicações das primitivas gráficas. Por exemplo, um usuário de computador usa primitivas gráficas para desenhar uma linha em um documento. Um usuário de smartphone usa primitivas gráficas para criar um emoji. Um usuário de uma rede social usa primitivas gráficas para criar um perfil.
Como há muitas áreas que envolvem tecnologia, há grandes desafios e perguntas que pairam sobre o futuro. A constante evolução das primitivas gráficas em 2D enfrenta desafios, como a demanda por gráficos de alta qualidade em tempo real, prometendo novas possibilidades e aplicações emocionantes no futuro.
É importante que você tenha uma boa base sobre o significado de primitivas gráficas em 2D, mas é crucial que você, futuro desenvolvedor de sistemas, vá além da teoria e adquira a habilidade de aplicar esse conhecimento na vida real. Com esse objetivo, trouxe algumas missões para você, futuro desenvolvedor, que lhe permitirão compreender e aprofundar ainda mais seu domínio sobre esse assunto.
Gráfico de Tarefas Diárias
Que tal colocarmos em prática o que aprendemos sobre primitivas gráficas em 2D de uma maneira muito útil para o dia a dia? Você pode criar um gráfico simples para organizar suas tarefas diárias. Use linhas para representar o tempo e círculos para destacar momentos importantes. Assim, você não só consolida o conhecimento sobre linhas e círculos, mas também percebe como essas primitivas podem ser aplicadas de maneira prática em suas vidas.
Mapa de Lugares Especiais
É possível explorarmos a aplicação prática de diferentes primitivas gráficas em um contexto de mapeamento, por isso, desenvolva um mapa simples representando lugares especiais em sua cidade, bairro ou escola. Use polígonos para áreas geográficas e círculos para indicar pontos de interesse. Este exercício não só exercita a criatividade, mas também estimula a observação detalhada do ambiente ao nosso redor.
História em Quadrinhos Interativa
Para uma aplicação mais avançada, o que me diz de criar uma história em quadrinhos interativa? Use linhas para delimitar os quadros, círculos para destacar personagens e polígonos para criar elementos visuais adicionais. Essa atividade divertida permite explorar a narrativa visual enquanto aplicam primitivas gráficas de maneira criativa.
Ou um desafio extra, o que me diz, vamos? Caso positivo, trago a você o “bom e velho” Paint. Nele, você poderá criar linhas, retas e muito mais. De forma a praticar o que aprendemos sobre primitivas gráficas em 2D, e ao mesmo tempo construir desenhos e figuras para que, posteriormente, observe e discuta as escolhas que teve no desenho construído com seus colegas. Isso promoverá uma compreensão mais profunda e uma aplicação prática do conhecimento adquirido. Bem, deixei aqui vários desafios para aplicar e ampliar seus conhecimentos, agora é com você. Vamos lá? Caso não tenha o Paint em seu dispositivo, use uma versão on-line dele através do link: <https://paintonline.com.br/paint.html>.
Bons estudos e sucesso!
CONCI, A.; AZEVEDO, E. Computação Gráfica: Teoria e Prática. São Paulo: Elsevier, 2003.
GONÇALVES, M. S. Fundamentos de Computação Gráfica. 4. ed. São Paulo: Érica, 2014.