Atividade 7- Fazer A da Braun pulsar.

Fazer o “A" da Braun pulsar (lenta e continuamente
 aumentar e diminuir de tamanho) no centro da tela.

O módulo é 1 em geral, com a diferença apenas no retângulo do meio da letra que é 1,3.
Temos 8 módulos de altura e 3,3 de largura! Optei por dividir em algumas imagens sobrepostas, um quadrado preto com as bordas superiores arredondadas (ocupando 3 módulos), um outro da mesma cor do fundo com apenas 2 módulos de altura e 1,3 de largura. Depois fiz dois retângulos (um de cada lado) com a quantidade de módulos restante para puxar as pernas da letra de maneira sobreposta que pareça contínuo. Depois fiz mais um retângulo preto após 3,5 de módulo em branco, com 1 módulo de altura e 1,3 de largura (porém coloquei um pouco mais largo para garantir a sensação de continuidade).

A função ficou assim:

void brAun (float largura)
{
float modulo= largura/3.3;
float altura= 8*modulo;

noStroke();
fill(0);
rect(350,250-modulo, 3.3*modulo, 3*modulo, 50);
rect(350, 250+modulo, modulo, altura-2*modulo);
rect(350+2.3*modulo, 250+modulo, modulo, altura-2*modulo);
fill(255);
rect(350+modulo,250, 1.3*modulo, 3*modulo, 30);
fill(0);
rect(350,250+3.5*modulo, 3*modulo, modulo);
}

Tive que criar uma variável largura e um boolean crescer, toda vez que a largura for igual ou maior que zero, crescer é ativado que faz largura ser incrementada. Caso atinja o limite de tamanho que defini, decrementa até chegar a zero novamente!

E o programa principal:

Resultado:

Atividade 6 - Bandeira do Brasil!

LF 5700, S. II, A. 5 - 01/09/1971
I - Para cálculo das dimensões, tomar-se-á por base a altura desejada, dividindo-se esta em 14 partes iguais. Cada uma das partes será considerada uma medida ou módulo.
II - O largura total será de 20 módulos.
III - A distância dos vértices do losango ao quadro externo será de um módulo e sete décimos.
IV - O círculo no meio do losango terá o raio de três módulos e meio.

Fui construindo o código primeiramente seguindo as definições que a lei indica, então módulo=largura/20 e altura=14*modulo. Como o x e y são o centro do losango então consequentemente é o centro da elipse também, e seu raio é de 3,5*modulo, como no código da elipse trabalhamos com diâmetro é só multiplicar por dois; diâmetro=2*3,5*modulo.

Como no caso do retângulo o parâmetro não é o centro como losango e elipse, e sim no alto da lateral esquerda então precisamos criar variáveis para guardar esses valores, encontramos o local ideal pegando o atual valor de x e diminuindo pela metade da largura, a mesma coisa com y porém diminuindo a metade da altura, fica: eixoXrect=x-l/2 e eixoYrect=y-altura/2. Então o posicionamento do rect em relação a elipse fica ok com qualquer valor colocado em x e y.

O cálculo do losango é um pouco diferente pois sua largura e altura não é a mesma do retângulo é justamente 1,7*módulo a menos em todas as extremidades. Alguns parâmetros o x e y serão o mesmo do losango e elipse em outros é preciso calcular esse diferença de 1,7*módulo!
Fica: quad(x,y-(7-1.7)*modulo,x+(10-1.7)*modulo,y,x,y+(7-1.7)*modulo,x-(10-1.7)*modulo,y);

Atividade 5 - Lançamento balístico + desafio + dados na tela!

Reutilizando as funções MRU e MRUV - e diferenciando claramente as variáveis necessárias - crie uma aplicação que simula lançamentos balísticos (logicamente o tempo é o mesmo para ambos os movimentos simulados)

Bom começamos utilizando as funções de MRU e MRUV. Uma para movimento horizontal e outra vertical, respectivamente. 

float MRUV(float vv, float av, float t){

  float d;

  t=tAtual;

  d=vv*t+av*t*t/2;

  dAtualver=d;

  return (dAtualver);

  }

  

  float MRU(float vh, float t){

  float d;

  t=tempaux;

  d = vh*t;

  dAtualhor=d;

  return (dAtualhor);

  }

As duas funções retornam o cálculo da distância, uma com apenas velocidade e tempo, e a outra com acréscimo da aceleração! Esses dois movimentos ao mesmo tempo causam o lançamento balístico.

Transformando em 60fps: Mudando o frameRate para 60 e incrementar o tempo em +1.0/60.0!! 

DESAFIO:

Simule o quicar de uma bola lançada para a frente e para cima!

Para fazer a bola quicar foi a parte mais complicada para mim. Bom, acrescentei uma condição para sempre que o eixoY for maior que o tamanho da tela, sua nova posição ser o limite da tela menos o raio. Para o movimento repetir é preciso zerar o tempo e para completar a sensação de quicar a variável velver (velocidade vertical) será diminuída até tender a zero! Criei outra variável com mesmo valor de tempo porém ela não é zerada e é usada na função do movimento horizontal para fazer com que ele continue normalmente na horizontal e apenas vá reiniciando o movimento na vertical, quando quica.

Código completo:

float tAtual = 0;

float dAtualhor;

float dAtualver;

float raio=5;

float velver=70;

float velhor=15;

float eixoX;

float eixoY;

float tempaux=tAtual;

void setup(){

  frameRate (60);

  size(600,600);

  background(255);

}

void draw(){

  eixoY=600-dAtualver;

  eixoX=dAtualhor;

  

  background(255);

  mostraMundo();

  

textSize(25);

text("Distância vertical: "+dAtualver, 10, 30); 

text("Distância horizontal: "+dAtualhor, 10, 60);

text("Tempo: "+tempaux, 10, 90); 

  

  println("Distância percorrida na vertical:");

  println(MRUV(velver,-9.8,0),"metros");

  println("Distância percorrida na horizontal:");

  println(MRU(velhor,9.8),"metros");

  println("Tempo decorrido:");

  println(tAtual,"segundos");

  fill (200,2,100);

  ellipse(eixoX,eixoY,raio*2,raio*2);

  tAtual+=1.0/60.0;

  tempaux+=1.0/60.0;

  

if ((eixoY)>600) 

{

eixoY=600-raio;

tAtual=0;

velver=velver/1.5;

}

}

float MRUV(float vv, float av, float t){

  float d;

  t=tAtual;

  d=vv*t+av*t*t/2;

  dAtualver=d;

  return (dAtualver);

  }

  

  float MRU(float vh, float t){

  float d;

  t=tempaux;

  d = vh*t;

  dAtualhor=d;

  return (dAtualhor);

  }

  

  void mostraMundo(){

  for (int i=0 ; i<12 ; i++) {

    line(i*50,0,i*50,600);

    line(0,i*50,600,i*50);

  }

  }

A parte do texto é simples usando a ferramenta text, lembra bastante o já conhecido println, porém você também controla o tamanho da fonte e a posição do eixo x e y que o texto se posicionará.

Acima o gif do resultado!

Atividade 4 - Movimento de uma bola com MRU a 60fps!

Mantendo o tempo real, explicar as alterações necessárias
 para o simulador operar a 60 fps, tornando o modelo mais preciso e, consequentemente, a animação mais suave.

O código inicial fazia a bola se movimentar um quadro a cada um segundo, deixando seu rastro das posições anteriores.

int tAtual=0;

int vAtual= 10;

int dAtual;

void setup ()

{

frameRate(1);

size(600,600);

background(255);

mostraMundo();

}

void mostraMundo () 

{

  for (int i=0; i<12; i++)

   {

  line(i*50,0,i*50,600);

  line(0,i*50,600,i*50);

   } 

}

void draw() 

{

dAtual= MRU(vAtual,tAtual);

println(tAtual, dAtual);

ellipse(dAtual,300,10,10);

tAtual++;

}

int MRU(int v, int t)

{

int d;

d=v*t;

return(d);

}

Tivemos que mudar tanto seu frameRate() de 1 para 60 e também criar uma nova variável para receber o novo valor de tempo, que será 1/60. Como o resultado dessa divisão dá número quebrado ela tem que ser float, implicando assim que todas as variáveis que se relacionem com ela também precisam ser alteradas para float. Então agora tAtual não é incrementado com +1 a cada loop, e sim com 1/60, dizendo assim que a cada 1 segundo 60 bolas serão desenhadas. Dando assim uma movimentação mais fluida e suave.

float tAtual=0;

float vAtual= 10;

float dAtual;

float tempo60fps=1.0/60.0;

void setup ()

{

frameRate(60);

size(600,600);

background(255);

mostraMundo();

}

void mostraMundo () 

{

  for (int i=0; i<12; i++)

   {

  line(i*50,0,i*50,600);

  line(0,i*50,600,i*50);

   } 

}

void draw() 

{

dAtual= MRU(vAtual,tAtual);

println(tAtual, dAtual);

ellipse(dAtual,300,10,10);

tAtual=tAtual+tempo60fps;

}

float MRU(float v, float t)

{

float d;

d=v*t;

return(d);

}

Atividade 3 - Criar função flor3(x,y,r) e chamar 100 vezes com raios e posições randômicas.

Primeiramente permaneci com a função círculo que foi utilizada em problemas anteriores, que já geral uma ellipse entrando com três parâmetros. Você entra com o raio e ele já põe dos valores dos diâmetros de acordo com seu raio.

void circulo (int x, int y, int r)

{

ellipse(x,y,r*2, r*2);

}

Então criei a função pedida flor3(x,y,r) usando a círculo dentro dela trabalhando já apenas com os três parâmetros que será dado de entrada na função flor3. A primeira posição de círculo é nos locais x e y, e as outras se repetem com o mesmo valor adicionados e/ou subtraídos de r+r/2, assim deixando o círculo da diagonal bem próximo o cículo central a qual deixa a flor exatamente como na imagem acima de referência. 

void flor3 (int x, int y, int r)

{

circulo(x,y,r);

circulo(x+r+r/2,y+r+r/2,r);

circulo(x-r-r/2,y+r+r/2,r);

circulo(x+r+r/2,y-r-r/2,r);

circulo(x-r-r/2,y-r-r/2,r);

}

Como é pedido para ser chamado apenas 100 vezes não podemos colocar na draw, é necessário a criação de um for dentro do setup para controlar que chame apenas cem vezes. Começa em 0 e enquanto x for menor que 100 uma nova flor é chamada, e logo após x incrementado em +1. Quando x for igual a 100 o loop para.

void setup ()

 {

 size (800, 600);

 for (int x=0; x<100; x++)

 {

   fill ((int)random(255),(int)random(255),(int)random(255));

  flor3((int)random(width),(int)random(height),(int)random(30));

 }

 }

Para gerar randomicamente todos os parâmetros foram declarados random com limite de acordo com altura e largura da tela, e o raio você coloca até que tamanho queira que ele varie, no exemplo coloquei 30. Para também alterar as cores em cada flor gerada e facilitar a visualização, o fill foi chamado no padrão RGB com três parâmetros randômicos.

Atividade 2 - Organizando imagens em um tela, espaçamentos iguais, com variáveis h e v (...)

Na atividade nos foi dado uma janela de 180px, para organizar 5 imagens com 30x20 de dimensões, estando duas da horizontal e três na vertical de forma que os espaçamentos entre elas sejam iguais! 

Inicialmente precisamos fazer o cálculo do espaço que sobra da tela retirando o que as imagens ocupam e dividir igualmente. No total são 5 imagens então temos 6 espaços para dividir o que sobra da tela. A largura que as imagens ocupam é a soma de 2*30(duas imagens na horizontal) e 3*20(três imagens na vertical), no total de 120.

 A equação para achar o valor de cada espaçamento, fica x=180-120/6. Que resulta em 10px!

Depois foi pedido para aderir variáveis h e v, que defina quantas imagens ficarão na vertical e quantas na horizontal, de forma que a mesma organização anterior de espaçamentos iguais funcione independente de qualquer número de imagens na vertical e horizontal.

Resolvi deixar tudo em variáveis que possa ser alterado o valor e tudo funcione do mesmo jeito, a única coisa que deixei definido foram as dimensões que são dadas 30x20.

Criei uma variável espaco para ter o mesmo valor que x, e ficar fixa pois precisarei modificar x dentro do primeiro for.

O primeiro laço criei para posicionar as imagens que estiverem na horizontal. A variável y começa em zero e para até ser menor que o valor de h, ou seja, o laço sempre irá se repetir a quantidade de vezes que for necessário para representar as imagens na horizontal. A posição no eixoX é igual a variável x, pois tem o valor o espaçamento que terá entre as imagens. A posição no eixoY não foi dita então foi colocado um número fixo de 75.
Ao fim do laço a variável x será modificada para x=x+espaco+30; Isso quer dizer que o novo valor de x será, o valor antigo somado ao espaco (que é o valor do espaçamento fixo) e somando a 30 (que é o valor da largura da imagem na horizontal). Toda vez que esse laço rodar x terá um novo valor que corresponde a posição do eixoX da imagem seguinte!!

O segundo laço fiz a mesma coisa com quantidade de vezes que o for iria rodar, igual a zero e até ser menos v, garantindo que represente na tela apenas a quantidade de imagens colocada na variável v e depois pare de rodar. Logo após precisava definir o ponto inicial no eixoX, no primeiro for foi fácil pois como era a primeira imagem seria depois do primeiro espaçamento... Já nas imagens verticais, resolvi criar uma variável p (para organizar melhor a partir de onde começariam a organização das imagens na vertical. Mas quem seria p? Bom, a quantidade de imagens na horizontal vezes 30, representa os espaços ocupados pelas imagens na horizontal. E a soma da quantidades de imagens na horizontal (h) somada a 1, nos dar a quantidade de espaços que já teve até aqui, multiplicando pela variável espaco sabemos exatamente a largura de espaçamentos também, então nos posiciona exatamente após o último espaçamento que veio depois da último imagem na horizontal. Então na última linha do for colocamos que p irá se modificar de forma que sempre fique p=p+espaco+20; ou seja, o valor anterior + a largura da imagem + a largura do espaçamento após a imagem, e sempre teremos o local certo que a próxima imagem na vertical estará!!

Dica: Percebam que declarei e defini a equação de p fora do for, se estivesse dentro toda vez que o laço rodasse, p voltaria a ser o valor inicial e as imagens seriam posicionadas uma encima da outra no mesmo local.

Aqui dois exemplos, mostrando que modificando h e v independente dos valores, o programa funciona do mesmo jeito e exibe na tela o mesmo esquema de organização e espaçamentos iguais, independente da quantidade de imagens!

Exemplo MousePress Processing, explicado e modificado!

Código do exemplo original disponível no processing:

Vamos explicar o que esse código faz...

Primeiramente define o tamanho da tela visual para 640 de largura e 360 de altura. 

O fill define a cor que os próximos objetos a serem desenhados terão e background define a cor do fundo. Lembrando que como estão dentro do setup aquela cor só será iniciada e tudo o que for feito dentro do draw (loop) irá sobrepor isso! 

Apenas arrastando o mouse

Arrastando e depois pressionando o mouse

Dentro do nosso loop colocamos a seguinte condição, SE mouse for pressionado as linhas ou bordas de objetos será mostrado na cor branca. Caso contrário, ou seja, apenas a movimentação dele na tela, mostra nossas linhas ou bordas de objetos na cor preta.

E logo abaixo definimos o que será mostrado, no caso uma combinação de duas linhas no sincronismo ideal para representar como se fosse um sinal de adição. Isso se é conseguido por colocar as posições das linhas exatamente na mesma posição relacionada ao movimento do mouse porém alterando em vertical e horizontal.

Vamos modificar um pouco...

Coloquei o background dentro do loop, isso faz com que sempre fique "limpando" e não deixa aquele rastro da movimentação, você vê apenas um objeto se movimentando! Na mudança de cores também, quando apenas se movimenta as linhas ficam quase invisíveis um tom bem transparente sobre o fundo preto e quando pressionado você o enxerga bem com uma tonalidade cinza mais visível. Se ficar com mouse pressionado e movimentar verá apenas uma combinação de linhas se movimentando pela tela sem deixar rastros e na cor cinza.

movimentando

pressionando

Agora você já sabe com trabalhar a movimentação e pressão do mouse, além de saber como deixar repetições do seu objeto pelo caminho ou fazer com que ele seja sempre apagado durante o loop e der impressão de ser apenas um.