Matemática Aplicada à Multimídia

Então, finalmente estamos chegando ao fim e essa é a parte final do trabalho/projeto de MAMI. Fiz a releitura do jogo BERZERK - Atari 2600 e todas as outras informações eu explico melhor no vídeo.                                                  Link para o código Especificações Adicionais: Modelo Computacional - Como explicado no vídeo, o jogo foi feito em processing e divido em classes, para facilitar a programação. Em seguida, utilizei vetores para fazer as paredes e os inimigos serem tratados como objetos , para conseguir fazer a manutenção da colisão em cada um deles economizando linhas de código. Além disso, a colisão dos inimigos/jogador, disparo/inimigo e jogador/parede, foi feita através de laços(for) e condicionais(if~else) para verificar a posição de cada um deles, e se a posição X e Y fossem as mesma uma condição era ativada para afet...

Para fazer a revisão, fiz a posição X e Y do velocímetro baseado nos códigos de coordenadas polares. Utilizei a função mousePressed para quando for pressionado acrescenta valor a uma variável que aumenta constantemente a medida que o botão é pressionado. Se o botão for solto a variável é tornada negativa, fazendo com que o ponteiro decline e vai voltando para posição anterior. Para limitar o movimento do ponteiro, indiquei as demarcações como início e final do velocímetro. Além disso, utilizei a função map(), que me retornava um valor correspondente a saturação, assim eu tinha o controle das cores. E para modificar as cores dos detalhes, utilizei o ScanLine, onde acrescentava a saturação na função map(). E, para finalizar, fiz um gráfico de linhas que se move a medida que o mouse é pressionado, fazendo com que tenha interação direta com o velocímetro.                                     ...

Em sala foi desenvolvido uma aplicação para tirar pessoas das fotos. Isso foi feito através da média, moda e mediana. Porém, na média as fotos ficaram com "sombra" das pessoas, e na moda apareciam pixels pretos pois, a moda matematicamente é o número que mais se repete e como algumas fotos existem muitas variações, não teria esse número.  A solução para esse problema, foi no próprio código que desenvolvemos em sala, criar uma variável para fazer o teste de pixel. Se existir a moda, ou seja não houver uma variação grande, e o número de pixels for identificado, utiliza-se a moda. Do contrário utiliza-se a Mediana. Resolvendo assim o problema da aplicação de pixels pretos.                                          Link para o código/fotos

Nessa atividade devo dizer qual impacto a mudança de brilho e contraste traz em uma imagem. A partir disso, desenvolvi uma aplicação no processing que mede a média e o desvio padrão de uma imagem.                                              Link para o código Primeiramente abaixei o brilho da imagem e isso diminuiu o valor da Média e do Desvio Padrão. Em seguida, aumentei o brilho da imagem e, consequentemente, aumentou os valores da Média e do Desvio Padrão. Em seguida,mexi no contraste, e aumentando ou diminuindo, a Média e o Desvio Padrão aumentavam também diretamente. Confira nas imagens abaixo: Imagem Original Imagem com menos brilho Imagem com mais contraste Imagem original Imagem com mais brilho Imagem com menos contraste

Nessa tarefa, devo avaliar criticamente os aspectos visuais e interativos de um dos exemplos no site:  https://informationisbeautiful.net/ " The Drake Equation " é uma equação probabilística usado para estimar o número de civilizações extraterrestre ativas em nossa Via Láctea com as quais poderíamos ter chance de estabelecer algum tipo de comunicação. Foi formulada por Frank Drake a fim de estimular um diálogo sobre a procura de vida inteligente extraterrestre, porém a equação é controversa pois vários de seus fatores são desconhecidos, além da vasta gama de valores abrangidos. Em relação aos aspectos visuais e interativos da aplicação no site, foi muito bem feita e utilizada, pois conseguiu condensar várias informações de uma equação enorme (exemplo acima) em algo interativo, que o usuário consegue manipular e obter resultados de acordo com as variáveis estabelecidas.  Além disso, ele faz uso das cores secundárias para criação de sua paleta de cores, para ...

O Diagrama da Rosa de Florence Nightingale teve um efeito político tão poderoso, que mudou e salvou vidas. Sua criadora foi Florence Nightingale, a fundadora a enfermagem moderna, ela cuidou e tratou de soldados em condições desumanas, durante a guerra da Criméia. Ela era uma especialista em estatísticas, em 1857 ela criou o diagrama e reivindicou direitos, através de provas estatísticas com o diagrama para criar condições melhores e hospitais. Pois esse diagrama demonstrava que a maioria das mortes era decorrente de doenças infecciosas adquiridas nos hospitais e locais sem higiene onde eram tratados os feridos. (A cor vermelha representa a morte por ferimentos, o preto representa morte por outras causas, como queimaduras ou acidentes. e a incrível parte azul representa mortes por doenças infeciosas) Não é exagero dizer que o diagrama de rosa mudou completamente a atitude do governo britânico para assistência médica e como consequência os hospitais civis também mudaram, rece...

Com base na trigonometria, explicar a criação de uma aplicação que move um olho. Para começar, criei duas ellipse() para representar o globo ocular. Depois defini as posições X e Y no centro da tela, mas como a ellipse menor se movimentará, incrementei nesses parâmetros as coordenadas polares. Ou seja o uso da tan e atan , funções no processing, que faz com que eu consigo movimento. Assim, a íris vai se mover e alterar seus valores de X e Y a partir da posição do mouse. Além disso, para a ellipse maior não sair de dentro da menor, criei uma condição para limitar o raio de movimento. Veja o exemplo:                                                 Link para o código

Empregando coordenas polares, devo explicar o que foi o " Norway Spiral UFO " e implementar simplificado que represente o mesmo. Primeiramente devo apresentar o vídeo do acontecimento: Em relação a explicação do fenômeno, aconteceu em 2009 na Noruega, e algumas pessoas dizem ter visto um espiral de luz azul com rastro acinzentado. Após o acontecimento ser gravado, algumas instituições começaram a tentar explicar o acontecimento. A primeira hipótese era de que se tratava de um meteoro, mas logo foi descartada pois um meteoro não deixa um rastro em espiral e o tamanho não seria real a de um asteroide. Outra hipótese dizia que seria uma rara variação das luzes da aurora boreal. Além disso, algumas pessoas acharam que seria uma nave indicando vida extraterrestre. Porém nenhuma dessas foi ratificada, e a hipótese que se encaixou melhor foi que seria um lançamento de míssil de guerra que estava sendo testado naquela noite, e o espiral foi gerado por causa da vela do míssil que...

Nessa tarefa devo criar o movimento de um barco no mar, através da função senoidal para realizar a rotação do barco. Então, graficamente usei duas imagens para o barco e para o background(que no caso é o mar); E em relação a programação eu criei uma função para representar o movimento oscilatório de subida e descida do barco. Isto é, é criado um x e y que vai multiplicando e gerando a base de um movimento repetitivo e oscilatório , ou seja a função senoidal, onde atingem os valores máximos e mínimos , como num movimento ondulatório . Uso do translate e do rotate para gerar animação de movimento ondulatório para o barco                                                 Link para o código

Nessa tarefa, preciso explicar, através da teoria dos conjuntos , a transição de duas imagens a minha escolha de um dos efeitos do seguinte vídeo:     O efeito escolhido está no momento 7:18 do vídeo (transição vertical) Bom, para explicar essa transição de imagens com conjuntos, vamos dizer que existem duas imagens e uma será sobreposta sobre outra. Isto é, cada imagem é representada por um conjunto que será adicionado em outro conjunto.  A ⊂ B , imagem 1 representa o conjunto A que vai ser está contido no conjunto de imagem B. Ou seja, os pixels de uma imagem serão substituído pelos outros pixels da outra imagem e eles estarão no mesmo conjunto. Em dado momento, todos os pixels da imagem A vão estar contidos no conjunto B. Veja o exemplo:  A imagem(conjunto) A é sobreposta e contida dentro da imagem(conjunto) B                                       ...

Desta vez, a tarefa é para fazer 4 filtros no processing e aplicar em uma imagem a minha escolha. Os filtros são os seguintes: Ruído, Cinza, Vermelho e Amarelo (Sépia). A imagem da minha escolha foi do meu gato, chamado Lamorak. Apliquei os filtros em uma imagem que eu tenho dele. Primeiramente, eu abri a imagem através do loadImage e depois fui criando várias variáveis para armazenar os valores em RGB. Defini os tamanho que queria de cada parte e comecei com o filtro Ruído. É importante perceber que os filtros de imagens serão sendo feitos e criados sempre a partir do ultimo feito, ou seja, a edição do primeiro será usada na segunda, e a segunda, por sua vez no terceiro. Veja os exemplos: Ruído foi feito através de uma variável que recebe um valor de pixels e aleatoriamente, dentre aqueles valores, muda a cor daquele pixel. Foi feito através de um scanline que utiliza as posições x e y para fazer as alterações. Cinza foi feito através da fórmula  (0.3*r + 0.59...

História do Jogo: Berzerk é um jogo multi-direcional desenvolvido e l ançado em 1982  pela  Atari , pouco antes do Crash de 83 , evento em que o mercado de jogos ficou bastante enfraquecido, entretanto, Berzerk teve uma boa recepção.O título de ação e tiro muito popular, oriundo do fliperama . Nele, o jogador tem por objetivo atirar e destruir robôs que estão espalhados em diversas galerias compostas de paredes eletrificadas. O objetivo geral do jogo é bastante simples, sobreviver . Os Estados Unidos ,em 1983 , vivia uma época de recessão econômica , com alta inflação e uma taxa de desemprego muito alta, que afetou diversas áreas, inclusive a de jogos eletrônicos. O mercado de jogos começou a decair, com jogos custando muito mais baratos do que deveriam, pois lançaram muitos jogos e produziam mais do que compravam. Por outro lado, a ideia do jogo veio de Allan McNeil , que após sonhar que ele estava dentro de um videogame e lutava contra robôs, decidiu ...

Nessa tarefa, tenho que construir, discutir e implementar uma simulação interativa , de algum equipamento eletrônico empregando uma MEF com três ou mais estados. Nesse contexto, eu escolhi fazer uma simulação de um ventilador. Implementando a função  Mef() e  keyPressed() , minha simulação possui 4 estados ( DESLIGADO >> LIGADO >> GIRANDO <<>> PARADO ) nessa sequência que eu mostrei com as setas. O estado girando pode ir para o estado parado, assim como o parado pode voltar para o girando. O gráfico pode explicar isso melhor: Finalmente, mostrando no console, como funcionou a simulação feita no processing:                                                     Link do código aqui!

Iniciando mais uma tarefa, dessa vez preciso fazer um mapa isométrico (que é basicamente um mapa com uma aparência de perspectiva 3D) usando dois tiles à minha escolha. Ademais, eu gosto muito de praia então resolvi fazer meu mapa com esse tema. Para fazer o mapa isométrico precisamos trabalhar no processing como se fosse uma matriz, isto é, cada tile vai ocupar um lugar numa matriz. Os sprites dos tales eu baixei  aqui . Em seguida, precisei manipular os sprites para editar e medir, depois eu fiz um cálculo simples para saber quais partes estavam ocupando pixel e quais partes podiam ser sobrepostas. Enfim, o resultado foi esse:                                                                                                   ...

Dessa vez, tenho que explicar a diferença entre o uso da variável de sistema keyPressed e a função keyPressed() com base no desenvolvimento de uma versão do jogo Pong . Nesse contexto, keyPressed é uma variável do tipo booleana , isto é, ela é binária e só retorna dois valores(verdadeiro ou falso). Já a variável keyPressed() executa e lê um bloco de comandos que está dentro dela, ou seja, enquanto a tecla estiver pressionada ela irá chamar e executar aquele código.  Implementando isso em um código, além de colisão e movimento oscilatório para a bola, consegui construir a base do jogo Pong. Resultado final ficou assim:                                                      Link do código aqui!

Bom, na aula 08 , na tarefa 07 foi pedido que nós criarmos e explicarmos, com auxilio das funções dist() e map() , como a posição do mouse, numa janela com proporção 4:3, pode mover um círculo no interior de um retângulo com proporção 16:9 centralizado na tela. Com o auxilio da função map() , que ajuda a controlar o limite mínimo e o máximo através da largura e da altura. Utilizando o mouseX e mouseY para acompanhar o círculo que está dentro do retângulo 16:9. A função dist() funciona como controlador do alcance de distância que quando o círculo sai do retângulo ele desaparece.                                                       Link do código aqui!

Primeiramente, precisamos definir responsividade que é a capacidade de um site/página/marca da internet apresentar diferentes configurações e comportamento, adequando-se automaticamente ao formato do ecrã que está sendo exibida.  A maioria das marcas de hoje são responsivas e tendem a ter vários formatos dependendo da situação em que está inserida. Porém, para se ter essa dinâmica e automatização das marcas e páginas na internet, precisa ter um padrão. Esse padrão é desenvolvido e aprimorado pela programação , fazendo com que exista um algoritmo que identifique qual a melhor opção a se tomar para cada tipo de tela em que está sendo exibida. Além disso, torna o uso dessas marcas mais simples e efetivo, podendo ser usado e visto em todo mundo. Exemplos de marcas responsivas, que seguem o padrão e tornam suas logos em produtos adaptativos, que se ajustam em relação aonde estão sendo exibidas. Apesar de se tornarem menores, as marcas não perdem seu reconhecimento e po...

A quinta tarefa devíamos criar uma bandeira do Brasil, de acordo com a lei Federal N° 5.700 , no Processing e dizer como as funções rectMode e EllipseMode simplicam o processo. Bom, inicialmente peguei os dados da bandeira no  site do governo(lei N°5.700) , que diz as proporções a serem seguidas para criar a bandeira que são: Art. 5º A feitura da Bandeira Nacional obedecerá às seguintes regras ( Anexo  nº 2): I - Para cálculo das dimensões, tomar-se-á por base a largura desejada, dividindo-se esta em 14 (quatorze) partes iguais. Cada uma das partes será considerada uma medida ou módulo. II - O comprimento será de vinte módulos (20M). III - A distância dos vértices do losango amarelo ao quadro externo será de um módulo e sete décimos (1,7M). IV - O círculo azul no meio do losango amarelo terá o raio de três módulos e meio (3,5M). Depois disso, usei uma função para informar as proporções da bandeira, assim como a função rect() para construir o re...

O ângulo que possui maior alcance máximo em um lançamento oblíquo é 45º. Ou seja, esse ângulo terá maior abrangência em uma área num lançamento, o que faz com que ele seja mais relevante. E isso é o que vou demonstrar graficamente hoje. Com os códigos passados em sala, desenvolvemos um lançamento horizontal e vertical. Agregando os dois códigos e inserindo a biblioteca controlP5 no Processing , que faz com que nós tenhamos uma tabela interativa, consegui um código que comprova que o ângulo de 45° é realmente a opção que têm o maior alcance. Abaixo estão os exemplos que reafirmam que o ângulo de 45° tem maior alcance: Ângulo de 30º Ângulo de 45º Ângulo de 60º                                         Link para download do código aqui!

Nesta tarefa, tenho que simular um carrinho andando na tela a 10 m/s, só que o tempo de execução no processing tem que ser igual ao tempo de execução na vida real. Bom, para fazer isso nós vamos usar o MRU (Movimento Retilíneo Uniforme) que é caracterizado pela variação de espaços iguais em tempos iguais.  Na sala fizemos o início da tarefa(um carrinho andando 10 metros a cada um segundo, e sua distância aumentando em relação desses dois valores, que se da pela fórmula d=v*t) Porém o código estava com frameRate(1) , ou seja o programa estava sendo rodado 1 frame por segundo.  Mas a tarefa é fazer as alterações necessárias para deixar esse código em 60 fps, então transformei o frameRate(60) , o que tornou o carrinho muito rápido (pois o tempo no computador estava desregulado com o tempo real) Então, para resolver o problema da velocidade divide por 60 a fórmula d=v*t e fiz um if no draw() para dividir o resto da divisão do tempo por 60, com isso apenas um c...