MAMI - Projeto(Parte 2)

Eu não consegui fazer o vídeo, mas gostaria de registrar aqui o que eu  fiz da segunda parte do projeto pelo menos para dar uma satisfação.

Eu dei um resumo sobre as informações gerais do projeto na parte 1

Link da parte 1

Depois de ter feito as 3 mecânicas da parte 1, eu comecei a trabalhar na colisão com os escudos.

Essa parte a princípio eu pensei que ia ser complicada, mas eu dei uma pesquisada na internet e descobri uma forma de testar a colisão, a ideia é bem simples:

Uma linha significa a distância entre 2 pontos, que eu representei no gif acima como uma linha azul;

As linhas vermelhas são as distâncias entre a partícula e cada um dos pontos da linha azul;

O momento onde há a colisão entre a partícula e a linha azul é quando as duas linhas vermelhas se assemelham à linha azul, ou seja, quando:

(distancia da partícula para o ponto 1)+(distancia da partícula para o ponto 2)-(distância entre o ponto 1 e o ponto 2) = 0;

Como tem sempre algum número muito pequeno de erro e também por conta do deslocamento da partícula, em vez de deixar "= 0" eu deixo "< (velocidade da partícula)".

Depois disso eu resolvi fazer orientado a objetos e resolvi usar ArrayList, porque ficava muito mais fácil adicionar e remover elementos, como as camadas de escudos com todos os escudos apagados ou os tiros que saem da tela;

E o movimento dos mísseis é bem parecido com o da nave, eles tem um ângulo e deslocam esse ângulo tentando achar.

Eu fiz uma pequena modificação no jogo pra mostrar setas que simbolizem esse ângulo neste vídeo.

Também tem a colisão entre os tiros do jogador e os mísseis do chefe, mas aí foi só checar se a distância entre ambos era menor ou igual à soma dos raios.

Vou deixar o link de download do jogo abaixo


Link de download

MAMI - Aula #10

A tarefa não é muito complexa, mas ela mostra como é interessante entender alguns conceitos físicos na hora de pensar em como resolver esse tipo de problema.

  

A princípio você pode ficar perdido tentando pensar quanto a caixa deve se deslocar e como calcular isso, mas a grande questão aqui na verdade é o tempo.

Vamos usar uma física bem básica, a fórmula da velocidade diz que:

 velocidade = descolamento/tempo

- Nós queremos definir a velocidade;

- Nós sabemos que o deslocamento é a distância entre o ponto atual e o alvo;

- Só falta descobrir o tempo!

Obs.: O tempo aqui é a unidade de frame do programa.

Arrumando a fórmula descrita mais acima, temos:

tempo = deslocamento/velocidade

A ideia é simplesmente pegar a nosso deslocamento e a velocidade e usá-los para calcular o tempo:

Essa função é chamada apenas no mouseReleased(); já a função que atualizaria a posição e que seria chamada no draw() seria assim:

Ela é chamada no draw() apenas quando o tempo é diferente de 0, e tem uma correção para parar a caixa no alvo quando o tempo for menor do que 0.

Perceba que após o tempo ter sido calculado e continuar sendo recalculado, é possível calcular a velocidade apenas usando a fórmula v = d/t, nós não temos uma variável guardando a velocidade, mas a própria matemática se encarrega de fazer isso.

O resultado é este: 

Download do arquivo do processing aqui!

MAMI - Aula #9

Essa tarefa é a 2ª mais simples até agora, ela é basicamente sobre proporção.

Primeiro vou criar 2 variáveis para pegar as posições x e y relativas do mouse, a ideia é encontrar a fração do tamanho da tela onde o mouse está:

  mouseXrelative = 1.0*mouseX/width;
  mouseYrelative = 1.0*mouseY/height;

A multiplicação do primeiro valor por 1.0 é para transformar ele em floar, senão o programa vai retornar sempre o valor 0.

Depois eu poderia apenas por os valores que a tarefa pediu, mas acho que é interessante mostrar uma ideia que usei em uma das telas do jogo feito no primeiro semestre do curso:

if((propY)*width<(propX)*height){
   widthRes = width;
   heightRes = (propY/propX)*widthRes;
}
else{
   heightRes = height;
   widthRelative = (propX/propY)*heightRes;
  
}

A propX e a propY são variáveis onde eu ponho o tamanho do objeto, nesse caso eu usei a proporção de 14:9 que a tarefa pediu, o widthRes e o heightRes aqui vão ser a largura e a altura resultantes.

Pra explicar a ideia eu vou precisar desenhar(até porque foi a forma como eu pensei):

Suponhamos que temos um retângulo dentro de outro e queremos aumentar o tamanho dele proporcionalmente, de forma que nem a altura e nem a largura ultrapassem a do retângulo maior.

Nós aumentamos proporcionalmente até pararmos no limite da largura ou da altura. Até que um dos lados do retângulo menor se torne igual a um dos lados do maior.

A equivalência " 16/9 = largura/altura " ou "16*altura = 9*largura" é válida para o retângulo menor que estamos tentando achar, mas repare que para o retângulo maior, a diferença entre a largura ou a altura dele dentro dessa proporção vão transformar o "=" em "<" ou ">", é daí que surge o "if((propY)*width < (propX)*height)".

Explicando de forma mais simples, se o lado da largura é o menor, isso significa que, na hora de aumentar o retângulo menor, a largura dele chega na largura do maior antes da altura dele chegar na altura do maior, nesse caso nós usamos a largura do maior como base, caso contrário, usamos a altura do maior.


Voltando à tarefa, já que tenho uma representação da tela na proporção escolhida, vou aproveitar ela e fazer o retângulo pedido na tarefa a partir de 1 quarto dela, já aproveitar para pegar a posição x e y dele, que vão ser usadas jajá:

rect(x=(width/2-largura/2),y= (height/2-altura/2), largura, altura);

O outro pedido da tarefa é desenhar uma bolinha dentro deste retângulo de forma que a posição dela seja proporcional à posição do mouse na tela, pra isso vamos usar as posições relativas criadas lá no início do post:

ellipse(x+(mouseXrelative*largura), y+(mouseYrelative*altura), 10, 10);

E pronto, a tarefa está feita!

Download do arquivo do processing aqui!

Mami - Aula #7

Nessa aula nós vimos como desenhar a bandeira do Japão e como fazer ela seguir o mouse:

A bandeira do Japão foi bem simples, mas a tarefa agora é desenhar a bandeira do Brasil segundo a legislação.

Felizmente dessa vez está liberado o uso do rectMode, o que vai permitir que eu mude o padrão de desenho do programa do retângulo do canto superior esquerdo para o centro, e isso vai facilitar na hora de fazer os cálculos do posicionamento, já que não vai ser preciso calcular a diferença de onde o círculo e o retângulo são desenhados.

Eu vou fazer apenas modificações na função da bandeira do Japão mudando ela para uma função que desenha a bandeira do Brasil, para começar, em vez da largura, os tamanhos vão ser calculados pela altura, e o módulo vai ser 1/14 da altura.

Não tem tanto o que explicar, o retângulo ficou mais fácil de desenhar com o rectMode, o losango só precisou por as coordenadas dos pontos em ordem horária, e o círculo só mudou o valor do diâmetro. Eu adicionei também um evento de mouseWhell para alterar o valor que dá a altura da bandeira, mas fiz isso só pra testar se estava tudo ok.



Download do arquivo do processing aqui!

Mami - Aula #6

Após algumas leves modificações, o nosso código da aula passada chegou até este ponto. Estou usando o tipo float para as variáveis porque é melhor de trabalhar e arredondando o valor do MRU e do MRUV(que foi adicionado) pro movimento ficar mais condizente com o modelo matemático.

A tarefa dessa vez será desenvolver uma aplicação que simule o quicar de uma bola, perdendo velocidade com o passar do tempo.

A principal mudança no código vai ser o uso de novas variáveis para guardar alguns valores sobre a bolinha no momento que ela quicar, a ideia é resetar o tempo toda vez que a bola quicar e diminuir a velocidade, dessa forma o próximo movimento dela vai ter as mesmas características do primeiro.

A bola começa do chão, é lançada para cima com uma certa velocidade(que é definida no setup), desacelera e cai por conta da gravidade, e quando bate no chão, é lançada novamente para cima mas a partir do ponto no eixo X de onde ela caiu.

Não tem tanto segredo, teve só um problema com as quicadas infinitas por conta da aceleração, a solução foi deixar a grav em 0 quando a velocidade estivesse abaixo de 1, que de certa forma é uma forma de simular a força normal.



Download do arquivo do processing aqui!

Mami - Aula #5

Na 5ª aula de Mami nós vimos como fazer um programa que simula o deslocamento retilíneo de um corpo durante uma variação de tempo:

Nós usamos uma estratégia bem simples para simular a passagem de tempo: a frameRate ficaria em 1 e uma variável ganharia +1 a cada atualização da Draw. Dessa vez a tarefa é apenas criar uma solução onde a variação de tempo seja simulada com uma frameRate maior para que o programa rode suavemente.

Para evitar a fadiga, eu vou resolver isso fazendo apenas uma leve alteração em 1 linha:

O processing tem uma variável dele mesmo que guarda a quantidade de frames que o programa já rodou, a frameCount, e tem uma variável que guarda a quantidade de frames por segundo, a frameRate, se eu dividir a quantidade de frames total pela quantidade de frames por segundo, eu tenho a quantidade de segundos passados.

O programa ainda vai desenhar a elipse em todos os frames, mas a posição dela vai atualizar junto com o tempo(por conta da fórmula do MRU), e como a variável do tempo é inteira, ela vai ignorar as frações e desenhar sempre na distância referente ao valor inteiro do tempo.



Download do arquivo do processing aqui!

Mami - Aula #4

Bons ventos para os navegadores incansáveis da internet!

Dessa vez a  tarefa é mais complexa:

Para realizar tal ato, a primeira coisa que irei fazer é baixar uma biblioteca que já vai ter as sliders codificadas, essa biblioteca pode ser baixada do site http://www.sojamo.de/libraries/controlP5/ ; basta descompactar dentro da pasta "libraries" do processing.

O bloco eu também irei partir do arquivo feito em sala de aula:

Bem, para começar, eu adicionei as sliders e fiz algumas alterações no código, primeiramente eu apenas tentei achar uma posição legal, e achei interessante elas ficarem na parte de cima da tela, mostrando pro usuário que ele pode fazer a alteração nos blocos logo de início.

Depois eu comecei a desenvolver e testar uma fórmula para criar os blocos dentro de um laço duplo, o resultado foi este:

Que basicamente significa que cada bloco vai ser desenhado a partir do centro, com um desconto equivalente à quantidade total(quantx e quanty) de blocos e um acréscimo equivalente ao número atual(i e j) de blocos. Os números 50 e 100 são por conta do tamanho do bloco, mas vou substituir por uma variável e transformar isso em uma função nova pra facilitar o trabalho.

Agora nós temos as sliders e a função que desenha o quadro, falta apenas o comando para desenhar ele quando o valor das sliders for alterado.

Eu tentei usar o código do exemplo deste site para fazer isso, mas deu algo errado e eu não conseguir fazer da mesma forma. Então eu fui neste site atrás das funções na tentativa de achar algum "getValue", pois esse "get" é geralmente usado pra nomear funções que guardam algum valor, e por sorte eu achei exatamente o que estava procurando, o nome da função era o mesmo que eu imaginava...

Criei 2 variáveis globais(pra não ter erro) para receber o valor inteiro de cada slider, e usei essas variáveis para desenhar a pintura. Eu não queria por ela no draw pois eu queria que a pintura atualizasse apenas após eu mexer nas sliders, e como não deu pra fazer igual no exemplo, eu pensei em outra solução: Tem uma coisa que acontece sempre que eu mexo nas sliders, que é um mouseReleased, então eu posso usar um evento disso para fazer a pintura:

Download do arquivo do processing aqui!