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!

}

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);

        }           

     }

}

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);

  

}

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.