Trabalho II - Vídeo sobre o resultado do primeiro trabalho.

Considerando o resultado gerado no Trabalho 1, elabore uma animação que apresente o conceito matemático considerado e demonstre sua relação com o respectivo código desenvolvido

Aqui está o resultado obtido:

Clique para assistir no vimeo: Trabalho 2 
Para Download: Download

Atividade 26

- Crie um histograma composto com os canais RGB de uma imagem

código:

primeiramente é criado um vetor para guardar os tons, uma variável pra imagem, duas variáveis para contabilizar o maior valor e tom mais frequente.

int [] tons = new int[256];
PImage img;

int maiorValor = 0;
int tomfrequente = 0;

dentro do setup(), estabelece-se o tamanho da tela, duas variáveis para a posição atual do pixel e uma para verificar a cor que eu quero no pixel atual

e guardar dentro do vetor.

void setup(){
  size(640,680);
  int pos, t;
  img = loadImage("oberyn.jpg");
  for (int x=0; x<640; x++){
    for (int y=0; y<480; y++){
      pos = y*640+x;
      t = (int)green(img.pixels[pos]);
      tons[t] = tons[t]+1;
    }
  }

na função drawGraphics são criadas algumas variáveis, de altura e largura das barras do histograma

e é criado uma condicional, que multiplica o tamanho da imagem com a posição ton no vetor e divide pelo maior valor, assim é criado um retangulo com a posição

no histograma.

void drawGraphics()
{

  int wBar = 2;
  int hBar = 0;
  
  int x = 0;
  int y = 0;
  
  for(int i = 0 ; i <256 ; i++)
  {  
    fill(10,55,100);
      hBar = (640 * tons[i])/maiorValor; 
      rect(x,height-hBar,wBar,hBar);
      x+=2;
      
  }

a função tomfrequente serve para contabilizar o tom que parece mais vezes na imagem, usa-se uma condicional que compara o valor atual do histograma e o seguinte.

int tomFrequente(int histograma[])
{
     int pos = 0;
     int maior = 0 ;
     
     for(int i = 0; i < 256; i++)
     {
        if(histograma[i] > maior)
        {
          maior = histograma[i];
          pos = i;
        }
     }
     this.maiorValor = maior;
     return pos;
}

Resultado:

Imagem Utilizada

Tons de Azul

Tons de Verde

Tons de Vermelho

Atividade 25

- Calcule a média e o desvio padrão da população de uma execução completa do jogo da vida simplificado

código:

a explicação do código aqui é basicamente a mesma para o jogo da vida das tarefas anteriores

a única coisa que muda é que agora é preciso incluir o desvio padrão dentro da função mostraMundo() uma variável recebe o desvio, que inicialmente é 0.

depois é criado uma condicional, e uma nova variável que recebe a potência do valor de i - o valor do contador ao quadrado. então esse valor é incrementado ao valor do desvio.

  cont = cont/32;
  float desvio = 0;
  for(int i = 1; i < 32; i++)
  {
    float p = pow(i - cont, 2);
    desvio+= p;
  }
  desvio = desvio / 32;
  println("Media: " + cont*32);
  println("Desvio padrão: " + sqrt(desvio));
}

Resultado:

Atividade 24

- Demonstre, graficamente, a relação existente entre entre a largura e altura de um retângulo para o melhor aproveitamento de seu espaço. Para tanto, proceda a realização das seguintes etapas:
1. Crie a função int calculaPerimetro(int Largura, int Altura);
2. Crie a função int calculaArea(int Largura, int Altura);
3. Crie uma aplicação inicial que execute o código a seguir:
for (int largura = 0; largura <= 10; largura++) {
println("Largura: " + largura);
int altura = 10 - largura;
println("Altura: " + altura);
int perimetro = calculaPerimetro(largura, altura);
println("Perimetro: " + perimetro);
int area = calculaArea(largura, altura);
println("Area: " + area);
println("");
}
4. Avalie o conjunto de resultados obtidos;
5. Analise as relações existentes entre largura e altura a fim de se obter o melhor aproveitamento do espaço deum retângulo. Para tanto, estabeleça um paralelo com a construção civil, e avalie o possível custo de construção do perímetro compreendido pelas paredes necessárias e a a área coberta correspondente;
6. Realize a demonstração gráfica de suas conclusões, através da criação de uma aplicação específica que faça uso de um ou mais dos diferentes tipos de gráficos estatísticos trabalhados e outras informações visuais julgadas necessárias.

código:

primeiramente cria-se duas variáveis para guardar a altura e a largura.

int altura;
int largura;

dentro do setup()

estabelece-se o tamanho da tela e a criação começa, primeiro com o fundo do gráfico

linhas horizontais, linhas verticais e a quantidade de dados.

void setup(){
 size(760,500);
  rect(50, 50, 660, 400);
  for(int i = 0; i < 24; i++)//linhas horizontais
  {
    stroke(200);
    line(50, 66 + (i * 16), 710,  66 + (i * 16));
  }
  for(int i = 0; i <= 25; i++)//informação de quantidade
  {
    fill(0);
    text(25 - i, 25, 50 + (i * 16) + 5);
  }
  for(int i = 0; i <= 10; i++)//linhas horizontais
  {
    stroke(0);
    noFill();
    line(110 + (60 * i), 50, 110 + (60 * i), 450);
  }

depois são criadas variáveis para cada dado, altura, perímetro e área.

são criados um retangulo para cada uma, já que o gráfico optado foi de barras.

  for(int largura = 0; largura <= 10; largura++) {
  println("Largura: " + largura);
  int altura = 10-largura;
  println("Altura: " + altura);
  int perimetro = calculaPerimetro(largura,altura);
  println("Perimetro: " + perimetro);
  int area = calculaArea(largura,altura);
  println("Area: " + area);
  println("");
  //noStroke();
  fill(200,0,0); //largura
  rect(50,450 - (400*largura)/25, 20, (400*largura)/25);
  fill(0, 200, 0);//altura
  rect(70, 450 - (400 * altura)/25, 20, (400 * altura)/25);
  fill(0, 0, 200);//area
  rect(90, 450 - (400 * area)/25, 20, (400 * area)/25);
  translate(60,0);  
 }

estabelece-se os textos com os dados 

  fill(0);
  textSize(32);
  translate(-660,0);
  text("Largura x Altura x Area", 200, 35);
  textSize(24);
  text("largura", 150, 485);
  text("altura", 350, 485);
  text("area", 550, 485);
  fill(200, 0, 0);
  rect(250, 465, 25, 25);
  fill(0, 200, 0);
  rect(440, 465, 25, 25);
  fill(0, 0, 200);
  rect(620, 465, 25, 25);
  //stroke(1);
  //strokeWeight(1);
  //NumAndGrid();
 }

são criadas funções para calcular o perímetro e a área em cada condição.

int calculaPerimetro(int Largura, int Altura){
  return 2*Largura + 2*Altura;
}

int calculaArea(int Largura, int Altura){
  return Largura*Altura;
}

Resultado:

Atividade 23

- expor os resultados em seu blog de uma aplicação no jogo da
vida simplificado que apresente a cada geração um gráfico de
pizza com espaços do mundo ocupados e livres. Depois mostre
um gráfico de barras com os nascimentos e mortes de cada
geração

códigos:

primeiro estabelece-se a variável para guardar o número de gerações

e dois vetores para guardar os dois mundos.

int numeroGeracao = 1;
int[] mundoAtual = new int[34];
int[] mundoNovo = new int[34];

dentro do setup()

é colocado o frameRate que a animação irá acontecer, o tamanho da tela, a cor do background

e uma condicional que faz com que o vetor mundoAtual receba 1 ou 2 como valor.

void setup()
{
  frameRate(1);
  size(800, 400);
  background(0);
  for(int i = 1; i < 32; i++)
  {
    mundoAtual[i] = (int)random(2);
    //println(mundoAtual[i]);
  }
  
}

dentro do draw()

uma variável para armazenar o número de células

a função mostraMundo() é chamada.

uma condicional que estabelece que o numero de celulas é igual a função cruzaCelulas recebendo o contador i como parâmetro.

se o número de celulas for 2 uma nova geração é criada, se for 1, a geração morre.

usa-se a função Array

copy para copiar o vetor e incrementa-se o número de gerações.

void draw()
{
  int numeroCelulas = 0;
  mostraMundo();
  for(int i = 1; i < 32; i++)
  {
    numeroCelulas = cruzaCelulas(i);
    if(numeroCelulas == 2)
      mundoNovo[i] = 1;
    else
      mundoNovo[i] = 0;
  }
  arrayCopy(mundoNovo, mundoAtual, 34);
  numeroGeracao++;  
}

função mostraMundo()

nessa função tem uma condicional para checar se a geração está viva ou morta.

e cria-se uma variável vivos para desenhar na tela o gráfico de pizza.

void mostraMundo()
{
  int cont = 0;
  for(int i = 1; i < 32; i++)
  {
    if
    (mundoAtual[i] == 1)
      cont++;
      //ellipse(i * 20, numeroGeracao * 30, 20, 20);
  }
  float vivos = (float)cont/32 * TWO_PI;
  println(cont);
  //ellipse(numeroGeracao * 30, height-y, 20, 20);
  fill(172, 25, 22);//ESPAÇOS OCUPADOS
  arc(width/2, height/2, width/2, width/2, 0, vivos);
  fill(10, 175, 10);//ESPAÇOS LIVRES 
  arc(width/2, height/2, width/2, width/2, vivos, TWO_PI);
}

a função CruzaCelulas() faz a checagem no mundoAtual pra ver se a geração irá viver ou morrer.

int cruzaCelulas(int posicao)
{
  int numeroCelulas = mundoAtual[posicao - 1] + mundoAtual[posicao] + mundoAtual[posicao + 1];
  return numeroCelulas;
}

para o gráfico de barras será utilizada a mesma lógica, só muda que na função de desenhar o gráfico na tela usa-se retangulos no lugar de arcos, e muda-se o posicionamento deles para ficarem corretos na tela.

void mostraMundo()
{
  int cont = 0;
  for(int i = 1; i < 32; i++)
  {
    if
    (mundoAtual[i] == 1)
      cont++;
      //ellipse(i * 20, numeroGeracao * 30, 20, 20);
  }
  float vivos = (float)cont/32 * height;
  float mortos = (float)(32-cont)/32 * height;
  println(cont);
  fill(0,200,0);
  rect(numeroGeracao*30, height - vivos, 10, vivos);
  fill(200, 0, 0);
  rect(numeroGeracao*30 + 11, height - mortos, 10, mortos);
}

Resultado:

jogo da vida - gráfico de pizza

jogo da vida - gráfico de barra

Atividade 22

- incluir um gráfico de linha que apresente
a evolução da quantidade de células a cada geração

código:

primeiro estabelece-se a variável para guardar o número de gerações

e dois vetores para guardar os dois mundos.

int numeroGeracao = 1;
int[] mundoAtual = new int[34];
int[] mundoNovo = new int[34];

dentro do setup()

é colocado o frameRate que a animação irá acontecer, o tamanho da tela, a cor do background

e uma condicional que faz com que o vetor mundoAtual receba 1 ou 2 como valor.

void setup()
{
  frameRate(1);
  size(800, 400);
  background(255);
  for(int i = 1; i < 32; i++)
  {
    mundoAtual[i] = (int)random(2);
    //println(mundoAtual[i]);
  }
  
}

dentro do draw()

uma variável para armazenar o número de células

a função mostraMundo() é chamada.

uma condicional que estabelece que o numero de celulas é igual a função cruzaCelulas recebendo o contador i como parâmetro.

se o número de celulas for 2 uma nova geração é criada, se for 1, a geração morre.

usa-se a função Array

copy para copiar o vetor e incrementa-se o número de gerações.

void draw()
{
  int numeroCelulas = 0;
  mostraMundo();
  for(int i = 1; i < 32; i++)
  {
    numeroCelulas = cruzaCelulas(i);
    if(numeroCelulas == 2)
      mundoNovo[i] = 1;
    else
      mundoNovo[i] = 0;
  }
  arrayCopy(mundoNovo, mundoAtual, 34);
  numeroGeracao++;  
}

função mostraMundo()

nessa função tem uma condicional para checar se a geração está viva ou morta.

e cria-se uma variável vivos e desenha-se na tela o gráfico de linhas com as gerações vivas e mortas.

void mostraMundo()
{
  int cont = 0;
  for(int i = 1; i < 32; i++)
  {
    if
    (mundoAtual[i] == 1)
      cont++;
      //ellipse(i * 20, numeroGeracao * 30, 20, 20);
  }
  float vivos = (float)cont/32 * height;
  float mortos = (float)(32-cont)/32 * height;
  println(cont);
  strokeWeight(5);
  stroke(0,255,0);
  line(numeroGeracao*30 , height - vivos, numeroGeracao*30, height);
  stroke(255,255,0);
  line(numeroGeracao*30 + 11, height - mortos, numeroGeracao*30 + 11, height);
}

a função CruzaCelulas() faz a checagem no mundoAtual pra ver se a geração irá viver ou morrer.

int cruzaCelulas(int posicao)
{
  int numeroCelulas = mundoAtual[posicao - 1] + mundoAtual[posicao] + mundoAtual[posicao + 1];
  return numeroCelulas;
}

Resultado:

Atividade 21

- discutir a relação entre o processo de chroma key
e a teoria dos conjuntos

Imagem meramente ilustrativa

Chroma key é uma técnica de efeito visual que consiste em colocar uma imagem sobre uma outra através do anulamento de uma cor padrão, como por exemplo o verde ou o azul.

É uma técnica de processamento de imagens cujo objetivo é eliminar o fundo de uma imagem para isolar os personagens ou objetos de interesse que posteriormente são combinados com uma outra imagem de fundo.

Ela se relaciona as teorias do conjunto, de forma que se dividirmo uma imagem em pixels branco e o fundo dela me pixels pretos, é como se existissem dois conjuntos... então tudo que for branco será considerado pertecente ao conjuto "pessoa" e tudo que for preto será considerado pertecente ao conjunto "fundo".

Trabalhar a imagem em conjuntos facilita para trabalhar os elementos nela existente de formas separadas. Em uma imagem pode existir diversos tipos de conjuntos, por exemplo: um conjunto com as pessoas, um conjunto com os objetos, um conjunto com as árvores, um conjunto com os prédios etc. Assim na hora da edição através do Chroma Key, é possível fazer a substituição do conjunto que seja considerado necessário.

Atividade 20

- criar uma aplicação que realiza crossfade entre três imagens distintas de acordo com a posição vertical do mouse

código:

Primeiro declara-se as variáveis das imagens que serão utilizadas, as variáveis das cores e de posição.

PImage imgOriginal;
PImage imgOriginal1;
PImage imgOriginal2;
float r,g,b,r1, g1, b1;
float a;
int pos;

no setup(), estabelece-se o tamanho da tela e carrega-se as 3 imagens que serão utilizadas nas variáveis criadas anteriormente.

void setup(){
size(320,240);
imgOriginal = loadImage("walter.jpg");
imgOriginal1 = loadImage("cook.jpg");
imgOriginal2 = loadImage("heisenberg.jpg");
}

na função draw()

se utiliza a função loadPixels(); para carregar e verificar os pixels da imagem

para fazer o crossfade atribui-se que o todo é 1, então o inicio da imagem é a posição da imagem dividido pela altura da tela.

e o inicio da outra é o todo subtraído pela primera imagem.

void draw(){
  loadPixels(); 
    a = mouseY/239.0;
    b = 1-(mouseY/239.0);
    println(a,b);    

depois cria-se uma condicional para verificar, se a imagem estiver entre 0 e 0.5 (metade do todo), ele faz o crossfade das duas primeiras imagens

se ela estiver entre 0.5 e 1 (outra metade do todo), ele faz o crossfade da segunda imagem com a terceira,

for (int x=0; x<320;x++){
    for(int y=0; y<240;y++){
      pos = y*320+x;
      
      if(a >= 0 && a <= 0.5){
      r= (2*a)*red(imgOriginal.pixels[pos]) + (1 - (2*a))*red(imgOriginal1.pixels[pos]);
      g= (2*a)*green(imgOriginal.pixels[pos]) + (1 -(2*a))*green(imgOriginal1.pixels[pos]);
      b=(2*a)*blue(imgOriginal.pixels[pos]) + (1 -(2*a))*blue(imgOriginal1.pixels[pos]);
      pixels[pos] = color(r,g,b);
      }
      if(a > 0.5 && a <= 1){      
      r1= (1-(2*b))*red(imgOriginal2.pixels[pos]) + (2*b)*red(imgOriginal.pixels[pos]);
      g1= (1 -(2*b))*green(imgOriginal2.pixels[pos]) +(2*b)*green(imgOriginal.pixels[pos]);
      b1= (1 -(2*b))*blue(imgOriginal2.pixels[pos]) + (2*b)*blue(imgOriginal.pixels[pos]);
      pixels[pos] = color(r1,g1,b1);
      }      
    }
  }

depois utiliza-se a função updatePixels para atualizar a tela.

  updatePixels();
  
}

Resultado:

Atividade 19

Envelhecimento da Imagem

- crie uma aplicação que realize o envelhecimento de uma imagem, a sua escolha, a partir de três variáveis distintas de controle: quantidade de pixels alterados por ruído, quantidade de amarelo e quantidade de vermelho adicionados.

código:

Primeiramente são criados variáveis para a Imagem Original e para suas respectivas cópias.
Depois define-se as variáveis que serão utilizadas, pos para definir a posição do pixel e r,g,b para os canais de cores.

PImage imgOriginal;
PImage imgCopia = createImage(300,400,RGB);
PImage imgCopia2 = createImage(300,400,RGB);
PImage imgCopia3 = createImage(300,400,RGB);
PImage imgCopia4 = createImage(300,400,RGB);

float r,g,b;
int pos;

Depois é só acrescentar o efeito desejado em cada uma das cópias.

para o efeito de ruído, acrescenta-se um valor aleatório nos canais RGB.

    for (int x = 0; x < 300; x++){
    for(int y = 0; y < 400; y++){
    r = red(imgOriginal.pixels[pos]) + random(50);
    g = green(imgOriginal.pixels[pos]) + random(50);
    b = blue(imgOriginal.pixels[pos]) + random(50);
    pos = y*300 + x;
    imgCopia.pixels[pos] = color(r,g,b);
   } 
  }

para o efeito de preto e branco, faz-se a media ponderada da quantidade de cada cor num pixel.

     for (int x = 0; x < 300; x++){
     for(int y = 0; y < 400; y++){
    r = red(imgCopia.pixels[pos]);
    g = green(imgCopia.pixels[pos]);
    b = blue(imgCopia.pixels[pos]);
    pos = y*300 + x;
    float m = (0.3*r + 0.59*g + 0.11*b);
    imgCopia2.pixels[pos] = color(m,m,m);
     }
   }

para o efeito avermelhado, aumenta-se o valor da cor vermelha.

   for (int x = 0; x < 300; x++){
     for(int y = 0; y < 400; y++){
    r = red(imgCopia2.pixels[pos]);
    g = green(imgCopia2.pixels[pos]);
    b = blue(imgCopia2.pixels[pos]);
    pos = y*300 + x;
    imgCopia3.pixels[pos] = color (r + 50,g,b);
     }
   }

para o efeito sépia, reduz-se a quantidade de azul da imagem.

   for (int x = 0; x < 300; x++){
     for(int y = 0; y < 400; y++){
    r = red(imgCopia3.pixels[pos]);
    g = green(imgCopia3.pixels[pos]);
    b = blue(imgCopia3.pixels[pos]);
    pos = y*300 + x;
    imgCopia4.pixels[pos] = color (r,g,b - 50);
     }
   }

Depois é só chamar as imagens no draw.

void draw(){
  image(imgOriginal,0,0);
  image(imgCopia,300,0);
  image(imgCopia2,600,0);
  image(imgCopia3,900,0);
  image(imgCopia4,1200,0);
  
}

Resultado:

Atividade 18

- incluir ajuste do brilho da imagem original de acordo com uma
determinada variável, que varia de -0.5 a +0.5, e postar em seu
blog a tela resultante da aplicação, apresentando a imagem original e simultaneamente todos os filtros desenvolvidos.

código:

Durante a aula na sala, nós desenvolvemos os filtros RGB e os de tons de cinza

agora basta apresentar os outros filtros que podem ser utilizados: que são CMY, Negativo, Tons de cinza e a nova imagem que receberá o ajuste de brilho. 

Explicando o código um pouco, primeiramente são criadas todas as variáveis que vão receber a imagem , as de RGB e uma variável que irá receber um valor aleatório e irá mudar o brilho da imagem de acordo com o valor.

De acordo que a imagem se aproxima do seu limite negativo ela vai ficando mais brilhosa, e do seu limite positivo ela vai escurecendo.

Atividade 17

- desenvolver uma aplicação que exibe um relógio, com horas e
minutos, e discutir em seu blog as alterações realizadas.

código:

No setup() define-se o tamanho da tela.

No draw(), define-se duas variáveis, uma para pegar a hora do sistema e uma para pegar os minutos.

Então a função numero é chamada de acordo com sua utilidade, pra mostrar as horas e os minutos.

void draw(){
int hora = hour();
int minuto = minute();

numero(hora, 0);
numero(minuto,140);
}

Dentro da função numero para conseguir exibir os dígitos separadamente, utiliza-se um conceito simples de divisão (dividir o número por 10), assim obtém-se o seu quociente e o resto da divisão, nessa ordem, o primeiro e o segundo número que devem ser informados.

void numero(int num, int pos) {
  
int unidade = num%10;
int dezena = num/10;

depois é só chamar as Imagens e definir a posição delas. 

PImage img1;
img1 = loadImage("n(" + dezena + ").png");
image (img1, pos, 0);

PImage img2;
img2 = loadImage("n(" + unidade + ").png");
image (img2, pos + 70, 0);
}

Resultado:

Atividade 16

- Criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse.

código:

Essa tarefa não teve muita diferença do que foi visto em sala, em fazer uma linha girar partindo do centro da tela, a diferença é que agora a linha será uma ellipse que precisa estar dentro de outra ellipse, então será necessário utilizar distância entre dois pontos para que a ellipse interna não ultrapasse a ellipse externa.

então são necessárias algumas comparações pra saber que valor a tangente inversa vai receber.

  if (mouseX !=0) {
    dx = mouseX - 400 ;
    dy = mouseY - 300 ;
    tg = dy/dx;
  }

  a = atan(tg);

se a posição do mouse em x for menor que o centro da ellipse, a variável a recebe o valor de PI incrementado de a.

  if (mouseX<400) {
    a += PI;
  }

se a posição do mouse em x e em y for maior que o centro da ellipse e menor que o centro da ellipse em y, a variável recebe o valor de PI*2 incrementando de a.

  if (mouseX>400 && mouseY<300) {
    a += TWO_PI;
  }

depois estabelece-se os valores de X e Y, usando as funções cos e sin.

  X=cos(a)*(raio - 70);
  Y=sin(a)*(raio - 70);

a variável dist, recebe os valores da função distancia, que é a função para achar a distância entre dois pontos. No caso, a distância entre o centro da ellipse maior e do mouse, assim, um novo círculo será sempre criado de acordo com a posição do mouse.

  dist =distancia(400, mouseX, 300, mouseY);
  fill(0);
  if (dist>=(raio-70)) {
    ellipse(400+X, 300+Y, 100, 100);
  } else {
    ellipse(mouseX, mouseY, 100, 100);
  }
}

int distancia(float X1, float X2, float Y1, float Y2) {
  int resposta;
  resposta = (int)sqrt(((X1-X2)*(X1-X2)) + ((Y1-Y2)*(Y1-Y2)));
  return resposta;
}

Resultado:

Atividade 15

- Com a função, fazer um algoritmo usando a função millis() do processing para simular um cronômetro, apenas com o ponteiro dos segundos

código:

primeiro declara-se as variáveis que serão utilizadas e o tamanho da tela.

float x;
float y;
float sec;

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

dentro da função draw(), está a variável sec, que irá receber o valor milisegundos dado pelo processing, e divindo por 1000 irá retornar o valor em segundos.
e a função cronometro é chamada, os atributos dela são o valor do ângulo utilizado e o raio da circunferência.

a função cronometro recebe como atributo o valor do angulo e o raio da circunferência, o ponto inicial do ponteiro é o angulo de 1,5PI, que é 270º no processing.

void draw(){
   sec = (millis()/1000);
   println(sec);
   cronometro(PI+(PI/2),100);
}

a variável porce é utilizada para fazer a movimentação do ponteiro, para cada 15 segundos o ponteiro tem que percorrer 60º, ou seja, PI/2 radianos, se para cada meio segundo tenho PI/2, para 1 segundo tenho esse valor divido por 15, para cada 15% da ellipse deve-se percorrer o equivalente a PI/30 radianos.

depois estabelece-se as posições de x e y usando as funções cos e sin que irão receber o valor de ang + porcen, no caso ang é o valor do angulo inicial e porce é o angulo que ele vai percorrer, multiplicado pelo raio da circunferência.

cria-se uma ellipse e uma linha(ponteiro) para demonstrar o movimento.

void cronometro(float ang, float raio){
   float porce = sec*(PI/30);
   x = (cos(ang+porce)*raio);
   y = (sin(ang+porce)*raio);
   ellipse(width/2,height/2,raio*2,raio*2);
   line(width/2,height/2,x+width/2,y+(height/2));
}

Resultado (Clique para ver funcionando) :

Adicionar legenda

Atividade 14

- Criar o movimento de um barco no mar e discutir os resultados no blog

código:

Primeiro declara-se as variáveis que serão utilizadas, e dentro do setup() o tamanho da tela, e utilizo a função rectMode pra deixar o ponto inicial do retângulo centralizado junto com a ellipse q será criada.

float x=0;
float y;
float x1=0;
float y1=0;

void setup(){
  size(800,600);
  noStroke();
  rectMode(CENTER);
}

A função onda é a função principal que faz a linha da senoide, já foi visto em sala como ser feita, a única diferença é que agora eu preciso por um barco andando em cima dessa onda criada, e pra isso é criado uma nova função barco(), que desenha um barquinho na ellipse que faz a função onda, assim dar a impressão de que o barco está flutuando na onda.

void draw(){
  background(120);
  y = sin(x);
  x+=0.1;
  onda();
  barco();
 
 
}

void onda(){
  x1=0;
 for(int i=0; i<800; i++){
  y1 = sin(x1);
  x1+=0.1;
  ellipse(20*x1,20*y1+280,5,5);
  }  
}

void barco(){
  triangle(20*x,20*y + 280, 20*x + 25, 20*y + 230, 20*x, 20*y + 180);
  rect(20*x,20*y+280,50,20);
}

Resultado:

Atividade 13

- Criar uma aplicação que desenha um polígono
regular centralizado na tela com a quantidade de
lados informada no próprio código. Discutir a solução adotada em seu blog.

código:

O metódo que escolhi pra realizar essa tarefa foi utilizando cordenadas polares, então, primeiramente declara-se as variáveis, uma variável que irá receber o número de lados do polígono, e uma que irá receber o raio da circunferência.

int n = 6;
float raio = 100;

no setup(), define-se o tamanho da tela, e declara-se alguams variáveis que serão utilizadas na criação da forma, a variável ang recebe o valor em radianos do ângulo da nova forma, através da divisão de 360º pelo número de lados do novo polígono. A variável inc serve pra incrementar os valores de cos e seno no polígono. 

Eu utilizei a função vertex para criar a forma, ela recebe as posições iniciais e através de um contador verifica quantos lados serão necessários ser criados e desenha de acordo.

void setup(){
  noFill();
  size(800,600);
  float ang = 2*PI/n;
  float inc = 0; 
  float x;
  float y;
   x = raio*cos(inc);
   y = raio*sin(inc);
   beginShape();
   vertex(x + width/2,y + height/2);
   for (int i = 0; i < n; i++){
   inc += ang;
   x = raio*cos(inc);
   y = raio*sin(inc);
   strokeWeight(1);
   vertex(x + width/2, y + height/2);
   }
   endShape(CLOSE); 
}

Resultado:

TRABALHO - Criação do logotipo "Robot Android".

O logotipo "Robot Android" é um robôzinho verde que acompanha a maioria dos produtos da marca Android e ele é formado basicamente por formas geométricas simples (Círculos e Retângulos), porém que juntas criam uma imagem fluída e interessante.

A princípio, para definir meus módulos e como era feito o logo, eu fui no site da google procurar algo sobre o logotipo.. porém eles não tem um "manual" propriamente dito de criação, eles apenas disponibilizam a logotipo em um arquivo editável. Curioso com a forma de criação da logo, eu resolvi tentar me comunicar com a criadora original, a russa Irina Blok, que junto com a equipe de design da google, foi a responsável principal da criação do logo. Então mandei um e-mail para ela perguntando se ela havia usado formas geométricas e matemática na criação do logo... sem muitas esperanças, porém um tempo depois ela me respondeu.

Primeiro e-mail trocado com a criadora da logo.

Segundo e-mail trocado com a criadora da logo.

Então ela me diz que não usou matemática nenhuma para fazer a logo, que as decisões foram feitas visualmente. O que faz com que as medidas da logo tenham valores não muito simétricos, porém não significa que as formas não podem se ligar de alguma maneira.
Utilizando basicamente, círculos e retângulos na figura original, eu consegui achar outras figuras geométricas que se formavam na junção das duas formas principais... consegui estabelecer alguns trapézios e triângulos. Foi usado também diagonal do retângulo para estabelecer o tamanho das antenas.. etc.

Por exemplo:

o retângulo que forma o braço é a base menor de um trapézio retângulo (lado AD), que é igual a: lado AD = R*4;

a distância entre o braço e a esfera da cintura pode ser utilizada a fórmula da distância entre dois pontos:
DC = (AB)² - (BC - AD)³

a distância entre os braços e a cintura e a cintura e a cabeça é o valor do r (raio do olho).

a distância entre as duas extremidades dos olhos define o meio do desenho e o outro lado são basicamente as mesmas formas, só irá mudar o valor das coordenadas.
As coordenadas (x e y) de cada ponto vão ajudar a você estabelecer essas distâncias entre pontos das figuras... após a figura ser divida em módulos.

Para essa divisão de módulos, eu escolhi criar um tela 800x800 e dividir ela igualmente em 15 módulos de valor 50. Após isso eu escolhi meu ponto inicial... e determinei os módulos de cada parte da imagem.. isso vai me ajudar no desenvolvimento do aplicativo que é de recriar o logotipo da Android sem utilizar números específicos, assim se a pessoa quiser criar um logotipo em qualquer coordenada, ou de qualquer tamanho, será possível.

O código:

para a criação do código eu usei apenas as funçoes rect(), arc(), line() e ellipse() e assim criei todas as partes que juntas, formariam o desenho do robô.

int mod = 50;

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

void draw(){
  background(0);
  desenhaCorpo(250,307,mod);
  antenas(250,307, mod);
}


void desenhaCorpo (float x, float y, float modulo){

//cabeça
noStroke();
fill(151,199,24);
arc(x + 3.07*modulo, y - 0.2*modulo, 6.14*modulo, 6.14*modulo, PI, 2*PI, OPEN);

//olhos

fill(255);

ellipse(x + 1.66*modulo, y - 1.62*modulo, 0.52*modulo, 0.52*modulo);
ellipse(x + 4.48*modulo, y - 1.62*modulo, 0.52*modulo, 0.52*modulo);

//pontas das antenas
fill(151,199,24);
ellipse(x + 1.12*modulo, y - 3.64*modulo, 0.16*modulo, 0.16*modulo);
ellipse(x + 5.02*modulo, y - 3.64*modulo, 0.16*modulo, 0.16*modulo);
//braço esquerdo
fill(151,199,24);
ellipse(x + 7.1*modulo, y + 0.58*modulo, 1.4*modulo, 1.4*modulo);
ellipse(x + 7.1*modulo, y + 3.42*modulo, 1.4*modulo, 1.4*modulo);
rect(x + 6.4*modulo, y + 0.58*modulo, 1.4*modulo, 2.8*modulo);
//cintura
rect(x, y, 6.14*modulo, 4.52*modulo);
ellipse(x + 0.7*modulo, y + 4.5*modulo,1.4*modulo, 1.4*modulo);
ellipse(x + 5.44*modulo, y + 4.5*modulo, 1.4*modulo, 1.4*modulo);
rect(x + 0.7*modulo, y + 4.5*modulo, 4.74*modulo, 0.7*modulo);

//braço direito
ellipse(x - 0.96*modulo, y + 0.58*modulo, 1.4*modulo, 1.4*modulo);
ellipse(x - 0.96*modulo, y + 3.42*modulo, 1.4*modulo, 1.4*modulo);
rect(x - 1.66*modulo, y + 0.58*modulo, 1.4*modulo,2.8*modulo);
//pernas
rect(x + 1.22*modulo, y + 4.5*modulo, 1.4*modulo, 2.2*modulo);
rect(x + 3.52*modulo, y + 4.5*modulo, 1.4*modulo, 2.2*modulo);
ellipse( x + 1.92*modulo, y + 6.7*modulo, 1.4*modulo, 1.4*modulo);
ellipse( x + 4.22*modulo, y + 6.7*modulo, 1.4*modulo, 1.4*modulo);
}

void antenas(float x, float y, float modulo){
strokeWeight(round(0.16*modulo));
stroke(151,199,24);
line(x + 1.12*modulo, y - 3.64*modulo, x + 1.66*modulo, y - 2.74*modulo);
line(x + 5.02*modulo, y - 3.64*modulo, x + 4.48*modulo, y - 2.74*modulo);

}

Resultado Final: