A cópia como ferramenta de aprendizado de programação

Tive a oportunidade de ministrar duas oficinas sobre programação visual para iniciantes, as duas utilizando o NodeBox 3 e com o foco em utiliza-la como ferramenta de design. Nas duas oficinas me deparei com a seguinte dificuldade dos alunos:

1. Não saber o que fazer com a ferramenta;
2. Como aprender coisas novas.

Uma coisa muito simples que me ajuda com essas dificuldades é: copiar coisas.

Geralmente no design temos bastante dificuldade com a ideia de copiar algo do outro, já que somos sempre puxados a sermos super criativos e inovadores. As duas dificuldades se relacionam, por que para aprender mais você precisa praticar, só que para praticar você precisa ter um objetivo. Então sem o objetivo claro, você não consegue buscar motivos para aprender coisas novas daquela linguagem.

1. Não saber o que fazer com a ferramenta: copie a idéia

Elimine inicialmente a parte criativa da coisa e tente copiar algo que você imagine ser possível ser feito naquela ferramenta. Assim você não fica com aquela coisa de ficar olhando para um documento em branco.

O que você vai tentar reproduzir não precisa ser necessariamente um trabalho feito com aquela ferramenta especifica. Você pode pegar a ideia de obras de arte, fotografias, da natureza, etc.

Obviamente não tente começar com algo muito mirabolante, procure por algo que você consiga bater o olho e imaginar um começo de caminho.

Faça o estudo por etapas, procure entender quais são as partes daquele problema para chegar no resultado final.

2. Como aprender a sintaxe da linguagem: Copie pedaços de outras pessoas

Em programação um hábito muito comum é aprender com exemplos, geralmente as ferramentas não tem muitos tutoriais mas vem com vários exemplos do que foi feito com ela. Então abrir esses exemplos, analisar o que tá acontecendo, copiar pedaços e combinar com outros pedaços ou criar por cima daquilo é sempre um bom caminho para aprender recursos novos.

Também pode ser uma forma de resolver problemas, as vezes é possível encontrar exemplos de coisas parecidas com o que queremos fazer e assim ao estuda-las conseguimos inserir a lógica daquele projeto em outras coisas.

Como isso acontece na minha prática

Ontem a noite estava olhando algumas coisas no Instagram e cruzei com esse trabalho do designer Adhemas Batista:

View this post on Instagram

A post shared by Adhemas Batista (@adhemas)

Achei genial a forma como ele utilizou uma elipse dividida em arcos para simular as faixas e dar volume ao lettering. Essa lógica de utilizar um "brush" personalizado pode ser facilmente reproduzida em ferramentas de programação.

Para fazer isso, eu preciso basicamente conseguir duas coisas:

1. Desenhar essa elipse dividida em arcos, que será meu brush;
2. Replicar esse brush continuamente em uma linha.

NodeBox

A etapa número 1 é basicamente composta por esses nós:

A primeira etapa feita, parti para segunda com o seguinte conjunto de nós:

E com apenas 12 nós a gente consegue chegar no resultado feito na primeira parte do vídeo do Adhemas Batista.

Processing

Fazia tempo que não mexia com Processing, e apesar de conhecer muito pouco gosto bastante, então resolvi relembrar algumas coisas recriando esse código nele também.

Desculpem a qualidade do código, mas acho que serve como referência de processo.

O Processing exige conhecimentos mais abstratos sobre a linguagem então não vou me ater a explicar passo a passo do código, apenas a lógica geral de cada pedaço.

Para o brush criei o seguinte código:

float brushAngle = 0;
void brush(float x, float y) {
  int qtdArcos = 6;
  float startAngle = 0;
  float stopAngle = startAngle + TWO_PI/qtdArcos;
  pushMatrix();
  translate(x, y);
  
  fill(0, 10);
  ellipse(0, 4, 30, 30);
  
  rotate(brushAngle);
  for (int i = 0; i < qtdArcos; i++) {
    if (i % 2 != 0) {
      fill(200, 255, 0);
    } else {
      fill(0, 200, 255);
    }
    arc(0, 0, 30, 30, startAngle, startAngle + TWO_PI/qtdArcos);
    startAngle = startAngle + TWO_PI/qtdArcos;
  }
  popMatrix();
  brushAngle += 0.01;
}

Nesse código criei uma nova função chamada brush criei exatamente a mesma lógica utilizada no NodeBox: criar uma sequência de arcos coloridos cada um de uma cor até completar um círculo. Algumas diferenças entre o código do NodeBox foi a implementação de uma pequena sombra nesse brush e a rotação nele conforme ele vai sendo utilizado.

Feito isso parti para código da linha:

void linha(float x1, float y1, float x2, float y2) {
  float ix = 0;
  float iy = 0;
  float d = dist(x1, y1, x2, y2);
  if (d > 1) {
    for (int i = 1; i < d; i+=1) {
      ix = lerp(x1, x2, i/d);     
      iy = lerp(y1, y2, i/d);
      brush(ix, iy);
    }
  }
}

Nessa etapa eu poderia ter utilizado somente as variáveis nativas mouseX e mouseY que capturam a posição atual do mouse para posicionar o brush. Porém ao se movimentar muito rápido a linha ficava quebrada, então precisei criar esse pequeno pedaço de código para interpolar umas coordenadas e completar a linha.

A última parte do código é a responsável por colocar as coisas na tela:

void setup() {
  size(800, 800);
  background(255);
  smooth();
  ellipseMode(CENTER);
}
void draw() {
  noStroke();
  noFill();
  if (mousePressed) {
    linha(pmouseX, pmouseY, mouseX, mouseY);
  }
}
void keyPressed() {
  background(255);
}

Acrescentei a ela também uma função para limpar a tela e começar um novo desenho.

—

Com a base feita o legal é ir pensando em modificações que possam ser interessantes, como inserir sombras, experimentar outros brushs, parametrizar tudo, implementar formas de exportação, e por ai vai. Fiz um repositório no GitHub com as versões finais dos dois estudos:

https://github.com/guilhermesv/Estudo-PastaDeDente