Paulo Barbeiro

Esse post é bem curtinho…

Eu estou estudando o SDK do iPhone, e por conta disso estou pesquisando bastante sobre o assunto e tal. E hoje dei de cara com um tópico sobre o assunto no site Programadores de jogos, que achei o fim da picada.

O post começa com alguém perguntando sobre como é desenvolver para o iPhone, especialmente sobre o retorno finaceiro. E para falar de retorno finaceiro, é necessário se falar sobre investimento, que para começar (em termos profissionais) gira em torno de R$3500,00, levando em conta a compra de um iMac básico mais a sua inscrição no iPhone Developer Program. É claro que existem meios mais baratos para quem quer apenas sondar o assunto e ver a cara das APIs, como usar um hackintosh da vida.

O que eu achei o fim da picada nas conversas no fórum, foi o fato de alguns acharem o valor inicial do investimento muito alto inclusive para fins profissionais! O fato é que, se você quer abrir um negócio em um setor de alta-tecnologia e achar que lançar mão R$3500,00 é uma absurdo que torna o seu negócio inviável, é melhor repensar o assunto, afinal em qualquer empresa que eu já trabalhei, havia mais do que isso em cada máquina, fosse Windows ou Mac.

Pra Boi Durmi programação

Esta é a continuação, do tutorial de Processing(www.processing.org).

No tutorial anterior, vimos a criação de um objeto, utilizando o método construtor, e uma método de “auto-exibição”, que consistiam em dois requisitos básicos do nosso objeto. Nesta segunda parte, iremos implementar um método de animação e colisão.

Conforme o objetivo desta aula, nós temos que implementar uma animação, para cada um de nossos objetos. O que vamos fazer é uma função dentro da classe Circulo, para mover cada um de nossos objetos.

Bem, a animação em questão, é algo semelhante a uma bola quicando. Então vamos pensar como fazer esta animação. Primeiramente, o nosso circulo deve ir para baixo, e ao tocar na base na tela, ele deve subir, e ao tocar o topo da tela, ele volta a ir para baixo, e assim infinitamente. Traduzindo esse pensamento para uma linha mais técnica, poderíamos dizer isso da seguinte maneira:

- O objeto inicia de deslocando no eixo y (vertical) no sentido “positivo”

- Toca na base da tela

- muda o deslocamento em sentido “negativo”

Espero que isso tenha ficado compreensível, caso contrário, acho que durante o andamento a coisa ficará mais clara. Então vamos lá, na classe Circulo, a primeira coisa que precisamos fazer é inserir duas novas propriedades, uma chamada ‘direcao’ e outra ‘velocidade’, afinal para qualquer movimento precisamos de uma direção e uma velocidade

Repare que na variável ‘direcao’, já estou atribuindo a ela o valor 1. Mantenha isto em mente, para mais adiante. A variável ‘velocidade’, não possui um valor previamente atribuído, isso porque eu quero atribuir valor a ela via método construtor, assim poderemos alterar valores para cada objeto que instanciaremos futuramente.

Agora no método construtor teremos mais um parâmetro para tratar:

Com essas duas variáveis na mão, vamos fazer a função de movimentação. Vou chamar essa função de mover(). Primeira coisa que faremos, é programar que o objeto se mova para baixo infinitamente.

O que essa função está fazendo é incrementar(”aumentar”), o valor do y, que é usado para o desenho da ellipse(observar função exibe()), com uma formulazinha onde a velocidade vezes a ‘direcao’, é somada ao valor do y, ou seja:

- no primeiro frame, y vale 100.

- quando utilizarmos a função mover(), o y receberá o incremento do valor de velocidade X ‘direcao’, ou seja passará a valer 103 (assumindo que a velocidade receba o valor 3).

Para que essa alteração seja visível, vamos atualizar o código da função setup() e da função draw():

Repare que no método construtor do objeto circ, estou mandando um quarto parâmetro, 3, que será atribuído à velocidade. E na função draw(), repare que temos que chamar a função mover(), do circ. Ou seja, a cada vez que a função draw() é executada, primeiro será exibido o circulo, e então, o seu centro será deslocado(circ.mover()), e no próximo frame, esse deslocamento será percebido como uma animação.

Se você preferir, é possível fazer a chamada da função mover(), de dentro da função exibe() que está na classe Circulo, o resultado será o mesmo.

Finalmente vamos fazer as colisões com a base e o topo da tela.

Vamos adicionar uma estrutura de decisão( uma cláusula if ) na função mover(), para se a base do circulo for igual a base da tela, a direção( 1 ) será multiplicada por -1. Dessa forma, aquela continha que deslocava o centro (Y) do objeto para baixo, começará a deslocá-lo para cima.

Você deve ter reparado que essa animação deixou um rastro, como uma trajetória do nosso circulo, para acabar com isso, coloque a ordem de background() na função draw():

CLIQUE DO MOUSE

Agora vamos fazer o seguinte, criar uma simples efeito de “interação”, fazer o circulo clicável e ao ser clicado, modar de cor, para um tom aleatório.

No Processing, um click de mouse é entendido como um evento( não vou entrar em grandes detalhes do que é um evento, no momento basta compreender que um click de mouse, ou uma tecla do teclado pressionada são eventos do sistema operacional ), e para tratar alguns tipos de evento, o processing possui funções da linguagem, que são as funções de evento.

Para eventos do mouse nós temos as seguintes funções:

mouseClicked() = quando algum botão do mouse é pressionado

mousePressed()= quando algum botão do mouse é pressionado

mouseReleased()= quando algum botão do mouse deixa de ser pressionad

mouseDragged() = quando algum botão do mouse é pressionado, e o mouse movimentado

Essas funções são programadas junto com as funções draw() e setup(). Veja o exemplo abaixo:

Sempre que o mouse é clicado, imprimimos no console de saída a frase “Evento do mouse”. Fassa o teste acima, usando ao invés de mouseClicked(), as outras possibilidades de funções de evento para o mouse.

Agora façamos o seguinte, vamos imprimir na saída de console as coordenadas x e y do mouse, daca vez que o mouse for clicado. Teremos que usar as variáveis mouseX e mouseY, a coisa vai ficar assim:

E a saída de console será semelhante a isto:

Cada uma dessas linhas no console, são as posições do mouse a cada clique. Essa informação vai ser crucial para fazermos com que nosso objeto reaja ao clique.

Agora que temos as coordenadas de cada clique do mouse, podemos criar uma função na nossa classe para verificar, se o clique aconteceu dentro da área do circulo. Isso é super fácil, basta compararmos a posição do clique, com as coordenadas do circulo. O que é necessário se testar, é se o clique aconteceu dentro da área de alcance do raio da ellipse, observe o desenho abaixo:

Esse desenho ilustra um cálculo para medir a distância entre dois pontos. Para fazer esse processo, o Processing nos fornece algumas ferramentas para facilitar a nossa vida, entre elas vamos ver o objeto PVector.

O objeto PVector, é na verdade um vetor. Muitas vezes um vetor e um ponto, são representados da mesma forma, e muitas vezes são utilizados da mesma forma, porém convém lembrar que um vetor deve ser entendido sempre como uma linha, mesmo que sua representação possua apenas duas coordenadas, ele ainda é uma linha com inicio na origem do desenho. Essa propriedade do vetor ser uma linha nos permite uma série de possibilidades, entre elas o cálculo rápido de distâncias.

Vamos então adicionar à classe Circulo, dois objetos do tipo PVector, o v_centro e o v_click, que serão dois vetores, um para o centro do circulo(v_centro) e outro para a coordenada do click(v_click):

Esses objetos só entrarão em funcionamento quando o mouse clicar na tela. Agora é necessário criar uma função para verificar esse processo, a função click(). A função click() irá criar os dois vetores, e comparar a distância entre eles.

O percurso da função é o seguinte:

- atribui x e y do circulo ao vetor v_centro

- atribui as coordenadas do mouse (mouseX e mouseY), ao vetor v_click

- compara a distância entre o v_centro e o v_click( v_centro.dist(v_click) ), e se for menor que o raio(diametro/2), imprime no console “O clique aconteceu dentro do círculo”.

Veja os resultados do console:

Agora que o clique está funcionando, que tal fazermos com que o círculo mude de cor a cada clique? Mas antes disso nós precisamos inserir alguma cor no nosso objeto, porque até agora ele está trabalhando com o padrão do Processing, ou seja, tons de cinza.

Então nós inserimos uma variável do tipo color, na nossa classe, que será então a cor do nosso objeto:

Então lá na função exibe(), iremos colocar uma ordem para que o Processing desenhe nosso círculo com a cor que queremos:

Agora sim, podemos mudar de cor porque temos uma cor inicial. Para fazer tal mudança criaremos a função mudaCor(), abaixo:

tudo que esta função faz é escolher cores de forma aleatória, com valores entre 0 e 255 ( random(0,255) ) para cada um dos tons que compõe o sistema de cores RGB.

Agora tudo que precisamos fazer, é chamar esta função a partir da função click():

Pronto, agora só restam alguns detalhes finais!

FINALIZANDO

Bem, agora que a nossa classe “Círculo” está completa, só faltam alguns toques finais para acabarmos o exercício. Abaixo você pode ver as alterações finais:

A primeira coisa a se notar é que agora estamos trabalhando não mais com um único objeto circ, e sim com array de objetos circ, e neste array temos 8 objetos. Isto nos força a várias alterações no nosso código.

A primeira alteração está na primeira linha. Antes onde declarávamos apenas um objeto, agora declaramos um array:

Circulo[] circ = new Circulo[8];

Quando declaramos um array, declaramos de forma muito parecida a uma variável comum, com a diferença que colocamos um par de colchetes ao fim do tipo do objeto, Circulo[] circ .Nesta linha ainda completei dizendo a quantidade de objetos que este array irá abrigar, new Circulo[8], neste caso 8 objetos.

Com essa alteração agora temos que nos preocupar com a “chamada dos objetos”, ou seja, agora que estamos trabalhando com vários objetos dentro de um array, temos que construí-los um a um, e também chamar a função exibe(), mover() e click(), de cada um deles. Para facilitar nossa vida usamos loops for.

Observe na função setup(), que foi criado um loop, para construir cada um dos objetos do array. O mesmo acontece na função draw(), para chamar a função exibe() e mover() de cada um dos objetos.

Bem, encerro aqui esse exercício, qualquer dúvida é só postar uma mensagem.

Abras.

Processing, Tutoriais arte tecnologia, arte-software, aula, curso, português, Processing, processing.org, programação, Tutoriais, tutorial

Esta série de posts é um resumo das aulas que eu ministrei no SESC Santana, sobre Processing, durante o mês de Novembro.

O curso tinha por principio básico abordar o processo de criação e de produção de um ’software art’, e a crescente utilização de conhecimentos de programação no espaço da criação artística.

Estes posts podem ser seguidos como tutoriais, uma vez que irão focar na produção da aplicação criada durante a oficina. Aqui há um link para que você possa ver o resultado final, lembrando que para visualizar o conteúdo do link, é necessário o plugin JRE (Java Runtime Enviroment ).

Antes de seguir, recomendo que vc dê uma olhadinha nestes links( link1, link2), que são tutoriais bem mais básicos que caso vc já tenha conhecimentos em programação, eles lhe darão um panorama da sintaxe básica do Processing, caso vc não tenha conhecimentos em programação ou esteja iniciando, eles servirão como base para compreensão de certas coisas de suma importância, para que vc possa prosseguir aqui e entender bem do que estou falando.

Se você viu a aplicação que iremos desenvolver, reparou que se trata de um ambiente 3D, com objetos clicáveis, exibição de textos e imagens. Antes que você me chame de louco, por fazer um curso de iniciação utilizando tais recursos, vou me defender. Primeiro, como diz aquela “pérola” do cancioneiro popular brasileiro, “Se tá com medo, porquê veio?”, isso é quase que uma filosofia pessoal, então… fui para as cabeças. Segundo, não acho que programação 3D, em nível básico, seja tão complicada assim, e ela proporciona resultados bem atraentes, então… pq não? Terceiro, e último, para se chegar ao resultado final, percorri muitos passos com os alunos, para ir construindo a familiaridade aos pouco e de forma sólida. E é dessa forma que estou pensando em escrever esses capítulos.

Primeiro começando com orientação a objeto; depois introduzindo princípios 3D; criando novas dificuldades no 3D; um tutorial específico para “picking” (ou select mode), que é a forma de se clicar em objetos 3D; e finalmente finalizando o projeto.

Mãos à obra.

Orientação a objetos.

Vamos aqui usar um exemplo bem simples de como criar um objeto, e para que ele serve.

Algo que eu gosto de fazer, é ao inicio de uma aula mostrar qual o objetivo a ser atingido. Acredito que dessa forma, fica melhor de ser entender a lógica que será empregada, afinal é esse também os passos que se seguem antes de qualquer projeto ser finalizado: o criador imagina e planeja a obra. Ou seja, há sempre alguma pré-visualização, nem que seja mental.

Sendo assim observe o “objetivo” deste tutorial.

Observando o nosso objetivo, você pode ver que faremos uma cena, com círculos que se movimentam verticalmente, e ao serem ‘clicados’ mudam de cor.

Para tentar simplificar o que é orientação a objetos, … ah, não vou dar nenhuma definição, não. Dá uma pesquisada no Google e na Wikipedia, para achar definições melhores do que eu posso fornecer.

Então vamos pensar com como criar esse bendito objeto, que vou chamar de ‘Circulo’. Em uma visão geral, este circulo terá que realizar algumas tarefas:

- se movimentar para baixo e para cima

- colidir com as extremidades da tela

- checar se recebeu um click

- mudar de cor

- se desenhar na tela
Temo um total de 5 tarefas, geralmente chamamos essas tarefas de funções, e quando as funções estão em um objeto chamamos de métodos; mas isso é super técnico, embora seja bom saber, e começar a ficar familiarizado com esses termos.

Para começar, abra um projeto no Processing, salve. Agora abra as funções setup(), e draw() (eu disse para ler os outros tutoriais, lembra…). Vamos criar a nossa classe ‘Circulo’, só para lembrar que classe não é o objeto em sí, mas sim ela é a definição do(s) objeto(s). Depois da função draw(), vamos começar:

Nesse simples código já temos uma classe. Essa classe Circulo que acabamos de criar, ainda não está em uso. O que nó fizemos até aqui foi simplesmente criar a classe, que é a definição de algum objeto que será instanciado futuramente, aí quando intanciamos, teremos nosso objeto. Vamos fazer isso agora.

Para instanciar algum objeto temos que colocar a seguinte linha de código:

Circulo circ = new Circulo();
[classe][nome_objeto] = new [classe()];

Outro ponto que se deve ter em mente é, onde esse objeto deve funcionar? Ele será trabalhado em várias funções, como a setup() e na draw()? Ou não? Nessa hora é que caímos no que se chama escopo de variáveis. No Processing, se uma variável é declarada dentro de uma função ela só poderá ser trabalhada dentro da mesma função, se você tentar trabalhar com ela em outra função…. surgirá um erro. Para trabalharmos as variáveis e objetos em várias funções, o que é bem comum de acontecer, devemos declarar tais objetos como objetos globais, ou seja, fora das funções. Observe que neste código, a declaração do objeto circ, foi feita antes da função setup():

Nesse código acima:

- declaramos o objeto circ

- na função setup(), alimentamos os valores x, y, e diametro do objeto circ.

- na função draw(), só imprimimos os valores de circ no console.

Aqui nós já temos um objeto, porém muito “primitivo”, ele ainda é incapaz de se desenhar na tela, e ainda por cima temos que alimentar seus valores de forma muito rudimentar. Vamos melhorá-lo criando um método construtor, e um método para que ele possa de desenhar na tela.

Método Construtor

Neste objeto, temos apenas 3 valores, o ‘x’, o ‘y’, e o ‘diametro’. Mas no andar da carruagem, nós iremos ampliar este número de variáveis, e ter que alimentar os valores de cada uma, da forma como está sendo feito no momento… ninguém merece. Para facilitar a construção do objetos é que existe o método construtor, com ele nós daremos os valores das variáveis em uma única linha.

Na classe Circulo, insira o código como demonstrado abaixo:

A coisa vai funcionar de seguinte maneira. O método construtor, sempre tem o mesmo nome da classe! Ele é uma função, que vai receber valores, valores que serão usados para alimentar as variáveis iniciais. Por exemplo, o valor de x; O método irá receber um valor chamado cons_X(float cons_X), esse valor então será atribuído à variável x(this.x), da classe Circulo. Simples não?

Agora temos que implementar isso lá na função setup(), para que ao invés de digitar três linhas de código digitemos apenas uma, que seria a seguinte:

circ = new Circulo(100, 100, 100);

porém podemos fazer mais uma alteração, na declaração do objeto, observe:

Com o método construtor, economizamos trabalho na declaração do objeto (agora apenas Circulo circ;) e na atribuição de propriedades, na função setup() (agora apenas circ = new Circulo(100,100,100); )

Função para Exibição

Agora vamos criar um método que permita ao objeto se desenhar na tela. Da mesma forma que o método construtor, essa alteração será feita primeiro na nossa classe e posteriormente, no código “principal” (chamo de código principal as funções setup() e draw(), bem como algumas funções de eventos do processing que veremos mais adiante).

Na nossa classe, abaixo do método construtor, criamos uma função chamada exibe(), que vai desenhar uma ellipse com as características que passamos em ‘x’ e ‘y’, e o diametro. E agora que nossa classe possuí essa função, todos os objetos instanciados a partir dessa classe, possuirão esse método para se desenhar na tela, tudo que teremos de fazer é chamar esse método na função draw():

void draw(){

circ.exibe();

}

e pronto, nosso objeto está aparecendo na tela.

Antes de prosseguir brinque com os valores do método construtor na função setup(), isso pode te tirar algumas dúvidas.

Qualquer dúvida, lança um comentário aqui abaixo!

até

Processing, Tutoriais arte-software, Processing, processing.org, programação, tutorial

Variáveis, Decisão e Repetição

No tutorial de hoje ainda vou fazê-lo escrito, e vou tratar de algo muito básico, ao menos no que tange o conhecimento de programação, que são as estruturas de decisão, e as repetições via loops. Isso porque esse conhecimento é fundamental para se fazer qualquer coisa.

Variáveis

Mesmo para quem era péssimo em matemática, como eu, deve se lembrar do que são variáveis, elementos que recebem valores que podem variar no decorrer das operações.

Em linguagens de programação as variáveis tem a mesma função, com a diferença que programando você vai entendê-las melhor do que em uma equação de segundo gral.

Em programação, as variáveis podem ser de vários tipos, os mais importantes são valores inteiros(int), valores float, textos(strings), caracteres(char) e boleanas(boolean). Vamos ver uma a uma, e escrevendo no Processing.

Variáveis Numéricas

São as variáveis int e float. As variáveis int, são para números inteiros, ou seja, 1, 2, 5, 7, 80, 2845 etc. As variáveis float, são para números decimais, ou seja, 0.5, 2.5, 8.42, 3.1416, etc. Para entender um poco melhor vamos ao código:

Na primeira linha declaramos a variável a como uma variável de numero inteiro, e logo já demos a ela o valor 2. Na segunda linha, declaramos a variável b como uma variável de números decimais(float) e atribuímos a ela o valor 2.5. E na terceira linha estou mandando o Processing, somar a+b, e imprimir o resultado na tela do terminal(parte inferior da tela do Processing, de cor preta!) que será 4.5.

No Processing, como em várias outras linguagens, é necessário se declarar todas as variáveis antes de usá-las, mesmo que vc não dê a ela um valor. Então dessa forma como fizemos você pode alterar os valores de a e b, porém a variável a, não poderá receber um valor decimal, se isso acontecer o Processing retornará um erro. Faça alterações nesses valores, e lembre-se, números negativos são perfeitamente válidos.

Variáveis de texto

As variáveis de texto servem, como se pode deduzir, para receber textos, palavras e caracteres. Vamos aos exemplos.

Neste código a primeira linha declara a variável c que recebe a letra A. Na segunda linha declaramos a variável string d, que recebe a palavra Percival, e nas duas linha finais, pedimos que os valores das variáveis sejam exibidos na tela do terminal. Notem duas coisas importantes:

1ª - quando declaramos uma variável de tipo char, o valor dela deve estar entre aspas simples, e quando declaramos uma string, o valor deve estar entre aspas duplas.

2ª - variável de tipo char, só recebe um caracter como valor, variável tipo String permite um conjunto de caracteres que podem formar palavras ou frases.

Variáveis booleanas

As variáveis booleanas simplesmente armazenam os valores true, ou false. Elas são variáveis lógicas, uma vez que não podem ser utilizadas para cálculos, somente para comparações e condicões.

Como nos exemplos anteriores, declaramos a variável de tipo booleana ‘e’, demos o valor ‘true’; declaramos a variável ‘f’, demos o valor ‘false’; e exibimos o resultado no terminal assim que pressionado o botão RUN.

Decisão

Se você pesquisar na Wikipedia sobre “linguagem de programação” você vai ver que programação é um conjunto de comandos dados de forma lógica e condicional. CONDICIONAL!! Ou seja,

É para isso que servem as estruturas de decisão que veremos agora.

Vamos começar com este código base abaixo:

Até aqui nada de novo… Mas vamos começar a colocar algumas condições para ver o desenho da elipse. na função draw, faremos as seguintes alterações:

Explicando o código. Declaramos a variável ‘posicaoY’ de valores inteiros (int posicaoY;), posteriormente atribuímos a ela o valor mouseY (o valor mouseY, é uma variável ‘nativa’ do Processing, que a todo momento é alimentada pela posição Y do cursor do mouse na tela do programa), e finalmente chegamos à condição, declarada pelo comando if( ). Aqui nos fazemos um teste, if( posicaoY>100 ){, isso significa algo dessa natureza:

Se ( posicaoY é maior que 100 ) {

caso o teste resulte verdadeiro, a ellipse será desenhada.

O comando if faz parte de uma estrutura de decisão, que possui essa sintaxe:

Para as ‘declarações’ do exemplo acima serem executadas o ‘teste’ de resultar verdadeiro (true). No nosso exemplo da ellipse, a variável posicaoY, sempre terá a posição do curso do mouse no eixo Y, então quando o mouse estiver bem no topo da tela o valor dele será, digamos, 10. Logo a resposta para o teste será ‘não verdadeiro”, vejamos:

Então percebemos que o teste só retornará verdadeiro (true) quando a posição do mouse no eixo Y, for maior que 100.

Vejamos outro exemplo:

Neste exemplo, o valor de x determinará, se será desenhado um retângulo ou uma ellipse no desenho. Abaixo há uma tabela com exemplos de decisões e um gráfico mostrando o comportamento do if, de acordo com o resultado do teste. Faça alterações nestes códigos observando as propostas da tabela abaixo.

Operadores lógicos

Os operadores lógicos permitem que mais de uma condição seja avaliada ao mesmo tempo. Esses operadores são símbolos para os significados E, OU, NÃO.

Veja abaixo uma tabela, onde é simulado combinações de resultados de duas expressões em um único teste e seu resultado ‘global’

Com a tabela acima fica claro que, o operador && ( E ) requer que os dois testes sejam verdadeiros, para validar toda a expressão; O operador || ( OU ) requer apenas um dos teste verdadeiros, para validar toda a expressão.

Então vamos a um exemplo de código:

usando este exemplo, faça alterações nos valores das variáveis e veja os resultados, e posteriormente, mude os operadores lógicos entre && e ||.

Repetições

Também conhecidas por iterações ou loops, essas estruturas servem para diminuir o tamanho de códigos com linhas repetidas. Não entendeu? veja os códigos abaixo, ambos fazem a mesma coisa, só que um é bem mais enxuto que o ouro.

Eis o resultado:

Como se pode notar, usando a estrutura de repetição é possível se economizar um bocado de trabalho chato pela frente. Neste exemplo bem simples podemos economizar muito trabalho de digitação usando um loop. Vejamos agora como ele funciona:

Dessa forma o Loop é dividido em inicio, teste, declaração e update. E segue o seguinte roteiro:

1- é dado um inicio. No nosso caso anterior a variável i recebe o valor 20.

2 - é feito um teste. No nosso caso, se a variável i é menor que 150.

3 - se o resultado do teste é true, as declarações são realizadas; se o teste é false as declarações não são realizadas e o loop é encerrado. No caso anterior, a declaração da lina é executada, com os valores da variável i.

4 - a cada declaração realizada, é feito um update de alguma informação, geralmente da variável de iteração, que será usada no teste subseqüente. No nosso exemplo, o valor da variável i aumenta em 10, ou seja, na primeira declaração ele vale 20, na segunda é atualizado para 30, na terceira sobe para 40, até receber o valor de 150, quando o teste resultará false, e o loop termina.

Esse loop, se encerra quando o resultado do teste for igual a false. Portanto é sempre importante prestar atenção se o seu as atualizações que você programou, resultarão em false em algum momento, poque caso contrário, o loop será infinito.

Abaixo existem outros exemplos de loops, estude-os mudando valores de variáveis iniciais, atualizações e testes.

Observe nestes exemplos que alguns possuem estruturas de decisão, e iterações dentre as declarações!
Agora divirta-se com as Iterações, decisões e variáveis… Em mais uma semana postarei um novo tutorias com coisas mais legais.
Se vc quer uma dica do que praticar, faça o seguinte:
Crie texturas mais densas e mais suaves usando o ultimo exemplo de código, e modificando-o usando ellipses, linhas outras formas de rect, e outras primitivas!

Até a próxima!

Processing Processing, programação, tutorial