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!