Trabalho de MAMI

Para o primeiro trabalho da disciplina de Matemática Aplicada escolhi implementar o simbolo ou logo do herói Batman no Processing.
Como temos algumas variantes do simbolo deixo esta como referência para o trabalho:

Vamos começar com uma análise matemática do simbolo.

Podemos desenhá-lo de várias formas, a que eu escolhi consiste em iniciar o desenho com 3 elipses horizontais sobrepostas.

A maior em preto, a intermediária em amarelo e a menor em preto novamente, essa com o raio 200 para facilitar os próximos cálculos.

Feito isso é hora de começar a desenhar o morcego, utilizando apenas elipses amarelas para recortar a elipse preta menor do desenho inicial.

Para a parte de cima temos uma esfera de raio 45 que é duplicada para o outro lado (notem que o desenho é espelhado, o que facilita o posicionamento dos elementos nessa etapa).

Na parte inferior temos duas elipses sobrepostas, a primeira levemente inclinada e a segunda na vertical. Para simplificar a implementação deixei a segunda elipse um pouco menor para que sua forma não ultrapassasse o limite inferior do desenho.

Da mesma forma é só espelhar para o outro lado e obter a forma desejada.

Já está parecido? Quase!

Agora é a hora de dar o acabamento, precisamos de alguns quadriláteros para nos ajudar a desenhar as pontas de maneira correta, vamos lá?

Que tal o meu Batman? Ficou parecido, vai!

Olha só um comparativo do meu resultado final com o simbolo original:

Segue o código completo:

//vamos desenhar a logo do Batman

void setup(){

  

size(600,600); 

background(255);

noStroke();

fill(0);

//comaçando com as 3 primeiras elipses como base

ellipse(300,300,238,145);

fill(255,241,0);

ellipse(300,300,224,136);

fill(0);

ellipse(300,300,200,120);

fill(255,241,0);

//Agora vamos iniciar os recortes para dar forma ao desenho

ellipse(268,261,45,47);

ellipse(335,261,45,47);

//acabamento da "cabeça" do morcego com quadriláteros

rect(312,240,20,20);

rect(270,240,20,20);

rect(296,240,11,12);

//desenhando os "chifrinhos" com triangulos

triangle(291,240,296,253,296,240);

triangle(305,253.4,312,240,307,240);

fill(0);

/*agora é hora de trabalhar a parte inferior do desenho,

começando com 4 elipses iguais */

ellipse(300,258,20,20);

fill(255,241,0);

ellipse(250,340,35,40);

ellipse(275,345,30,40);

ellipse(325,345,30,40);

ellipse(350,340,35,40);

//Agora é só afiar as pontas com a ajuda dos nossos quadrados e triangulos...

rect (280, 345, 10,20);

rect (310, 345, 10,20);

quad(300,365,290,360,290,350,288,340);

quad(340,365,300,360,340,350,300,340);

//e pronto, temos o nosso Batsinal no Processing!

}

Pong vs Bearkout e a sua ligação com a Apple

Já explicamos um pouquinho de como funciona o jogo Pong aqui no blog.
O jogo Breakout segue a mesma linha e também é um clássico do Atari, ganhando releituras até os dias de hoje.

Mas qual seria a relação entre os dois jogos e a empresa Apple?
Primeiramente o desenvolvedor Allan Alcorn, que desenvolveu o Pong, contou com a ajuda de Steve Jobs para projetar o novo jogo. O Breakout chegou com uma arquitetura mais elaborada e menos hardware.

Essa mesma arquitetura, tempos depois, serviu de modelo para a criação do Apple 1, conhecido como o primeiro produto de sua empresa, apresentado no ano de 1976.

E com isso desvendamos o mistério na ligação entre esses dois marcos na história da tecnologia.

Botão de flash no Porcessing

O objetivo desse exercício é criar um botão que obedeça aos 3 principais estados de um botão animado de flash: Up, Down e Over.
O desafio aqui é saber se o Mouse está ou não dentro da circunferência do botão para tornar a aplicação mais realista.

Para o Up a cor é verde, para o Down é vermelho e pata o Over é roxo. Segue o código:

int Larg;

int Alt;

float x;

//função para determinar a distancia entre dois pontos

float distancia2D(int X1,int Y1, int X2,int Y2){

  float resposta;

  resposta = sqrt((X1*X1) -(2*X1*X2) + (X2*X2) + (Y1*Y1) - (2*Y1*Y2) + (Y2*Y2));

    

  return resposta;

}

void setup(){

size(100,100);

Larg = width/2;

Alt = height/2;

background(255);

//para desenhar a moldura do nosso botão

fill(0);

ellipse(Larg,Alt,60,60);

}

void draw(){

 x=(distancia2D(Larg,Alt,mouseX,mouseY));

 //para o estado UP do botão temos

 if (x > 25) { 

    fill(0,200,0);

    ellipse(Larg,Alt,50,50);

}

else{

  

//para o estado DOWN do botão

   if(mousePressed == true){ 

    fill(255,0,0);

    ellipse(Larg,Alt,50,50);

}

else { 

        

//para o estado OVER do botão

      fill(200,0,250);

       ellipse(Larg,Alt,50,50);

        }           

     }

}

Nostalgia: Jogando Pong

Pong é conhecido como um dos primeiros jogos de computador. Consiste em uma partida de tênis ou tênis de mesa (ping pong) em uma tela pixelada.
Os elementos de tela são bastante simples, consistindo apenas de uma linha central pontilhada que simboliza a rede e divide a área de cada jogador, uma "bola" que se movimenta pela tela ao ricochetear nas barras ou nas extremidades (em cima e em baixo), duas barras próximas as extremidades laterais da tela que são controladas pelos jogadores e, por fim, a pontuação exibida no topo da tela.

O jogo foi desenvolvido por Allan Alcorn em 1972 e lançado pela empresa Atari. Com o objetivo principal de divertir seus usuários possuía a opção de ser jogado em duplas ou a opção humano contra máquina.

A primeira máquina era movida a moedas e utilizava circuitos de placa para criar a lógica, inicialmente como porta aberta ou fechada traduzindo para 0 e 1.

Alguns bugs que não conseguiram ser consertados acabaram por ser identificados como desafios do jogo como, por exemplo, o fato das barras laterais não tocarem as extremidades da tela.

Toda essa simplicidade acabou se tornando um dos maiores sucessos da empresa nos anos 70, sendo lembrada até hoje com saudosismo por muitos usuários da época.
Para jogar um pouquinho e reviver a nostalgia de Pong acesse: http://www.ponggame.org/

Exercício: Jardim de flores

Utilizando a flor criada no exercício "Função flor" mostrado no blog anteriormente vamos imprimir na tela flores de cores e tamanhos diferentes, aleatoriamente.

Como a função da flor já estava criada só foi necessário dividir em uma função para o centro e outra para as pétalas, para que fosse possível colorir aleatoriamente e com cores diferentes cada uma das partes.
Depois foi só desenhar na tela com tamanhos também aleatórios. Segue o código completo:

 //definindo a nossa variável

float x;

void setup (){

size(600,600);

background(255);

frameRate(10);

}

//criei uma função para o círculo central da flor

 void circulo(float x,float y, float r){

     ellipse(x,y,r*2,r*2);

}

void flor(float x, float y, float r){ 

  //para colorir as pétalas com cores aleatórias

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

  circulo(x+(2*r)*0.7,y+(2*r)*0.7,r);

  circulo(x-(2*r)*0.7,y-(2*r)*0.7,r);

  circulo(x-(2*r)*0.7,y+(2*r)*0.7,r);

  circulo(x+(2*r)*0.7,y-(2*r)*0.7,r);

  

  //agora colorindo o centro da flor com uma cor diferente das pétalas

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

  circulo(x,y,r);

 }

//Desenhando aleatóriamente as flores na tela

void draw(){

  flor(random(600),random(600),random (20));

}

//temos o nosso jardim!

Implementando o Yin Yang

Por coincidência o mesmo símbolo que escolhi para representar matematicamente foi o mesmo que foi escolhido em aula para ser implantado no Processing. Que maravilha, meio caminho andado!!
Como já vimos o passo a passo de como desenhar só precisamos colocar as nossas elipses em seus lugares e definir as cores corretamente

Segue o código:

int x;           // coordenada x do centro do circulo principal
int y;           // coordenada y do centro do circulo principal
int r;           // raio do circulo pequeno
int centrox;     // coordenada x do centro da tela
int centroy;     // coordenada y do centro da tela

void setup(){
size(200,200);


centrox = width/2;
centroy= height/2;

yinYang(10,centrox,centroy);

}
void yinYang(int r,int x,int y){
  fill(255);
 
  // circulo branco principal
  ellipse(x,y,(r*5)*2,(r*5)*2);
  fill(0);
 
  // Dividindo ao meio com um semi circulo preto
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);
 
  // circulo preto médio
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);
  fill(255);
  noStroke();
 
  // circulo branco médio
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);
 
  // circulo branco pequeno
  ellipse(x+(2.5*r),y,r*2,r*2);
  fill(0);
 
  // circulo preto pequeno
  ellipse(x-(2.5*r),y,r*2,r*2);
}

Função flor

Em aula aprendemos a desenhar uma flor de esferas iguais alinhadas com o diâmetro da esfera central.

Segue o código:

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

void draw() {
 flor2 (300, 300, 60);
}

void circulo (int x, int y, int r) {
  ellipse (x, y, 2*r, 2*r);
}

void flor (int x, int y, int r) {
  circulo (300, 300, 20);
  circulo (300 + 40, 300, 20);
  circulo (300, 300 + 40, 20);
  circulo (300 - 40, 300, 20);
  circulo (300, 300 - 40, 20);
}

/* com esse código a flor é desenhada proporcionalmente em qualquer tamanho, dependendo do valor atribuído à variável "r" */

void flor2 (int x, int y, int r) {
  circulo (300, 300, r);
  circulo (300 + 2*r, 300, r);
  circulo (300, 300 + 2*r, r);
  circulo (300 - 2*r, 300, r);
  circulo (300, 300 - 2*r, r);
}


Agora o desafio da atividade é desenhar uma flor com as quatro "pétalas" na diagonal em relação ao círculo central.

Segue o código:

void setup (){

  size (600, 600);

}

void draw() {

 florDiag (300, 300, 40);

}

void circulo (int x, int y, int r) {

  ellipse (x, y, 2*r, 2*r);

}

void florDiag(int x, int y, int r)

{

//a variável "d" corresponde ao diâmetro

  int d = 2*r;

  float diag = d * sqrt(2); 

  circulo(x, y, r);

  circulo(x + int(diag/2), y + int(diag/2), r);

  circulo(x - int(diag/2), y - int(diag/2), r);

  circulo(x + int(diag/2), y - int(diag/2), r);

  circulo(x - int(diag/2), y + int(diag/2), r);

  

}

Fórmula matemática para calcular um símbolo

Para esse exercpicio escolhi o símbolo do Yin Yang. Para simplificar a explicação fiz um passo a passo.

Na primeira imagem iniciamos o desenho com um círculo de raio "r", logo em seguida desenhamos dois círculos menores no seu interior. Os círculos estão centralizados com o diâmetro do maior, logo concluímos que seu raio é metade do raio do primeiro círculo pois "r" corresponde ao seu diâmetro.

Na segunda imagem recortamos um semi círculo de cada um dos círculos menores, o de cima do lado direito e o de baixo do lado esquerdo.

Na terceira imagem desenhamos outros 2 círculos, também alinhados com o diâmetro do círculo maior. Agora eles possuem 1/3 do raio das esferas médias, o que corresponde a 1/6 de "r". 

Esses círculos estão centralizados dentro dos círculos médios, sendo a distância entre seus centros igual a "r".

Na quarta imagem vemos o símbolo finalizado com suas características cores opostas.

Simulador de Balística

A ideia era simular o lançamento de um objeto implantando as fórmulas de MRU e MRUV.
O objeto deveria ter a trajetória de parábola e no meu decidi traçar 1/4 de círculo ou elipse.

Segue o código bonitinho:

//definição das variáveis

float t = 0;   //tempo
float dx;      //distancia horizontal
float dy;      //distancia vertical
float a = -5;   //aceleracao
int v0 = 60;   //velocidade


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

void draw()
{
  background(0);

  // um jeito menos penoso de desenhar a tal da grade
  drawGrade();
  fill(255);

  //exibindo as coordenadas na tela
  text ("Tempo: " + t + "s", 20, 20);
  text ("Distancia: " + dx, 20, 60);
  text ("Velocidade: " + (v0 + a*t), 20, 40);

  lancamentoBalistico();
  t = t + 0.0166666666666667;
}

// desenhando a grade
void drawGrade()
{
  for(int i=0; i<(width/50); i++)
 {
   stroke(100, 100, 100);
   line(i * 50, 0, i * 50, width);
   line(0, i * 50, height, i * 50);
 }

 //Fórmula do Movimento Retilíneo Uniforme da bolinha
void moveBolaMRU()
{
   dx = v0 * t;
   ellipse(dx, 150, 20, 20);
}


//Fórmula do Movimento Retilíneo Uniforme Variado da bolinha
void moveBolaMRUV()
{
   dx = v0*t + a*(pow(t,2)/2);
   noStroke();
   fill(124,252,0);
   ellipse(300, height - dx, 20, 20);
}

//lançando a bolinha
void lancamentoBalistico()
{
  dx = v0 * t;
  dy = v0*t + a*(pow(t,2)/2);
  float lanc = dx + dy;
   ellipse(dx, 600 - dy, 20, 20);
}

}

Matemática Aplicada - Processing Examples

Atividade: Apresentar, alterar e comentar um dos exemplos do site https://processing.org/examples/

Escolhi o exemplo "Points and Lines" por ser mais simples e por ter a curiosidade de testar desenhos geométricos. Nesse exemplo podemos desenhar linhas e pontos atribuindo valor a uma variável principal. Segue o código alterado com comentários:

// criei a variável "x" e coloquei o valor dela para 50
int x = 50;
int a1 = x;
int a2 = a1+x;
int a3 = a2+x;
int a4 = a3+x;

// criei a variável "y" e coloquei o valor dela para "x+x"
// ou seja, y = 100
int y = x+x;
int b1 = y;
int b2 = b1+y;
int b3 = b2+y;
int b4 = b3+y;

// mantive o tamanho da tela, deixei o fundo branco
// e mudei a cor das linhas e pontos para preto
size(640, 360);
noSmooth();
background(255);
translate(140, 0);

// desenhando um quadrado com as coordenadas de "a"
stroke(0);
line(a3, a3, a2, a3);
line(a2, a3, a2, a2);
line(a2, a2, a3, a2);
line(a3, a2, a3, a3);

// desenhando um quadrado com as coordenadas de "b"
stroke(0);
line(b3, b3, b2, b3);
line(b2, b3, b2, b2);
line(b2, b2, b3, b2);
line(b3, b2, b3, b3);

// desenhando pontos com as duas coordenadas
stroke(0);
point(b1, a1);
point(b2, a2);
point(b3, a3);
point(b4, a4);

// invertendo as coordenadas dos pontos
point(a1, b1);
point(a2, b2);
point(a3, b3);
point(a4, b4);

Matemática aplicada - Hello world! Processing

Comentários sobre o video "Hello world! Processing"

O vídeo fala sobre a linguagem de programação Processing e sobre a facilidade que ela oferece para os seus usuários. Uma das vantagens citadas é que a linguagem permite transformar, de maneira simples, códigos em idéias sem exigir muito conhecimento em programação.
Basicamente o documentário fala sobre idéias transformadas em processos, esquematizadas e codificadas e como o Processing transforma essas idéias para códigos e algorítimos de maneira fluida e simplificada tanto para o usuário quanto para a máquina.

Resumindo, o objetivo da linguagem é facilitar a comunicação entre homem e máquina. Unindo programação e design em uma mesma ferramenta.

Início do segundo semestre

Com o início do novo semestre o blog será dedicado as cadeiras de Matemática Aplicada a Multimídia, Cognição, Programação 2, Comunicação e Narrativa.

Para acompanhar as atividades relacionadas a cada cadeira é só acompanhar suas respectivas TAGs.

Até os próximos posts ;)