Aula 1 - Alterando um código pronto no Processing

Olá. Enfim, depois de algum tempo sem postagens, eis que voltamos às aulas e com elas uma série de atividades que movimentarão esse espacinho d'interaction.

Pois, pois. Agora é a vez da disciplina de Matemática Aplicada à Multimídia I cantar de galo por aqui. E o primeiro desafio logo dá ao Processing um lugar especial. O desafio é apresentar, alterar e discutir um dos exemplos disponíveis na página do programa relacionando-o ao conteúdo do documentário “Hello Word!Processing” que nada mais é do que um “merchanzinho” da linguagem que existe desde 2001, desenvolvida por Casey Reas e Ben Fry e  é  utilizada para desenvolvimento de artes visuais, em sua maioria.
 

O exemplo escolhido foi o código que leva o nome de “Pointillism” que nada mais é do que um código que processa na tela a formação de vários pontos com tamanhos diferentes a depender do deslocamento do mouse, para direita ou para esquerda, baseando-se na imagem de base (um arquivo jpg) e utiliza as cores dessa imagem para colorir esses pontos. Caso o mouse seja movimentado para a direita os círculos se tornam maiores e para a esquerda, menores. Também ocorre uma mudança de cor, baseada no pixel da posição (x,y) da imagem escolhida e forma aleatória.

Vamos aos comentários e às pequenas modificações. Nessa primeira parte do código (void setup) resolvi ampliar a diferença entre o menor tamanho do ponto “smallpoint” e o maior “largepoint” para obter uma melhor variação do preenchimento. Os valores para as funções do background e imageMode foram mantidas, porém carreguei uma imagem minha para mudar as cores dos círculos.

void setup() {

  size(640, 360);

  img = loadImage("flowers.jpg");

  smallPoint = 2;

  largePoint = 100;

  imageMode(CENTER);

  noStroke();

  background(255);

}

Código rodando:

Imagem alterada:

 

Na segunda parte, diminuí a transparência na função de preenchimento dos círculos para criar mais sutileza na imagem formada. Mantive os círculos aparecendo randomicamente e variando o tamanho conforme o deslocamento do mouse no eixo x.

void draw() {

  float pointillize = map(mouseX, 0, width, smallPoint, largePoint);

  int x = int(random(img.width));

  int y = int(random(img.height));

  color pix = img.get(x, y);

  fill(pix, 70);

  ellipse(x, y, pointillize, pointillize);

}

Isso é tudo! Gostaria de ter feito mais modificações, principalmente na função map(), porém não consegui rastrear a sintaxe e entender o que ela faz dentro do código.

De início foi o que deu pra ser feito. Preparando-me desde já para as próximas que virão.