Postagens

Mostrando postagens de outubro, 2017

Atividade 13 - Game da Revisão

Imagem
A proposta da atividade é criar um jogo que o jogador movimente o personagem para a esquerda fazendo ele pular por uma bola. Ao chegar ao final da tela, é dada a vitória. Tudo que deve contas na aplicação está listado abaixo: Utilizei dois bitmaps para o jogo: Bitmap do cenário Bitmap do personagem Visual final do jogo Para começar, defini as imagens necessárias em variáveis PImage . A primeira função que criei foi para fazer a movimentação do personagem. Nela, caso a tecla de direita for pressionada, incremento a posição x do personagem (que defini como variável global). Caso a tecla espaço seja pressionada, diminuo a posição y até chegar ao máximo do pulo, e após incremento até voltar a posição y inicial. Outra função que criei foi a responsável pela movimentação do x da bolinha (variável global). Ela sempre vai estar diminuindo, e quando chegar à esquerda da tela, voltará para a direita. Criei uma função para verificar a colisão da bola com o personagem. Dent...

Trabalho Final Parte 1 - Gerador de Arte

Imagem
A proposta do trabalho é criar um gerador automático de arte, no processing , baseado em uma série já existente. O artista escolhido por mim foi o Hélio Oiticica, com sua série baseada na técnica de guache sobre cartão, que foi desenvolvida junto com o Grupo Frente. Descobri a existência do artista através de um trabalho realizado pela professora Natália Castro com seus alunos de ensino fundamental. Uma obra do autor em questão estava exposta em sua sala de aula, e por base nela, descobri a série que me inspirei para realizar o trabalho. Obra exposta na sala da professora Dentro da série, encontrei 3 obras semelhantes para tomar por base para a construção do gerador. Entre elas analisei 4 características em comum: a quantidade de colunas, a largura das colunas, o tipo da paleta de cores, e as cores em si. Obras originais Modelo Natural Hélio Oiticica nasceu no Rio de Janeiro em 26 de julho de 1937 e morreu em 22 de março de 1980. Foi considerado um dos maiores artista...

Atividade 12 - Mapa isométrico com tilesets

Imagem
A ideia da atividade é desenvolver uma função que desenha um mapa a partir de dois tilesets escolhidos. Os tilesets que escolhi podem ser encontrados aqui . Tilesets escolhidos Escolhi 3 tilesets para mostrar que é possível manipular imagens de dimensões diferentes. O primeiro a se fazer, é criar as variáveis PImage que guardarão as imagens. Defino as variáveis no evento setup() , definindo suas respectivas localizações. Após isso, criei uma variável inteira que recebe a organização dos tilesets em forma de matriz, como na figura a seguir: 1- grama comum   2- água   3- grama alta Com tudo pronto, crio a função que desenha o mapa. Nela chamo dois laços for() que percorrerão todas as posições da matriz. Dentro deles, crio um switch() para saber o valor de cada posição e desenhar o tileset correto.  Para definir as coordenadas dos tilesets, primeiro temos que saber as dimensões da mesma. No tileset da grama mais alta, é basicamente as mesm...

Atividade 11 - Máquinas de estados e função KeyPressed()

Imagem
A proposta da atividade é reimplementar a aplicação desenvolvida em sala, que utiliza máquina de estados para fazer imagens serem mostradas de acordo com teclas pressionadas. Nessa aplicação, utilizaremos três bitmaps do Mário: De início, defini variáveis PImage para guardar as respectivas imagens. Após isso criei três variáveis que representarão os três estados do Mario, sendo 1 para parado, 2 para andando e 3 para martelando. Criei também uma variável para guardar o estado atual do Mário, uma para guardar o tempo e outra para saber quando a tecla está pressionada (que de inicial recebe false ). Chegou a hora de tratarmos os estados, para isso criei uma função para processá-los. Nela verifico se o estado atual é 2 ou 3, caso seja, o tempo aumenta incrementa mais 1. Para voltar ao estado parado após determinado tempo, crio duas condições para checar isso. Na primeira verifico se o tempo é maior que 30 e se o estado é andando. Caso seja, o estado atual volta a ser parado, e ...

Atividade 10 - Cliques em botão utilizando distância

Imagem
A proposta da atividade é desenhar um botão com cantos arredondados utilizando distância 1D e 2D. Para detectar o clique no botão fiz o fundo da tela piscar em azul. De início criei a função de distância 1D, que recebe dois valores de parâmetro, e retorna a diferença entre eles. Usei a função abs() para o valor sempre ser positivo. Depois criei a funçaõ de distância 2D, que recebe os valores de x1, y1, x2, y2 . Essa função retorna o seguinte cálculo: Para desenhar o botão, fiz um quadrado com dois círculos em suas extremidades, como na figura a seguir: Na função draw() , desenho as 3 figuras e um texto com a palavra "clique". Visual final do botão Para saber quando o botão foi pressionado, utilizo a função mousePressed() , e dentro dela verifico se a distância 2D entre a se a posição x e y do mouse com as coordenadas de cada figura é maior que o centro delas. Caso seja, então mudo o background para azul. Resultado final Para baixar o projeto co...

Atividade 9 - Bounding Box e Jogo Breakout

Imagem
A técnica de verificação de colisão por bouding box, baseia-se em considerar caixas invisíveis em torno dos objetos a serem colididos, para assim a colisão ser feita como se os objetos fossem dois retângulos. A técnica de bounding box facilita o desenvolvimento de uma colisão, tornando ela eficaz mesmo que simples.   Nesse caso, considera-se a bolinha sendo um quadrado Nessa atividade, desenvolvi uma réplica do jogo Breakout. O jogo baseia-se em uma bolinha que se movimenta pela tela, e você deve impedir que ela ultrapasse a parte inferior, movimentando um bastão que faz a bolinha subir quando a mesma colidir com ele. Visão final do jogo De início, criei a função bastao() , que é responsável pela criação e movimentação do objeto que podemos controlar. Ela recebe como parâmetro a posição x do bastão. Dentro dela, desenho um retângulo com a posição x indicada pelo parâmetro da função e posiciono numa posição y alta, para que o bastão fique na parte de baixo da tela. A...

Atividade 8 - Função MoveCaixa2()

Imagem
O intuito da atividade é criar uma função que mostre o movimento interpolado entre dois pontos da tela. De início, defini uma variável (i) que é responsável pelo movimento. E defini a tela como 300x300 na função  setup(). Após isso criei a função  MoveCaixa2()  que recebe como parâmetro as posições  x  e  y  iniciais,  x  e  y  finais, e a quantidade de passos. Dentro da função, verifico se a variável  i  é menor ou igual a 1, caso seja, o movimento pode ser executado. Após, desenho o retângulo com a função  rect().  Sua posição x é a posição x inicial mais o produto de i com a diferença de x final com x inicial. Sua posição y é a posição y inicial mais o produto de i com a diferença de y final com y inicial. Defini a altura e largura como 10px. Após o quadrado ser desenhado, incremento à variável i a divisão de 1 pela quantidade de passos. Na função  draw()  apenas defini o background como preto e...

Atividade 7 - Adaptive Logo

Imagem
Para essa atividade, resolvi analisar a adaptive logo da Tygron, que é uma empresa Holandesa focada no planejamento urbano. A Tygron desenvolve e usa tecnologias de jogos para resolver problemas complexos no campo do planejamento espacial, clima e gerenciamento de água, entre outras coisas. A nova identidade visual combina perfeitamente com a tecnologia de ponta do mecanismo de jogos da Tygron e ajuda a desenvolver mais a nível profissional no mercado nacional e internacional. Arte do site da Tygron Sua identidade visual baseia-se em diversas formas distintas, mas que possuem características em comum. Diversas variações do logotipo De inicial, todas as variações do logotipo provêm da letra T relacionada à marca, e a partir dela, implementasse linhas que se unem a outras, formando polígonos. O "T" marcado em preto, com as demais linhas adicionais em vermelho Além das diversas adaptações que podem ser feitas no logotipo da empresa, a agência SI...