ansiedade-matematica-blog - Tumblr blog

ansiedade-matematica-blog · 5 years

Text

MAM I - Projeto Final - Parte I

Quero começar apresentando o trabalho final da disciplina de MAM I, o motivo deste blog estar no ar. O projeto se trata de refazer um game portátil dos vários dispositivos portáteis da década de 80, principalmente os Game&Watch desenvolvidos pela Nintendo, um aparelho que continha um ou dois jogos e um sistema de relógio e alarme embutido. O jogo que escolhi para refazer foi Helmet, que era jogado em um Game&Watch de jogo único. Helmet foi lançado em 21 de fevereiro de 1981 nos Estados Unidos da América e no Japão, e foi considerado um jogo bastante popular, a ponto de receber adaptações para muitas outras versões no futuro, como a versão que saiu para Game Boy Color no Game&Watch Gallery 2, um conjunto de jogos de Game&Watch que foram reunidos e revitalizados com os personagens ilustres da franquia de Mario, não só isso, mas o Game&Watch Gallery 2 também dispunha da versão clássica de Helmet dentre outros jogos. Vou deixar aqui um vídeo e um link para um emulador para que vocês conheçam o jogo e me avaliem depois:

youtube

A primeira parte do projeto se trata de um port, que se trata uma versão do jogo para outra plataforma, mas que precisa ser a mais idêntica possível à versão clássica. Escolhi fazer em Processing, pois é a linguagem que esse blog costuma usar em suas postagens e por ser a linguagem que tenho praticado ultimamente. Não nos preocuparemos com código agora, pois tomaremos dessa vez um estilo de explanação diferente, onde teremos o modelo natural, modelo matemático e por fim o modelo computacional, para que possam acompanhar o processo de recriação completo.

O jogo se passa em um canteiro de obras, com um prédio do lado esquerdo da tela onde um trabalhador sai por vez, e outro do lado direito com uma porta que fecha e abre de tempo em tempo. O objetivo é fazer trabalhadores passarem de um prédio a outro por um pátio onde ferramentas caem constantemente do céu, cada vez mais rápido. Então começaremos a usar os modelos.

MODELOS NATURAIS

Jogador

O jogador se movimenta por 7 posições, do lado esquerdo até o direito no inferior.

O jogador usa dois botões, um para se mover para a esquerda e outro para a direita.

A primeira posição é a porta do prédio que o jogador sai, e a última é a porta do prédio que o jogador precisa entrar.

Caso o jogador fique na porta da esquerda durante uma quantidade específica de tempo, é jogado para frente.

O jogador não pode voltar para dentro do primeiro prédio depois de sair.

O jogador só pode entrar no prédio da direita quando a porta estiver aberta.

Quando o jogador entra na última porta, o trabalhador some, e surge outro na primeira porta.

Objetos e Porta

Existem 5 tipos diferentes de objetos. Chave de boca, chave de fenda, balde, alicate e martelo.

Os objetos podem surgir de 5 posições diferentes da esquerda para a direita no topo da tela.

As 5 posições dos objetos são correspondentes as posições centrais do jogador.

O tipo e a posição de cada objeto que surge são aleatórios.

O objeto cai do topo até acertar o chão e sumir.

É possível surgir muitos objetos por vez, ou nenhum.

A porta do lado direito fecha e abre depois de um certo período de tempo.

Só 1 objeto pode surgir no mesmo lugar por vez.

Sistema

Conforme a pontuação aumenta, a velocidade de queda dos objetos também aumenta.

Se o jogador estiver no lugar onde a ferramenta cair, o trabalhador morre e o jogador acumula uma falha.

Se o número de falhas chegar a 3, o jogo acaba.

O jogador ganha 1 ponto para cada 3 ferramentas que caem no chão.

Se o jogador atingir 200 ou 500 pontos, todas as falhas do jogador somem.

O jogo possui dois modos, o modo A e o modo B. O modo B começa com objetos caindo mais rápido e a porta fechando num intervalo de tempo menor, aumentando a dificuldade.

MODELOS MATEMÁTICOS

Jogador

O jogador pode estar em 7 posições no eixo X, na borda inferior da tela.

Quando pressiona a seta direita, o jogador se movimenta para a posição a direita da atual.

Quando pressiona a seta esquerda, o jogador se movimenta para a posição a esquerda da atual.

O jogador não pode se mover para esquerda se estiver na posição limite da esquerda (Posições 1 e 2) e não pode se mover para a direita caso esteja na posição limite da direita (Posição 6, caso a porta esteja fechada).

Na posição 1 o jogador acabou de surgir e na posição 7 ele está saindo do campo.

Caso o jogador fique na posição 1 por 7 segundos, é jogado para a posição 2.

O jogador não pode retornar para a posição 1 depois de sair.

Se o jogador chegar a posição 7, ressurge na posição 1.

Objetos e Porta

Os objetos são classificados em 5 tipos diferentes, de 0 a 4.

Os objetos podem surgir de 5 posições diferentes no eixo X no topo da tela.

As 5 posições de surgimento dos objetos são correspondentes as posições 2, 3, 4, 5 e 6 do jogador.

O tipo e a posição de surgimento no eixo X são aleatórios.

O objeto cai do topo por 5 posições no eixo Y e ao atingir a 6° é excluído.

Os objetos surgem e mudam de posição no eixo Y a cada 1 segundo.

A taxa de surgimento dos objetos varia de 0 a 2.

A porta do lado direito tem 2 formas, aberta e fechada, que mudam a cada 12 segundos.

Em cada posição do eixo X relacionada ao surgimento dos objetos só pode surgir 1 objeto por atualização.

Sistema

Com o aumento da pontuação, o intervalo de atualização das posições no eixo Y e surgimento dos objetos diminui em 2 décimos.

A relação de equivalência para a falha do jogador é Po = Pj-1. Onde Po é a posição do objeto e Pj é a posição do jogador. Neste caso o contador de falhas do jogador acumula 1 unidade.

O contador de pontuação do personagem aumenta em 1 a cada objeto que chega a posição 6 no eixo Y e some.

O contador de pontuação do personagem é incrementado em 5 quando o jogador atinge a posição 7.

Quando o contador de pontuação do jogador ultrapassa os valores 200 e 500, o contador de falhas é zerado.

Se o contador de falhas atingir um valor igual a 3, o jogo acaba.

No modo de jogo B, temos todas as configurações anteriores mudando apenas: O tempo de surgimento e atualização da posição dos objetos no eixo Y começa com o valor de 45 décimos, enquanto o tempo de atualização do estado da porta é de 3 segundos.

MODELO COMPUTACIONAL

Antes de começarmos este modelo, peço que abram os códigos liberados no fim da postagem e acompanhem durante a leitura, por serem muitos trechos, e alguns com mais de 100 linhas, não poderei disponibilizar parte a parte durante a explicação.

Comecei o desenvolvimento desse jogo pela leitura das informações sobre o jogo e o dispositivo, depois usei o emulador VisualBoyAdvance para jogar Helmet clássico através do Game&Watch Gallery 2. Após experimentar bastante e perceber as nuances do jogo comecei a pesquisa por sprites do jogo antigo e descobri que a resolução era de 160x144, no início achei pequena, mas decidi usa-la para trazer a mesma sensação do jogo clássico, se era divertido no Game&Watch, também deve ser aqui, outro ponto que pensei é que a segunda parte deste trabalho se trata exatamente de uma repaginação do visual do jogo, logo, guardaremos a redefinição da resolução para a próxima postagem sobre o assunto.

Consegui muitos sprites através do emulador do jogo, mas só consegui tirar Sprite sheets muito confusas e poluídas, então quis me certificar de que daria tudo certo, procurei por mais imagens na internet e consegui montar um mockup geral dos sprites e suas posições na tela do jogo. Usei o photoshop e suas réguas para mapear todos os elementos que se movem no jogo e cortar cara Sprite de cada elemento separadamente, como o processing mapeia elementos por pixels, modifiquei as réguas do photoshop também para pixels e consegui a posição exata de cada elemento.

Depois parti para a programação da coisa, começando pelo carregamento de todas as imagens para variáveis ou vetores no void setup(). Depois usei a função keyPressed para escolha do modo de jogo no começo da aplicação e como o jogo não tem pause, adicionei uma variável de checagem, para que os botões de escolha de jogo só funcionassem realmente no começo.

Após isso parti para o personagem, criei uma função estadoPersonagem() para movimenta-lo de acordo com os controles através das setas do teclado. A função possui um switch que examina o estado do personagem e imprime o personagem no canvas com o sprite e na posição corretas. Por fim criei as checagens necessárias para o movimento do personagem, caso esteja nas posições 0 ou 1 não poderá ir para a esquerda, caso chegue a posição 6, o Sprite é mostrado, o jogador some e reaparece na posição 0 , caso o jogador fique por 7 segundos parado na posição 0, sua posição no eixo X é atualizada para 1 e por fim, o jogador só consegue chegar a posição 6 caso a porta esteja em estado de aberta.

Depois parti para a porta, criei uma função que muda o estado da porta de acordo com o tempo do modo de jogo selecionado e um switch para examinar o estado da porta e imprimir o Sprite correto na posição correta.

O mais complicado ficou por último, a dificuldade dos objetos é criar um objeto e modificar sua posição até que ele suma no final, são muitas variáveis para controlar na posição e hora exata da aplicação, tentei fazer de muitas maneiras, até uma ou várias máquinas de estados finitos, mas sempre tinha algo a mais que eu devesse lidar e fugia das condições da função. Então passei a estudar sobre o conceito de surgimento aleatório de figuras e descobri sobre a lista, mas ainda não satisfeito continuei procurando até bater nas classes e construtores. Então automatizei o máximo possível a minha função através de uma classe e seus métodos, criei uma classe chamada Objeto e seu construtor também nomeado de Objeto que recebia um número aleatório referente a posição no eixo X que o objeto surgia. Essa classe possui 3 métodos, desenhoObjeto() com switchs aninhados para desenhar corretamente cada tipo de objeto na sua posição específica no eixo Y, posicao() para definir a posição em pixels referente a posição de 0 a 4 recebida aleatoriamente, por exemplo, a posição 0 se encontra no pixel 35 do eixo X, e o atualizacao() que serve para incrementar a posição dos objetos no eixo Y.

Criada a classe e automatizado boa parte do conteúdo necessário, criei uma lista para adicionar e remover variáveis do tipo Objeto quando necessário. Comecei as checagens e processos para usar os métodos da classe Objeto. Primeiro a checagem de tempo, as situações das ferramentas só atualizam a cada período específico de tempo, esta checagem foi feita através de um contador, assim como a porta. Depois de passar da checagem de tempo criei um for para imprimir exatamente quantos objetos necessários por vez, o tamanho deste laço é definido por uma variável que pode ter um valor de 0 a 2 e dentro do laço coloquei a criação do objeto e o adicionei a lista através da função add(), mas ocorria a possibilidade de dois objetos aparecerem na mesma posição X, então criei uma checagem para isso dentro do for. Ao sair da criação o método a ser chamado é atualização para incrementar a posição no eixo Y de cada objeto, então criei um laço para percorrer a lista usando o método e por fim configura-se o contador de tempo a zero para que calcule a próxima atualização. Já fora da checagem de tempo a função desenha os objetos todas as vezes que necessário, usando um for e o método desenhoObjetos(), por fim incrementa o contador de tempo em 1.

Agora era hora do gameMaster ser criado, ele precisa fazer as checagens em relação a vitória e derrota do jogo, a primeira checagem da função é para a travessia da porta, caso confirmada ela confere os pontos ao contador e reseta a posição do personagem. A segunda é para contar as ferramentas que caem ao chão e quando este contador chega a 3, conferir 1 ponto ao contador da pontuação e resetar o de ferramentas. A terceira checagem é da condição de falha do jogo, caso o personagem esteja numa posição referente a queda de um objeto, ele acumula 1 ao contador de falhas, se esta checagem for confirmada, mostra o Sprite do personagem que falhou e reseta o contador de tempo do personagem. Depois a remoção de ferramentas que caíram na posição 6 do eixo Y, esta é feita constantemente e o mais rápido possível, para evitar ferramentas fantasmas que sumiram mas continuam causando a morte do personagem nas posições do eixo X em que caíram, feita com um while para percorrer toda a lista e remove() para remover elementos. Temos a checagem de pontos para aumentar a dificuldade, que a cada 25 pontos retira 2 décimos do contador de atualização dos objetos. As checagens das pontuações acima de 200 e 500, que zeram as falhas 1 vez cada. Por último, o gameMaster checa a derrota, caso o jogador chegue a 3 falhas, o noLoop para o jogo.

Com a definição de pontos e falhas, criei funções para desenhar os números da pontuação com os sprites do jogo, ela descobre quantos algarismos o número tem e desenha um a um através de um for. Outra função foi criada para a demonstração dos sprites de falhas, na primeira falha desenha uma cabeça e a palavra “Miss” e depois adiciona mais cabeças.

Chegamos ao final e ainda faltava algo, então voltei ao emulador e gravei os sons de morte e de quando o personagem atravessa a porta, usei o programa gratuito AudaCity para editá-los. Instalei a biblioteca de áudio do processing e atualizei o código para tocar os sons nos devidos momentos. Até tentei grava a música do jogo ou baixa-la da internet, mas não consegui. Então gravei somente um estímulo de som e coloquei no momento da queda dos objetos para simular a música.

Aqui já estava bem satisfeito e passei para os testes, corrigi alguns bugs como trechos de código desnecessários e o jogador conseguir mudar a posição do personagem no período em que estava morto.

Minhas considerações finais, são ótimas, acho que o port ficou extremamente idêntico a versão original faltando somente a música que não consegui replicar, fica para uma próxima.

Link e Instruções do Jogo

Eu criei dois executáveis, Windows 32 bits e 64 bits, os dois estão neste link: Executáveis

Caso queiram baixar todos os arquivos, incluindo sprites, áudio e códigos, este é o link: Código, imagens e sons

Tecla ‘A’: Seleciona o modo A no menu.

Tecla ‘B’: Seleciona o modo B no menu.

Tecla ‘R’: Reinicia o jogo quando o jogador perde o jogo.

Setas da Esquerda e Direita: Movimentam o personagem do jogo.

A matemática ataca minha ansiedade.

- Jair

4 notes · View notes

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 9 - Atividade 8

Definição do Exercício:

Reimplementar o jogo Pong para um jogador empregando a função keyPressed() e comparar o uso da mesma em relação ao emprego original da variável de sistema keyPressed.

Resolução:

Esta atividade é um pouco diferente das anteriores, pois se trata de uma tarefa de avaliação de ocorrências, dito isso, peço que examinem os códigos e testem as aplicações disponíveis agora no começo deste plano de resolução.

GitHub: Pong com função keyPressed(){} / Pong com variável keyPressed

Começaremos avaliando o funcionamento da função keyPressed() quando posicionada fora do laço draw. Esta função é ativada toda vez que uma tecla é pressionada, ela funciona com checagens dentro da função para definir comandos e para estas checagens, o Processing dispõe de variáveis reservadas para cada situação. Duas delas são a key e a keyCode, que funcionam para caracteres comuns e caracteres especiais, como as setas do teclado, respectivamente.

void keyPressed() { if (keyCode == DOWN) { bastaoYD += 9; } else if (keyCode == UP) { bastaoYD -= 9; } }

Aqui podemos observar o movimento do bastão no jogo de Pong, se você pôde executar a aplicação, percebeu que ocorre um atraso quando o usuário busca por muitas ações ao mesmo tempo. Isso acontece porque a função é ativada fora do draw, então não acompanha sua velocidade de execução ou seu frameRate, assim, a bolinha é atualizada muito mais rápido do que o movimento do bastão pelas teclas escolhidas no teclado.

Observado isso, podemos concluir, que a função keyPressed() funciona bem para poucas ativações seguidas de teclas, mas não para um jogo que exige uma movimentação mais elaborada.

Já a variável keyPressed serve para guardar apenas um valor booleano, true ou false, sendo assim ela precisa ser usada dentro da função de loop draw e dentro de uma estrutura de checagem como o if-else. O restante funciona exatamente igual a função keyPressed(), usando as variáveis reservadas do Processing para descobrir qual tecla foi pressionada.

if (keyPressed == true) { if (keyCode == DOWN) { bastaoYD += 9; } else if (keyCode == UP) { bastaoYD -= 9; } }

Este trecho de código também define a movimentação do bastão, por outro lado, a checagem de pressionamento da tecla acontece sempre que o draw tem uma iteração, diferente da função keyPressed(), assim o movimento do bastão acompanha as atualizações de movimento da bolinha, sendo mais rápido e justo o jogo.

Podemos concluir que a variável keyPressed quando colocada dentro do draw tem uma taxa de atualização mais realista em relação ao restante da aplicação, pegando mais movimentos do personagem no caso de um jogo como este.

Caso você não tenha visto muita diferença nos módulos das aplicações, peço que imagine um jogo de Pong completo, com dois jogadores e muitas teclas sendo pressionadas ao mesmo tempo, claro que o teclado do aparelho também influencia neste caso, mas se a função keyPressed() ja apresenta certo delay em relação as outras movimentações do jogo, quanto maior a escala de teclas que podem ser aplicadas simultaneamente, pior o desempenho do seu programa.

Para finalizar, uma curiosidade que me surgiu, foi tentar resolver o atraso da função keyPressed(), colocando uma chamada no laço draw. Aconselho que tentem e tirem suas conclusões experimentais, porém, adiantando as minhas, percebi que ao pressionar uma das teclas, acabo duplicando eternamente a chamada da função pois o valor é guardado e repetido. No caso do Pong, pressionar uma tecla de movimentação do bastão, faz com que ele continue se movendo naquela direção, não dando ao usuário a chance de parar o movimento quando a tecla não é mais pressionada.

A matemática ataca minha ansiedade.

- Jair

1 note · View note

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 8 - Atividade 7

Definição do Exercício:

Empregando as funções dist e map do Processing, explicar e exemplificar como a posição do mouse, numa janela com proporção 4:3, pode mover um círculo no interior de uma retângulo com proporção 16:9 centralizado na tela.

Resolução:

Como de costume, começaremos definindo os pontos estáticos da aplicação, que nesse casso são apenas alguns desenhos de figuras no canvas.

void draw() { background(100);

noStroke(); rectMode(CENTER); fill(255); rect(width/2, height/2, 320, 180);

correspondencia(); }

size(800,600); para definir o tamanho do canvas.

rectMode(CENTER); para trazer o ponto de orientação para o centro do retângulo.

rect(width/2, height/2, 320, 180); é o desenho do retângulo centralizado no canvas.

Perceba que as proporções seguindo as orientações dadas no enunciado do exercício. Apesar de não ser importante para uso das funções do Processing, ou mesmo para mapear proporcionalmente um objeto, é exigido no exercício.

Agora podemos trabalhar com a situação dinâmica da aplicação, a bola. Temos que fazer ela se mover somente dentro do retângulo no centro do canvas ao mesmo tempo que acompanha o mouse se movendo no plano de fora, mas ainda dentro do canvas. Em outras linguagens, fazer este tipo de mapeamento proporcional ou correspondente pode ser um pesadelo, mas no Processing temos duas funções muito úteis para usar.

A função dist() recebe dois pares de parâmetros, duas coordenadas respectivamente, como de costume, começando do eixo X e depois o eixo Y. Esta instrução funciona para conseguir a distância exata entre dois pontos.

dist(x1, y1, x2, y2);

Já a função map(); é um pouco mais complicada, pois ela faz a conversão proporcional de uma distância em uma reta de tamanho qualquer, para outra distância em outra reta também de tamanho a sua escolha.

map(value, xi1, xf1, xi2, xf2);

Temos value como o valor da distância atual.

xi1 e xf1, são respectivamente os pontos onde minha reta começa e termina, perceba que a primeira reta especificada é a reta em que o valor do primeiro parâmetro se encontra.

xi2 e xf2 tratam de onde a segunda reta começa e termina, respectivamente. Aqui temos o tamanho da reta para qual o valor passado inicialmente deve ser convertido proporcionalmente.

A partir daqui ja podemos lidar com o mapeamento correspondente, segue a continuação do código para análise:

int t = 30;

void correspondencia(){ float dx = dist(0,0,mouseX,0); float dy = dist(0,0,0,mouseY); float x = map(dx, 0, width, 240+t/2, 560-t/2); float y = map(dy, 0, height, 210+t/2, 390-t/2); fill(0); ellipse(x, y, t, t); }

t é a variável global que guarda o tamanho do círculo a ser desenhado.

dx e dy são as variáveis que guardam as distâncias totais do canvas entre o ponto 0 e a posição do mouse.

x e y são as variáveis que recebem as posições ja modificadas proporcionalmente pela função map().

Temos duas execuções da função dist(), uma para definir a distância específica em cada eixo por vez, pois a função map() transforma proporcionalmente um eixo. Perceba também que afim de conseguir puramente a distância em um dos eixos, o outro eixo das duas coordenadas é zerado, quando procuramos no eixo X, zeramos no eixo Y e vice versa.

Outra curiosidade é que no segundo par de coordenadas dos usos das funções map(), temos onde exatamente o retângulo centralizado começa e terminar, então foi preciso calcular o espaço em pixels ocupado pelo retângulo no centro do canvas. A interação do t/2 é um detalhe, pois eu não queria que o círculo atravessasse o retângulo do centro de maneira alguma, como a ellipse() é orientada pelo centro da figura, aumentei metade do tamanho no inicio e subtrai a mesma quantidade no final, fazendo com que esta encoste no retângulo, mas não o ultrapasse.

Por fim temos o desenho da ellipse(), que com as coordenadas convertidas, ja se tornou simples, basta por os parâmetros. Lembrando que essa função deve ser chamada dentro do draw(), para atualizar a localização da bola a cada iteração.

GitHub: Correspondência

A matemática ataca minha ansiedade.

- Jair

1 note · View note

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 7 - Atividade 6

Definição do Exercício:

Apresentar e discutir a relação estabelecida entre a sequência de Fibonacci e a noção de proporção áurea e sua respectiva possível contribuição ao Design Gráfico.

Resolução:

Como todos os outros posts desse blog, este começa lidando com matemática, mas dessa vez na sua forma mais próxima do modelo natural do universo. A proporção áurea ou número de ouro, é uma constante real algébrica irracional em formato de dizima, ou de uma maneira menos científica, é um número que simplesmente é encontrado na forma de diferentes coisas no nosso mundo, como os filamentos de folha, girassóis, conchas de caracóis, furacões, ondas no mar e até nas proporções do corpo humano.

Usada constantemente como escala para os materiais primários que compõe quase tudo no universo, a razão áurea foi encontrada simultaneamente por diversos matemáticos observadores ao redor do mundo. Fídias pode ser destacado destes como o que representou o número com a letra grega Φ (phi), e Euclides como o primeiro a documentar a constante em uma de suas obras, chamada Os Elementos.

Para entender melhor como se realiza a proporção áurea, temos que uma reta qualquer é dividida em duas partes não iguais, depois dividimos o segmento maior pelo menor e teremos um número que seria o mesmo da divisão da reta inteira pelo segmento mais longo, essa dizima é aproximadamente 1,6180, ou o número de ouro. Outra forma gráfica de obter a proporção é partir de um quadrado, dividindo-o em duas partes, dessa vez iguais, usando uma reta vertical central e usar a parte direita para conseguir uma diagonal que começa no canto inferior esquerdo e termina no superior direito dessa mesma parte, gira-se esta diagonal até a base da figura e constrói-se um retângulo áureo a partir dessa nova largura. Aqui vai uma figura para ajudar na representação dos dois meios:

Mas e Fibonacci? O que sua sequência tem a ver com a proporção que muitos acreditam ter sido criada por Deus? Leonardo de Pisa ou Fibonacci foi o primeiro grande matemático europeu da Idade Média e durante seus estudos, descobriu propriedades únicas de uma sequência específica de números, que mais tarde seria nomeada como Sequência de Fibonacci. A sequência de números começa como os números decimais, com 0 e 1 e os próximos números são dados de acordo com a soma dos dois anteriores, então temos isso:

0,1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

A ligação com a proporção áurea é quando lidamos com a razão entre um número qualquer e seu antecessor, percebemos que quanto mais a sequência progride, mais a razão dentre estes números se aproxima do número de ouro:

2/1 = 2 | 3/2 = 1,5 | 5/3 = 1,6 | 8/5 = 1,6 | 13/8 = 1,625 | 21/13 = 1,615 | 34/21 = 1,619 | 55/34 = 1,617 | 89/55 = 1,6181 ...

É importante dizer que o retângulo de ouro, mostrado anteriormente, é executado a partir da sequência de Fibonacci, por isso seus estudos foram tão importantes.

O que nos leva a principal pergunta deste caso, qual a influência desta proporção ao Design Gráfico?

Acontece que a proporção áurea é relacionada ao que é belo pelo cérebro humano, não se sabe ainda o motivo exato desta ocorrência, mas o retângulo perfeito ou o caracol áureo são as formas do que o ser humano considera mais belo. Muito é discutido sobre o motivo científico ou divino disto acontecer, o estudante que aqui vos escreve acredita ser parte evolutiva do gosto adquirido da humanidade. Como mostrado no começo desta publicação, é fácil encontrar as proporções de ouro em diversos lugares na natureza e por isso o ser humano acomodou-se sensorialmente ao mundo áureo infinito ou finito. Assim, depois de perceber a enorme aclamação do cérebro humano a tais formas, é de se esperar que a espécie racional passe a reproduzir a proporção em suas obras artísticas ou científicas.

Então, é possível encontrar a proporção áurea nas artes mais aclamadas da humanidade, como a Monalisa de Leonardo Da Vinci, ou o templo grego Panteão. A obra mais interessante e exemplificadora da teoria do belo, é O Homem Vitruviano, também de Da Vinci, que foi concebido como as proporções perfeitas para um ser humano macho ter, que foram construídas através do caracol áureo.

Nos dias de hoje, a proporção áurea é também usada no trabalho de grandes designs, como a logo do twitter, da pepsi e da apple, muitos cartazes diferentes de filmes, as páginas do site facebook, dentre outros produtos do design gráfico. Por último, gostaria de deixar claro que o uso destas proporções não é uma regra, principalmente para do design que dispões de muitas outras. Utilizar a proporção áurea não quer dizer que seu design é bom ou ruim, apenas que o cérebro humano o considerará belo, mas o design gráfico tem haver mais com comunicação visual do que só com beleza.

A matemática ataca minha ansiedade.

- Jair

5 notes · View notes

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 6 - Atividade 5

Definição do Exercício:

Discutir o emprego das instruções quad, beginShape e endShape, rectMode e ellipseMode do Processing na construção da bandeira do Brasil, considerando a Lei Federal No 5.700.

Lei Federal No 5.700:

I – PARA CÁLCULO DAS DIMENSÕES, TOMAR-SE-Á POR BASE A ALTURA DESEJADA, DIVIDINDO-SE ESTA EM 14 PARTES IGUAIS. CADA UMA DAS PARTES SERÁ CONSIDERADA UMA MEDIDA OU MÓDULO

II – A LARGURA TOTAL SERÁ DE 20 MÓDULOS

III – A DISTÂNCIA DOS VÉRTICES DO LOSANGO AO QUADRO EXTERNO SERÁ DE UM MÓDULO E SETE DÉCIMOS

IV – O CÍRCULO NO MEIO DO LOSANGO TERÁ O RAIO DE TRÊS MÓDULOS E MEIO

Resolução:

Irei analisar a construção de cada uma das formas geométricas por vez, em alguns momentos pode ficar muito complicado devido as cálculos de coordenadas de vértices, como em outras situações podem parecer bem simples, por isso, irei comentar outros métodos possíveis destacando seus pros e contras. Outra observação importante a se fazer é que a aplicação foi elaborada para o desenho aparecer no centro do canvas por motivos de responsividade e de facilitar grande parte do trabalho de posicionamento, caso a figura seja desenhada em outro lugar, outra fórmula de posicionamento precisa ser pensada e calculada.

De acordo com a Lei Federal No 5.700 definimos uma altura para a bandeira e desta altura retiramos a medida principal dividindo-a por 14, essa medida que servirá de base para todos os tamanho e posicionamentos das figuras da bandeira, chamaremos de módulo, lembrando que o módulo precisa ser tipado como ponto flutuante, float, pois quase nunca o resultado da divisão por 14 será um número inteiro. No caso do nosso programa vamos trabalhar com uma bandeira de altura 400 pixels, a primeira ação a se tomar é descobrir o módulo.

float altura = 300; float m = altura/14;

Vamos começar com o retângulo verde, usei o procedimento quad() para construção da figura, dessa vez por motivos de adquirir experiência, pois o retângulo é facilmente desenhado com o procedimento rect(). No caso do quad(), temos um procedimento para desenhar quadriláteros no geral, regulares ou irregulares, recebe 8 ou 4 pares de parâmetros, cada par corresponde a coordenada de um vértice da figura, como de costume, primeiro o eixo X, depois o eixo Y. O retângulo foi desenhado dessa maneira:

noStroke();

fill(0, 156, 59); quad((width/2)-(m*10), (height/2)-(m*7), (width/2)+(m*10), (height/2)-(m*7), (width/2)+(m*10), (height/2)+(m*7), (width/2)-(m*10), (height/2)+(m*7));

Onde width e height são as palavras reservadas para largura e altura do canvas respectivamente, e m é o nosso módulo.

Antes do próximo parágrafo devo lembrar, como foi feito em outras publicações desse blog sobre geometria, que o canvas do Processing cresce no eixo Y para baixo, diferente do plano cartesiano, então fiquem atentos.

Partimos do princípio que a altura é (14*m) e a largura é (20*m) como descrito anteriormente, mas também temos em mente que as medidas partem do meio do canvas usando width/2 e height/2, logo o primeiro ponto começa do centro do canvas e é retirado metade da largura (10*m) e metade da altura (7*m), este é o vértice superior esquerdo, (width/2)-(m*10), (height/2)-(m*7). O próximo vértice desenhado é o superior direito, também partindo do centro, mas dessa vez adicionando a outra metade da largura e diminuindo a altura pela metade, temos (width/2)+(m*10), (height/2)-(m*7). Depois temos o inferior direito, somando tanto metade da largura quanto da altura, (width/2)+(m*10), (height/2)+(m*7). Finalizando com o quarto e último vértice do retângulo que subtrai metade da largura e aumenta metade da altura, (width/2)-(m*10), (height/2)+(m*7).

As funções noStroke() e fill() são para retirar bordar e preencher a figura com verde bandeira, respectivamente. noStroke() só será usado essa única vez, pois funciona para todas as figuras abaixo do comando.

Como vocês podem notar a sintaxe é extremamente confusa para este tipo de ocasião, mas devo citar que o procedimento quad() brilha na hora de montar quadriláteros irregulares, dando a possibilidade de posicionar cada vértice em qualquer pixel do canvas. Vocês ja devem ter se convencido, o rect() funciona mais didaticamente nesse tipo de desenho regular, e o rectMode(CENTER) pode facilmente posicionar o ponto central do retângulo no centro do canvas. Como ficaria:

rectMode(CENTER); rect(width/2, height/2, m*20, m*14);

Nos parâmetros de rect() temos, posição do centro da figura no eixo X, posição do centro no eixo Y, largura e altura do retângulo.

Finalmente podemos partir para o losango, e para esse usaremos beginShape(), endShape() e vertex(). Primeiro, como funciona: Os três comandos são realizados em conjunto afim de desenhar qualquer tipo de polígono, pontos ou linhas na tela, beginShape() como o nome sugere, inicia a sequência de vértices que serão desenhados pelo comando vertex(), e no fim temos o endShape() para sinalizar que aquela figura esta completa. Aqui está a codificação do losango para futuros apontamentos:

fill(255, 223, 0); beginShape(); vertex((width/2)-(m*8.3), height/2); vertex((width/2), height/2-(m*5.3)); vertex((width/2)+(m*8.3), height/2); vertex((width/2), height/2+(m*5.3)); endShape(CLOSE);

A sintaxe é muito diferente do procedimento quad() visto anteriormente, mas o princípio de desenhar vértices com pares de parâmetros é o mesmo, porém, com quantidade de vértices ilimitadas. No caso do losango, temos a especificação de que a distância de cada vértice as linhas do retângulo é de 1,7*m, mas partimos do centro do canvas, então temos que calcular a metade da largura e altura do losango a partir desse espaçamento, sendo assim, temos largura/2 = 10*m e altura/2= 7*m, tirando 1,7 de cada valor podemos começar a posicionar os pontos do losango.

O primeiro vértice parte do meio e fica 8,3*m a esquerda, ponto verticalmente central esquerdo, (width/2)-(m*8.3), height/2. O segundo, ponto horizontalmente central superior, retira-se 5.3*m da altura, que antes era central, (width/2), height/2-(m*5.3). O terceiro, ponto verticalmente central direito, (width/2)+(m*8.3), height/2, soma 8,3*m ao centro do canvas. E por fim temos o ponto horizontalmente central, somado 5,3*m a altura, (width/2), height/2+(m*5.3). Duas observações, o fill() com o rgb para amarelo bandeira, e o parâmetro CLOSE do endShape() para interligar todos os pontos da figura.

Sobre a construção da figura, ela também poderia ser montada com quad(), mas essa sintaxe demonstrada acima é mais didática e compreensível.

Agora podemos partir para o círculo, que será criado com ellipse(), normalmente eu usaria apenas este procedimento, pois a figura da ellipse() ja é posicionada através de seu centro, mas quis seguir as instruções presentes na constituição Brasileira, e para isso usei ellipseMode():

fill(0, 39, 118); ellipseMode(RADIUS); ellipse(width/2, height/2, 3.5*m, 3.5*m);

ellipseMode() tem muitos parâmetros possíveis como qualquer outro (Mode) para qualquer outra figura, o RADIUS é usado para definir o raio horizontal e vertical da elipse ao invés de sua largura e altura, sem mudar o posicionamento que continua sendo a partir do centro da figura. Logo, de longe essa é a construção mais fácil, primeiro par de parâmetro são os eixos X e Y respectivamente, posicionados no centro do canvas, e o segundo par são a largura e altura do raio do círculo, que devem ser 3,5 * a medida calculada no início. Caso não se use ellipseMode(RADIUS), basta mudar o tamanho da elipse de raio para o diâmetro, multiplicando a medida por 2, temos 7*m. Como última observação temos o fill() com o rgb equivalente ao azul bandeira.

GitHub: Bandeira do Brasil

A matemática ataca minha ansiedade.

- Jair

3 notes · View notes

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 5 - Atividade 4

Definição do Exercício:

Adicionar a visualização diretamente na janela do simulador de lançamento balístico (GitHub: Simulador de Lançamento Balístico), de todos os valores das variáveis envolvidas, incluindo as velocidades instantâneas horizontal e vertical, discutindo como as mesmas foram obtidas.

Simulador:

Como mostrado na imagem acima, o canvas da aplicação mostra apenas o espaço necessário para implementação do mundo de linhas e do movimento da bolinha. Então a primeira preocupação é montar espaço vazio para disponibilizar o texto de forma legível. Para isso aumentei meu canvas no eixo y em aproximadamente 100 pixels usando a função size() dentro do void setup().

A partir daqui o problema principal é saber lidar com a melhor função para o problema, no Processing, além do print() que mostra a mensagem no console, temos também o text(), que mostra a mensagem no canvas. Então entenderemos como a função funciona antes de continuarmos com a resolução.

A função text() do Processing pode receber 3 ou 5 parâmetros, nessa aplicação usaremos a versão mais simples:

text(Mensagem, Posição X, Posição Y);

Sintaxe de 3 parâmetros.

Mensagem: Texto a ser exibido, em formato String.

Posição X e Posição Y: Parâmetros de posicionamento do texto no canvas, são lidados como o pixel superior esquerdo do texto.

Também é importante citar que a função text() funciona como qualquer outra figura desenhada no canvas, logo, além das funções ja relacionadas a função text(), outras funções de manejo de figuras também podem ser usadas com ela. Aqui vai algumas das funções que podem ser usadas no text():

textSize(Tamanho);

Muda o peso da fonte.

textAlign(Alinhamento X);

textAlign(Alinhamento X, Alinhamento Y);

Muda o alinhamento do texto a partir das palavras selecionadas: LEFT, RIGHT, CENTER, BOTTOM e TOP..

fill(Red, Green, Blue);

Muda a cor da figura através do sistema RGB.

Dentre muitas outras citadas na documentação do Processing, que pode ser acessada por aqui: text();

A partir daqui já estamos aptos a exibir as informações na tela, no espaço livre que criamos, mas como as informações foram obtidas?

Primeiro temos as velocidades que se aplicam a bolinha no movimento oblíquo, que são as velocidades no eixo X e no eixo Y. A velocidade no eixo X é simples, por ser estática, ela é implementada diretamente pelo programador, então guarda-se numa variável e usa-se transforma-se o valor numa String depois para ser passada a função text(). Ja a velocidade no eixo Y sofre pela aceleração, ou seja, temos que saber como essa aceleração influencia a velocidade do movimento oblíquo, para isso usa-se a seguinte fórmula:

vy = v+a*t

Onde, vy é a velocidade atual, v é a velocidade inicial, a é aceleração e t é o tempo.

Com a transformação dos valores para String, a exibição das velocidades fica assim:

svx = "A velocidade da bola no eixo x é igual a: " + vx ; text(svx, 10, 615); svy = "A velocidade da bola no eixo y é igual a: " + (vy+a*t) ; text(svy, 10, 635);

Lembrando que svx e svy são Strings declaradas de forma global, e esse trecho de código é inserido dentro do void draw(){}, para ser constantemente atualizado.

Agora partindo para as distâncias da bola do ponto inicial, temos duas na aplicação que são usadas para definir o movimento oblíquo, a distância no eixo X e a distância no eixo Y. A distância no eixo X é calculada através de Movimento Retilíneo Uniforme (MRU),o cálculo já é executado na função MRU() da seguinte maneira:

float MRU(float v, float t) { float dx = v*t; return dx; }

Onde dx é a distância no eixo X, v é a velocidade constante e t é o tempo.

Para a distância no eixo Y temos que usar o Movimento Retilíneo Uniformemente Variado (MRUV), pois essa situação sofre interferência da gravidade, adicionando assim a aceleração a nossa continha, então temos outra função pra essa ocasião.

float MRUV(float v, float a, float t) { float dy = v*t+a*t*t/2.0; return dy; }

Onde dy é a distância no eixo Y, v é a velocidade inicial, t é o tempo e a é a aceleração.

Uma observação importante é que para desenho da ellipse(), a dy é subtraída do tamanho do canvas ou do mundo, pois o Y no canvas do Processing cresce para baixo. Mas na hora de mostrar a informação, é considerado apenas o valor de dy, ja que para o usuário, o ponto 0 do eixo Y é no chão do mundo e a variável cresce para cima.

Por último decidi adicionar a distância retilínea a a aplicação, ja que os outros tipos de distanciamento usados são incomuns, mas nada foi muito complicado, usei Teorema de Pitágoras. E a exibição das distâncias ficou assim, nas mesmas condições de exibição das velocidades:

sdx = "A distância em que o centro da bola se encontra no eixo x é igual a: " + dx ; text(sdx, 10, 655); sdy = "A distância em que o centro da bola se encontra no eixo y é igual a: " + dy ; text(sdy, 10, 675);. sdr = "A distância retilínea em que o centro da bola se encontra é igual a: " + (sqrt(sq(dx)+sq(dy))); text(sdr, 10, 695);

Exemplo visual:

GitHub: Simulador de Lançamento Balístico + Informações

A matemática ataca minha ansiedade.

- Jair

1 note · View note

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 4 - Atividade 3

Definição do Exercício:

Explicar as alterações necessárias no código (GitHub: Simulador MRU) para que o simulador possa considerar intervalos menores que um segundo, sendo executado a 60 fps e ainda mantendo o tempo real.

Simulador:

GitHub: Simulador MRU

Resolução:

Atualmente o código trabalha com o Sistema Internacional de Medidas (SI), logo o cálculo é realizado em metros por segundos. Outra observação importante a se fazer é que como a variável de tempo não tem intenção de lidar com momentos menores que 1 segundo, ela foi declarada como inteiro, sendo assim o primeiro passo a se fazer é declarar a variável relacionada ao tempo como float. A partir daqui você verá que todas as outras operações exibiram um error de TypeMismatch, pois a variável tempo é também usada para calcular a distância, implicando em outras variáveis, pois operações feitas com um número float também retornam número float. Meu conselho é trocar todas as declarações de variável para float, sem esquecer da declaração da função MRU e seus parâmetros, visando tratar futuros problemas.

Para completar a análise do programa em relação ao tempo, vemos que o tempo da aplicação é vinculado ao tempo real através da função frameRate() que foi setada em 1, fazendo a função draw() executar 1 vez por segundo, ja que o tempo era implementado também 1 segundo por execução do draw().

Então chegamos ao ponto interessante, tiramos a função frameRate() e por padrão o a função draw() passa a ser executada 60 vezes por segundo, mas perdemos o tempo real ja que a variável tempo só é implementada em 1. Logo, utilizasse da mesma proporção ao frameRate() e divide-se a implementação da variável tempo por 60. Outra maneira mais simples de se ver é que antes o programa executava o draw a cada 1 segundo, com a retirada da função frameRate(), ele passa a executar o draw() a 1/60 s, logo o tempo precisa ganhar também 1/60 s a cada execução do draw(). Ficando assim no final:

GitHub: Novo Simulador MRU

A matemática ataca minha ansiedade.

- Jair

1 note · View note

ansiedade-matematica-blog · 5 years

Text

MAM I - Aula 3 - Atividade 2

Definição do Exercício:

Apresentar o desenvolvimento de uma aplicação que, empregando laços, gere quadros com uma função que replica um bloco formado por um quadrado e três círculos coloridos. A aplicação deve receber a quantidade de blocos por linha e coluna por duas variáveis globais.

Segue um exemplo:

Farbstudie Quadrate, 1913, Wassily Kandinsky

Resolução:

Comecei meus pensamentos classificando quais situações do meu programa seriam estáticas e quais seriam variáveis. Cheguei a conclusão que o desenho individual de cada quadrado é sempre o mesmo, com três círculos menores dentro, já as situações que mudam são a posição dos quadrados tanto verticalmente quanto horizontalmente e as cores aleatórias. Então parti para criação de um procedimento que fosse capaz de desenhar um único quadrado e círculos com cores aleatórias como pedido na questão.

void bloco(int x, int y) { fill(random(256), random(256), random(256)); rect(x-25, y-25, 50, 50); fill(random(256), random(256), random(256)); ellipse(x, y, 50, 50); fill(random(256), random(256), random(256)); ellipse(x, y, 30, 30); fill(random(256), random(256), random(256)); ellipse(x, y, 10, 10); }

Comentários sobre o código:

A função fill() foi usada combinada a função random() para gerar valores RGB aleatórios para cada figura desenhada.

A ordem de escrita das figuras está da que deve ficar mais embaixo até o menor círculo que fica mais em cima, ou o quadrado cobriria todas as outras figuras.

O procedimento é void por não retornar nada, apenas desenhar no canvas.

O procedimento recebe dois parâmetros pois imaginei que teria que receber as duas posições centrais de desenho do bloco.

Decidi trabalhar com posições centrais para que as ellipses() fosse todas desenhadas na mesma posição, ja que o modo padrão da figura é central.

O rect() recebe as posições com redução de 25 pois o modo padrão da figura é superior esquerdo, meu quadrado tem 50 pixels de lado, logo, saio do centro e levo até o superior esquerdo tirando metade desse valor de altura e largura.

O próximo pensamento foi em como fazê-los em massa de acordo com o valor de duas variáveis globais e a resolução foram laços aninhados, teoricamente, um controla a quantidade de blocos na vertical e outro controla a quantidade de blocos na horizontal, não importando qual será executado primeiro, a aplicação pode desenhar primeiro as linhas ou primeiro as colunas. Trabalhei nos laços aninhados dentro do setup() junto as outras configurações de canvas e variáveis de posicionamento.

int h = (int)random(1, 21); int v = (int)random(1, 11);

void setup() { size(1001, 501);

int x, y; x = 25; y = 25;

for (int i=1; i<v*2; i+=2) for (int j=1; j<h*2; j+=2) { bloco(x*j, y*i); } }

Comentários sobre o código:

Os inteiros h e v são a quantidade de blocos na horizontal e na vertical respectivamente.

Os inteiros x e y são setados inicialmente como 25 pois é o centro inicial do primeiro bloco de 50 pixels.

Poderia ter criado outras variáveis para multiplicar as posições x e y, mas preferi guardar o espaço na memória e usar as variáveis de controle do laço, i e j, por isso o alcance do laço é dobrado, já que o incremento do controle ocorre de 2 em 2.

Juntando o procedimento de desenho e a chamada dentro do laço aninhado completamos a aplicação. Segue o exemplo de um dos testes:

Github: Blocos Coloridos.

A matemática ataca minha ansiedade.

- Jair

2 notes · View notes