Expe­rimen­tos Visuais com Código: Introdução a programação visual

Conceitos

  • Você trabalha mais no processo e menos no resultado
  • Racionalização do processo criativo
  • Geração de possibilidades
  • Autonomia: criar ferramentas, automatização e parametrização
  • Expandir o espaço das ideias
Diagrama ilustrando a ideia de espaço da ideias: o fundo é preenchido de um laranja que esmaece ao chegar nas bordas do diagrama, nesse fundo o texto Espaço das Ideias está escrito em branco, no meio desse fundo um círculo com cortorno branco escrito espaço das ferramentas em sua borda. 3 ideas síbomlizadas como um ponto estão situadas no diagrama: a executável dentro do espaço das ferramentas, uma na borda do espaço das ferramentas chamada adaptável e uma outra bem distante do espaço das ferremntas a ideia impossível.
Interpretação pessoal do diagrama proposto por Erik Van Blokland. Ideias executaveis: aquelas que no espaço das ferramentas que dominamos. Ideias adaptaveis: está fora mais próxima, conseguimos mudar um pouco para realiza-la. Ideias impossíveis: estão fora e muito longe do espaço da ferramentas, nesse a programação pode ser uma forma de alcança-la. Fonte DiaTipo SP 2013 - Erik van Blokland.

2. Programar é sobre se comunicar

Aprender a programar, é aprender uma forma nova de se comunicar e nesse caso inicialmente se comunicar com a máquina. Uma vez que você aprende alguns princípios dessa comunicação, fica um pouco mais fácil de se expressar em diversas linguagens de programação.

Para saber mais sobre esse conceito: Programar nunca foi sobre Código.

3. Pensamento computacional

Para programar exercitamos muito a idéia de pensamento computacional que é:

“a utilização de conceitos fundamentais da computação para resolver problemas, projetar sistemas, e compreender comportamentos humanos” — Jeannette Wing citada por Eduardo Omine

De uma forma bem simples e genérica o pensamento computacional é aplicar alguns conceitos que são muito comuns e diários do universo das ciências computacionais a outros campos e situações. Ter conhecimento de alguns desses princípios pode ajudar a resolver tanto problemas computacionais, quanto qualquer outro tipo de problema ou necessidade projetual.

Destaco aqui 4 conceitos de pensamento computacional:

Abstração

Identificar e extrair o mais relevante de um problema ou informação.

Exemplos: números, mapas, agenda, etc.

Mapa do Metrô de São Paulo
Mapa do Metrô de São Paulo: Fonte Wikipedia.

Algoritmo

Criar uma série de instruções para resolver uma tarefa e tarefas similares.

Exemplos: operações matemáticas (somar, dividir, multiplicar, etc), receita de bolo, jogadas de futebol, etc.

Operação de adição com números decimais
Operação de adição com números decimais. Fonte: Seu saber.

Decomposição

Decompor o problema/informação em porções menores.

Exemplos: uma rota para se chegar a um local, estabelecer um cronograma baseado no tempo gasto em cada uma das etapas, entender o como uma bicicleta funciona a partir de suas peças, etc.

Como chegar da Praça da Sé até a Praça da República em São Paulo
Como chegar da Praça da Sé até a Praça da República em São Paulo. Fonte: OpenStreet Map.

Parametrização

Estabelecer variáveis de controle sobre uma solução ou ferramenta.

Exemplos: controle de volume ou equalizador em um player ou caixa de som, registro da torneira, etc.

(Este é um conceito que não encontrei dessa forma nas bibliografias, mas achei importante ressaltar aqui)

Aparelho de controle de som receiver
Aparelho de controle de som receiver com diversos controles. Fonte: Vintage 70/90.

Projetos com código

É possível explorar diversos caminhos com programação, desde automatizar partes do seu trabalho até criar instalações interativas de arte. Assim como desenhar, a programação pode ser parte da sua rotina profissional ou apenas seu passatempo.

A seguir uma seleção de trabalhos criados com código no NodeBox 3, software que trabalharemos nesta oficina.

Formas

Vídeo do projeto Formas, experimento visual de animação com formas geométricas básicas.

Experimento explorando composições usando três formas primitivas: circulo, quadrado e triângulo. Para cada forma foram feitas 4 animações diferentes, sendo que cada uma delas possui 4 variações de cor e proporção do módulo.

Mais informações aqui

DiaTipo São Paulo 2018

Identidade visual para o DiaTipo São Paulo
Identidade visual para o DiaTipo São Paulo. Fonte: Daó + Deia Kulpas

Identidade desenvolvida pelo Daó junto com a Deia Kulpas para o 10º ano do DiaTipo SP, um encontro de Tipografia sem fins lucrativos. A identidade baseou-se em um padrão gerado a partir de fontes criadas por designers brasileiros, a fim de apresentar o conceito do DiaTipo: um evento construído ao longo de 10 anos por tipógrafos que cresceram junto com o evento.

Mais informações aqui

Nicholas Rougeux

Nicholas Rougeux é designer e artista de dados, em seu trabalho explora as possibilidades de visualizar dados gráficamente.

Cartaz dos dados diário do vento e temperatura durante um ano nas cidades mais populosas de cada estado dos Estados Unidos da América. O cartaz apresenta um fundo azul escuro, o título Weather Portrais 2021 U.S. Cities, uma série de mini diagramas sobre a temperatura em diversas cidades do E.U.A. e ao fim uma legenda explicativa do material.
Cartaz dos dados diário do vento e temperatura durante um ano nas cidades mais populosas de cada estado dos Estados Unidos da América. Fonte: Nicholas Rougeux.
Mais informações aqui

Seohyo

Seohyo é uma artista Sul Coreana que trabalha com arte gerativa, seu trabalho atualmente se manifesta principalmente na criação de animações em loop para apresentar em espaços digitais ou em instalações.

Mais informações aqui
Uma imagem é redesenhada continuamente em uma grade preenchida com linhas horizontais, verticais e diagonais.

Programação Visual e Nodebox 3

Quando falamos em programação logo imaginamos uma tela cheia de códigos escritos, porém essa não é a única maneira de programar. Algumas linguagens trabalham com a programação visual, onde através de uma interface você conecta funções e valores criando o código visualmente.

Tela do prrograma Blender 3d, no lado esquerdo um esquema de nós que são pequenas caixas com entradas e saídas conectadas umas as outras e a direita o resultado do código, um emaranhado de linhas curvas em 3D.
Interface de programação com nós do Geometry Nodes no programa Blender 3d.

Nesta oficina utilizaremos o Nodebox que é um aplicativo que permite por meio da programação visual baseada em um sistema de nós criar peças de design gerativo, animação e visualização de dados em uma interface simples e amigável.

Tela do prrograma Blender 3d, no lado esquerdo um esquema de nós que são pequenas caixas com entradas e saídas conectadas umas as outras e a direita o resultado do código, um emaranhado de linhas curvas em 3D.
Tela do aplicativo Nodebox rodando uma arte generativa. A esquerda a arte e a direita inferior o sistema de nós com o código. Fonte: Nodebox.

Demons­tra­ções

Arquivos criados durante ou para demonstração nas aulas práticas.

Acessar download dos arquivos

Exercícios

Esses são os primeiros exercícios, a ideia é que você experimente criar algo livremente no Nodebox. Caso tenha dúvida das possibilidades ou do que fazer, de uma passeada pelos exemplos do Nodebox (eles ficam no menu “File > Open Examples”) ou veja os códigos que produzi para esses exercícios.

Tente também criar variações da mesma ideia, as vezes um código inicial pode se transformar em uma outra coisa apenas mudando a ordem dos nós ou acrescentando um item diferente.

Experimente, e principalmente se divirta :)

Exercício 01

Criar um padrão geométrico explorando as primitivas básicas e o nó grid.

Padrão regular intercalando estrelas azuis sobre losangos laranjas, e círculos verde claro sobre losangos azuis.
Exemplo de resolução: padrão criado usando retângulos, círculos e estrelas. Cada conjunto de elemento possui uma cor específica.

Exercício 02

Criar uma composição livre utilizando as transformações e o nó copy.

Uma forma circular lembrando uma flor aparece no meio da composição, por trás dessa forma uma repetição dessa mesma forma vai acontecendo de maneira consecutiva aumentando de tamanho. As formas são preenchidas com cores intercaladas de laranja e preto.
Exemplo de resolução: composição criada a partir da rotação e cópia de uma elipse. As cores se alternam entre as camadas.

Desafio:

Recriar algo similar ao resultado abaixo com parametrização do número de colunas e linhas, ou seja ao mudar a quantidade de colunas ou linhas, o padrão deve se ajustar automaticamente:

Padronagem que lembra bandeirinhas de festa junina, retangulares com a base triangular. As cores variam de vermelho, verde, bege, verde, azul e rosa.

Dicas

  • Não se preocupe com a aplicação das cores, elas podem variar de acordo com a lógica que você seguir;
  • Você vai precisar dos nós de matemática para fazer algumas divisões e subtrações;
  • O nó Fit pode ajudar a definir o tamanho dos módulos.

Resolução dos exercícios

Todas as sugestões de resoluções dos exercícios e desafio podem ser baixadas no link abaixo:

Acessar download dos arquivos

Dúvidas, de como baixar o arquivo do GitHub? Clique aqui