Trabalho - Matemática Aplicada a Multimídia - Parte I

         A obra a ser analisada é uma das mais famosas do artista Helio Oiticica, que ficou famoso por apresentar atráves de modelos geométricos formas de abstracionismo na arte. A obra a ser analisada é uma das mais famosas do artista Helio Oiticica, que ficou famoso por apresentar atráves de modelos geométricos formas de abstracionismo na arte.

         A obra é composta por segmentos de quadrados de tamanhos e posições diferentes (com uma leve inclinação nos quadrados menores), bem organizados e separados pela mesma distância, apresentando um padrão diferente em cada linha.

Análise Geométrica da Imagem:

A imagem possui 346 pixels de largura e 400 pixels de altura, com um fundo padrão branco (255).

        Os quadrados menores possuem 55 pixels de largura e 55 pixels  de altura e cor preta (0) com uma inclinação na direção direita.

      Os quadrados maiores possuem 79 pixels de largura e 89 pixels de altura e cor preta (0) e estão a 10 cm de distância da borda do plano.

       E cada quadrado está separado à uma distância de mais ou menos 17 pixels um do outro.

O padrão a ser apropriado e reproduzido para a criação de outros modelos é o primeiro segmento de quadrados da imagem

Código da Reprodução do Padrão sem alteração/apropriação:

int x;

int y;

void setup(){

  size(346,400);

  background(255);

  Padrao();  

}

void draw(){

}

void Padrao(){

  fill(0);

  rect(x+250, y+17,74,84);

  fill(0);

  rect(x+90, y+17, 74, 84);

  fill(0);

  rect(x+90, y+110,74,84);

  fill(0);

  rect(x+250, y+110, 74, 84);

  fill(0);

  rect(x+90, y+203,74,84);

  fill(0);

  rect(x+250, y+203, 74, 84);

  fill(0);

  rect(x+250, y+297,74,84);

  fill(0);

  rect(x+90, y+297, 74, 84);

  

  rotate(PI/8);

  fill(0);

  rect(x+190,y-50,55,55);  

  fill(0);

  rect(x+44, y+10,55,55);

   fill(0);

  rect(x+220,y+30,55,55);

  fill(0);

  rect(x+75, y+90,55,55);

   fill(0);

  rect(x+255,y+115,55,55);

  fill(0);

  rect(x+108, y+170,55,55);

   fill(0);

  rect(x+290, y+200,55,55);  

  fill(0);

  rect(x+145, y+260,55,55);

}

Resultado:

Código da Obra com alterações/apropriações:

    Como forma de alteração da obra, modifiquei as cores originais utilizando cores aleatórias na escala RGB selecionadas pelo programa e me apropriei deixando a obra interativa, como consta nos exemplos a seguir.

Inicialmente, os quadrados maiores posicionados verticalmente mudam de coloração aleatoriamente a cada um segundo (frameRate(1)).

  

Após a interação (clique do mouse), aparecem os quadrados menores inclinados, posicionados na horizontal e os mesmos mudam de cor, assim como o background, ambos a cada segundo (frameRate(1)).

Código da Aplicação:

int x;

int y;

void setup(){

  size(346,400);

  background(random(255),random(255),random(255));

  frameRate(1);

  Padrao();  

}

void draw(){

  Padrao();

}

void Padrao(){

  noStroke(); 

  fill(random(255),random(255),random(255));

  rect(x+250, y+17,74,84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+17, 74, 84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+110,74,84);

  fill(random(255),random(255),random(255));

  rect(x+250, y+110, 74, 84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+203,74,84);

  fill(random(255),random(255),random(255));

  rect(x+250, y+203, 74, 84);

  fill(random(255),random(255),random(255));

  rect(x+250, y+297,74,84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+297, 74, 84);

  

  if (mousePressed){

    

  background(random(255),random(255),random(255));

    

    

  fill(random(255),random(255),random(255));

  rect(x+250, y+17,74,84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+17, 74, 84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+110,74,84);

  fill(random(255),random(255),random(255));

  rect(x+250, y+110, 74, 84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+203,74,84);

  fill(random(255),random(255),random(255));

  rect(x+250, y+203, 74, 84);

  fill(random(255),random(255),random(255));

  rect(x+250, y+297,74,84);

  fill(random(255),random(255),random(255));

  rect(x+90, y+297, 74, 84);

    

    rotate(PI/8);

  fill(random(255),random(255),random(255));

  rect(x+190,y-50,55,55);  

  fill(random(255),random(255),random(255));

  rect(x+44, y+10,55,55);

  fill(random(255),random(255),random(255));

  rect(x+220,y+30,55,55);

  fill(random(255),random(255),random(255));

  rect(x+75, y+90,55,55);

   fill(random(255),random(255),random(255));

  rect(x+255,y+115,55,55);

  fill(random(255),random(255),random(255));

  rect(x+108, y+170,55,55);

   fill(random(255),random(255),random(255));

  rect(x+290, y+200,55,55);  

  fill(random(255),random(255),random(255));

  rect(x+145, y+260,55,55);    

  }

}

Utilização de Função e Procedimentos para simplificação de operações no processing.

Nas linguagens de programação, a utilização dos recursos de funções  (retorna valor) e procedimentos (não retornam valor) sempre foram muito necessárias. Utilizando esses conceitos no exemplo citado em sala de aula.

Código:

float p;

void setup(){
  size(600,400);
}
void slideBar(float p){
  fill(0);
  rect(100,150,400,20);
  float pos = 380*p + 100;
  fill(#FC0808);
  rect(pos,150,20,20);
}

float d=0.01;
void draw(){
  p=p+d;
  if(p>1 || p<=0) d=-d;
  slideBar(p);
  println(p);
}

A partir dos resultados, e da utilização dos recursos de procedimentos e funções, podemos notar sua importância em praticidade e principalmente em reutilização. Quando executado dentro de um void draw(), o mesmo código passa a ser executado várias vezes, sem necessidade de repetição. Facilitando sua elaboração e entendimento, deixando o mesmo menos complexo.

Tarefa - Ping Pong

A tarefa consiste em aprimorar um código elaborado em sala de aula para a criação de um jogo de Ping-Pong.

Código:

//Variável que indica o valor da pontuação
int pont;

//Bolinha
int bolaX = 50;
int bolaY = 300;
int dX = 10;
int dY = 10;
int r = 20;


//Paddles
int padXdir = 780;
int padXesq = 20;
int l = 20;
int a = 100;
int padY = 300;
int pY = 10;




void setup(){
  size(800,600);
  background(0);
  pont = 0;
}

void draw(){
 background(0);
 textSize(30);


 //Movimentação do paddle esquerdo
  if(mouseY>=height-a/2){
   rectMode(CENTER);
   rect(padXesq,height-a/2,l,a);
 }
 else if(mouseY<=0+a/2){
   rectMode(CENTER);
   rect(padXesq,0+a/2,l,a);
 }
 else{
   rectMode(CENTER);
   rect(padXesq,mouseY,l,a);
 }



 //Movimentação do paddle direto
 if(padY>=height-a/2){
   rectMode(CENTER);
   rect(padXdir,height-a/2,l,a);
 }
 else if(padY<=0+a/2){
   rectMode(CENTER);
   rect(padXdir,0+a/2,l,a);
 }
 else{
   rectMode(CENTER);
   rect(padXdir,padY,l,a);
 }
 if(keyPressed){
  if(keyCode == UP){
   padY = padY - pY;
  }
 else if(keyCode == DOWN){
  padY = padY + pY;
 }
 }

//Movimentação da bolinha
 ellipse(bolaX,bolaY,r,r);
 bolaX = bolaX + dX;
 bolaY = bolaY + dY;
  if ((bolaY >= 590) || (bolaY <= 10)){
    dY = -dY;
  }


  if((bolaX <= l + r/2) && (bolaY >= mouseY - a/2) && (bolaY <= mouseY + a/2)){ //Colisão
    if(bolaY > mouseY){
     dY = (bolaY - mouseY)/5;
    }
    else if(bolaY < mouseY){
     dY = (bolaY - mouseY)/5;
    }
    dX = -dX;
  }


  if((bolaX >= 770) && (bolaY >= padY - a/2) && (bolaY <= padY + a/2)){ //Colisão
    if(bolaY > padY){
      dY = (bolaY - padY)/5;
    }
    else if(bolaY < padY){
      dY = (bolaY - padY)/5;
    }
    dX = -dX;
  }
 
   if((bolaX < 10) || (bolaX > 790)){
    noLoop();
    background(0);
    text("Game Over",330,300);
    println("Game Over");
   }}

Tarefa - Movimentos Oscilatórios

A tarefa consiste em aprimorar um código feito em sala, mostrando um exemplo de MRUV antes trabalhado, aumentando o tamanho da ellipse em 1% a cada colisão.

Código:

float bolaX=20;
float disY=5;
float disX=5;
float R=20;


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

void draw(){
  background(119,253,255);
  fill(255);
  noStroke();
  ellipse(bolaX,bolaY,R*2,R*2);
  bolaY=bolaY+disY; //Movimentação da bolinha no eixo
  bolaX=bolaX+disX; //Movimentação da bolinha no eixo

//Velocidade Horizontal em 1%
if (bolaX >= width - R){  //Colisão da bolinha
  bolaX = width - R;
  disX = - disX;
  disY = disY * 1.01;
}
else if(bolaX <= R){
  bolaX = R; //Colisão da bolinha
  disX = - disY;
  disY = disY * 1.01;
}

//Velocidade Vertical em 1%
if (bolaY >= height -R){ //Colisão da bolinha
  bolaY = height - R;
  disY = - disY;
  disX = disX * 1.01;
}

else if(bolaY <= R){
  bolaY = R; //Colisão da bolinha
  disY = - disX;
  disX = disX * 1.01;
}
}

Tarefa - Alteração da cor do preenchimento através da distância

Nesta tarefa, será criada uma aplicação que confere uma mudança de cor aleatórias entre dois círculos através das distâncias entre os mesmos e o cursos do mouse, aprimorando um código elaborado em aula.

Código:

//Variaveis randômicas de posições e raios dos circulos

int x1=(int)random(600);

int y1=(int)random(600);

int r1=(int)random(100);

int x2=(int)random(600);

int y2=(int)random(600);

int r2=(int)random(100);

void setup(){

  size(600,600);

  noStroke();

  //Criação das ellipses

  ellipse(x1,y1,2*r1,2*r1);

  ellipse(x2,y2,2*r2,2*r2);

}

void draw(){

  //Ellipse1

  if (dist(mouseX,mouseY,x1,y1) <=r1){

    fill(0,0,255); //Caso o mouse estiver dentro da ellipse 1, a mesma apresentará coloração azul

    ellipse(x1,y1,2*r1,2*r1);

  } else {

    fill(0,255,0);// //Caso o mouse estiver fora da ellipse 1, a mesma apresentará coloração verde

    ellipse(x1,y1,2*r1,2*r1);

  }

  

  //Ellipse2

  if (dist(mouseX, mouseY,x2,y2) <=r2) {

    fill(255,0,0); //Caso o mouse estiver dentro da ellipse 2, a mesma apresentará coloração vermelha

    ellipse(x2,y2,2*r2,2*r2);

  } else {

    fill(255,228,0);

    ellipse(x2,y2,2*r2,2*r2);  //Caso o mouse estiver fora da ellipse 2, a mesma apresentará coloração amarela

  }

}

Resultados:

Tarefa - Letra A da Braun

No exercicio é proposto a criação do modelo gráfico da letra A da BRAUN, seguindo módulos e padrões especificos.

Código:

//Configurações da Tela
void setup(){
  size (600,600);
  background(255);
  A_Braun(200,100,40);
}

// Procedimento para criação da letra
void A_Braun(float x, float y, float l){
  noStroke();
  fill(0);
  //Perna esquerda
  for (int i = 1; i <8;i++){
    rect(x, y+i*l,l,l);
  }
 
  //Retangulos do traço do meio da letra
 
  rect(x+l,y,l*1.3,l);
  rect(x+l,y+l*4.5,l*1.3,l);
 
  //Perna direita
  for (int i=1;i<8; i++){
    rect(x+l+l*1.3,y+i*l,l,l);
  }
 
  //Acabamento da letra e extremidades
  fill(0);
  arc(x+l,y+l,2*l,2*l,PI,PI*3/2,PIE);
  arc(x+l+l*1.3,y+l,2*l,2*l,3*PI/2,2*PI,PIE);
 
  fill(0);
  rect(x+l,y+l,l/4,l/4);
  fill(255);
  ellipse(x+l+(l/4), y+l+(l/4),l/2,l/2);
  fill(0);
  rect((x+l+l*1.3)-l/4, y+l, l/4, l/4);
  fill(255);
  ellipse((x+l+l*1.3) - l/4, y+l+(l/4),l/2,l/2);
}

Resultado:

Bandeira do Brasil

Neste exercício é exigido a criação da Bandeira do Brasil de acordo com as regras estabelecidas pela Lei Federal Nº 5.700, através da função mostraBandeira.

Código:

//Variavel correspondente ao valor do módulo

int x = 30;

void setup(){

  int x = 30;

  size (750,500); 

  background(0,162,1); 

  mostraBandeira();

}

void mostraBandeira(){

  

  noStroke();

  fill(247,247,20); //Valores da cor amarela do losango da bandeira na escala RGB. Medidas correspondentes as da lei.

  quad(1.7*x,7*x,10*x,1.7*x,18.3*x,7*x,10*x,12.3*x);

  fill(0,57,198); //Valores da cor azul do círculo da bandeira na escala RGB. Medidas correspondentes as da lei

  ellipse(10*x,7*x,7*x,7*x);

}

  

Resultado:

MRU e MRUV - Lançamento Balistico

Para a tarefa foi exigido uma representação gráfica unindo elementos do MRU e MRUV para a elaboração de um Movimento Balístico.

Código:

//Variáveis
float vH = 20;
float vV = 20;
float t;
float a = -1.6;
float dH;
float dV;

//Configurações da Tela
void setup(){
  frameRate(60);
  size(500,500);
  stroke(100);
  background(0);
}

void mostraGrade(){
  for (int i = 0; i < 10; i++){
    line(i*50,0,i*50,500); //500/50 = 10, espaçamento entre as linhas
    line(0,i*50,500,i*50);
  }}

//Cálculo do MRU
float MRU (float vH, float t){
  float dH;
  dH = vH*t;
  return (dH);
}

//Cálculo do MRUV
float MRUV (float vV, float t, float a){
  float dV;
  dV = vV*t+a*t*t/2;
  return(dV);
}

//Impressão das informações no console e tela
void draw(){
  background(0);
  println(dH = MRU (vH,t));
  println(dV = MRUV (vV,t,a));
  mostraGrade();
  ellipse(dH,500-dV,10,10);
  fill(255);
  t = t+0.1;
}




Resultado:

Tarefa MRU

A Tarefa exigia uma representação do Movimento Retilinio com uso de uma elipse e indicar os valores das variáveis na tela, além de exibir uma harmonia cromática.

Código:

int tAtual = 0;
int vAtual = 10;
int dAtual;

void setup(){
  frameRate(1);
  size(600, 600);
  background(255,105,180); //Alteração da cor do fundo (Rosa)
  mostraGrade(); //Execução do procedimento
}

void mostraGrade(){
  for (int i=0; i < 12; i++) {
    stroke(0,191,255);
    line(i*50,0,i*50,600); //Criação das linhas verticais
    line(0,i*50,600,i*50); //Criação das linhas horizontais
  }}

void draw(){
  background(255,105,180);
  mostraGrade();
  dAtual = MRU(vAtual,tAtual);
  println(tAtual,dAtual);
  fill(0,191,255);
  ellipse(dAtual,300,20,20);
  tAtual++;
  textSize(20); //Configuração do texto na tela (Azul)
  fill(0,191,255);
  text("Distância:" + dAtual,200,30);
  text("Velocidade:" + vAtual,210,50);
  text("Tempo:" + tAtual,220,70);
 
}


//Calculo do MRU
int MRU(int v, int t){
  int d;
  d = v*t;
  return (d);
}


Resultado:

Tarefa Funções

No exercício foi pedido a criação de uma flor através de 5 elipses, uma central e quatro nas diagonais como se fossem pétalas com cores, tamanhos e posições aleatórias, utilizando de códigos para elaborar a lógica matemática de Pitagoras para posicionar corretamente cada ellipse.
,
Código:

Códigos com comentários

Resultado

Tarefa - Alteração e Comentários

Como proposto em aula, escolhi na listas de exemplos o chamado ShapePrimitives, que apresenta as formas geométricas básicas que podem ser criadas através do processing.

Código original:

A imagem original apresenta as formas em cores mais neutras em conjunto num fundo preto (0).

Código Alterado:

Após alterações, criei uma harmonia cromática através variação de tons de azuis nas cores das figuras , expostas em um fundo branco (255).

Documentário - Hello, World! Processing

O documentário aborda de forma singela, o princípio natural do pensamento lógico e a busca pelo raciocínio nas coisas mais simples, exemplificando que até na natureza tudo segue uma lógica especifica, e que através disso, possa tirar inspiração nos elementos naturais para a criação de novos projetos. O documentário ressalta a importância do software Processing, como uma ferramenta de fácil acesso e disponível para trabalho, que proporciona um ambiente de grande aprendizado no ramo da programação por não exigir muito conhecimento do usuário, o software expande as possibilidades criativas. Através de entrevistas com vários artistas e desenvolvedores, o documentário vem com uma proposta de explicar as vantagens de aprendizado com a utilização do chamado ''caderno digital'' tanto nas áreas de design quanto matemáticas. Dentre as obras apresentadas no documentário, uma que sintetiza a relação de inspiração na simplicidade para entender o pensamento lógico, é a Unnamed Soundsculpture, criada por Daniel Franke e Cedric Kiefer, que cria uma relação de dança e movimento, através de programação (e kinect), uma verdadeira obra de arte