Atividade 13 - Jogo com Colisão (MAMI - 2017.2)

Para fazer o jogo, utilizei as seguintes imagens:

Sprite da personagem

Cenário

Imagem do inimigo (obstáculo)

Primeiro inicializei as variáveis float da posição do personagem e do inimigo, depois o tempo atual e a pontuação. Após isso, inseri o tempo de queda e vidas (variáveis int). Em seguida, adicionei as variáveis PImage dos três elementos acima. Por fim, adicionei três testes booleanos "pulando", "findajogo" e "ganhou".

No setup, as imagens são carregadas. No void draw, está a função findajogo(), que coordena praticamente todo os processos de acabamento do nível.

No void pular, o teste booleano "pulando" é utilizado para realizar o salto da personagem, por meio do "tQueda" (tempo de queda) e a variável y.

No void inimigo a elipse é criada e a imagem é carregada na mesma posição. O inimigo se move a 20 pixels por segundo por meio de um decremento da variável x. Toda vez que ele sai da tela, ele é reposicionado no ponto inicial.

Adentrando o void colisao, notamos a utilização do bounding box, que detecta a colisão de acordo com as coordenadas dos objetos colididos. Caso haja colisão, a variável vidas (inicialmente de valor 3), é decrementada.

Depois, foi colocada uma nova função: void keyPressed. Se a tecla pressionada for o botão direito do teclado, a função "andando" armazena a string "DIREITA", o mesmo se dá com "ESQUERDA". Se o botão Space for pressionado, "pulando" é verdadeiro. Na função keyReleased, se a tecla direita ou esquerda é solta, a variável "andando" armazena a string "PARADO".

Na função seguinte, void andar, os strings são comparados e x é incrementado em 5 pixels, se para direita, ou decrementado em 5 pixels, se para esquerda.

A maior parte das funções criadas estão conectadas ao void findajogo, que tem o objetivo de inicializar e acabar com o jogo. Caso a variável booleana "findajogo" seja false, os elementos são criados e o jogo começa a rodar. Se o x do personagem for maior que a largura da tela, a variável "ganhou" é verdadeira e a variável "findajogo" também. Além disso, se o número de vidas chegue a 0, "findajogo" = true.

No HUD do jogo são exibidos o número de Vidas do personagem (começa com 3), e o tempo atual. Se "ganhou" = true, aparece a pontuação do personagem que é calculada pela equação: pontuação = vidas*1000/ tempo final. Então, são exibidos os valores de tempo, número de vidas restantes e a pontuação, em letras verdes, por meio do text(). Se a vitória não for atingida, é anunciada sua derrota em letras vermelhas e o tempo também aparece.

Obs.: o printline do x e y do personagem foi incluído.

Três exemplos de partidas:

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJaTFRWktocDFELWc

Trabalho de MAMI - Gerador de Arte (Parte 1)

Série: Chevron Palette

Artista: Alexandre Reis

Modelo Natural: O conjunto de obras são compostas pequenos triângulos nas bordas superior e inferior do quadro, além de "zigue-zagues" que preenchem a maior parte da tela. As cores possuem padrões diferentes, que variam de acordo com o quadro. Os que resolvi "copiar" em especial foram os que possuem variação de saturação e brilho conforme as camadas passam.

Modelo Matemático:

Uma primeira análise da obra permite a observação de uma espécie de grid imaginário alinhando os vértices na vertical e tangenciando-os na horizontal, tornando a obra rigorosamente proporcional.

É possível observar quatro triângulos isósceles em cima e três embaixo, sendo que, dos quatro de cima, apenas os dois do meio estão completos.

Podemos perceber que, excetuando os triângulos na parte superior e inferior, podemos dividir as formas em pequenos paralelogramos.

Como a imagem possui aproximadamente de 400x520 pixels, podemos tomar a largura (400px) por módulo. Dessa forma, as medidas ficariam assim:

Modelo Computacional: 

Sabendo disso, comecei a trabalhar no modelo computacional. Primeiro, foi criado um background branco na tela. Para criar as primeiras e últimas formas, os triângulos, usei a função beginShape(TRIANGLES). Depois, para criar a primeira camada de "zigue-zagues", dividi cada camada em quatro partes principais que se repetem, cada uma criada com a função beginShape():

É importante ressaltar que, na função beginShape(), os pontos são estabelecidos nas posições ordenadas, e depois a forma é construída. Portanto, foi muito importante a utilização de rascunhos para prever o que iria ser desenhado na tela. As linhas de contorno foram retiradas com a função noStroke(). Após construir o modelo da camada, usei um laço de repetição for para recriar as 7 subsequentes, sendo que essa estrutura foi encapsulada na função cheVron().

Após isso, verifiquei as cores da imagem original. Apesar de serem semelhantes, e aparentarem estar em degradê de luminância e saturação, isso não é bem verdade.

As camadas variam semi-aleatoriamente a brilho, saturação e um pouco da paleta. Então criei uma variável randômica para cada um desses atributos h (varia de 0~360), s (varia de 25~40) e b (varia de 25~40). Como as camadas de cima tendem a ser mais claras, deixei alto o índice de brilho nesses segmentos, adicionando valores. Conforme foi passando de camada em camada, eu aumentei os índices de saturação e reduzi os índices de brilho, mas com as três variáveis aleatórias influenciando na formação das cores.

Depois, criei uma função que inverte a ordem de cores da tela pela função keyPressed() que é relacionada a uma variável booleana change. Quando é pressionada a tecla Space, change se torna verdadeiro. Desse modo, os quadros passariam a se assemelhar mais com o padrão do quadro abaixo:

Para os quadros passarem de forma mais pausada, deixei o frameRate em 1, ou seja, apenas 1 quadro irá passar a cada segundo.

O resultado final foi este abaixo:

Sem a tecla SPACE pressionada.

Com a tecla SPACE pressionada.

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJcnpUQzlqSGF2aXM

Atividade 12 - Tilesets (MAMI - 2017.2)

Para criar o mapa desejado, utilizei os dois tiles abaixo.

No programa primeiro iniciei as variáveis PImage, que guardam as informações das imagens escolhidas.

Depois fiz uma matriz que mapeia as imagens dos tiles de acordo com o número dado na função que será implementada posteriormente, no comando switch.

Então, fiz uma função que lê a matriz e carrega a imagem de acordo com a numeração dada pelo comando switch em cada posição. Caso seja 0, carrega a imagem da grama, se for 1, carrega a imagem da água. Para a imagem não ficar muito grande, fiz os espaçamentos horizontais entre as unidades serem de 60 pixels, e os verticais, de 30 píxels. O resultado pode ser verificado abaixo:

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJS2k2VFJUTHlNems

Atividade 11 - Máquina de Estados (MAMI - 2017.2)

O objetivo desta atividade é reimplementar a máquina de estados já criada, substituindo a variável keyPressed pela função keyPressed(), explicando as diferenças de uso, vantagens e desvantagens.

Primeiramente, é importante estabelecer as diferenças entre a variável booleana keyPressed e a própria função keyPressed(). No caso da variável, podemos inseri-la em qualquer função do nosso programa como um elemento pontual, tornando-o mais extenso por causa de verificação true ou false, porém mais prático se houverem poucas instâncias.

No entanto, ao optar pela função keyPressed(), podemos criar uma única variável booleana (verificador) no começo do código, e depois apenas coordenar as ações com o verificador, as ferramentas "keyCode" e "key" e a função keyReleased(). Dessa forma, podemos inserir várias ações sem prejudicar a legibilidade do código.

No código da Máquina de Estados criada, foram criadas armazenadores de imagem pelo PImage, e constantes "final int" para os Estados. Por padrão, o Estado irá ser "parado" e o tempo será 0. No "void setup" são carregadas as imagens.

No "void draw" são colocadas as funções criadas processaEstados(), mostraMario(estadoMario) e println(estadoMario, tempo), este último para indicar o tempo em que a ação está sendo realizada e o número do Estado (0 = parado, 1 = andando, 2= martelada).

No processaEstados() são usados testes booleanos para mudanças dos estados, no mostraMario exibem-se as imagens de acordo com o Estado atual e na função keyPressed() verifica-se as teclas pressionadas e muda-se o estadoMario até que se solte a tecla.

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJZk83Q0F0UlExX2M

Atividade 10 - Botão Arredondado (MAMI - 2017.2)

O objetivo dessa atividade era fazer um botão quadrado com bordas arredondadas. No começo do programa, foi inicializada a variável raio, que irá ser um parâmetro importante na construção do botão. Depois, utilizei a função apresentada anteriormente chamada rectMode(RADIUS), que cria um retângulo a partir de um vértice no centro deste, para facilitar sua alocação.

Comecei, então, colocando quatro círculos, cada um tangenciando um vértice do retângulo com um ponto de sua borda. Após isso guardei todas essas informações na função criaBotao(). Então, criei a função dist1D, que calcula a diferença entre B e A, e depois fiz a função dist2D, que calcula uma distância entre dois pontos qualquer, baseando-se na primeira função. É retornada a variável "a".

Para checar o pressionamento do botão, foi criada uma função mousePressed, que utiliza a dist1D para calcular a posição do mouse e, por ser uma função de pressionamento, foi colocado um comando "if" para verificar se o clique está nos limites do retângulo pela função dist2D e os parâmetros relativos ao próprio retângulo. Caso esteja, o programa responde com uma mudança de cor (o frame rate foi diminuído na função setup para as diferenças serem notadas) e de texto.

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJY29mdlYwQmZKNkE

Atividade 9 - Breakout (MAMI - 2017.2)

A técnica de colisão virtual bouding box é uma das mais simples em termos de execução de código, sendo uma boa escolha na criação de jogos amadores. Ela consiste em comparar a forma do objeto a ser colidido com os eixos de um retângulo imaginário criado a partir das coordenadas cartesianas deste.

Dessa forma, as larguras e alturas dos retângulos não precisam estar necessariamente coincidentes com o objeto a ser colidido. Bastam estar aproximados para a colisão funcionar. No entanto, é preciso ter certeza de estar localizando corretamente as "peças" de colisão.

Apesar disso, é um método que está sujeito a inúmeros bugs, por causa de sua simplicidade. Existiram tentativas, no caso do Breakout criado no Processing, em que quando existia um certo nível de desaceleração na bolinha, esta ficava "presa" nos obstáculos. Eventuais erros podem surgir na colisão dos vértices, por causa de "checagens duplas" deste fenômeno.

Além das propriedades da bolinha e da barra movimentadora, vistos em sala de aula, foi implementado um findador de jogo, que ocorre quando a posição da bolinha for superior à da altura da tela. Os obstáculos foram implementados de acordo com a bounding box. Se a posição X da bola for superior à posição X barra + 10 pixels + largura da barra, e posição Y da bola for maior que a posição Y da barra +10 + altura da barra, o movimento é invertido e decrementado em 0.6 na vertical e na horizontal.

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJd3FKQlZldVhnem8
Link do tutorial do Youtube usado: https://www.youtube.com/watch?v=8b_reDI7iPM

Atividade 8 - Interpolação 2D (MAMI - 2017.2)

No começo do código foi criada uma variável i, que incrementa o número de passos a cada mudança de tela.

Para fazer a função MoveCaixa2, foram estabelecidos 5 parâmetros: x1 e x2 (posição horizontal inicial e final, respectivamente), y1 e y2 (posição vertical inicial e final, respectivamente) e n (passos dados a cada mudança de frame).

Dentro da função, foi criado um quadrado com a função rect que tem a posição calculada de acordo com os parâmetros criados (no x do quadrado, o x1 é incrementado com i e multiplicado pela diferença de x2 menos x1, assim como o y do quadrado é incrementado de forma congruente).

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJZG5ObTNGaW9SUFU

Atividade 7 - Nickelodeon Adaptive Logo (MAMI - 2017.2)

Hoje irei discutir o Adaptive Logo da empresa Nickelodeon, atualmente a maior no ramo de entretenimento juvenil no mundo. Foi fundada em 1977 sob o nome de Pinwheel, pela Warner Communications, ao longo do tempo o seu logo foi adquirindo a forma atual, como é verificado na imagem abaixo.

De 1984 até 2009, mais de 150 formatos para o logotipo foram exibidos, sendo que a maioria possui um formato lúdico, como de um foguete ou de uma mancha de tinta, exaltando um dos pensamentos essenciais para o sucesso da marca: "As Crianças Primeiro".

Para isso, o manual do logo cita três propriedades principais que foram levados em conta na criação do logo "Cores brilhantes", "Irreverência" e "Flexibilidade".

Apesar de ter um logotipo altamente mutável, a o manual de marca da Nickelodeon não cita um modelo matemático específico a ser seguido para sua criação. No entanto, as formas logotípicas de maior sucesso da Nickelodeon tendem a ser horizontais, onde o nome da marca pode caber "confortavelmente" na forma.

A fonte utilizada durante o período de uso desse logo é a "Balloon Extra Bold" contendo o nome da empresa na cor branca. O manual também cita a necessidade de reprodução da cor laranja da forma seguindo as especificações Pantone Matching System (PMS).

Referência: https://www.flickr.com/photos/84568447@N00/sets/72157602312592049/with/1509951235/