As estruturas iterativas são utilizadas para a redução de um código repetitivo. Veja as instruções abaixo:

 

line (0,10,200,10);
line (0,20,200,20);
line (0,30,200,30);
line (0,40,200,40);
line (0,50,200,50);
line (0,60,200,60);
line (0,70,200,70);
line (0,80,200,80);

A sequencia desenha uma série de linhas horizontais pela repetição da função line() e variação apenas das posições verticais (y). Imaginem que para desenharmos um grid de 200 linhas teríamos que repetir essas instruções duzentas vezes! Podemos construir esta repetição de uma forma mais compacta com o uso da estrutura FOR:

 

for (início; teste; atualização) {
          instrução;

 

A instrução inserida no bloco { } será repetida tantas vezes enquanto o teste seja verdadeiro. O início estabelece um valor inicial  para uma variável que será utilizada no teste e atualizada continuamente. Veja o exemplo:

 

for ( int i=0;  i<200;  i++) {

    line (0,0,100,100);

}

 

O código acima pode ser analisado assim:

- inicializamos a variável i com o valor inteiro zero  (int i=0)
-  verificamos se i é menor que 200 e se isso for verdadeiro (i<200)
- executamos a linha  line (0,0,100,100)
- atualiza o valor de i incrementando  (i++)
-
se a condição do teste não for mais verdadeira , ou seja i é maior ou igual  a 200 então
- a repetição encerrada

Resumindo, este código desenha 200 linhas mas repare que sempre é a mesma linha  que se inicia na posição 0,o e termina em 100,100. Vamos alterar o código para desenhar a mesma série, porém variando a posição das linhas:

 

for ( int i=0;  i<200;  i++) {

    line (0,i,100,i);

}

 

Neste novo código aproveitamos o incremento da variável  i cujo valor atualizado substitui as posições verticais do ponto inicial (0,i) e final (100,i) da linha. Veja este código:

 

size (500,500);
for (float x=500; x>20; x/=1.2) {
    line (20,x,480,x);
}

 

Veja o resultado:

 

Repetição FOR

Repetição FOR

 

O valor da variável é usado nas posições vertical das linhas. O valor inicial de é 500 e na repetição é dividido constantemente por 1.2 (x/=1.2) até  atingir um valor igual a 20. Neste caso as linhas são desenhadas de baixo para cima, pois as posições são fracionadas repetidamente formando um padrão decrescente.

O laço da repetição pode ser utilizado para gerar animações controladas. Por exemplo, podemos construir uma animação com  repetição de linhas cujas coordenadas estão associadas à posição do mouse:

 

void setup() {
   size (500,500);
   background(0);
   smooth();
   stroke (255,30);
}

void draw() {
  for (int i=0;i<10 ;i++) {
    line (mouseX,mouseY,mouseX+random(-20,20),mouseY+random(-20,20));
  }
}

 Como foi visto num post anterior, a posição atual do mouse é armazenada nas propriedades mouseX e mouseY. Aproveitamos este ponto para calcular posições de linhas que partem do cursor e terminam em pontos randômicos. Testem a execução passando o mouse sobre o sketch abaixo:


A repetição ocorre 10 vezes  em for (int i=0; i<10; i++) ,logo 10 linhas são traçadas em direções aleatórias partindo do centro do mouse em :

line (mouseX, mouseY, mouseX+random(-20,20), mouseY+random(-20,20) )

Note que no ponto de destino da linha somamos valores aleatórios à posição atual do mouse em  mouseX+random(-20,20) mouseY+random(-20,20). Experimente  variar estes valores para obter padrões diferentes! Vamos fazer esta experiência para conseguir um brush para simular algo parecido com vegetação.

Vamos configurar o sketch:

void setup() {
   size (500,500);
   background(0);
   smooth();
}

Dentro do draw() vamos configurar algumas variáveis:

 Verde – escolhemos o  verde como  cor padrão  variando o matiz nos valores RGB (0,random(30,150),0,random(5,100)) – variamos também a trasparência que pode estar no intervalo entre 5 e 100.

Número de linhas – essa variação determina a quantidade de linhas que partem do centro (posição do mouse) – pode estar no intervalo entre 5 e 15 (random 5,15)

Posição da raiz – as linhas devem partir de um ponto próximo a  posição do mouse – uma distância de 5 pixels é o suficiente random(-5,5). Desdobramos esta propriedade em duas variáveis correspondente as distância verticais e horizontais (posxRaiz e posyRaiz).

Altura  - determina a altura das folhas (linhas) – vamos desenhar linhas verticais que partem da posição da raiz. Neste caso precisamos somar um número negativo na coordenada vertical – utilizamos a função random (-80,20).

Largura – o ponto final das linhas podem estar horizontalmente mais  ou menos distantes do centro. Estabelecemos um valor de 20 pixels para cada lado com random(-20,20).

A repetição (FOR) será inserida na função draw():

 

void draw() {

color verde= color(0,random(30,150),0,random(5,100));
float numLinhas=random(5,15);
float posxRaiz= random(-5,5);
float posyRaiz=random(-5,5);
float altura=random(-80,20); 
float largura=random (-20,20);
  stroke(verde);
  for (int i=0;i<numLinhas ;i++) {
    line (mouseX+posxRaiz,mouseY+posyRaiz,mouseX+largura,
    mouseY+altura);
  }
}

Veja o resultado do sketch utilizando o mouse como brush:

 

 

Experimente alterar a transparência para obter densidades diferentes ou  altura e largura para variação das folhas. No próximo post veremos  o aninhamento de repetições.

Tagged with: