Bolinha acelerando e se batendo

Dentre as atividades que foram passadas, foi determinado que fosse produzida uma circunferência que se deslocaria tanto horizontalmente quanto verticalmente pela tela e, quando ela encostasse nos cantos da janela, sua velocidade fosse aumentada em 1%.

Segue abaixo o código com os comentários explicando como ele foi produzido.

//determinação dos valores das variáveis

float bolaX = 10;

float bolaY = 15;

float dX = 15;

float dY = 15;

float acelerador = 0.01;

//tamanho da tela

void setup(){

  size(800, 600);

}

void draw(){

  background(0);

  //bola tem sua posição determinada

 ellipse(bolaX, bolaY, 40, 40); 

  //deslocamento da bola

  bolaX = bolaX + dX;

  bolaY = bolaY + dY;

  

  /*a cada vez que a bola encostar numa parede, ela terá uma mudança na sua tranjetória

  e sua velocidade vai ser aumentada em 1% */

  if(bolaX>=790){

    dX =  -(dX +dX*acelerador);

    

  }

  else if(bolaX <10){

     dX = -(dX +dX*acelerador);

       

  }

  else if(bolaY>=590){

    dY = -(dY+dY*acelerador);

  }

  else if(bolaY<10){

    dY = -(dY+dY*acelerador);

  }

  

  

}

Pong!

Na atividade para casa da aula 10, foi pedido que fizéssemos no Processing um jogo parecido com o clássico jogo Pong, o qual foi um dos primeiros a serem desenvolvidos e foi um dos maiores responsáveis tanto da popularização dos arcades e que tornaram possível o nascimento dos videogames.

Segue abaixo o código com comentários explicando cada parte principal dele. Em seguida, um gif demonstrando o jogo funcionando.

Para este jogo, eu reaproveitei o código de uma outra atividade que foi feita anteriormente em sala de aula que consistia em fazer uma bolinha se mover livremente pela tela e quando se chocasse com os limites da janela ela mudaria de direção.

Tive alguns problemas na determinação da colisão com os paddles, mas ainda assim gostei bastante do resultado.

//coordenadas iniciais da bola
int bolaX = 100;
int bolaY = 150;
//modificadores da trajetória da bola
int dX = 5;
int dY = 5;
//coordenadas iniciais do primeiro paddle
int xP1 = 20;
int yP1 = 120;
//coordenadas iniciais do segundo paddle
int xP2 = 280;
int yP2 = 120;
//raio da bolinha
int raio = 20;

void setup(){
  size(320, 240);
}

void draw(){
 background(0);
 mover();
 //aqui é feita a bolinha
 ellipse(bolaX, bolaY, raio*2, raio*2);
 //aqui são feitos os paddles
 rect(xP1, yP1, 20, 80);
 rect(xP2, yP2, 20, 80);


  //nesta parte, temos a determinação do deslocamento da bola de forma costante, sendo um MRU
 
  bolaX = bolaX + dX;
  bolaY = bolaY + dY;
  //mudança da direção da bola ao tocar nas bordas
  if(bolaX>=300){
    dX = -dX;
   
  }
  else if(bolaX <10){
     dX = -dX;
     
  }
  else if(bolaY>=220){
    dY = -dY;
  }
  else if(bolaY<10){
    dY = -dY;
 
  }
  //mudança na direção da bola ao tocar um dos paddles
  if(Colisao(xP1, yP2) || Colisao(xP2, yP2)){
   dX = -dX;
   dY = -dY;
  }
  //finalização do jogo quando a bola toca uma das bordas da janela do jogo
  if(bolaX > (width-raio)){
    gameOver(true);
  }
  else if(bolaX< raio){
    gameOver(false);
  }
 
}
/*função que determina o comportamento da bola quando colidir
com um dos paddles*/
boolean Colisao(int xP, int yP){
  if(bolaY >= yP - raio && bolaY <= yP+ 80+raio){
    if(bolaX >= xP - raio && bolaX <= xP + 20 + raio){
      return true;
    }
    else
      return false;
  }
    else
      return false;
   
 
}

//função que movimenta os paddles
void mover(){
  if(keyPressed){
    if (keyCode == DOWN) {
      yP1+=5;
    }else if(keyCode == UP){
      yP1-=5;
    }else if(keyCode == LEFT){
      yP2+=5;
    }else if(keyCode == RIGHT){
      yP2-=5;
    }
  }
}
//função que termina o jogo, posicionando um texto dizendo qual lado venceu
void gameOver(boolean fimdejogo){
  if (fimdejogo){
    clear();
    text("Esquerda ganhou!", 160, 120);
    noLoop();
  }
  if (!fimdejogo){
    clear();
    text("Direita ganhou",160,120);
    noLoop();
  }
}

A da BRAUN

Foi pedido como atividade da aula 7 que fizéssemos uma reprodução de parte do logo da empresa BRAUN, uma empresa que teve grande influência na história de design de produtos. Para esta atividade, foi pedido apenas que fosse reproduzido a letra "A" do seu logo, além de que ele ficasse aumentando e diminuindo continuamente.

Abaixo, segue o código com a explicação dele como comentários.

//valores bases dados para as variáveis que sofrerão alterações na execução do código

float aDaBraun = 10;

float aumentador = 5;

void setup(){

 size(600,600); 

  

}

void draw(){

 background(255);

 //chamada da função com a variável estabelecida anteriormente

 Braun(aDaBraun);

 //adição feita a variável que controla o módulo

 aDaBraun= aDaBraun + aumentador;

 /*aqui, estabeleço que a variável que modifica a variável 

 de módulo tenha seu valor invertido a partir do momento 

 que o módulo passa a ter o tamanho de 50 unidades*/

 if(aDaBraun >=50){

   aumentador = -aumentador;

 }/*aqui, quando o valor passar a ser menor que 10 unidades, o modificador 

 tem seu valor novamente invertido para que o logo volte a aumentar*/

 else if(aDaBraun <=10){

   aumentador = -aumentador;

 }

}

//função que produz o logo

void Braun(float modulo){

 fill(0);

  //estabelecimento da posição inicial

  float posicaoX = 300+modulo; 

  float posicaoY = 150+modulo;

  noStroke();

  //as duas "pernas" do "A"

  rect(posicaoX, posicaoY-modulo, modulo, modulo/2);

  rect(posicaoX-modulo, posicaoY, modulo, modulo*8);

  rect(posicaoX+modulo, posicaoY, modulo, modulo*8);

  //curvatura do "A", feita com duas circunferências

  ellipse(posicaoX, posicaoY, modulo*2, modulo*2);

  ellipse(posicaoX+modulo, posicaoY, modulo*2, modulo*2);

  

  

  fill(255);

  //preenchimento do "A"

  rect(posicaoX, posicaoY, modulo, modulo+modulo/2, PI);

  

  fill(0);

  //parte de baixo do "A"

  rect(posicaoX-modulo, posicaoY+(2.5*modulo), modulo*3, modulo);

  

}

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