Trabalho Parte I - Apropriação

Neste trabalho foi pedido para escolher uma obra de arte ou um produto de design, realizar uma analise geométrica do mesmo e desenvolver uma aplicação que se aproprie de suas características.

1. Obra de arte

A obra que eu escolhi foi uma obra do artista Fernando Durão, famoso por suas obras com formas geométrica simples.

Encontrado em: https://www.juicysantos.com.br/exclusivo/agenda-de-santos-e-regiao/fernando-durao-na-pinacoteca-benedito-calixto/


Nesta obra, podemos perceber que há um padrão simples, com impressões de movimento de rotação dos quadrados.

2. Análise Geométrica

Há cinco quadrados na obra e vários triângulos dentro deles, primeiramente vamos analisar as proporções dos quadrados. Tomarei com base o quadrado maior, cujo lado será l, então temos:
  • O segundo quadrado possui 75% de l.
  • O terceiro quadrado possui 56% de l.
  • O quarto quadrado possui 42% de l.
                  Para ficar melhor de entender , "desmanchei" a obra em partes:
Sabendo disso, agora precisamos encontrar os tamanhos dos triângulos. Separando o lado pela delimitação dos triângulos,no qual o menor mede 32% de l e o maior, 68% de l,e criando um pequeno quadrado de lado 0.11*l (11% de l) na extremidade do quadrado maior(esta regra serve para os 3 maiores quadrados), temos:



Para a criação do quadrado menor não será utilizada a mesma regra, já que os triângulos em seu interior são diferentes, para isso também foi criado um pequeno quadrado cujo lado é 0.22*l(22% de l): 



Esses valores, apesar de não parecerem significantes, serão muito úteis para a criação da aplicação. 

3. Desenvolver a aplicação

Antes de começar a aplicação em si, irei replicar a obra no processing.
Primeiramente criei uma função para todos os triângulos na obra, esta função recebe como parâmetros as posições x, y e lado(X,Y,l) do seu respectivo quadrado, o quanto os triângulos vão girar(rot), as cores RGB(R1,G1,B1,R2,G2,B2)de cada triângulo, e dois boolean, um que inverte o quadrado(inverter) e o outro para analisar se o quadrado é o menor(menor).Pode parecer confuso, mas logo irei explicar o porquê de utilizar essas variáveis. Assim fica muito mais fácil determinar as formas na obra:

void triangulos(float X, float Y, float l, float rot, int R1, int G1, int B1, int R2, int G2, int B2, boolean inverter, boolean menor){}






Começo fazendo o primeiro triângulo, os parâmetros do triângulo são as posições X e Y de seus 3 pontos (irei utilizar como base o quadrado maior para a explicação), e irei rotaciona-lo de acordo com a variável rot:






rotate(rot);

fill(R1, G1, B1);

triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.32*l);



















Agora , para fazer o triângulo maior, utilizei dois dos três pontos do triângulo menor:   


    rotate(rot);


    fill(R1, G1, B1);


    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.32*l);


    fill(R2, G2, B2);


    triangle(X, Y, X+0.68*l, Y, X+0.11*l, Y+0.11*l);





















Para não precisar ter q repetir o código do triângulo criei uma outra função, chamada quadrados, nessa função irá ter os quadrados e os triângulos da função triângulos dentro dela. Esta função terá quase todos os parâmetros que tem na função triângulos, a única diferença é que não haverá o parâmetro rot  e irá acrescentar as cores RGB dos quadrados.




void quadrados(float XQ, float YQ, float LQ, int Rq, int Gq, int Bq, int Rt1, int Gt1, int Bt1, int Rt2, int Gt2, int Bt2, boolean inverter, boolean menor) {}









A primeira coisa a ser feita é criar os quadrados, para isso criei um rect();






 fill(Rq, Gq, Bq);


 rect(XQ, YQ, LQ, LQ);





Logo após, chamei várias vezes a função triângulos, alterando apenas a rotação(rot) de cada uma:




fill(Rq, Gq, Bq);


rect(XQ, YQ, LQ, LQ);   


triangulos(XQ, YQ, LQ, 0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
          triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
          triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
          triangulos(XQ, YQ, LQ, 1.5*PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);

























Para poder repetir os quadrados junto com os triângulos criei outra função chamada obra, esta função irá receber apenas um parâmetro que será o lado do quadrado maior, assim apenas alterando o valor do lado será possível alterar o tamanho de toda a obra:






void obra(float lado1) {}









Como analisado anteriormente, foi determinado que os quadrados menores são uma porcentagem do quadrado maior, então irei colocar dentro da função obra:




  float lado2=0.75*lado1;
            float lado3=0.56*lado1;
            float lado4=0.42*lado1;





 O segundo quadrado está com os triângulos invertidos e o quarto quadrado é diferente, para resolver esse problema, irei até a função triângulos modificar para que atenda a esses requisitos. Agora utilizarei as boolean inverter e menor:








if ((inverter==false) && (menor==false)) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.32*l);
    fill(R2, G2, B2);
    triangle(X, Y, X+0.68*l, Y, X+0.11*l, Y+0.11*l);
  } else if ((inverter==true)&&(menor==false)) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X+0.32*l, Y);
    fill(R2, G2, B2);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.68*l);
  } else if (menor==true) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.22*l, Y+0.22*l, X, Y+l);
    fill(R2, G2, B2);
    triangle(X, Y, X+l, Y, X+0.22*l, Y+0.22*l);
  }




 







Este código afirma o seguinte, se inverter e menor forem false eu crio os triângulos normalmente como já feito anteriormente.Se se inverter for true e menor for false eu apenas desenho os triângulos invertidos. Se menor for true será desenhado apenas o quadrado menor.















Aplicando essa mesma lógica na função quadrados, temos:






 if (menor==false) {
    triangulos(XQ, YQ, LQ, 0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, 1.5*PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
  } else if (menor==true) {
    triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
  }











Voltando para a função obra, falta apenas colocar a função quadrados de acordo com o lado e também a função translate() para resetar as posições 0,0 para o centro da tela(esta função será muito útil futuramente):





  float lado2=0.75*lado1;
  float lado3=0.56*lado1;
  float lado4=0.42*lado1;
  translate(width/2, height/2);
  quadrados(-lado1/2, -lado1/2, lado1, 10, 30, 65, 60, 127, 187, 20, 90, 160, false, false);
  rotate(PI/2.8);
  quadrados(-lado2/2, -lado2/2, lado2, 140, 130, 200, 210, 200, 220, 180, 175, 225, true, false);
  rotate(PI/1.56);
  quadrados(-lado3/2, -lado3/2, lado3, 130, 20, 40, 230, 140, 190, 190, 50, 105, false, false);
  rotate(PI/2.8);
  quadrados(-lado4/2, -lado4/2, lado4, 230, 40, 0, 250, 160, 120, 250, 100, 40, true, true);






*Os valores dos lados estão negativos porque o centro da tela é 0,0(não irá alterar os valores reais).










Concluindo então. segue como ficou o código completo:


void setup() {


size(600, 600);


noStroke();
}

void triangulos(float X, float Y, float l, float rot, int R1, int G1, int B1, int R2, int G2, int B2, boolean inverter, boolean menor) {
  rotate(rot);
  //RGB1= cores claras, RGB2= cores escuras
  if ((inverter==false) && (menor==false)) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.32*l);
    fill(R2, G2, B2);
    triangle(X, Y, X+0.68*l, Y, X+0.11*l, Y+0.11*l);
  } else if ((inverter==true)&&(menor==false)) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X+0.32*l, Y);
    fill(R2, G2, B2);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.68*l);
  } else if (menor==true) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.22*l, Y+0.22*l, X, Y+l);
    fill(R2, G2, B2);
    triangle(X, Y, X+l, Y, X+0.22*l, Y+0.22*l);
  }
}

void quadrados(float XQ, float YQ, float LQ, int Rq, int Gq, int Bq, int Rt1, int Gt1, int Bt1, int Rt2, int Gt2, int Bt2, boolean inverter, boolean menor) {
  // XQ= posicao x do quadrado, YQ=posicao y do quadrado , LQ= lado do quadrado RGBs = cores, inverter= inverte o quadrado, menor= é uma booleano que diz se é o quadrado menor ou nao

  fill(Rq, Gq, Bq);
  rect(XQ, YQ, LQ, LQ);
  if (menor==false) {
    triangulos(XQ, YQ, LQ, 0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, 1.5*PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
  } else if (menor==true) {
    triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
  }
}

void obra(float lado1) {
  //lado parametrizado, mudando o valor do lado1, muda a proporção da obra.
  float lado2=0.75*lado1;
  float lado3=0.56*lado1;
  float lado4=0.42*lado1;

  translate(width/2, height/2);
  quadrados(-lado1/2, -lado1/2, lado1, 10, 30, 65, 60, 127, 187, 20, 90, 160, false, false);
  rotate(PI/2.8);
  quadrados(-lado2/2, -lado2/2, lado2, 140, 130, 200, 210, 200, 220, 180, 175, 225, true, false);
  rotate(PI/1.56);
  quadrados(-lado3/2, -lado3/2, lado3, 130, 20, 40, 230, 140, 190, 190, 50, 105, false, false);
  rotate(PI/2.8);
  quadrados(-lado4/2, -lado4/2, lado4, 230, 40, 0, 250, 160, 120, 250, 100, 40, false, true);
}
void draw() {
  background(0);

  obra(500);
}

















3.1. Apropriando-se de verdade



Após a construção do código da obra, veio uma ideia apenas de transformar os quadrados em círculos, ajustando assim os triângulos, porém não iria ficar legal, então tive outra ideia de deixar as pontas dos triângulos na posição central da tela, como foi utilizado o translate(), seria a posição 0,0.  A forma ficaria muito parecida com uma rosa dos ventos:














Encontrado em: http://www.buscaescolar.com/geografia/aprendendo-a-se-localizar/









Persistindo nesta ideia, porém com algumas observações:




    

  • o ponteiro maior irá seguir o mouse;
    • 

  • os ponteiros irão rotacionar em escalas diferentes.
    • 

















Criei esta aplicação sem compromisso que mostra a progressão da transformação da obra. Primeiramente todos os quadrados ficam com 0 de rotação, logo depois os retângulos são retirados, em seguida os triângulos começam a ficar centralizados, finalizando então com os círculos aparecendo, com os diâmetros iguais ao lado de seus respectivos quadrados.











Houve poucas alterações de fato, uma delas é que agora a função quadrados irá se chamar circulos. mas a grande mudança é na função obra, que irá receber um parâmetro a mais(rotacao), que irá determinar o angulo que a obra irá girar e os valores X e Y agora serão centrais:


void obra(float lado1, float rotacao) {
  //lado parametrizado, mudando o valor do lado1, muda a proporção da obra.
  float lado2=0.75*lado1;
  float lado3=0.56*lado1;
  float lado4=0.42*lado1;

  translate(width/2, height/2);

  rotate(rotacao);
  circulos(0, 0, lado1, 10, 30, 65, 60, 127, 187, 20, 90, 160, false, false);
  rotate(rotacao);
  circulos(0, 0, lado2, 140, 130, 200, 210, 200, 220, 180, 175, 225, true, false);
  rotate(rotacao);
  circulos(0, 0, lado3, 130, 20, 40, 230, 140, 190, 190, 50, 105, false, false);
  rotate(rotacao);
  circulos(0, 0, lado4, 230, 40, 0, 250, 160, 120, 250, 100, 40, true, true);
}











Para fazer com que a "rosa dos ventos" rotacione de acordo com o mouse foi preciso criar uma função chamada girar, esta função não irá receber parâmetros. Criei outras variáveis chamadas de xAngulo, yAngulo, angulo e suave que são variáveis necessárias para a função. utilizei também a função lerp() que vai determinar a suavidade do giro, a função atan2() que calcula o angulo em radiano de um ponto específico, nesse caso da posição do mouse. Ficará assim:




void girar() {
  xAngulo=lerp(xAngulo, mouseX, suave);
  yAngulo=lerp(yAngulo, mouseY, suave);
  angulo=-(atan2(xAngulo-width/2, yAngulo-height/2)); 
  obra(400, angulo);
}






A obra agora será chamada dentro dessa função, não mais no draw().

Código completo modificado:


//xAngulo e yAngulo são variaveis necessárias para determinar a suavidade.
float xAngulo;
float yAngulo;
float diametro=400; //diametro da obra em geral
float angulo;//valor do angulo do mouse de 0 á PI.
float suave=0.04; //o quão suave será a rotação, quanto menor o valor, mais suave.

void setup() {
  size(600, 600);
  noStroke();
}

void triangulos(float X, float Y, float l, float rot, int R1, int G1, int B1, int R2, int G2, int B2, boolean inverter, boolean menor) {
  rotate(rot);
  //RGB1= cores claras, RGB2= cores escuras
  if ((inverter==false) && (menor==false)) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.32*l);
    fill(R2, G2, B2);
    triangle(X, Y, X+0.68*l, Y, X+0.11*l, Y+0.11*l);
  } else if ((inverter==true)&&(menor==false)) { 
    fill(R1, G1, B1);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X+0.32*l, Y);
    fill(R2, G2, B2);
    triangle(X, Y, X+0.11*l, Y+0.11*l, X, Y+0.68*l);
  } else if (menor==true) {
    fill(R1, G1, B1);
    triangle(X, Y, X+0.22*l, Y+0.22*l, X, Y+l);
    fill(R2, G2, B2);
    triangle(X, Y, X+l, Y, X+0.22*l, Y+0.22*l);
  }
}

void circulos(float XQ, float YQ, float LQ, int Rq, int Gq, int Bq, int Rt1, int Gt1, int Bt1, int Rt2, int Gt2, int Bt2, boolean inverter, boolean menor) {
  

  fill(Rq, Gq, Bq, 150);
  ellipse(XQ, YQ, LQ, LQ);
  if (menor==false) {
    triangulos(XQ, YQ, LQ, 0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, 1.5*PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
  } else if (menor==true) { 
    triangulos(XQ, YQ, LQ, PI/2.0, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
    triangulos(XQ, YQ, LQ, PI, Rt1, Gt1, Bt1, Rt2, Gt2, Bt2, inverter, menor);
  }
}
void girar() {
  xAngulo=lerp(xAngulo, mouseX, suave);
  yAngulo=lerp(yAngulo, mouseY, suave);
  angulo=-(atan2(xAngulo-width/2, yAngulo-height/2)); 
  obra(diametro, angulo);
  println(angulo);
}
void obra(float lado1, float rotacao) {
  //lado parametrizado, mudando o valor do lado1, muda a proporção da obra.
  float lado2=0.75*lado1;
  float lado3=0.56*lado1;
  float lado4=0.42*lado1;

  translate(width/2, height/2);

  rotate(rotacao);
  circulos(0, 0, lado1, 10, 30, 65, 60, 127, 187, 20, 90, 160, false, false);
  rotate(rotacao);
  circulos(0, 0, lado2, 140, 130, 200, 210, 200, 220, 180, 175, 225, true, false);
  rotate(rotacao);
  circulos(0, 0, lado3, 130, 20, 40, 230, 140, 190, 190, 50, 105, false, false);
  rotate(rotacao);
  circulos(0, 0, lado4, 230, 40, 0, 250, 160, 120, 250, 100, 40, true, true);
}
void draw() {
  background(0);
  girar();
}




Os círculos sempre vão girar 90° a mais que o seu anterior.

















  
    
    
    
  
  
    
    
    
  







Extra: Aplicação explicativa em .pde
















































Comentários











Postar um comentário



















Postagens mais visitadas deste blog









Exercício 6 - Bandeira do Brasil




















Imagem







               Este exercício será necessário criar uma função que desenhe a bandeira do Brasil, em suas proporções considerando a Lei Federal Nº 5.700.                 Algumas considerações:    a altura da bandeira terá 14 módulos;  a largura da bandeira terá 20 módulos;  cada vértice do losango terá a distância de 1 modulo e 7 décimos do retângulo;  o círculo se dispõe no centro do losango com um raio de 3 módulos e meio.                      Segue o código:     // a bandeira é proporcional á altura, mudando a altura, muda o tamanho da bandeira.  float  altura = 500;  float  posX = 400; float  posY = 300; //posX e posY indicam o centro da tela  void  setup () {    size (800, 600);    frameRate (5);    noStroke (); }  void  m...








Leia mais










Exercício 10 - Jogo do Pong




















Imagem







                   Neste exercício o objetivo é modificar o código feito em sala para criar uma versão simplificada do jogo Pong, o primeiro jogo lucrativo da história.                       Comecei utilizando o exercício 9 como base para a movimentação da bola, porém com algumas modificações, a bola só irá rebater se colidir com as superfícies superior e inferior, não mais com as laterais. Junto a isso crio os dois paddles necessários para o jogo, um esquerdo e um direito.                   Será nesses paddles que a bola terá que colidir para poder rebater lateralmente, como funciona do jogo Pong. Para isso, criei uma função chamada colisao ,  essa função irá detectar em qual paddle(direito ou esquerdo) a bola irá colidir:   boolean  colisao( int  xP, int  yP, int  x1, int  x2, int  y1, int  y2) {    if  (((xP <= x1-rC) || (xP ...








Leia mais










Execício 8 - Sensor de distância 




















Imagem







               O objetivo desse exercício é criar  uma aplicação que muda individualmente a cor do preenchimento de dois círculos, com raios e centros randômicos, sempre que o cursor do mouse passar sobre os mesmos.                 Primeiramente começo com a função distancia1D que calcula a distância entre dois pontos:    int  distancia1D( int  X1, int  X2){    int  resposta;    int  aux;    aux = X2 - X1;    resposta =  int ( sqrt (aux * aux));    return  resposta;  }                    Depois criei uma função para encontrar o centro de um circulo:      int  distanciaO_bola( float  X, float  Y){ //função para encontrar o centro da bola        int  dV = distancia1D( int (Y), mouseY ); //distancia entre Y da bola e o mouse X     int  dH = distancia1D( int (X), mouseX ); //distancia entre o X...








Leia mais