Arte com CSS e Javascript

Olá, devs!

   Neste final de semana, eu publiquei um monte de artigos (3 artigos), sobre Computação Gráfica e agora vou tratar de um assunto relacionado com a arte vista na Computação Gráfica.

Vou falar sobre as bases do frontend, ou seja, HTML, CSS e Javascript (JS), e os principais frameworks que são usados no frontend, como React, Angular e Vue.js.

   Como já existe muita literatura sobre estas tecnologias e ferramentas, bem como vários cursos sobre elas aqui na DIO (ensinando como usá-las para criar páginas em sistemas web), eu vou focar em outro nicho, que é o uso das linguagens CSS e Javascript para gerar arte.

#DesafioDIO

Sumário

1.   Introdução

2.   Programação web

3.   Programação para o frontend

4.   Frameworks utilizados em frontend

5.   Arte com CSS

6.   Arte com Javascript

7.   Conclusão

1 – Introdução

Neste final de semana, eu publiquei alguns artigos sobre Computação Gráfica, assunto que acho fascinante, não só pelo lado técnico da programação e da matemática envolvida, mas também pelo lado artístico. As imagens realistas geradas pela Computação Gráfica atual são belíssimas e já podem enganar olhos menos treinados, deixando a dúvida se elas são sintetizadas por computador ou se são reais.

Por causa dessa minha paixão pela visualização gráfica computacional, eu decidi escrever mais um artigo sobre a arte na programação, desta vez, sobre como criar arte no frontend.

   Neste artigo, vou fazer um resumo sobre as bases do frontend, ou seja, HTML, CSS e Javascript, e os frameworks que são mais usados nessa stack, como React, Angular e Vue.js, mas o foco do artigo será na aplicação dessas linguagens básicas para criar imagens artísticas em páginas web.

   Se você quiser aprender como usar as linguagens e frameworks do frontend, recomendo que se matricule nas formações sobre elas aqui na DIO, pois tem uma específica para cada uma delas.

2 – Programação Web

Eu ia começar a falar sobre a parte técnica da programação web, suas linguagens, mas acho bem interessante que você saiba como tudo isso começou, principalmente se naquela época você ainda não existia nem na barriga da sua mãe.

O texto a seguir, sobre a Internet, foi consultado em matéria do site da UFRGS [1].

A Internet, como rede mundial de computadores, foi criada em 1969, muito antes da web, e começou oferecendo serviços como correio eletrônico (email), ftp (download de arquivos), telnet (acesso remoto a outro computador) e outros. Ela passou a usar o protocolo TCP-IP (“Transmission Control Protocol-Internet Protocol”) em 1982. O serviço WWW (“World Wide Web”) só surgiu em 1992, mais conhecido apenas como “web”!

Com a ideia do www, por Tim Berners-Lee, a Internet começou a se popularizar.

No Brasil, a Internet entrou só em 1988, quando os primeiros computadores de universidades e dos centros de pesquisas brasileiros foram interligados aos Estados Unidos, por iniciativa da FAPESP (Fundação de Amparo à Pesquisa do Estado de São Paulo), UFRJ (Universidade Federal do Rio de Janeiro) e LNCC (Laboratório Nacional de Computação Científica).

O crescimento da demanda acadêmica nacional por conectividade à Internet levou à criação da Rede Nacional de Pesquisa (RNP), objetivando estruturar e manter uma "espinha dorsal" nacional que integrasse os esforços estaduais na área de redes.

Assim, foi viabilizada a chegada dos serviços ao interior do país (capilaridade) com qualidade e eficiência.

Antes restrito às instituições de ensino e pesquisa, em 1995, o acesso à Internet foi aberto à comunidade em geral, por meio de serviço oferecido pelos provedores de acesso privados.

E foi aí que começou a euforia de criação de páginas web, tanto de empresas como de pessoas. Todo mundo queria marcar presença na Internet.

Na época, eu já estava graduado, trabalhando como servidor público estadual concursado e tive o privilégio de projetar, codificar e colocar no ar o primeiro site institucional do órgão em que eu trabalhava.

Naquele início, era muito interessante a gente imaginar que até mesmo as maiores empresas do mundo (GM, Honda, IBM, ABC, Petrobrás) ou os órgãos mais importantes (NASA, FBI, INPE, Ministérios) tinham as mesmas ferramentas e tecnologias limitadas para fazerem suas páginas web.

HTML

O texto a seguir, sobre HTML ("Hypertext Markup Language"), foi consultado em matéria do site da empresa Hostgator [2].

Naquela época, a tecnologia disponível para criar as páginas era HTML, na versão 2.0, figuras (formatos GIF e JPEG) e links para outras páginas (locais ou remotas). E só!

A versão do HTML 2.0 ampliou as tags básicas (h1, h2, p, a, img) com outras novas, com suporte a tabelas, formulários e framesets. Foi lançado o navegador Mosaic, o primeiro a virar moda.

Junto com o HTML 3.0, vieram as folhas de estilo (CSS – “Cascading Style Sheet”) e a definição de conteúdo (por HTML) passou a ser separada da formatação (por CSS).

Foi lançado o navegador Netscape, que se transformaria em um sucesso global!

O lançamento do HTML 4.0 trouxe a novidade dos scripts do lado do cliente, com o Javascript.

Hoje, a versão do HTML que usamos é a 5.0, que está em constante evolução, permitindo transformar páginas web em sistemas dinâmicos e interativos complexos!!

CSS

O texto a seguir, sobre CSS, foi consultado em matéria do site da empresa Devmedia [3].

O CSS foi criado por Håkon Wium Lie e Bert Bos e desenvolvido pelo W3C (“World Wide Web Consortium”) com o objetivo de tirar a responsabilidade de formatar os conteúdos do HTML, que passariam a ser feitos por outra tecnologia.

Nota: algumas tags de versões antigas do HTML eram muito problemáticas para criar e manter os sites, por causa da diversidade de fontes usadas nos sites, as formatações que eram feitas pelas tags do HTML, como a tag <font>, que determinava tipos de fontes, cores etc.

Já outras tags eram verdadeiras aberrações de usabilidade, como <marquee>, que rolava indefinidamente um texto horizontalmente na página, como um letreiro luminoso de uma loja física.

   Objetivando resolver este problema, o W3C desenvolveu e padronizou o CSS, que permite formatar elementos do conteúdo bem como estruturar o layout dos blocos de conteúdo em uma página web. Além disso, com o CSS é possível criar animações complexas, criar efeitos com a profundidade de imagem de fundo (“parallax”), criar sites interativos e jogos.

Javascript (JS)

O texto a seguir, sobre Javascript, foi consultado em matéria do site Mozilla.org [3].

A linguagem Javascript foi criada por Brendan Eich (da empresa Netscape) para ser usada no lado do servidor (logo copiada pela Microsoft e chamada de Jscript).

Depois, o Javascript foi padronizado (chamado de ECMAScript) e hoje já está na sua 11ª edição.

O uso principal do JavaScript (JS) é a criação de scripts dinâmicos do lado do cliente em páginas web, podendo também ser utilizado no lado do servidor, usando um interpretador como o Node.js, que o tornou ainda mais popular.

Resumindo tudo isso em uma linha, o desenvolvimento web é feito atualmente pelas linguagens HTML (para definição do conteúdo), CSS (para formatação) e JS (para interação), rodando em navegadores web (“browsers”).

3 - Frameworks no Frontend

Em geral, na sua forma raiz, o frontend é implementado com HTML, CSS e JS, mas algumas ferramentas foram criadas para agilizar a programação, conhecidas como frameworks.

Um artigo do site da Alura [5], compara os principais frameworks de frontend [5].

Segundo a matéria, os frameworks são abstrações, soluções desenvolvidas por equipes que enfrentaram problemas com o uso do JavaScript puro para trabalhar com aplicações web complexas.

A maior parte do desenvolvimento de frontend é relacionada com manipulação do DOM (“Document Object Model”) e comunicação com APIs (“Aplication Programming Interface”), coisas que o JS faz muito bem. Só que ele não é escalável a longo prazo e fica inviável fazer a mesma coisa em diferentes aplicações.

Dessa forma, os frameworks focam em criar aplicações:

⦁   escaláveis;

⦁   que reusam código;

⦁   performáticas e seguras;

⦁   adequadas para interação do usuário e atualização dinâmica do DOM.

Angular

O Angular trabalha com componentes que são uma mistura de TypeScript e HTML, resultando em um código independente, isolado e reutilizável.

Os componentes possuem a seguinte estrutura:

⦁   Um template, geralmente HTML. Representa a parte visual de um componente;

⦁   A classe principal, com todas as suas propriedades e métodos, criada com TypeScript.

React

React não é um framework, pois não possui ferramentas próprias, mas apenas uma base, uma coleção de funções que cria elementos reutilizáveis.

Ele é mais ligado à programação funcional e não apresenta uma divisão clara de partes de um componente. Possui uma estrutura mais simples: um componente pode ser tanto uma classe como uma função.

Vue.js

O Vue.js foi inspirado em versões iniciais do Angular e trabalha de forma semelhante, pois ambos usam diretivas e ligações de dados. A estrutura para um componente não é obrigatória, mas flexível, da mesma forma que React e Vue, e se divide em:

⦁   Template, com o código HTML;

⦁   Script, com a lógica, em JavaScript/TypeScript;

⦁   Style, com o estilo do componente, com definições limitadas ao escopo.

O uso de um framework pode até agilizar o desenvolvimento de um projeto de frontend, mas é bom lembrar que os frameworks vêm e se vão. Hoje, um framework é moda, vira febre e todo mundo se sente incentivado a usar. Depois que ele sai da moda, ou aparece outro melhor, ele desaparece e os projetos legados desenvolvidos com ele vão ter que ser reescritos para o próximo framework da moda ou, então, de volta para o Javascript padronizado.

   Portanto, é bom pensar muito bem antes de adotar um framework da moda para seus projetos ao invés de dar preferência a linguagens padronizadas, que não vão mudar de imediato e lhe deixar na mão.

4 – Arte com CSS

A linguagem CSS oferece muitas tags que podem ser usadas para criar efeitos artísticos, com efeitos como gradientes, textura, redimensionamento de imagens, formas geométricas, curvas etc.

No entanto algumas pessoas são diferenciadas e escolhem o caminho mais difícil para criar suas artes, usando apenas tags simples, codificando manualmente, sem nenhum editor de código.

Uma matéria do site Nerdizmo [6] informa que a americana Diana Smith, desenvolvedora e engenheira de UI (“User Interface”), cria imagens que são verdadeiras obras-primas, podendo até passar facilmente por quadros pintados por pintores famosos.

Ela cria essas imagens apenas com comandos CSS, elemento a elemento, manualmente, sem editor de código, na base da tentativa e erro, para cada seção da imagem, até chegar a resultados impressionantes, como estes dois mostrados nas figuras a seguir:

A figura abaixo mostra um exemplo da codificação CSS para essa figura.

A seguir, outro exemplo de imagem criada por ela:

Mais alguns exemplos são mostrados abaixo:

Se essas imagens não lhe impressionaram, então veja a imagem seguinte, publicada no mesmo site da Nerdizmo [7]:

Ela não foi criada só por CSS, mas está aqui apenas porque tem outras características marcantes, segundo a fonte [7]:

⦁   Ela foi a primeira obra de arte criada por uma Inteligência Artificial (IA);

⦁   Foi também a primeira obra criada por uma IA a ser leiloada.

Esta pintura se chama “Portrait of Edmund de Belamy” e foi criada por meio de um sistema desenvolvido em 2018 por um coletivo de artístico de Paris, chamado Obvious. Este sistema ainda precisa da ajuda de programadores humanos para conceber as pinturas.

O grupo usou referências visuais de mais de 15 mil obras dos séculos 14 a 20 e a IA foi treinada com milhares de fotos de pinturas clássicas até conseguir reproduzir um quadro semelhante. O ciclo só se encerra quando não conseguirem distinguir a pintura da IA de outra feita por um humano.

Em 2018, a obra foi leiloada na Christie’s, uma das maiores casas de leilões do mundo.

O valor total arrecadado foi de US$ 432,500 (calculei aqui em torno de R$ 2.132.000,00, para o dólar a 4.929 reais) e o valor arrecadado por um comprador anônimo ultrapassou a estimativa de 10 mil dólares (calculei em torno de 49.290 reais).

5 – Arte com Javascript

A linguagem Javscript foi criada para dar dinâmica às páginas web. Espera-se que ela ofereça funcionalidades para tratar de elementos de interface como botões, links, caixas de texto e ajude a acessar bases de dados em servidores remotos, no caso de uso em backend.

No entanto, ela também oferece muitas opções para animar cenários e objetos virtuais para criar jogos interativos.

Alguns desenvolvedores vêem outras possibilidades na linguagem e aproveitam para criar verdadeiras obras de arte com animações geométricas, sistemas de simulação, e outras coisas afins.

Por exemplo, eu pesquisei em um site de programação (Codepen) frontend raiz, ou seja, que usa apenas HTML, CSS e JS, e encontrei algumas páginas que têm um componente artístico feito exclusivamente com CSS. Além disso, elas também têm programação JS para tornar os sites dinâmicos e serem até usados como simulador de processos científicos, como se fossem jogos interativos educativos. Os códigos HTML, CSS e JS dos projetos estão disponíveis para cópia (fork) dentro do próprio site.

O primeiro exemplo [8] é a criação de uma imagem de um relógio Rolex analógico, de ponteiros, que realmente marca as horas atualizadas, mostra a data e tem movimento dos ponteiros, cujo visual é visto na figura a seguir:

No mesmo site, tem outro projeto [9], com arte feita também só por CSS e animação feita por JS. O projeto é um modelo do Sistema Solar, dinâmico, com todos os planetas, incluindo também a Lua.

A animação é apresentada em formato 2D ou 3D, inclui textos informativos com dados sobre a velocidade e distância ao Sol, além mostrar uma comparação dos tamanhos dos planetas em relação ao Sol. E esses dados podem ser configurados por elementos da interface. E tudo feito em CSS e JS!!

Ok, só isso?

Não, tem mais!!!

Eu estou fazendo um curso sobre arte com Javascript, que ensina a criar imagens e animações artísticas com retas, formas geométricas e textos, interativas e com animações.

Em cada aula é ensinada uma técnica diferente aplicada a elementos geométricos diferentes. Elas vão desde traçado de retas simples, círculos, letras, poligonais e curvas. Depois, na parte mais avançada, usam-se cores, som e animações.

E o interessante, que parece mesmo arte, é que a cada atualização da tela, a imagem muda, pois são usadas funções de aleatoriedade (random). Por conta disso, as figuras mostradas não são polígonos bem comportados, geometricamente e matematicamente perfeitos, as continuidades são descontínuas e os padrões mudam em cada tentativa.

E você escolhe aquela que mais lhe agrada pela sua avaliação pessoal. Isso é arte! Não é matemática, nem trigonometria! O professor incentiva o aluno a testar, brincar como resultado final.

Portanto, não espere ver aqui desenho de figuras geométricas euclidianas, nem pinturas como as de Vasareli, Mondrian nem Bauhaus. Aqui, a arte está mais para o impressionismo de Monet, Cèzanne, Matisse e Renoir.

As figuras são realizadas com Javascript, usando a facilidade do elemento canvas, e algumas bibliotecas são instaladas com o node.js. No entanto, os códigos podem ser escritos em qualquer IDE que trabalhe com o JS. Em cada aula, o professor escreve o código na hora e ele pode ser todo copiado pelo aluno.

Nas figuras seguintes, eu vou destacar algumas imagens que foram criadas nas aulas, pelo professor.

Retas – a partir de muitos pontos na tela, em posições randômicas, animados, desenham-se retas entre cada dois pontos, depois entre os pontos mais próximos de cada um deles, depois a espessura das retas varia de acordo com a distância entre os pontos (distância menor, linha mais grossa, senão, linha mais fina).  

Arcos – começa com alguns segmentos de reta, em preto e branco, depois eles são separados uniformemente, suas espessuras são alteradas randomicamente, arcos de círculo são inseridos em cada segmento, esses arcos têm seu comprimento alterado randomicamente e seus raios também, por fim, mais segmentos perpendiculares são adicionados em cada arco randomicamente.

Letra – uma letra é desenhada, em preto e branco, depois as cores são invertidas e a letra fica vazada, ela passa a ser formada por pequenos círculos, depois por letras pequenas (mesma letra dela - A) e, finalmente, ela é preenchida por segmentos de reta de tamanho e espessura aleatórios.

Curvas e cores – várias linhas curvas coloridas são desenhadas, de mesma extensão mas curvaturas diferentes, randômicas, depois o palete de cores é mudado, o espaço entre as curvas é preenchido por outras curvas (em arrasto), o palete muda mais uma vez, e finalmente, as curvas são redesenhadas em posições diferentes, mas sempre combinando com a curva seguinte. A partir da mudança do palete para tons de azul, verde e amarelo, a figura é mostrada em animação.

Eu ainda estou na metade do curso e estes são apenas exemplos de imagens que a gente pode desenhar com Javascript. No momento eu estou apenas repetindo a codificação das aulas, mas já estou ansioso, à espera da conclusão do curso para começar a fazer as minhas próprias experiências com as técnicas aprendidas.

6 - Conclusão

Neste final de semana, eu publiquei alguns artigos sobre Computação Gráfica e decidi escrever mais um artigo sobre a arte na programação, desta vez, sobre como criar arte no frontend.

   Neste artigo, eu apresentei um resumo sobre o surgimento da Internet, das linguagens HTML, CSS e Javascript, bases do desenvolvimento frontend, bem como dos frameworks para frontend mais usados (React, Angular e Vue.js).

O foco do artigo foi na aplicação de CSS e Javsscript para criar imagens artísticas em páginas web.

Foram mostradas imagens de projetos realizados dessa forma em sites de programação e por profissionais da área de frontend também.

Eu ainda pretendia falar de programação low-code para aplicações interativas, como o Scratch, e o formato SVG, linguagem textual de gráficos vetoriais que está sendo muito usada na web, mas para esse artigo não ficar muito longo (já ficou, não foi?), vou deixar para outro artigo futuro.

7 – Fontes de consulta

[1] UFRGS, Guia do Usuário Iniciante na Internet. Disponível em: <http://penta.ufrgs.br/tutorials/internet/guia.htm>. Acesso em: 10/04/2023

[2] Conheça o HTML, uma das linguagens mais usadas na web. Disponível em: <https://www.hostgator.com.br/blog/conheca-o-html/>. Acesso em: 10/04/2023

[3] A origem do CSS, um pouco da história. Disponível em: <https://www.devmedia.com.br/a-origem-do-css-um-pouco-da-historia/15195>. Acesso em: 10/04/2023

[4] Glossário do MDN Web Docs: Definições de termos relacionados à Web – JavaScript. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Glossary/JavaScript>. Acesso em: 10/04/2023

[5] Leonardo Negrão, Angular vs React vs Vue.js. Disponível em: <https://www.alura.com.br/artigos/angular-vs-react-vs-vue-js>. Acesso em: 12/04/2023

[6] Raquel Rapini, A engenheira que pinta quadros com códigos HTML e CSS. Disponível em: <https://nerdizmo.uai.com.br/a-engenheira-que-pinta-quadros-com-codigos-html-e-css/>. Acesso em: 15/04/2023

[7] Raquel Rapini, A obra de arte de Inteligência Artificial leiloada por 400 mil dólares. Disponível em: <https://nerdizmo.uai.com.br/a-obra-de-arte-de-inteligencia-artificial-leiloada-por-400-mil-dolares/>. Acesso em: 15/04/2023

[8] Ritam Chakraborty, Rolex. Disponível em: <https://codepen.io/RitamChakraborty/pen/eYjJPZX>. Acesso em: 17/04/2023

[9] Julian Garnier, CSS 3D Solar System. Disponível em: <https://codepen.io/juliangarnier/pen/krNqZO>. Acesso em: 17/04/2023

[10] Bruno Imbrizi, Programação criativa: produza peças visuais com JavaScript. Disponível em: <https://www.domestika.org/pt/courses/2729-programacao-criativa-produza-pecas-visuais-com-javascript/course>. Acesso em:18/04/2023

8 – Outros artigos sobre o mesmo assunto

Os 3 primeiros artigos listados a seguir tratam do tema Computação Gráfica e foram os últimos que eu publiquei aqui na DIO. Como essa área tem um componente muito forte de imagens artísticas, recomendo a leitura deles como assunto relacionado ao deste artigo que você acabou de ler.

Os 2 artigos seguintes tratam de desenvolvimento frontend, usando as linguagens HTML, CSS e JS, bem como dos frameworks para frontend.

Computação Gráfica 1: a história e o que eu vivenciei

https://web.dio.me/articles/coputacao-grafica-1-historia-e-o-que-eu-vivenciei?back=%2Farticles&page=1&order=oldest

Escrito por: Fernando Araujo

Computação Gráfica 3: técnicas básicas para a implementação

OBS: a ser publicado, ainda hoje.

Escrito por: Fernando Araujo

Computação Gráfica 4: Como é o meu processo de escrita de um artigo (sobre Computação Gráfica)

https://web.dio.me/articles/como-e-o-meu-processo-de-escrita-de-um-artigo-sobre-computacao-grafica?back=%2Farticles&page=1&order=oldest

Escrito por: Fernando Araujo

A Triforce do Front-end

https://dio.me/articles/a-triforce-do-front-end

Escrito por: Luis Zancanela

Conheça o Quarteto fantástico do Desenvolvimento web

https://web.dio.me/articles/conheca-o-quarteto-fantastico-do-desenvolvimento-web?back=%2Fhome&page=1&order=oldest

Escrito por: Luiz Café