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

Atividade 05 - MAMI

Bem, para essa atividade foi proposto criar uma função chamada lacamento, e explicar o desenvolvimento de uma aplicacão que simulasse o quicar de uma bola lançada para cima e para frente, e cujas velocidades horizontal e vertical diminuísse sempre que o chão é tocado.

Sendo assim eu criei algumas funções:

Função MRU: criada pra calcular  a distancia que a bola irá percorrer no eixo horizontal. Possui os parâmetros de tempo(t) e velocidade no eixo horizontal(vH).

Função MRUV: criada pra calcular a distancia que a bola irá percorrer no eixo vertical. Possui os parâmetros de tempo(t), aceleração(a), e velocidade no eixo vertical(vV).

Função lancamento: criada para gerar as distâncias na vertical e horizontal, chamando assim as funções MRU e MRUV, e salvando respectivamente os seus valores nas posições 0 e 1 do vetor aux.

Função mostraMundo: cria um grid.

Então no draw( ), é feito uma checagem usando duas estruturas de condição if( ). Se a distância do MRU(distância horizontal) salva no vetor distance é menor que 0, ela se torna 0, e se a distância do MRUV(distância vertical) for menor que 0, também se tornará 0. Daí é feito outra checagem, na qual se a distância vertical for igual a 0 e o tempo for diferente de 0. Se for, o tempo(t) zera, e o espaço(s) acrescenta a distância horizontal a sí.

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

Read More

Atividade 04 - MAMI

A atividade proposta é para basicamente explicar a criação de uma aplicação, que inicialmente armazena, num vetor, as velocidades aleatórias de 20 carros (retângulos coloridos) e, empregando a função MRU, mostra na tela uma corrida disputada entre os mesmos e identifica o carro vencedor.

Primeiro eu criei 3 funções. A primeira foi a do movimento MRU, que foi exatamente igual a apresentada pelo professor na aula, no qual a gente passa os parâmetros de velocidade (v) e tempo (t), e ela retorna a distância (d) que os carros vão percorrer. Em seguida criei uma função chamada car, que cria o carro usando funções rect, e inicia a posição x dos carros com a distância, que é gerada a partir da função MRU. Nessa função também é atribuído o número de cada carro. E por último criei a função speedWay, que cria a pista de corrida e a linha de chagada.

Depois disso, eu criei no setup() um vetor de velocidades, com valores variando de 50 a 100, equivalentes nesse caso às velocidades de 50m/s a 100m/s, pois essa foi a unidade proposta, e usei um laço for para atribuir as 20 velocidades em cada posição do vetor. 

Depois eu criei um if no draw(), para saber se os carros chegaram ou não à linha de chegada. Para isso, foi criado um laço for com a variável endRace que é inicializada com true. Se a distancia dos carros for maior ou igual a distancia da linha de chegada, então ela se torna false, o contador winner recebe a posição do vetor (que nesse caso será o número do carro) referente ao carro que chegou primeiro, e então o laço acaba com um break. Se não, quando a variável endRace for false, é por que o carro já venceu. Então é mostrado um texto na tela com o número do carro vencedor.

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

Read More

Atividade 03 - MAMI

Hoje vou apresentar o desenvolvimento de uma aplicação que gere quadros com a função bloco utilizando dois sliders na tela, para definir as quantidades de blocos na horizontal e na vertical. Vou usar como base um código que já fazia isso, mas de forma fixa, como mostrado na imagem abaixo.

Com a ajudo dos sliders agora é possível gerar os blocos em tempo de execução, bastando apenas arrastar os sliders e trocar os valores deles. Para isso, eu precisei criar uma função chamada de bloco( ). Nela são criados três círculos e um retângulo. Os círculos são criados chamando uma outra função que eu criei chamada circulo( ), que nada mais é do que uma função que chama a função ellipse( )  só que de uma forma modificada, pois a função ellipse( ) normal tem 4 parâmetros: coordenada x, coordenada y, largura e altura. A que eu criei, ao invés de passar números, eu passei nos dois o mesmo valor, que é 2*r (o raio). Além disso, na função do bloco, os círculos são criados de modo que eles mantenham uma proporção que o círculo menos não ultrapasse o tamanho do círculo do meio, e o do meio não ultrapasse o círculo grande. 

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

Read More