Neste final de semana resolvi me dedicar a aprender algum toolkit javascript para interfaces e gráficos usando canvas. A escolha foi a excelente Closure Library, usada pelo google para construir interfaces como a do Gmail, Google Docs e outras.

O projeto: Fazer um espirógrafo bem básico. O que é um espirógrafo? É uma espécie de “régua” com engrenagens de diferentes tamanhos, com furos a diferentes distâncias do centro, em que você coloca uma caneta e gira para fazer desenhos.

Eu tive uma impressão muito boa da Closure Library, me pareceu concisa, completa e bastante adequada para projetos grandes. Além da biblioteca, faz parte da suite um “compilador”, que otimiza código, reduz seu tamanho ao menor possível e embute toda a aplicação num único javascript, adequado para publicação (como o que foi feito neste script).

No formulário do espirógrafo, “Disk Ratio” é a razão entre os tamanhos do disco menor e do disco maior, “Pen position” é quão longe do centro do disco menor a caneta está posicionada (use a imagem deste post como referência) e Turns é quantas voltas você dará ao redor do disco maior. Scale serve para você aumentar ou diminuir o tamanho do desenho (os desenho acontece no centro de um canvas de 150×150) novos desenhos são adicionados sem que o antigo seja apagado.

Eis o resultado da brincadeira: meu Espirógrafo