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:
- Não saber o que fazer com a ferramenta;
- 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 InstagramA post shared by Adhemas Batista (@adhemas) on
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:
- Desenhar essa elipse dividida em arcos, que será meu brush;
- 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