Aqui eu vou falar sobre a experiência de tentar fazer um jogo de Pong em Processing(). Avisando logo que usei apenas comandos simples, sem Programação Orientada a Objeto.

Para fazer um jogo mecanicamente simples como esse, precisamos lembrar de três passos: interagir, colidir e, no caso do Pong, oscilar. O jogador irá INTERAGIR com o bastão, enquanto o bastão deve colidir com a bola. Já a bola deve oscilar após as colisões.

I. Interação

Basicamente usei o comando KeyPressed, que determina que, enquanto tecla X for pressionada, determinados parâmetros são devolvidos pelo programa.
Nesse caso eu defini que ao pressionar o botão direcional UP e o botão DOWN, o bastão ganharia um valor de movimento a partir de seu eixo Y. Ou seja: o bastão ganharia ou perderia 10 de movimento vertical, que é o que necessitamos para movê-lo em relação a bola.

Outra parte relevante é definir que o bastão não passe do final da nossa tela (600x600) nem ultrapasse o começo dela. Além disso, devo salientar que espeifiquei que quando a bola conseguisse ultrapassar a tela (bolaX>570), o bastão necessariamente não consegueria mais incrementar seu movimento.

II. Oscilação da bola

Basicamente, defini um movimento horizontal e vertical para a bola de modo que, assim como o bastão, ela não ultrapasse a tela mas seja rebatida por ela. Nesse caso, se a bola não colidir com o bastão. ela consegue ultrapassar apenas o lado horizontal direito da tela, que determina a condição de DERROTA do jogo.

III. Colisão e Game Flow

Primeiro fiz uma função de Game Over e outra de placar.
O placar() é chamado na função Draw() e se refere a quantidades de vezes que o bastão acerta a bola. Sua variável de contagem int px é incremetada durante a função jogo toda vez que bastão e bola colidem. (px=+px+1)

O GameOver() é chamado toda vez que a bola consegue ultrapassar a tela, ou seja: o jogador não consegue acertá-la.

O jogo () define basicamente tudo, desde a contagem de pontos como a definição da condição de derrota e a colisão da bola com o bastão. Ah, eu incrementei -2 ao rebate para a bola ficar sensivelmente mais veloz e a dificuldade ir aumentando.

Ao final é só invocar o draw() com algumas das funções criadas:

E EIS O RESULTADO :D

E aqui vai o código caso você queira testá-lo:

PONG was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.

Eu não ia fazer esse post por questão de envolver pouco conteúdo, mas como meu professor adiou a entrega de ambas as atividades, resolvi organizá-las aqui porque tive reflexões interessantes.

Primeiramente que eu nunca imaginaria que desenhar bandeiras no Processing seria mais difícil do que simular um lançamento balístico em três diferentes atmosferas. Isso, inclusive, porque essas bandeiras seguem leis e métricas muito metódicas de configuração.
Em segunda ordem, enquanto consegui facilmente fazer a bandeira japonesa, demorei horas pra conseguir desenhar a bandeira suiça. Isso acontece porque o que pesa mais é a lógica de cada bandeira, e devemos sempre prestar muita atenção para não vacilar tentando aplicar o método de uma em outra.

BANDEIRAS I

A bandeira suiça tem o seguinte modelo matemático:

Aplicando isso computacionalmente temos o seguinte código:

Eu defini uma largura total para o quadrado e a dividi por 32, para descobrir o valor de um módulo. Sendo que, por causa da cruz, a bandeira é configurada como se fosse uma matriz que tem dois modulos “mínimos” de 6 e 7.
As vezes a gente complica o que é simples, porque eu admito que fiquei horas quebrando a cabeça tentando aprender matriz pra fazer um comando For() e desenrolar esse “enigma”. No entanto só precisei criar variáveis e multiplicar por módulo vezes 6, 7 ou 20(dependendo do que apontasse o esquema da bandeira).
A variável da largura vertical, por exemplo, ficou:
float larguraRV = mod*6;

E já a de altura vertical:
float alturaRV = 20*mod;

E o resultado:

BANDEIRAS 2

Já o desafio dessa atividade seria centralizar a bandeira do japão e fazê-la seguir o cursor do mouse. Mas agora eu estou mais afiada e consegui fazer mais rápido, pois finalmente me acostumei a padronizar códigos através de um bom modelo matemático. A instrução principal da atividade era sobre aprender a centralizar o conteúdo na tela e proporcionar a bandeira de acordo com o movimento do mouse X.

E eis o código:

E o resultado?

Essa atividade me fez pensar sobre como estou amando essa experiência e sobre como programação vai além de habilidade, mas pode ser um hobbie.

Bandeiras was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.

No Post Anterior, estudamos sobre o MRU e entendemos como codificar fenômenos . Agora, além de aplicarmos nossos conhecimentos anteriores, usaremos o conhecimento de MRUV para criar o nosso simulador de lançamento balístico.

Sabe-se que o MRU se trata do movimento horizontal de um corpo, sendo assim o MRUV é o movimento vertical do mesmo corpo. O que acontece é que quando um corpo é lançado verticalmente em diferentes tipos de Corpos Celestes, existe uma aceleração gravitacional que o puxa para o mais perto do centro desse lugar. Onde existe massa, existe gravidade. Existem espaços no universo cuja configuração se limita à microgravidade, como o espaço sideral em si. Nesses espaços a gravidade é praticamente nula.

Primeiros Passos

Primeiro foi preciso analisar matemáticamente o fenômeno do MRUV.

Claro que esse fenômeno é muito mais complexo na realidade, mas vamos simular com um código uma versão aproximada de como ele funciona, com diferentes gravidades.

E para isso, além de utilizarmos as códigos de MRU e MRUv puros, devemos traçar a concepção de velocidada associada à aceleração gravitacional que expliquei.

V=Vo+A.T

A velocidade será igual a velocidade inicial somada à aceleração inicial (gravitacional) que é multiplicada pelo tempo. Essa mesma aceleração gravitacional age justamente no movimento vertical, puxando o objeto lançado para “baixo”, que, em relação ao movimento horizontal, acaba por gerar uma parábola.

O código

Nesse caso, o código está com a aceleração gravitacional de Júpiter, que foi a última testada por mim. Nosso próximo passo é mostrar os resultados.

Simulando o Lançamento

Com a gravidade da Terra:

Com a gravidade da Lua Terrestre:

Com a gravidade do planeta Júpiter:

Bom, com essas demonstrações deu pra gente ter um belo insight de como a gravidade age sobre esses movimentos! Então tenham cuidado ao se lançar verticalmente por aí, ok?

Simulador de Lançamento balístico was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bom, essa tarefa é sobre o começo de uma empreitada em construir um Simulador de Lançamento Balístico. Para que isso seja possível, vamos entender cada parte dessa experiência até chegarmos à criação desse experimento.

Primeiro, faça-se MRU!

Bom, para explicar o modelo computacional do Movimento Retilíneo Uniforme, nada como uma boa explorada em seu modelo matemático:

A natureza desse movimento é simplesmente que ele seja retilíneo e uniforme, ou seja, não há variações de velocidade vetorial, pois essa é constante. Essa constância se refere ao fenômeno da Inércia, estudado e postulado por Newton.

Todo corpo continua em seu estado de repouso ou de movimento uniforme em uma linha reta, a menos que seja forçado a mudar aquele estado por forças aplicadas sobre ele. — Isaac Newton.

Minha intenção com essa breve introdução é apenas resumir o que, matematicamente, é o MRU. Logo, nosso próximo passo é definí-lo no modelo computacional:

A atividade que foi passada para nós referia-se a simular esse fenômeno no Processing e, simultaneamente, rodar ele a 60 fps.
O padrão de FrameRate do processing já é 60, então o que devemos fazer é basicamente dividir 1 por 60, ou seja: o tempo dinâmico da aplicação será contado de maneira que, a cada 1 segundo, a execução do draw() acontecerá 60 vezes. O resultado foi esse:

E, para finalizar, o código:

Dividir Para Conquistar was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.

Na atividade do dia 17, fomos instuidos a criar um código que spammasse diversas flores, utilizando o mouse como entrada de parâmetro.
Eu defini, então, que o movimento das flores seria determinado pela entrada de valores do mouse.

Como se pode ver, primeiro criei a função circulo e depois a função flor, que estaria em função de circulo. Defini, assim, um calculo em relação ao raio para que o centro e as pétalas sempre estivessem juntas em esquema de diagonais(em relação ao centro).
As cores foram definidas para simular um campo de girassóis minimalista.

Cyberflores was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.

Tweak é uma funcionalidade do processing que permite que você altere parâmetros do código e os teste ao vivo, ou seja: você vê as mudanças em tempo real. Parâmetros esses como: posições e cores.

Segue um exemplo visual de como isso ocorre:

Debug

Debug é uma funcionalidade popular em aplicações de programação que permite executar o código e acompanhar o fluxo dele. Diferente do Tweak, nele você não altera parâmetros, mas investiga precisamente as variáveis do seu código, podendo até pausar a execução do programa aonde você desejar. Segue um tutorial de como usar o debugger:

Conclusões finais:

Essas funcionalidades facilitam a atividade de programar pois permitem que investiguemos nossos códigos fugindo das práticas de dedução, ou seja: entendemos qualquer lógica ou mudança estética nele através de um método investigativo. Dessa forma, podendo até encontrar falhas muito mais rapidamente.

Tweak e Debug was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.

Modelo Natural

Para que o modelo matemático seja de fácil assimilação, irei estabelecer primeiramente como isso acontece de forma natural. Pode-se observar que existe a ilusão de que, ao dividir as imagens em partes iguais, formam-se cópias dela. Isso acontece porque o processo de rearranjo do objeto é sempre proporcional à composição original.

Uma forma de exemplificar isso é através de uma mecânica do jogo The Legend Of Zelda: Skyward Sword. O monstro chamado Chuchu tem como característica a habilidade de dividir-se em partes menores de si a cada ataque que você desfere contra ele. Caso, consequente ao ataque, os monstros pequenos se encontrem, eles formam uma unidade novamente.
Eis um vídeo demonstrando esse fenômeno:

Modelo Matemático

Organizando esse fenômeno matematicamente, começarei com um cubo, pois é a maneira mais simples que encontrei de explica-lo. Notamos que o cubo acima aumenta em potências de 2. O cubo posterior é sempre o resultado do cubo anterior multiplicado por 2.
Ou seja, atribuindo a um objeto a incógnita X, podemos afirmar que é possível dividí-lo em partes semelhantes. Representativamente:

Duas partes: X/2 e X/2.
Quatro partes: X/4,X/4,X/4,X/4.

Na nosso prática, no entanto, tratam-se de imagens de duas dimensões e retangulares. Nesse caso, deve ocorrer um fatiamento horizontal (gerando duas imagens novas) e, para continuar dividindo-as, um fatiamento vertical (gerando quatro imagens).
Ou seja, fatiamos primeiro a largura (L) da imagem inicial e depois a altura (H) das duas imagens resultantes, para termos resultados ainda mais precisos (exatamente como ocorre no vídeo).

Prática

Dessa forma, conclui-se também que em quanto mais fatias, mais coerente será a formação da imagem. No exemplo do vídeo, a imagem foi fatiada em 22 pedaços. Já eu fatiei uma imagem de 1920x1080 em 24 pedaços. E as duas imagens restantes (com 12 pedaços cada) eu fatiei em mais 24 pedaços.

A relação do todo e suas partes was originally published in MAMI-2020 on Medium, where people are continuing the conversation by highlighting and responding to this story.