quinta-feira, 26 de novembro de 2015

Luis Sacliotto - Concretion 8469, 1984 - Apropriação e aplicação

A obra que escolhi foi essa escultura, Concretion 8469 de Luiz Sacliotto, ano 1984. Feita de alumínio, é composta de duas chapas padronizadas, interligadas por uma terceira chapa em forma de paralelogramo.



Abaixo, temos um desenho com a análise geométrica das chapas padronizadas:


São formadas por 10 pedaços de alumínio cortados geometricamente, dispostos de forma que nos faz lembrar o formato de um losango de altura e largura iguais (da forma do desenho acima). Considerando que m=h/10 (módulo igual à altura dividido por dez), os pedaços de alumino podem ser formados geometricamente por retângulos e triângulos retângulos. A composição geométrica de cada um desses pedaços (contando de cima para baixo) é a seguinte:

·         1 triângulo retângulo de catetos = m;
·         1 triângulo retângulo de catetos = m e 1 quadrado de lado=m;
·         1 retângulo de altura=m e largura=2m e 1 triângulo retângulo de catetos = m;
·         1 triângulo retângulo de cateto =m e um retângulo de altura=m e largura=3m;
·         1 retângulo de altura=m e largura=4m e 1 triângulo retângulo de catetos = m;
·         1 triângulo retângulo de catetos = m e 1 retângulo de altura=m e largura=4m;
·         1 retângulo de altura=m e largura=3m e 1 triângulo retângulo de catetos = m;
·         1 triângulo retângulo de catetos = m e 1 retângulo de altura=m e largura=2m;
·         1 quadrado de lado=m e 1 triângulo retângulo de catetos = m;
·         1 triângulo retângulo de catetos = m;

Minha aplicação desenvolvida no Processing se apropria da forma geométrica dessa chapa principal da escultura. Para isso, criei três funções: trianguloRetanguloA(x,y,l), trianguloRetanguloB(x,y,l), e Sacliotto(x,y,h). As duas primeiras foram criadas para auxiliar na construção do padrão, enquanto a terceira é o padrão em si.

trianguloRetanguloA(x,y,l) cria um triângulo retângulo com origem (x,y) no ângulo reto. Caso o valor de l seja positivo, a hipotenusa fica virada para o 4° quadrante. Se l for negativo, a hipotenusa fica virada para o 2° quadrante.
trianguloRetanguloB(x,y,l) também cria um triângulo retângulo com origem (x,y) no ângulo reto. Caso o valor de l seja positivo, a hipotenusa fica virada para o 3° quadrante. Se l for negativo, a hipotenusa fica virada para o 1° quadrante.

Sacliotto(x,y,h) cria o padrão da chapa principal da escultura na posição (x,y) e com altura h, levando em consideração a análise geométrica feita.


Com a forma apropriada da escultura, desenvolvi uma aplicação que cria uma tecelagem com o padrão na cor preta e o mesmo padrão na cor branca, que preenchem a tela da aplicação.


Resultado final:




CÓDIGO DA APLICAÇÃO COMPLETO E COMENTADO:
void trianguloRetanguloA(int x, int y, int l)
  // desenha triangulo retangulo no ponto(x,y)com origem no angulo reto.
{
  triangle(x, y, x, y+l, x+l, y);
}

void trianguloRetanguloB(int x, int y, int l)
  // desenha triangulo retangulo no ponto(x,y)com origem no angulo reto.
{
  triangle(x, y, x, y+l, x-l, y);
}

void Sacliotto(int x, int y, int h)
  // Cria o padrão de tamanho h nas coordenadas (x,y), de acordo com a análise geométrica.
{
  int m=h/10;//Definindo o módulo.

  //Pedaços do lado direito:
  trianguloRetanguloB(x, y-4*m, -m);
  rect(x, y-3*m, 2*m, m);
  trianguloRetanguloB(x+2*m, y-2*m, -m);
  rect(x, y-m, 4*m, m);
  trianguloRetanguloB(x+4*m, y, -m);
  rect(x, y+m, 3*m, m);
  trianguloRetanguloA(x+3*m, y+m, m);
  rect(x, y+3*m, m, m);
  trianguloRetanguloA(x+m, y+3*m, m);

  //Pedaços do lado esquerdo:
  rect(x-m, y-4*m, m, m);
  trianguloRetanguloA(x-m, y-3*m, -m);
  rect(x-3*m, y-2*m, 3*m, m);
  trianguloRetanguloA(x-3*m, y-m, -m);
  rect(x-4*m, y, 4*m, m);
  trianguloRetanguloB(x-4*m, y, m);
  rect(x-2*m, y+2*m, 2*m, m);
  trianguloRetanguloB(x-2*m, y+2*m, m);
  trianguloRetanguloB(x, y+4*m, m);
}
void setup() {
  size(500, 500); //Definindo o tamanho da tela da aplicação.
  noStroke();
  fill(0);
  background(128);
}
int x=0;
int y=0;
int h=100;// Definindo o tamanho dos padrões.
void draw() {
  fill(0);
  Sacliotto(x, y, h);
  //Cria um padrão preto na posição(x,y).
  fill(255);
  Sacliotto(x+h/2, y+h/2, h);
  /*Cria um padrão branco na posição (x+h/2,y+h/2).
   Dessa forma, os padrões brancos ficam sempre posicionados
   entre 4 padrões pretos, e vice versa.*/
  x+=h;
  // Incrementa x em h. Dessa forma, o padrão repete-se horizontalmente.
  if (x>width+h) {
    x=0;
    y+=h;
  }
  /* Incrementa y em h quando x>largura+h. Dessa forma, garantimos que
   independentemente do tamanho da tela da aplicação, o padrão se repita
   horizontalmente e verticalmente também, preenchendo completamente a tela.*/

  if (y>height && x>width) {
    stop();
  }
  /* Para a aplicação quando y>altura e x>largura da tela da aplicação,
   ou  seja, quando preencher completamente a tela*/

}

segunda-feira, 23 de novembro de 2015

Funções e Procedimentos - Economizando código

    Basicamente, usar funções e procedimentos em seus códigos deixam o mesmo mais organizado. Como os algoritmos já estão definidos, basta uma linha de código para chamá-los. Assim, não é necessário escrever todo o algoritmo de novo cada vez que for fazer algo no seu programa. não é preciso ficar "inventando a roda" toda vez que for usá-la.

    Por exemplo, caso queira que sua aplicação desenhe um padrão 100 vezes na tela, é melhor escrever o código que desenha esse padrão 100 vezes ou colocar o código desse padrão em uma função e chamá-la 100 vezes? Além de economizar código (e tempo), seu programa fica mais legível e fácil de compreender se utilizar funções e procedimentos.

sábado, 21 de novembro de 2015

Bola quicando - Acelerando as coisas...

Fazer uma bola quicar na tela, aumentando sua velocidade em 1% cada vez que ela quicar.
Segue abaixo o código comentado:

int r=20;
float bolaX= r;
float dX=5;
float bolaY=400;
float dY=5;
void setup(){
  size(800,600);

}
void draw(){
 
    background(0);
  ellipse(bolaX, bolaY, 2*r, 2*r);//cria a bola
   bolaX=bolaX+dX;
   bolaY=bolaY+dY;//movimenta a bola
  if (bolaY>=600-r){
    dY=-(dY+dY/100);
    dX+=dX/100;
  }
  //quica a bola no chão, aumenta a velocidade em 1%
  if (bolaY<=r){
    dY=-(dY+dY/100);
    dX+=dX/100;
  }
  //quica a bola no teto, aumenta a velocidade em 1%
  if (bolaX>=800-r){
    dX=-(dX+dX/100);
    dY+=dY/100;
  }
  //quica a bola na parede esquerda, aumenta a velocidade em 1%
  if (bolaX<=r){
    dX=-(dX+dX/100);
    dY+=dY/100;
  }
  //quica a bola na parede direita, aumenta a velocidade em 1%

}

Um cuidado que tive que ter foi de aumentar em 1% a velocidade em cada dimensão (x,y), cada vez que a bola quicava.
O uso da função MRUV() não seria bom nessa situação, pois nela a velocidade aumenta de acordo com o tempo. Nessa aplicação, a velocidade só aumenta quando a bola encosta uma das paredes.
Depois de certo tempo, o incremento da velocidade é tão grande, que a bola escapa dos limites da aplicação.



Duas bolas - Distancias e geometria

Criando dois círculos que mudam de cor quando o mouse passa por eles, usando distancia2D().
Segue o código comentado:







Um possível resultado:


A da Braun

Criando o A da marca Braun, oscilando seu tamanho.
Abaixo, a referência utilizada:




Segue abaixo o código comentado:


O resultado final:




Bandeira do Brasil

Função mostraBandeiraBrasil(x,y,l), que desenha uma bandeira do Brasil na tela de altura l, na posição (x,y).
                Segundo a lei federal N° 5.700, art. 5°:

Fonte: Wikipédia
Porém, a construção de nossa bandeira será feita somente até o passo IV (círculo no centro).
Segue abaixo o código comentado:
 Funções auxiliares que utilizei.

Função mostraBandeiraBrasil(x,y,l), e execução.
O resultado final:


segunda-feira, 16 de novembro de 2015

Lançamento balístico - Framerate e tempo real

A atividade proposta foi: aumentar o framerate do simulador de lançamento balístico criado em sala de aula para 10 fps, e deixar o simulador em tempo real.
No Processing, a função frameRate() determina quandas vezes por segundo algo no draw() será executado. O default do processing é de 60 fps.


Alterando o framerate para 10 fps, devemos dividir o incremento de tempo por 10 também, para que ao se passar 1 segundo na simulação seja adicionado o total de 1 na variável de tempo dela, deixando a simulação em tempo real.



O lançamento balístico é a associação de dois movimentos: um movimento MRU no eixo x e um movimento MRUV no eixo y.
Segue abaixo o código comentado:






O resultado final, com velocidade horizontal = 30, Velocidade vertical = 100 e aceleração vertical = -10 (gravidade da terra):


Simulador MRU - Colocando cores

A atividade proposta foi adicionar cores ao simulador de MRU, seguindo alguma harmonia cromática.
Optei por uma Harmonia cromática de contraste: com cores bem distintas, é fácil distinguir o fundo das linhas e da bolinha. Fundo preto, linhas verdes e bola branca.
Nas imagens abaixo, temos o código comentado:




O resultado final é esse:

terça-feira, 10 de novembro de 2015

Flores e Pitágoras - Criando um "jardim"

A atividade proposta foi que fosse criada uma função flor3 que criasse uma flor com 4 pétalas nas diagonais, tangentes ao miolo, partindo da função flor2 criada em sala de aula. Depois, o Processing deve imprimir 100 flores dessas na tela e parar a execução.
Segue abaixo o código da função flor2:


E da função circulo, que é utilizada em flor2:


Executando o código abaixo:



A flor2 é retornada.



Partindo da flor2, fiz a função flor3, que cria pétalas nas diagonais. Para isso, fiz alguns cálculos.
  
                                
Como se pode ver na imagem acima, para colocar as “pétalas” das flores foi considerado a existência de um triângulo retângulo imaginário, com a hipotenusa valendo 2r, e os catetos x.

Aplicando o teorema de Pitágoras, temos:
X²+X²=(2r)²
Desenvolvendo...
2X² = 4r²
X² = 2r²
X = r
A coordenada de cada pétala (X e Y) deve ser igual ao valor das coordenadas do miolo e mais ou menos (dependendo da posição da pétala) o valor r  .
As linhas de código da função flor3 são essas:
 
                 
O primeiro circulo() cria o miolo, os demais, as pétalas.
Executando as seguintes linhas de código:
                       
O Processing retorna o seguinte:





E executando essas linhas de código:



Temos a saída de 100 flores de tamanhos randômicos. Adicionei uma escala monocromática para diferenciamento das mesmas:


Código completo:


MousePress - Brincando com os exemplos do Processing

A atividade proposta foi que fosse escolhido um dos exemplos do processing e o mesmo fosse estudado e modificado. O exemplo que eu escolhi foi o seguinte:

O exemplo serve para explicar que alterações podem ser feitas quando algum botão do mouse é pressionado (mousePressed).


 
Nessa parte específica do código, temos uma estrutura de repetição (IF) no draw (que repete a ação nele infinitas vezes, como um motor). Caso o botão do mouse esteja pressionado (IF (mousePressed)) a cor das linhas geradas (o stroke) é mudada para branco (255). Senão (else), para preto (0).
Essas linhas de código fazem com que uma cruz seja gerada na posição do mouse. Se o botão estiver apertado, cruz branca. Senão, preta. A execução do programa fica dessa forma:



Abaixo temos o código alterado por mim:


A modificação está na linha 18, no stroke(). Ao invés de colocar um valor físico e monocromático, fiz com que recebesse 3 valores (RGB): o primeiro varia de acordo com a posição X do mouse, o segundo varia de acordo com a posição  do mouse, e a terceira é um valor randômico de 0 a 255.

A execução do programa fica dessa forma:

Hello World! Processing - Primeiras impressões



Nesse post, falarei sobre minhas observações sobre o documentário “Hello world! Processing”, que basicamente serve como um “Hello World!”, mas não somente da linguagem, mas também da ferramenta e da comunidade do Processing em si.

A grande diferença entre o processing e outras ferramentas de programação é o fato de que também é uma ferramenta bem visual: você escreve o código, o executa, e um resultado gráfico é exibido na tela. Programando imagens, gráficos, simuladores, etc. O fato de haver essa resposta gráfica uniu os programadores, designers e até artistas numa só comunidade, que passam a usar o processing como um sketch book.



Certos algoritmos produzem respostas gráficas tão incríveis e orgânicas que até parece que o criador do algoritmo ensinou um computador a fazer arte. E de fato ele fez.
Pra quem quiser dar uma conferida no documentário, segue o link:

https://www.youtube.com/watch?v=OgupE9snZlQ