Bandeira Nacional

Na aula do dia 27/10/2015, foi dado como atividade em sala de aula que fosse produzida através do Processing uma imagem que fosse semelhante a bandeira do Brasil, obedecendo as proporções estabelecidas na lei nº 5.700. Nesta atividade, foi recomendado que fossem produzidos apenas as três formas fundamentais da bandeira: um retângulo, o losango e a circunferência no centro.

As determinações da lei estabeleciam o seguinte para as proporções da bandeira:

1. Para cálculo das dimensões, tomar-se-á por base a largura desejada, dividindo-se esta em 14 (quatorze) partes iguais. Cada uma das partes será considerada uma medida ou módulo.
2. O comprimento será de vinte módulos (20M).
3. A distância dos vértices do losango amarelo ao quadro externo será de um módulo e sete décimos (1,7M).
4. O círculo azul no meio do losango amarelo terá o raio de três módulos e meio (3,5M).

Com estas instruções, foi pedido que fosse feita uma função chamada mostraBandeiraBrasil(x, y, l), sendo os parâmetros x e y relativos ao centro da bandeira e l relativo ao comprimento que ela teria.

Com estas informações, comecei a produzir o retângulo da bandeira. Considerando a distância entre o centro e o lado da mesma, calculei que deveria considerar uma distância x de 10 módulos e uma distância y de 7 módulos para a origem do retângulo.

Em seguida, considerei as distâncias necessárias para ser produzido o losango utilizando a função quad() do Processing. Para cada um dos vértices, calculei a distância que era necessário ele estar tanto do centro da figura enquanto respeitava o limite de deixa-los a 1,7 módulos de distância de cada lado do retângulo.

Finalmente, foi feita a circunferência com raio de 3,5 módulo.

Segue o código abaixo que utilizei, junto com uma imagem demonstrando o código funcionando.


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

void mostraBandeiraBrasil(float x, float y, float l){
  //determinação do tamanho de cada módulo
  float modulo = l/14;
  //determinação do raio da circunferência a partir do módulo
  float raio = 3.5*modulo;
  //retângulo com o preenchimento verde
  fill(#00ff00);
  rect(x-10*modulo, y-7*modulo, 20*modulo, 14*modulo);
  //losango com o preenchimento amarelo
  fill(#ffff00);
  quad(x - 8.3*modulo, y, x, y-5.3*modulo, x+8.3*modulo, y, x, y+5.3*modulo);
  //circunferência com o preenchimento azul
  fill(#0000ff);
  ellipse(x, y, raio*2, raio*2);
}

void draw(){
   
   mostraBandeiraBrasil( 400, 300, 300); 

}

Lançamento balístico

Na aula do dia 22/10/2015, foi pedido em sala de aula que fosse produzido um código no Processing que demonstrasse um lançamento balístico como se fosse um lançamento oblíquo.

Um lançamento oblíquo envolve dois tipos de movimento: um movimento retilíneo uniforme (MRU) e um movimento retilíneo uniformemente variado(MRUV), sendo o MRU tem um direcionamento horizontal e o MRUV vertical, causado pela aceleração da gravidade.

Na atividade de hoje, foi pedido que o recálculo do lançamento balístico a cada 0,1 segundo, porém mantendo o tempo real.

Para isto, bastou apenas deixar o Frame Rate no valor de 10(sendo assim a imagem atualizada numa taxa de 10 frames por segundo) e que ao incremento do tempo fosse somado um valor que fosse nesta mesma proporção, como pode ser demonstrado no código abaixo:

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

float tAtual =0;
float aAtual = -10;
int vAtual = 40;
float dEixoX;
float dEixoY;
float soma = float(1)/float(10);

void draw(){
  background(255);
  mostraGrade();
  mostraGradeH();
  dEixoX = MRU(float(vAtual), tAtual);
  dEixoY = MRUV(vAtual, tAtual, aAtual);
  ellipse(dEixoX, 600-dEixoY, 10, 10);
  println(tAtual, aAtual, dEixoY, dEixoX);
  tAtual = tAtual + soma;
 
}

float MRUV(float v, float t, float a){
  float d;
  d = v * t + (a*t*t)/2;
  return(d);
}

float MRU(float v, float t){
  float d;
  d = v * t;
  return(d);
}

void mostraGrade(){
  for (int i=0; i<12; i++){
    line(i*50, 0, i*50, 600);
  }
}

void mostraGradeH(){
  for(int i=0; i<12; i++){
    line(0, i*50, 600, i*50);
  }
}

Bolinhas peregrinas e backgrounds coloridos

Na aula do dia 20/10/2015, foi pedido a turma que fosse feito um programa no Processing que mostrasse uma bolinha que percorreria a tela, sendo que a progressão do seu deslocamento seria determinado por uma função com dois parâmetros: a velocidade e o tempo. Além disso, teríamos de fazer uma harmonização de cores no background a nossa escolha.

Para esta atividade então resolvi fazer com que o background fizesse mudanças randômicas na sua coloração e fosse apresentado em texto o valor dos canais RGB, que mudam a cada vez que a bolinha na tela se move.

Segue uma imagem abaixo ilustrando isso:

Segue abaixo o código utilizado:

void setup(){
  frameRate(1);
  size(600,600);
 
 
}
//Variáveis de tempo e dos valores que serão utilizados nos canais RGB do background
int tAtual =0;
float r;
float g;
float b;

void draw(){
  //aqui determinei que os valores das variáveis dos canais RGB do background

  background(122, 135, 200);
  mostraGrade();
  //desenho da bola e do texto que é exibido na tela
  ellipse(MRU(10, tAtual), 10, 10, 10);
  tAtual++;
  textSize(12);
  fill(0, 102, 53);
  text("Tempo: " + tAtual, 100, 300);
  text("Canais de cores utilizados no background R: 122, B: 135, G: 200", 100, 330);
 
}
//determinação do movimento retilínio uniforme feito pela bola
int MRU(int v, int t){
  int d;
  d = v * t;
  return(d);
}
//determinação da grade que terá pela tela
void mostraGrade(){
  for (int i=0; i<12; i++){
    line(i*50, 0, i*50, 600);
  }
}

Desenho de flores no Processing

Na aula do dia 15/10/2015, foi passado em sala de aula a atividade de desenhar e organizar circunferências utilizando funções do Processing.

Primeiro, foi pedido que fossem produzidas uma função chamada "circulo", a qual recebe como parâmetros as coordenadas que ela será colocada no plano e o raio que terá esta circunferência.

Em seguida, os professores pediram que fosse desenhado no Processing 5 circunferências, com a disposição das mesmas em cruz, em uma função chamada "flor". Para isto, utilizei o seguinte código e tive o seguinte resultado:

Em seguida, foi pedido que fosse feita a mesma atividade, mas agora com uma função chamada "flor2" e que recebesse 3 parâmetros:

Finalmente, foi pedido que as circunferências adjacentes a circunferência central passassem a ser dispostas na forma de um "X", ficando as "pétalas" da flor em diagonal, numa nova função chamada "flor3".

Para a disposição destas novas circunferências, foi preciso calcular a distância do centro de cada uma das circunferências, ficando cada uma na "diagonal" caso fosse traçado um quadrado imaginário ligando os centros de cada uma das circunferências. Após serem feitos os cálculos, escrevi o código a seguir e obtive os seguintes resultados:

Com isto, esta concluída a atividade. Segue o código:

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

void draw(){
  flor3(150, 150, 50);
  }
//circulo com preenchimento cinza recebendo para a posição os parâmetros "x" e "y" e para o raio o parâmetro "r"
void circulo(float x, float y, float r){
  ellipse(x, y, r, r);
  fill(128);
}

//primeira flor com apenas 2 parâmetros
void flor(int x, int y){
  circulo(x, y, x);
  circulo(x+y, y, x);
  circulo(x-y, y, x);
  circulo(x, x+y, x);
  circulo(x, x-y, x);
}

//segunda flor com 3 parâmetros
void flor2(int x, int y, int r){
 circulo(x, y, (2*r));
 circulo(x+(2*r), y, (2*r));
 circulo(x-(2*r), y, (2*r));
 circulo(x, y+(2*r), (2*r));
 circulo(x, y-(2*r), (2*r));
}

//terceira flor, com as suas "pétalas" em diagonal
void flor3(float x, float y, float r){
  circulo(x, y, (2*r));
  circulo(x+((2*r)/sqrt(2)), y+(2*r/sqrt(2)), 2*r);
  circulo(x-((2*r)/sqrt(2)), y+(2*r/sqrt(2)), 2*r);
  circulo(x+((2*r)/sqrt(2)), y-(2*r/sqrt(2)), 2*r);
  circulo(x-((2*r)/sqrt(2)), y-(2*r/sqrt(2)), 2*r);
 
 
}