Trabalho parte 2 - Super Adriano Lanches Shooter

Parte 2 do trabalho de MAM1 do semestre 2019.2.
O jogo escolhido havia sido Gradius, e a solução visual é uma homenagem à nossa lanchonete e aos Jogos B de Fast Foods. Espero que apreciem.

Link para a pasta contendo Executável e Projeto do jogo:
SALS

Trabalho parte 1 - Gradius LCD

Apresentação

O jogo que escolhi foi Gradius, pois tenho uma relação de amor e ódio com jogos do estilo shoot'em up e bullet hell. O jogo da empresa Konami foi lançado em 1989, em um período de auge de consoles como o NES da Nintendo e do nascimento de uma nova era de videogames portatéis, movida pelo Gameboy também da Nintendo. No nosso jogo, o jogador deve desviar de tiros de fogo e naves inimigas, atirar lasers e sobreviver a ondas crescentes desses inimigos. A seguir, vamos dissecá-lo em suas submecânicas para apresentá-las.

Submecânicas

Abaixo segue uma série de gifs apresentando visualmente todas as submecâniacas presentes no Gradius:

No GIF acima podemos observar diversas submecânicas:

• O jogador (nave a esquerda) se movimenta para cima e para baixo.
• As naves inimigas surgem a direita, se movendo para a esquerda.
• Pedaços de terra flutuantes (acima e abaixo) surgem nos cantos extremos direitos, se movendo para a esquerda e atirando bolas de fogo aleatoriamente no meio de seu movimento.
• O jogador pode atirar nos inimigos com lasers.
• Quando derrota um inimigo, ganha-se pontos

• 
  
  

Acima temos as três formas do jogador perder uma vida em uma partida:

• Ao ser acertado por um Tiro de Fogo.
• Ao colidir com uma Nave Inimiga.
• Quando uma Nave Inimiga passa da tela, o jogador perde Force (que seria como a vida dele) e ao atingir zero, ele perde.

Quanto a telas, o jogo possúi quatro:

 Uma tela vazia, o "desligado" do jogo.

 A Tela de Espera, onde o jogador é apresentado a quantidade de vidas e o modo de jogo (que não foi trabalhado pois foi recomendado seguir apenas um modo).

 A Tela de Jogo, onde o jogador interage com o ambiente.

A Tela de Game Over, após perder todas suas vidas. Pode recomeçar o jogo a partir daqui, voltando para a tela de Espera Inicial.

Além de tudo isso, o jogo possui dificuldade dinâmicas, com o passar do tempo na Tela de Jogo o movimento dos inimigos é acelerado gradualmente, também não possui fim, podendo ser jogado enquanto o jogador for capaz de sobreviver.

Modelo Natural

a. Jogador

• O Jogador pode estar em 5 posições: cima, meio-cima, meio, meio-baixo e baixo, sendo que as posições compostas a nave fica um pouco a frente das outras.
• O Jogador move a Nave apertando dois botões, um para cima e um para baixo.
• O Jogador pode atirar um laser em qualquer posição.
• O Jogador atira apertando um botão de tiro.

b. Naves Inimigas

• Pode aparecer em 5 posições, idênticas ao do jogador: cima, meio-cima, meio, meio-baixo e baixo.
• As Naves no meio-cima e meio-baixo começam um pouco antes no eixo horizontal.
• Elas se movem sempre para a esquerda, três vezes.
• Quando atingidas pelo laser do jogador, ela é destruída e perde uma vida.
• Se atingir o Jogador, ele é destruído.
• Se a nave atravessar a lateral esquerda, o Jogador perde um ponto de força e a nave desaparece.

c. Ilhas Voadoras

• Aparecem em duas posições, sempre no extremo superior direito ou extremo inferior direito.
• Se movem sempre para a esquerda, 4 vezes.
• Após se mover uma vez, a Ilha tem uma chance de atirar um Tiro de Fogo em direção a uma posição fixa, no eixo vertical da nave.
• Ao atingir a sua última posição, a Ilha desaparece no instante seguinte.

d. Tiro de Fogo

• Se move para cima quando atirado de baixo e para baixo quando atirado de cima.
• Se atingir o Jogador, ele perde uma vida.

e. Sistema

• Conforme o tempo de jogo passa, a velocidade de todos os inimigos aumenta.
• Cada inimigo destruído, a pontuação aumenta em 20.
• O jogador começa com três vidas, e ao perder todas ocorre o game over e a pontuação reseta.

Modelo Matemático

Desenhado na ferramenta gratuita https://vectr.com/, elipses pretas representam o Jogador, círculos dourados representam as Naves Inimigas, quadrados vermelhos representam as Ilhas Flutuantes, quadrados laranja representam os Tiros de Fogo e as linhas pretas representam os Lasers.

A imagem acima apresenta todas as possíveis posições para cada objeto de jogo, além de indicar a proporção de nossa tela, que nesse caso será de 20x16. Como desejei trabalhar com módulo para tornar possível a livre alteração do tamanho da tela, foi importantíssimo fazer essa estruturação. Uma observação, neste modelo utilizei valores que variam a partir do 0, então quando citar a posição 3 do modelo, será considera como a 4ª posição visualmente. Vamos então a cada objeto:

a. Jogador

• Este poderá se movimentar para cima e para baixo no eixo Y a partir da posição 3, de 2 em 2 módulos, até o limite que será a posição 11.
• Quanto ao eixo X, o Jogador se encontrará na posição 1, com exceção de quando estiver no meio-cima e no meio-baixo, onde estará uma posição a frente, na 2.
• O tamanho da nave será de 2 módulos de largura e 1 módulo de altura.

b. Nave Inimiga

• Este poderá iniciar em 5 posições diferentes no eixo Y, todas relativas as possíveis posições do Jogador, ou seja, 3, 5, 7, 9 e 11. Já no eixo X, a nave inicia na posição 12, com exceção do meio-cima e meio-baixo, onde fica na posição 14.
• A Nave se move apenas horizontalmente, sempre 4 módulos a esquerda.
• Após se mover 2 vezes, a Nave desaparecerá no terceiro movimento, resultando em algumas possibilidades.
• Após realizar seu último movimento, se a posição no eixo Y for igual a do Jogador, ele é destruído e perde uma vida.
• Se atingir nada, reduzirá o nível de Force do Jogador em um ponto.
• Se a Nave se encontrar na mesma posição em que um laser é atirado, ela será destrúida e retirada do jogo.
• Ao ser destruída, o Score do Jogador subirá em 20 pontos.

c. Laser

• É atirado ao apertar o botão de tiro, e sempre aparece na mesma linha onde o Jogador está.
• Ao ser atirado o Jogador não poderá se mover durante um curto espaço de tempo.
• É desenhado de forma quebrada mas seguindo uma lógica, será desenhado uma linha de 1 módulo de largura, 0.5 módulo abaixo da posição no eixo Y do Jogador e na posição 3 no eixo X. Uma segunda linha de 3 módulos de largura será desenhada na mesma posição Y mas na posição 5 em X. Outra linha de mesmo tamanho será desenhada na posição 9 e outra será desenhada na posição 13. Mas novamente temos a exceção do meio-cima e meio-baixo, onde todas as posições no eixo X devem ser movidas 2 módulos para a direita.
• O laser é calculado meticulosamente para não sobrepor nenhum objeto, como no jogo original.

d. Ilhas Flutuantes

• Estas começam sempre em duas posições, 17 no eixo X em cima ou embaixo, e na posição 0 ou 14 no eixo Y.
• Novas Ilhas aparecem sempre em locais alternados, uma embaixo, depois em cima, depois embaixo, e assim por diante.
• Se movem sempre para a esquerda, 4 módulos por vez. Após se moverem 4 vezes, elas desaparecem.
• Após se mover uma vez, na posição 13 do eixo X, há uma chance de um canhão preso nessa ilha atirar um Tiro de Fogo.

e. Tiro de Fogo

• Gerado inicialmente na posição 13 do eixo X, e na posição 2 do eixo Y quando atirado de cima ou na posição 12 quando atirado por baixo.
• Se move sempre para a esquerda, 3 módulos por vez, e se move 2 módulos para baixo se atirado de cima e 2 módulos para cima se atirado de baixo.
• Desapece após se mover 3 vezes.
• Se após o terceiro movimento o jogador se encontrar na posição 5 e uma bola de fogo vier por baixo, ou na posição 9 e uma bola de fogo vier por cima, o Jogador é destruído e perde uma vida.

f. Sistema

• Com o passar do tempo, o jogo vai ficando mais rápido, com todos os inimigos atualizando mais rapidamente.
• Se o Jogador zerar sua barra de Force, ele é destruído e perde uma vida.
• O jogador começa com 3 vidas, e ao perder as três, ele perde o jogo e seu Score é zerado.
• A quantidade de pontos de Force é mostrada em uma barra fragmentada no topo esquerdo da tela.
• O Score é mostrado na parte inferior esquerda da tela durante a tela de Jogo e a tela de Game Over, no mesmo local também é mostrada a quantidade de vidas, mas apenas durante a tela de Espera.

Modelo Computacional

Para produzir meu port, decidi utilizar a ferramenta Processing com os seguintes pontos a se refletir:

• É a ferramenta mais utilizada nas aulas de MAM1 e também será utilizada para realizar a prova.
• Apesar da facilidade de organização e produção de um projeto em ferramentas especializadas em produção de jogos, muitas destas são facilidade pré-programadas que de certa forma podem levar o desenvolvedor a relaxar e a depender da ferramenta, coisa que o Processing não permite.
• Muitas das funções de ferramentas de produção de jogos já vem pré-codificadas e boa parte da codificação acaba ficando por trás dos panos, deixando o desenvolvedor um pouco distante daquilo que ele está fazendo, utilizando o Processing boa parte das funções devem ser feitas a mão e o esforço de produção é maior e mais controlado.

Lendo isso parece estupidez minha escolher a ferramenta mais difícil, mas como o ambiente da universidade é um ambiente de aprendizado e, como programador, tenho noção de que a escolha de uma linguagem ou ferramenta depende daquilo que se deseja produzir. Como não havia a necessidade de produzir um projeto grande, o Processing me pareceu o suficiente para meu projeto. 

Todo o código está no link abaixo, e, apesar de estar completamente funcional, tem diversas coisas que adoraria ter tido mais tempo de organizar, além de ter desejado me utilizar mais de POO, porém ainda não tivemos aulas sobre o assunto e não tive tempo de estudar por fora. Contudo, o processo de produção desse trabalho foi muito divertido, apesar da quantidade massiva de tarefas que disputavam com meu tempo de produção do projeto ter me deixado fadigado muitas vezes.

Link para o código: Trabalho MAM1.

Tarefa 7 - Mapeamento de dados e bolinhas fantasmas

"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 um retângulo com proporção 16:9 centralizado na tela"

Algo que podemos acabar não percebendo, mas nossos mouses passam por um processo de mapeamento. Imagine uma apresentação onde a tela de exibição é do tamanho de uma de cinema, apesar do tamanho excessivo da tela, a quantidade de movimento do mouse se mantém a mesma, graças a esse mapeamento.

O processo de mapeamento é uma tarefa bem simples. Foi utilizado o ponto 0,0 da tela como ponto central de referência para tudo.

Para mover a bolinha, é necessário sabermos as distâncias horizontais e verticais do ponto central até o ponto do mouse. A própria posição X e Y do mouse serão usadas para definir essa distância.

Os limites da própria tela serão os limites da posição do nosso mouse. Assim:

• Distância X mínima = 0;
• Distância Y mínima = 0;
• Distância X máxima = Largura da Tela;
• Distância Y máxima = Altura da Tela.

As posições da bolinha são relativas a posição do ponto de criação do retângulo, como decidi deixar a caixa centralizada na tela, os pontos serão:

• Distância bola X mínima = Metade da Largura subtraído de metade da Largura da Caixa;
• Distância bola Y mínima = Metade da Altura subtraído de metade da Altura da Caixa;
• Distância bola X máxima = Metade da Largura somada de metade da Largura da Caixa;
• Distância bola Y máxima = Metade da Altura somada de metade da Altura da Caixa.

Agora já temos todos os valores necessários para nosso mapeamento.

Aqui temos todo o processo de mapeamento.

A distância atual do mouse até o ponto 0,0 foi colocada em proporção com as distância totais da Tela e as distâncias totais da Caixa. Assim garantimos o movimento controlado de nossa bola.

Código em Processing: Tarefa 7.

Tarefa 6 - Ao infinito e além do Yin Yang

"crie uma função recursiva que crie o efeito do yin yang infinito, dando atenção ao controle do limite, e discuta a implementação de um zoom para seu programa"

obs: Pedi para o professor Melo para que pudesse publicar minha tarefa do yin yang no lugar da tarefa de fibonacci, pois ela já estava quase completa no dia em que foi postada na pasta do drive.

Yin Yang, equilíbrio não apenas na imagem, mas na forma e na proporção. E uma das mais comuns tatuagens hoje em dia.

Para chegar ao resultado desejado, foi necessário um estudo do uso de funções recursivas, que ainda não havia sido estudada em Programação II. Mas a lógica do Yin Yang infinito independe do nosso conhecimento de programação. Vamos a ela.

O que há de comum na estrutura deste desenho aparentemente confuso? Apenas uma mente em pleno equilíbrio pode responder.

Temos acima um círculo que dentro de si contém dois círculos. Cada um desses círculos menores conterá outros dois círculos dentro de cada um deles. E cada um desses círculos menores ainda possuirão outros dois círculos em seu interior. É logo perceptível a presença de uma progressão definida na geração de nossa imagem:

1 -> 2 -> 4 -> 8 -> 16 -> infinito...

É possível então escolhermos a quantidade de círculos que desejamos desenhados na tela, em uma função que dentro dela: desenhará um círculo e em seguida chamará a si mesma para desenhar outros dois círculos menores em posições relativas ao seu centro atual.

A produção dos símbolos é um tanto quanto complexa, é necessário levar em consideração a variação de cor entre preto e branco e se o novo círculo ficará em cima ou em baixo. Talvez no futuro quando tiver estudado mais programação eu consiga "limpar" esse código e torná-lo mais curto.

O parâmetro control é importantíssimo para controlarmos a parada da produção de nossos círculos. Sem ele nossa função se tornará infinita e o processing entrará em pane. Introduzimos na chamada da função a quantidade de camadas que desejamos que nosso yin yang tenha pelo control.

Para gerar um efeito de zoom, foi necessário apenas aumentar geometricamente o valor do diâmetro. É importante frisar a importância desse aumento ser geométrico, pois se for feito por progressão aritmética, a velocidade do zoom diminuirá a cada segundo, pois o aumento não será proporcional a redução de tamanho que os círculos seguem, pois eles seguem uma P.G. de razão fracionária.

Um aumento de apenas 1% parece pouca coisa, mas é importante lembrar que o processing roda a 60 FPS, então esse aumento seria superior a 60% por segundo (aproximadamente 80%).

Essa talvez tenha sido a tarefa mais divertida até agora, o uso de recursividade pode ser um tanto desafiador e estressante, mas os resultados aplicados a computação gráfica são belíssimos.

Código em Processing: Tarefa 6.

Tarefa 5 - Ouviram do Ipiranga ás aulas práticas

"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"

Olhando assim nem parece que utiliza décimos de módulo para ser desenhada. Nessa tarefa, vamos focar no quadrado, no losango e no círculo da bandeira, como pedido.

Analisando a referência do processing sobre as funções rectMode() e ellipseMode() é possível perceber uma similaridade entre as duas, são ambas usadas para redefinir o modo como os parâmetros das funções rect() e ellipse() devem ser interpretados.

Para esse trabalho, decidi utilizar o rectMode(CENTER), que faz com que o ponto (x,y) inicial do quadrado seja calculado a partir do centro dele. O ponto x e o ponto y estarão, respectivamente, no x central menos metade da largura e no y central menos metade da altura, como mostra na figura abaixo.

Para o círculo, utilizei o ellipseMode(RADIUS), que modifica os parâmetros de altura e largura da ellipse para meia largura e meia altura, como se mudasse de diâmetro para raio. Fiz isso para adaptar a lei 5700, que apresenta as proporções do círculo pelo raio.

Como dito acima, a lei indica que o círculo azul terá raio de três módulos e meio, então achei importante alterar o modo como a função funciona.

Para a produção do losango, há duas opções. Uma utilizando a função quad() e outra utilizando as funções beginShape(), endShape e vertex(). Ambas as opções precisarão das mesmas coisas, a posição de cada vértice do losango na tela. Porém, há uma diferença importante entre as duas.

Enquanto o quad() recebe como parâmetros os quatro pontos do losango e fecha a figura, beginShape()/endShape() precisaria de cinco pontos para formar uma figura fechada. Esse quinto ponto seria o próprio ponto inicial da figura, que servirá também como ponto final e de fechamento. Essa segunda forma de desenhar o losango possui uma imensa liberdade de uso e com ela podemos desenhar formas bastante peculiares, mas que não vem ao caso de nossa tarefa. Fechar a figura será apenas necessário quando formos fazer uso de contornos.

Nossa bandeira é mais complexa de se produzir e calcular do que as bandeiras do Japão e da Suíça, e talvez por isso para muitos ela seja um símbolo de beleza tão profunda.

Após isso é apenas uma questão de codificar, tendo sempre o modelo acima como referência na hora de criar nossas funções.

Código em Processing: Tarefa 5.

Tarefa 4 - Um arremesso e tanto

"adicionar a visualização, diretamente na janela do 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"

Worms, jogo com alguns dos mais incríveis feitos balísticos da humanidade, também nos mostram o potencial auto-destrutivo de qualquer pequena falha em um cálculo.

Adicionar uma visualização das variáveis a janela foi uma tarefa simples, precisei apenas utilizar um retângulo como fundo para que as linhas não atrapalhassem a leitura e garantir que o tamanho da variável escrita não ultrapasse uma casa decimal.

Aqui nossa bolinha está com aceleração tanto horizontal quanto vertical. Ela inicia com velocidade horizontal positiva e vertical negativa, mas aos poucos esses sentidos irão inverter, devido a aceleração. Por fim, a bolinha sumiria a esquerda.

A velocidade atual é algo fácil de se obter. Segundo a clássica fórmula física v = v₀ + a.t, teremos que a velocidade atual é calculada em função da velocidade inicial, da aceleração e do tempo. Temos essas três variáveis em nosso programa, então:

É necessário calcular a aceleração de cada direção separadamente, pois não estamos trabalhando com velocidade vetorial e bidimensional, mas com uma composição desta unidimensionalmente.

Assim, temos nossa visualização de variáveis e nossas velocidades atuais!

Código em Processing: Tarefa 4

Tarefa 3 - Um minuto para o fim do mundo, uma cadeira inteira em sessenta segundos.

"explicar as alterações necessárias no código para

que o simulador possa considerar intervalos

menores que um segundo, sendo executado a

60 fps e ainda mantendo o tempo real"

Uma simples animação do Sonic, assim como toda animação, possui uma quantidade específica de quadros por segundo (FPS). O número de FPS define a fluidez da animação. A primeira possui FPS inferior a segunda, parecendo mais endurecida. Para uma melhor visualização desse efeito, assista esse vídeo: Diferencia FPS Frames por Segundo.

A solução do problema é bem simples, e requer apenas três passos.

Primeira alteração que deve ser feita é nas variáveis globais. Teremos que utilizar variáveis do tipo float, por conta da segunda alteração que faremos no código.

Por termos trocado o número de ciclos por segundo do Processing de 1 ciclo/segundo (1 fps) para 60 ciclos/segundo (60 fps), não poderemos utilizar o comando tAtual++, pois, a cada ciclo, ele adicionaria 1 ao valor atual do tempo da simulação. Dessa forma, teríamos a seguinte relação: 1 Segundo Real -> 60 tAtual. Para solucionar isso, o comando deverá ser alterado para tAtual = tAtual + (1.0/60.0). Agora, a cada ciclo, o tempo atual de simulação é acrescido em 1/60, resultando em: 1 Segundo Real -> 1 tAtual.

Também precisaremos alterar os tipos dos parâmetros de nossas funções de int para float, para trabalharmos sempre com valores decimais.

Uma solução mais geral seria utilizar a variável frameRate, interna ao próprio Processing, no lugar do 60 em (1.0/60.0), pois garantiríamos um acréscimo de tempo em função de qualquer framerate utilizado.

Essa tarefa ficou mais curta mas pelo enunciado ser mais simples e direto.

Código em Processing: Tarefa 3

Tarefa 2 - Kandinsky, Estudo de Cores e Discos de Vinil

"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"

Farbstudie Quadrate, 1913 by Wassily Kandinsky

Temos acima o modelo natural de um quadro de Kandinsky, pintado com a intenção de fazer um estudo de harmonia de cores. Vamos tentar produzir uma cópia deste quadro utilizando Processing!

O modo de receber os valores das variáveis é diretamente pelo código, mas em Processing com Python, poderia receber, de maneira simples, entradas pelo teclado.

Como foi pedido, a quantidade de linhas e colunas são recebidas como variáveis globais (linha, coluna). Também adicionei a opção de receber o tamanho do lado de cada quadrado (lado) e a quantidade de círculos dentro de cada quadro (circ). Dentro do setup é definido o tamanho da janela, para logo em seguida termos nosso primeiro procedimento, pintaTela().

Decidi produzir um código bastante modularizado. Este procedimento chama uma função, que também chamará outras duas funções, como veremos a frente.

pintaTela() será nosso procedimento destinado a controlar o que será desenhado na tela. Fiz uso de dois for aninhados, que são responsáveis por indicar a posição de cada quadro em uma espécie de matriz, como mostrado no desenho abaixo, e indicar onde eles devem ser pintados, usando pintaQuadro(). O centro de cada quadro será na metade do lado de cada um deles.

Matriz de quadros, j controla a entrada em colunas e i controla a entrada em linhas.

Como falado anteriormente, a função pinta quadros chama outras duas funções, sendo estas responsáveis pela AÇÃO da pintura em tela realmente.

Este procedimento recebe como parâmetros o ponto central do quadro, que será usado na geração de um quadrado, com pintaQuadrado, e na geração de círculos, com pintaCirculo. A variável diametro é usada para definir o tamanho do círculo, onde o diâmetro do primeiro é sempre igual ao lado do quadrado do quadro, com os círculos seguinte sendo sempre menores que o anteriores, se utilizando de um valor gerado aleatoriamente, em função do lado e do número de círculos, para reduzir seu tamanho. 

Esse procedimento pode até parecer inútil, mas a modularização do código tem a vantagem de tornar sua compreensão e sua leitura mais fáceis, além de garantir um reuso do nosso código.

Aqui não há mistério, a cor interna do quadrado e do círculo são geradas aleatoriamente, o tamanho do quadrado está em função da variável lado e o do círculo da variável diametro, passada anteriormente como parâmetro e usada como D no procedimento.


Abaixo temos dois resultados com dois conjuntos de entradas diferentes.

Variáveis Globais: coluna = 5; linha = 3; circ = 3; lado = 100. Tamanho da tela é (800,800).

O primeiro resultado foi baseado no que foi pedido pelos professores. É possível notar a grande variação de tamanho dos círculos e a alta variedade de cores. Um olho bem treinado conseguiria facilmente perceber relações complementares e até tríades em meio a esses quadros.

Variáveis Globais: linha e coluna = 1; circ = 1000; lado = 800. Tamanho da tela é (800,800).

Me apaixonei profundamente por esse resultado pela aparência parecida com a de um vinil. A grande quantidade de círculos acabou gerando esse resultado. 


Espero que tenha sido uma leitura e um aprendizado agradável, abaixo segue o link para download do código fonte.
Código em Processing: Tarefa 2

Tarefa 1 - Ilusões Ópticas e o Cão Despedaçado

"Você foi contratado para criar um app que
realize digitalmente o efeito mostrado no primeiro experimento de https://youtu.be/M07JRzkgaR8.Porém, antes de ficar milionário, empregando textos e imagens, estabeleça o modelo matemático necessário."

Logo logo este pobre animal estará em pedaços.

A mente humana é algo realmente impressionante. Somos capazes de completar informações quando pedaços estão faltando e somos capazes de compreender um símbolo ou imagem mesmo quando ela está incompleta. Isso é devido ao nosso cérebro ser capaz de processar imagens como um todo, e não pedaço a pedaço. Para mais informações sobre o assunto, visite esta página do Hypescience: https://hypescience.com/como-sue-cerbero-pedo-lre-itso/

---------------------------------------------------------------------------------------------------------------------------------------

Qualquer imagem pode ser usada, mas a forma do papel deve ser sempre a mesma, ter quatro lados e ser retangular.

Trabalharemos apenas com folhas retangulares de quatro lados, como a foto do cachorro do vídeo. A imagem deverá ser  cortada manualmente ou com o uso de um aparelho, para ser reconstruída a partir de dois conjuntos ordenados, sendo o primeiro formado pelos pedaços ímpares e o segundo conterá os pedaços pares, 

Além dessa sequência de passos é importante frisar as seguintes regras: X e Y deverão ser pares, pois caso os valores sejam ímpares, não será possível reconstruir a imagem como uma figura de quatro lados. Os conjuntos serão formados partindo da esquerda para a direita. A primeira reconstrução será feita colocando cada conjunto lado a lado. A segunda será feita conectando a base do primeiro conjunto com o topo do segundo.

Tendo esses passos e essas regras em mente, podemos também representar o modelo matemático dessa seguinte forma: (Variáveis estarão representadas na cor vermelha)

1. Objeto Imagem (C por A): forma Retangular. Comprimento C e Altura A, onde C >= A;
2. Imagem (horizontal) >> Cortador;
3. Imagem = partes {1, 2, ..., X), onde X ∈ Z*+ pares;
4. Nova Imagem (C por A) = partes ímpares {1, ..., X-1} CONECTADA(lateral) partes pares {2, ..., X};
5. Nova Imagem (vertical) >> Cortador;
6. Nova Imagem = partes {1, 2, ..., Y), onde Y ∈ Z*+ pares;
7. Imagem Final(2xC por A/2) = partes ímpares {1, ..., Y-1} CONECTADA(base) partes pares {2, ..., Y};

Abaixo temos uma representação visual, produzido no Illustrator, do modelo matemático geométrico.

É possível realizar esse experimento com imagens de qualquer tamanho e cortadores de qualquer tamanho também, basta seguir os passos e as regras e o resultado final será exatamente o esperado. Espero que tenha gostado desse truque de ilusão e até a próxima tarefa!