Atividade 12 - MAMI

A atividade era pra desenvolver e explicar uma aplicação que apresenta um mapa isométrico com base em dois tiles à sua escolha 

Eu resolvi escolher 3 tiles, para poder gerar um mapa mais interessante.

Primeiro criei as variáveis PImage que guardarão as imagens e defino-as no setup(). Após isso, criei uma matriz chamada mapa, que organiza e recebe a posição de cada tilaste que será mostrado na tela.

Em seguida criei uma função chamada mapa (), que realmente vai desenhar o mapa. Nela dois laços for() percorrerão todas as posições da matriz. Dentro dos laços, há um switch() para saber o valor de cada posição e desenhar o tileset correspondente. 

Os tiles possuem o tamanho da metade da largura igual a 50 e da metade da altura igual a 25, sendo que para posicioná-los na tela, eu uso 350-i*50+j*50 (para o eixo x), e 50+i*25+j*25 (para o eixo y), no qual o 350 é para posicionar na metade da tela. No eixo x, o “i” serve para decidir a posição x inicial do primeiro tile e o ”j” para ajudar a posicionar os demais. Já no eixo y, o “i” serve para ajudar o “j” a determinar a posição y.

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More

Atividade 11 - MAMI

A atividade seguinte consiste em reimplementar a máquina de estados finitos anterior (feita na sala de aula), substituindo a variável keyPressed pela função keyPressed () e explicando suas diferenças de uso, vantagens e desvantagens.

A máquina de estados tem 3 estados: PARADO, ANDANDO e MARTELANDO, equivalente aos números 0, 1 e 2 respectivamente. No setup() eu carrego as imagens dos 3 estados usando o loadImage().

Estados: PARADO, ANDANDO e MARTELANDO

Em seguida no draw (), eu declaro as funções:  mostraMario (), passando a variável estadoMario como parâmetro e a função estadoMario().

Na função mostraMario() é onde será verificado qual estado do Mario está sendo processado no momento. Daí então ele mudará o sprite dele de acordo com o estado, que é verificado na função keyPressed (). Nela, caso a tecla LEFT seja apertada, a variável estadoMario recebe o estado ANDANDO. Caso seja a tecla barra de espaço, ela recebe a variável MARTELANDO. Na função estadoMario(), é verificado se o estado ANDANDO ou MARTELANDO estão sendo acionados. Se estiverem, uma variável global chamada tempo é incrementada, e se ela ultrapassar 30 segundos, ela zera, e a variável estadoMario volta a ser PARADO.

keyPressed VS keyPressed()

keyPressed:

A variável do sistema booleano keyPressed é verdadeira se qualquer tecla for pressionada e falso se nenhuma tecla for pressionada. O fato dela ser uma variável é bom porque ela pode ser utilizada em mais de um local. Contudo, por ela ser só uma variável, é preciso implementar toda a lógica da máquina de estados usando-a.

keyPressed():

A função keyPressed () é chamada cada vez que uma tecla é pressionada. Por causa de como os sistemas operacionais suportam repetições de teclas, manter pressionada uma tecla pode causar várias chamadas para keyPressed (). A taxa de repetição é definida pelo sistema operacional e pode ser configurada de forma diferente em cada computador. Em compensação, essa função já funciona como uma máquina de estados, melhorando o seu código.

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More

Atividade 10 - MAMI

A atividade era explicar como se pode detectar cliques do mouse sobre um botão retangular com cantos arredondados.

Primeiro ei fiz o modelo do botão. Para isso ele vai ter 4 círculos nos seus cantos e o preenchimento do botão será dois retângulos, sendo que o primeiro retângulos possui largura maior que o segundo, e o segundo possui altura maior que o primeiro, como na figura abaixo. Os círculos deverão ser criados nos pontos em que há intersecção dos retângulos, para que assim se forme um botão retangular com cantos arredondadas.

Depois eu criei duas funções. A primeira faz o calcula da distância, recebendo dois valores (A e B) e retornando a diferença entre eles. Eu chamei ela de distancia1D( ). Usei a função abs( ) para o valor sempre ser positivo. A outra faz o calculo da distância entre dois pontos, recebendo os valores x1, y1, x2, y2 e retornando o calculo da equação: d = √( (x2 - x1)² + (y2 - y1)² ). Eu chamei ela de distancia2D( ). Vale lembrar que a função distancia2D( ) chama a função distancia1D( ) para poder fazer o calculo da diferença entre os valores.

Em seguida, eu criei os círculos e retângulos no draw( ), usando as funções ellipse( ) e a rectMode(RADIUS), para facilitar na hora de fazer as comparações que serão necessárias posteriormente.

Também criei a função mousePressed(), que checa se o botão está sendo clicado. Para isso, eu criei duas variáveis locais chamadas distX e distY, que recebem respectivamente o valor do calculo da distancia (através da função distancia1D) entre os valores x e y correspondentes aos retângulos do botão e as posições do mouse (mouseX e mouseY). Somente assim eu consigo verificar se o mouse estará clicando dentro da área correspondente a parte retangular do botão. A mesma verificação é feita para os 4 círculos que estão nos cantos do botão, só que para isso eu uso o calculo da função distancia2D, e comparo com as posições do mouse(mouseX e mouseY). Se estiver clicando dentro da área do botão, então a cor do background muda pra ciano. Se não estiver clicando, ela continuará cinza.

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More

Atividade 09 - MAMI

O bounding boxe é uma técnica usada para se detectar a colisão de dois ou mais objetos(ou sprites), no qual os mesmos passam a ser considerados como caixas(retângulos), para se facilitar o cálculo. Como na imagem abaixo, no qual a área correspondente a bolinha e ao quadrado que está inclinado se transforma em duas caixas invisíveis.

Para explicar melhor a técnica de detecção de colisão por bounding box, eu desenvolvi uma versão simplificada do jogo Breakout, que considera a colisão de toda bola com o bastão e com dois ou mais obstáculos. 

Primeiro eu criei a função bastao(), que cria e faz movimentar o bastão que fica na parte inferior da tela. 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 a posição y recebe um valor de 580px, para que o bastão fique na parte de baixo da tela mais não colada ao fim da tela. Após isso, verifico se alguma tecla foi pressionada, caso a tela RIGHT tenha sido pressionada, incremento mais 5 na variável da posição x. Também verifico se o bastão está ultrapassando a largura da tela. Se a variável x for menor que o width da tela menos 100(o tamanho do bastão no eixo X), então é incrementado 5 à variável bastãoX. O mesmo é feito para o lado esquerdo.

Depois eu criei uma função chamada bola(), que recebe dois parâmetros, x e y. Dentro dessa função, usando esses parâmetros eu desenho uma bola com a função ellipse(). Em seguida, eu faço verificações para quando a bolinha bater nas paredes laterais, em cima e no bastão. Se colidir, ela inverte a sua direção. 

Também criei uma função chamada colisao(), que verifica se a bola colidiu com cada um dos 3 obstáculos que eu criei como variáveis globais. Também criei 3 variáveis do tipo booleano, chamadas de obsDestroyed 1, 2 e 3, que armazenam o estado dos obstáculos(no caso elas são armazenadas inicialmente como false). Se a bola tiver colidido com algum dos obstáculos, então é mudado o valor dessas variáveis para true, possibilitando assim que os obstáculos sejam destruídos. Mas eles só serão destruídos de fato na função destroi(), que verifica se as variáveis obsDestroyed 1, 2 e 3 são true. Se forem, então os obstáculos são criados. Se forem false, então os obstáculos passam a não existir.

Há também uma função chamada gameover(), que verifica caso a bola ultrapassa a altura inferior da tela, parando assim o jogo para, as configurações do jogo volta para a inicial e é dada uma mensagem de “GAME OVER” na tela.

No draw(), eu chamo as funções bastao(), passando o valor bastaoX, que é uma variável global, a função bola(), com os seus valores bolaX e bolaY, que também são variáveis globais, e as funções colisao(), gameover() e destroi().

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More

Atividade 08 - MAMI

Para a criação da função moveCaixa2(x1, y1, x2, y2, n), que realiza o movimento interpolado de um quadrado de lado 10 pixels, entre (x1, y1) e (x2, y2), em n passos, eu fiz o seguinte:

Primeiro eu defini uma variável (i) para ficar responsável pelo movimento.

Depois criei a função moveCaixa2( ), que recebe os parâmetros da posições iniciais x1 e y1, das posições finais x2, y2, e a quantidade de passos n. Dentro dela, eu faço o calculo da diferença entre as distancias x2 - x1, e y2 - y1, e armazeno o valor em duas variáveis chamadas respectivamente de distx e disty. Em seguida, eu verifico se a variável i é menor ou igual a 1, caso seja, o movimento pode ser executado, desenhando assim o retângulo com a função rect(), onde sua posição x é a posição x inicial (x1) mais o produto de i com a diferença do x final com o x inicial (distx), sua posição y é a posição y inicial (y1) mais o produto de i com a diferença de y final com y inicial (disty). Sua altura e largura eu defini com 10px.

Após o quadrado ser desenhado, incremento à variável i o valor dela mesma mais a divisão de 1 pela quantidade de passos (n).

Por fim, na função draw( ) apenas defino o background como preto e chamei a função moveCaixa2( ).

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More

Atividade 07 - MAMI

Para essa tarefa, nós iremos discutir os aspectos envolvidos na criação e no uso de um adaptive logo, à minha escolha.

Eu escolhi a logo do Brooklyn Museum. Essa logo foi desenvolvida pensando nesses pontos:

“Trabalhando em conjunto com uma grande renovação e adição arquitetônica pela Polshek Partnership, nós redesenhamos o rosto do público do Brooklyn Museum. Nossa solução imagina o Museu do Brooklyn como um museu alternativo: a família, em vez de orientada para o turismo, voltando-se para sua comunidade imediata. O novo logotipo é uma visão contemporânea do clássico selo do museu. O novo selo muda e muda, dependendo do seu uso, para indicar a ampla gama da coleção do Museu, e seus programas dinâmicos e dinâmicos. O conceito leva à sua campanha publicitária, materiais impressos e embalagens de varejo e, externamente, ao sistema de sinalização abrangente no lobby, admissão e áreas exteriores do museu.”

Visto isso, nós ainda podemos comparar algumas características que uma marca deve ter: 

• Elementos: possui um símbolo no formato da letra “B” envolto por uma forma que varia de acordo com a aplicação dela, mas que não varia a forma central, sem ultrapassar uma forma circular de segurança para gerar o contraste com a forma da letra “B”. Também possui um logotipo que possui uma certa formalidade e seriedade, causada pelo uso de uma tipografia sem serifa meio “quadrada”, mas que serve para balancear com o símbolo, que possui formas mais fluidas e expressivas. A logo tem cor azul, acredito eu para trazer a ideia de intelectualidade, tranquilidade e confiança (entre outras coisas). Também possui a versão preta e branca.

• Rigidez e padronização: por mais que tenha várias formas, a logo possui uma parte que não muda, que é exatamente a parte circular que envolve a forma da letra “B”. A partir dessa área é que ela muda. Com relação a padronização, algumas formas da logo parece possuir um padrão geométrico e matemático, voltado para a repetição de um segmento da forma, mas em outras já parece não ter, sendo algo parecido com um desenho à mão livre.

• Miniaturizável e reprodutível: a logo pode claramente ser reproduzida em vários tamanhos, tanto pequenos quanto grandes, bem como em várias superfícies, como mostram as figuras abaixo:
  
  
  
  
  
  
  
  
  
  

Read More

Atividade 06 - MAMI

Para criar esse procedimento, considerando a Lei Federal N° 5.700, primeiramente devemos identificar que o modulo da bandeira se dá de acordo com sua altura, ou seja, o modulo tem tamanho igual ao da altura dividido por 14 e a largura é do tamanho de 20 módulos. Temos então que a distância das pontas do losango para os limites do retângulo é de 1.7 módulos, e que o circulo centralizado no losango terá um raio de 3.5 módulos, dada as informações, precisamos apenas escreve-las dentro da função, seguindo esses 3 passos:

• Criação do retângulo que constitui a área verde da bandeira
• Criação do losango que constitui a área amarela da bandeira que se posiciona no meio do retângulo e que tem distancia de 1.7 módulos dos limites do retângulo.
• Criação do circulo que tem tamanho de 3.5 módulos e que se localiza no meio do retângulo.

Agora se fosse empregado o uso do rectMode(RADIUS) para criar o retângulo da bandeira, ficaria muito mais simples de manter a proporção dos módulos, o raciocínio para achar os valores de posição nos eixos x e y seria similar ao de um circulo criado com a função ellipse normal, pois os parâmetros x e y dele passaria a ser no centro do retângulo, e não no canto superior esquerdo como antes. 

O mesmo efeito seria se os círculos fossem feitos usando o ellipseMode(CORNER), no qual os parâmetros correspondentes ao x e y formariam um círculo a partir do canto superior esquerdo dele, sendo assim bem similar a função rect( ) normal.

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More