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!