A primeira edição do Continuum está acontecendo no Recife desde semana passada e conta com um bocado de atividades super empolgantes para qualquer um interessado na combinação de Arte e Tecnologia, seja para bater um bom papo, colocar a mão na massa ou curtir os mais variados experimentos audio-táctil-visuais.
O feriado em Recife talvez tenha afastado o público de um interessantíssimo woskshop realizado por Cristiano Rosa (panetone) tratando de Circuit Bending. Apesar da lotada pré-inscrição, poucas pessoas se apresentaram para trocar idéias e aprender um pouco sobre como dar voz à nossa aparentemente inutilizável sucata eletrônica. As coisas começaram com Cristiano mostrando um pouco do que tinha feito, como um hacking para um Furby (um gremlin-like robot toy) e alguns módulos que atuavam como filtros para um sequenciador, tudo feito de uma maneira muito simples. Ao contrário da maioria dos tutoriais sobre “como montar sua própria buginganga-eletrônico”, ninguém precisou ter um background sólido sobre componentes eletrônicos para começar a desmontar os toca-fitas, joysticks e teclados e criar os efeitos mais inesperados.

É incrível a diversidade do potencial de criação que temos à mão se não esperarmos pela prateleiras. Sem sombra de dúvida vale à pena dar uma olhada no livro do Reed Ghazala, pioneiro e difusor no Circuit Bending para começar com umas boas (des)montagens.

p.s: o próprio panetone irá se apresentar no Continuum, na Torre Malakoff, no próximo Domingo, tocando nos instrumentos que ele criou.

Há um tempo, quando vi uns vídeos do AntiVJ (técnica, live painting e building projection) sobre Projection Mapping, fiquei muito instigado com a quantidade de possibilidades que aquilo abria e com o impacto visual. Naquela hora aquilo parecia muito distante, pois supostamente utilizava técnicas obscuras e muito avançadas de projeção, de forma que eu mantive minha cabeça com outros focos, vez por outra pensando em como seria bom dar umas projetadinhas por aí.

Ontem, eu e jeraman projetamos. E, como acontece com a maioria das coisas que experimentamos, não é nada de mais. O vídeo abaixo tenta mostrar o que fizemos ontem: a gente arrasta os pontos e especifica onde queremos projetar. O efeito que aplicamos foi o de uma luz que rotaciona ao redor da caixa, mas as coisas podem ser BEM mais elaboradas (vide links de vídeos acima).

A técnica é bem simples. Para direcionar a projeção, você projeta o que quiser onde quiser e “projeta preto” – ou seja, não projeta - onde não quiser que nada seja projetado. Utilizamos o vvvv, um framework bastante interessante para trabalhar com síntese de vídeo/animação/áudio em tempo real. O legal dela é que é BEM fácil de usar e MUITO modular. Mesmo para quem não é programador. A programação é totalmente visual, daí que nós não escrevemos If-elses e whiles, mas simplesmente ligamos caixinhas. Além disso, muita coisa já está pronta para facilitar nosso tratamento de câmera, iluminação, interação etc. E mais! Você quer uma partezinha de outro projeto que lidava com, digamos, a fonte de luz? É só dar um copia-e-cola que você importa para o seu projeto na hora, depois é só ligar os fiozinhos. Se você não entende uma “caixinha”, dá um F1 que ele abre uma janela explicando e ainda com uma aplicação-exemplo.

parte do codigo VVVV

Daí, mais uma para o saco das técnicas-super-empolgantes-aparentemente-complicadas desmistificadas.

O código tá aqui, mas no próprio site do vvvv você pode achar muita coisa que o pessoal coloca.

Não sei ao certo quão válido seria escrever palavras introdutórias a um blog que não sabe dele próprio o que será. Assim, dispenso algumas voltas, algumas ilusões, entusiasmos e até talvez inconsistências de roteiro. Mas, para uma escassez de introdução, melhor que não me perca tanto introduzindo o que não vou introduzir e, assim, vou direto ao ponto.

Há um tempo comecei a estudar uma linguagem chamada Processing, que me traria facilidades para programar visualmente, lidando com imagens, animações e interação. A motivação de ter tal linguagem e ambiente (ainda mais open-source) já era o bastante, mas as coisas só melhoraram quando vi que aquilo era realmente uma mão na roda: fácil de programar e com resultados rápidos em poucas linhas de código.

Segundo seus fundadores, Processing foi desenvolvida para que qualquer pessoa interessada chegasse e construísse seus projetos: estudantes, artistas ou entusiastas. Instalações artísticas e projetos de visualização de dados têm sido grandes usuários. A linguagem é realmente fácil de programar, sendo bastante acessível a qualquer pessoa que tenha alguma noção de lógica de programação. Além disso, é uma potencial alternativa para aprender um pouco de programação, produzindo resultados quase instantâneos e de maneira divertida. Mais informações sobre ela estão no site, no qual o ambiente+linguagem está disponível para download. Aninha também escreveu mais coisas sobre Processing e sua ligação com outras tecnologias (Arduino e Wiring).

No exemplo que fiz pra esse post, ilustro a utilização de animação e interatividade para apresentar a linguagem. Uma linha percorre um pedaço da tela e nós podemos controlar a cor da parte em movimento, adicionando azul, vermelho ou verde (só clicar nas bolinhas).

Uma breve explicação do funcionamento geral:

• A função setup() é chamada uma vez, quando a aplicação é carregada. Nela criei a tela e desenhei os “botões” das cores;

• A função draw() é acionada repetidamente durante a execução do programa. Assim, para a linha se mover, eu apenas precisei alterar a posição de sua extremidade na tela (e essa alteração é feita repetidamente, resultando na animação);

• mousePressed() é chamada quando (adivinhem!) pressionamos o mouse. No exemplo, eu altero a cor atual de forma modular (quando chega ao máximo de verde, volta para o “nenhum verde”).

ps: Algumas pessoas estavam tendo dificuldades em colocar um applet do Processing pra rodar no Wordpress. Para colocar este aqui, precisei apenas do seguinte HTML, indicando onde está o arquivo JAR e o nome da classe:

<div>
<p>
<APPLET name="mouse_and_animation" WIDTH="400" HEIGHT="400"  standby="Loading Processing software..." 
archive="http://wouwlabs.com/blogs/braga/files/mouse_and_animation.jar"
codebase="http://www.wouwlabs.com/blogs/braga" code="mouse_and_animation" mayscript="true" 
scriptable="true" boxmessage="Loading Processing software..."></APPLET>
</p>
</div>

código-fonte:

int X_LEFT_BOUND = 200;
int X_WIDTH = 150;
int y = height/2;
int xspd = 1;
int yspd = 1;
int objR = 255;
int x, objG, objB;
color objColor;

void drawCircles(){

fill(0, 0, 255);
ellipse(80, 90, 70, 70);

fill(0, 255, 0);
ellipse(80, 200, 70, 70);

fill(255, 0, 0);
ellipse(80, 310, 70, 70);
}

void setup(){
size(400, 400);
background(0, 0, 0);
noStroke();
fill(50, 90, 50);
rect(0, 140, 400, 120);
fill(255, 255, 255);
rect(X_LEFT_BOUND, 0, X_WIDTH, 400);
x = X_LEFT_BOUND;
frameRate(50);
drawCircles();
}

void draw(){
objColor = color(objR, objG, objB);
fill(objColor);
rect(x, y, 10, 10);
x += xspd;
y += yspd;

if((x >= X_LEFT_BOUND + X_WIDTH -10) || (x <= X_LEFT_BOUND)){
xspd = -xspd;
}

if(y >= height || y <= 0){
yspd = -yspd;
}

}

void mousePressed(){
if(mouseX <= 115 && mouseX>= 45){

if(mouseY >= 55 && mouseY <= 125) {
objB = (objB + 10)%255;
}
else if(mouseY >= 165 && mouseY <= 235) objG = (objG + 10)%255;
else if(mouseY >= 275 && mouseY <= 345) objR = (objR + 10)%255;
}
}