Atividade 7

- empregando Processing, implemente e discuta uma solução que simule o tratamento dos estados up, over e down de um botão circular na plataforma Adobe Flash.

código:

Para a criação da Elipse e do sensor dentro dela, precisaremos de duas funções.

primeiramente, a função distancia2D(), com ela é possível encontrar a distância entre dois pontos.

estabelece-se os parâmetros para os dois pontos da cordenada x e da cordenada y.

a formula usada é essa:

float distancia2D(float x1, float y1, float x2, float y2){
  float d = sqrt(pow(x2 - x1,2) + pow(y2 - y1,2));

depois, para evitar que um numero negativo seja mostrado, modulariza-se o resultado.

  d = sqrt(d*d);

Depois, criamos a função circulo(), que criará o nosso botão em forma de ellipse.

estabele-se os paramêtros (x,y, raio)

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

para fazer o sensor que muda a cor do botao ao passar o mouse por cima e ao clicar nele, usamos uma condicional:

  if(distancia2D(mouseX,mouseY,width/2,height/2) < r){
    fill(255,0,255);
    ellipse(x,y,2*int(r),2*int(r));

então chama-se a função distancia2D e estabelece-se os parâmetros dela, as cordenadas x1 e y1 para onde o mouse estiver, e x2 e y2 para o centro da tela que é a posição onde o centro do botão é criado. Por o botão ser em formato de ellipse, para saber que se o mouse está dentro ou fora dele, compara-se a distância e o raio, então, se a distância for menor que o raio, significa que o mouse está dentro do círculo, fazendo com que sua cor mude.

Botão normal (posição Up)

Botão com o mouse em cima (posição Over)

para mudar a cor quando o mouse é clicado dentro da mesma área, basta acrescentar uma condicional usando o mousePressed.

    if (mousePressed){
      fill(0,0,255);
      ellipse(x,y,2*int(r),2*int(r));
    }

Botão com o mouse clicando dentro (posição Down)

depois função setup() para estabeler o tamanho da tela.

e a função draw() para chamar a função circulo() e nela colocamos os valores que serão utilizados,

no caso, para o circulo ser criado no centro da tela e o valor do raio.

Atividade 6

- Recriar o símbolo do Yin-Yang, depois gere 100 símbolos com tamanhos e cores aleatórias.

código:

função yinyang()

primeiramente são dados os parâmetros da função (x, y e mod (módulo))
usa-se a função noStroke para evitar borda nas figuras.

void yinyang(int x, int y, int mod){
  noStroke();

o objetivo da atividade é criar o símbolo com cores aleatórias, para isso, usa-se a função color e atribui-se a cor achada aleatoriamente à uma variável.

  color c = color(random(0,255),random(0,255),random(0,255));
  color c2 = color(random(0,255),random(0,255),random(0,255));

Primeiramente é criado um arco preto aberto.

  fill(c);
  arc(x, y - 4*mod,8*mod,8*mod,PI,2*PI,OPEN); //arco preto exterior

depois, cria-se um arco branco aberto e de tamanho menor, para ficar dentro do arco preto e dá a
sensação de curvatura.

  arc(x - 2*mod, y - 4*mod,4*mod,4*mod,PI,2*PI,OPEN); //arco branco interior

depois, o mesmo processo é feito para a parte de baixo da figura, só que agora com cores inversas

  arc(x, y - 4*mod,8*mod,8*mod,0,PI,OPEN);//arco branco exterior
  arc(x + 2*mod,y - 4*mod,4*mod,4*mod,0,PI,OPEN); //arco preto interior

Para fazer as esferas de dentro do símbolo, usa-se a função ellipse e são criadas duas ellipses, uma branca e uma preta.

  ellipse(x - 2*mod, y - 4*mod, mod, mod);// ellipse preta
  fill(c2);
  ellipse(x + 2*mod,y - 4*mod,mod,mod);// ellipse branca

na função setup(), utiliza-se a função smooth para suavizar as arestas dos arcos.
função noStroke utilizada novamente para garantir que todas as arestas sejam retiradas.
estabelece-se o tamanho da tela.

void setup(){
  smooth();
  noStroke();
  size(600,400);

Para fazer o que foi pedido na tarefa, é criado uma condição e ela começa do 0 e conta até 100, assim criando 100 símbolos. a função yinyang() então é chamada e em seus paramêtros são colocados valores randômicos para que o símbolo seja criado em posições diferentes e em tamanhos diferentes. ( a função é int é utilizada para evitar que o random dê um número real.)

  for(int i=0; i < 100; i++){
    yinyang(int(random(0,600)),int(random(0,400)), int(random(10,50)));


Resultado:

Atividade 5

- considerando a Lei Federal Nº 5.700, criar a função mostraBandeiraBrasil(x, y, l) e discutir o resultado em seu blog.

código:

utilizando as regras de criação da bandeira, cria-se uma função para definir o modulo, a altura e a largura da bandeira. Depois utilizando o retângulo como ponto inicial, se estabelece a criação das outras formas, usando as cores definidas.Na função setup() é estabelecido o tamanho da tela e é chamado a função de criar a Bandeira com as medidas corretas.

Resultado:

Extra: Escolha um símbolo e analise ele matematicamente.

O símbolo que eu escolhi para discutir foi a Estrela de Davi.

Falando um pouco sobre o símbolo:

é um símbolo em forma de estrela formada por dois triângulos sobrepostos, iguais, tendo
um a ponta para cima e outro para baixo, utilizado pelo judaísmo e por seus adeptos,
além de outras doutrinas como Santo Daime. Outro nome dado a este símbolo é "Selo de Salomão".

Analisando o símbolo:

Para a construção do símbolo, primeiramente é construído um Hexágono Regular, através dele
será possível a criação dos triângulos equiláteros.

para saber se o hexágono é regular, é preciso que seja colocado em prova que ele é formado por 6 triângulos equiláteros e para saber se o triângulo que está dentro do hexágono é equilátero eu usei a seguinte formula:

eu possuo duas informações: a altura do triângulo e a base do triângulo, quando se divide um triângulo retângulo no meio você acabará com dois triângulos retângulos congruentes, então, pode-se aplicar o teorema de Pitágoras para achar o lado do triângulo:

a altura do triângulo é: 3,5 módulos.
e a base do triângulo é: 4 módulos

aplicando valores (da minha escolha):

supomos que o módulo seja 1. A altura será a mesma, e a base será a metade, já que estou usando apenas um dos triângulos congruentes.

a² + b² = c²
(3,5)² + (2)² = c²
12 + 4 = c²
c = √¯16
c = 4

logo, o valor de c é o mesmo valor da base, fazendo com que ele seja um triângulo equilátero, aplicando a fórmula em todos os triângulos no interior do hexágono o mesmo resultado será encontrado.

logo, com a prova que o hexágono é regular.. é fácil a criação dos dois triângulos, um com a ponta pra cima e outro com a ponta pra baixo.

aqui é o resultado final:

e colocando a análise em forma de código no processing, é possível a criação de estrelas de davi em locais e de tamanhos diferentes.

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

void draw(){
  background(255);
  noFill();
  criarTriangulo(125,height,50);
}

void criarTriangulo(int x, int y, int mod){
stroke(0,0,255);
strokeWeight(10);
triangle(x, y - 4*mod, x + 3.5*mod, y - 10*mod, x + 7*mod, y - 4*mod);
triangle(x, y - 8*mod, x + 3.5*mod, y - 2*mod, x + 7*mod, y - 8*mod);
}

Atividade 4

- Crie uma flor (como demonstrado na sala) e faça com que ela seja criada 100 vezes em posições aleatórias e seu raio mude aleatoriamente (mantendo sua proporção).

código:

primeiramente, cria-se a função circulo(), que é onde estabelece-se as características das elipses que serão criadas na "flor"..

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

a função int foi utilizada no raio da ellipse(), porque essa função não aceita valores reais, e a função int serve para que seja utilizada apenas a parte inteira de um número real.

cria-se uma nova função, no caso flor3() e se estabelece seus parâmetros:
x = posição no eixo X
y = posição no eixo y
r = raio da elipse

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

logo depois, declara-se as variáveis que serão usadas na resolução do problema:

float diam; 
float diag;
float lado;
diam = 2*r;
lado = diam;
diag = lado*sqrt(2);

• diam = o diâmetro;
• lado = lado do quadrado formado pelos raios das esfera;
• diag = diagonal do quadrado formado pelos raios da esfera, que é o lado multiplicado pela raiz de 2; 

aqui uma demonstração de o porquê a diagonal é usada para mover a bola, que antes era centralizada com o raio da esfera central.
percebe-se, que mesmo utilizando a diagonal, as bolas ficariam distantes da bola central, pra juntar ela, divide-se a diagonal pela metade.

então, cria-se 5 círculos e estabelece-se suas posições:

  circulo(x, y ,r);
  circulo(x + (diag/2), y + (diag/2), r); //inferior direito
  circulo(x - (diag/2), y + (diag/2), r); //inferior esquerdo
  circulo(x + (diag/2), y - (diag/2), r); // superior direito
  circulo(x - (diag/2), y - (diag/2), r); // superior esquerdo

depois, cria-se uma função setup() e é estabelicido o tamanho da tela e a criação de um condicional que fará o que foi pedido na atividade, que é criar 100 flores em posições aleatórias
e com raios aleatórios.

void setup(){
  size(600,600);
  for(int i=0; i < 10; i++){
    flor3(random(0,600),random(0,600), random(10,30));
  }
}

Resultado:

Atividade 3

- Utilizando o Lançamento Balístico, transforme o simulador em um "jogo".

• código:

Primeiramente desenvolvemos o MRU (movimenro retilineo uniforme), depois fizemos o MRUV (movimento retilineo uniformemente variado), então, com a união dos dois criamos o

lançamento balístico.

primeiro foram definidas as variáveis utilizadas

float t=0; = tempo

float a=-2;= aceleração

float vY = 30; = velocidade no eixo y

float vX = 20; = velocidade no eixo x

float dX;= deslocamento no eixo x

float dY;= deslocamento no eixo y

float h; = altura 

float cont;= contador

é utilizado uma variável em cada eixo devido ao lançamento balístico ser a soma dos dois movimentos (Vertical e horizontal). A aceleração e o tempo permanecem para os dois eixos.

no setup foram definidos o framerate, o tamanho da tela, e  a altura utilizada para a criação dos retangulos.

void setup(){
  frameRate(60);
  size(600,600);
  h = 400;
}

no draw, foram definidos a cor do background, a função de criação de grades, a cor das letras que aparecem na tela, textos mostrando os valores das variáveis de tempo, velocidade,
e distância, funcões de criação de retângulos, função de lançamento da bola (lançamento balístico) e a atribuição de tempo.

void draw(){
  background(80);
  criandoGrades();
  fill(255);
  text("Tempo: " + t + "s", 20, 20);
  text("Velocidade: " + (vX + a*t), 20, 40);
  text("Distância X: " + dX, 20, 60);
  text("Distância Y: " + dY, 20, 80);
  retangulo1();
  retangulo2();
  retangulo3();
  lancaBola();
  t = t + 0.0166666666666667;
}

a função criandoGrades() é a responsável por desenhar as grades no background, dentro dela eu defino a quantidade de linhas, a cor e a localização (criando linhas na vertical e horizontal).

void criandoGrades(){
    for(int i=0; i<(width/50); i++){
   stroke(255, 255, 255);
   line(i * 50, 0, i * 50, width);
   line(0, i * 50, height, i * 50);
 }
}

a função lacaBola() é o lançamento balístico, ela que vai definir a trajetória feita pela bala, nela foi colocado uma condição para que a bola faça seu percurso, porém quando ela sair dos limites

da tela ela para de se mover. E a junção dos dois movimentos MRU + MRUV para fazer o trajeto de parabóla (também é definida a cor e o formato de elipse).

void lancaBola(){
  if(dX<width && dY>=0 && dY<height){
    dX = vX*t;
    dY = vY*t+a*t*t*0.5;
    fill(255,0,255);
    ellipse(dX,height-dY,20,20);
  }
}

as funções retangulo1/2/3() são o que eu utilizei para a criação do "jogo" proposto na atividade... o objetivo é que durante o lançamento da bala, a cor dos retangulos mude quando a bala

entrar em contato com eles

void retangulo1(){
  cont = h - dY;
  if((dX>=290 && dX<=300) && (cont<=420))
  {
    fill(0, 255, 255);
  }else
  {
  fill(255, 255, 0);
  }
  rect(290,365,20,20);
  } 


void retangulo2(){ 
  if((dX>=200 && dX<=220) && (cont<=430))
  {
    fill(0, 255, 255);
  }else
  {
  fill(255, 255, 0);
  }
  rect(200,380,20,20);
  }
  
void retangulo3(){
  if((dX>=380 && dX<=400) && (cont<=430))
  {
    fill(0, 255, 255);
  }else
  {
  fill(255, 255, 0);
  }
  rect(380,380,20,20);
}

Resultado:

Atividade 2

- Apresentar, alterar e comentar um dos exemplos encontrados no processing.org/examples.

Eu escolhi o exemplo de Saturação para estudar e modificar:

aqui está o original:

int barWidth = 20;
int lastBar = -1;


void setup() {
  size(640, 360);
  colorMode(HSB, width, height, 100); 
  noStroke();
}


void draw() {
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(barX, mouseY, 66);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

Aqui está a versão alterada e com comentários do que foi mudado:

 
int barWidth = 40;
int barHeight = 25; //adicionando altura das barras
int lastBar = -1;


void setup() {
  size(640, 360);
  colorMode(HSB, width, height, 200);//mudando o formato de Cores
  stroke(4); //adicionando borda âs barras.
}


void draw() {
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(barX, mouseY, height);
    rect(barX, 0, barWidth, height, 4); //adicionando um ângulo nos cantos do retângulo.
    lastBar = whichBar;
  }
}