tarefa 13 - aula 14

A revisão da prova foi enviada pelo SIGAA (turma de 18 às 20), porém vou adicionar o arquivo aqui também.

Gerador Automático de "Arte" (parte I)

As obras escolhidas para o trabalho são do Coletivo Muda. Conheci o trabalho deles após o Festival Concreto, em 2015, cuja obra encontra-se, até o momento, exposta na parede externa do Centro Cultural Dragão do Mar (de frente pro planetário). Sobre o coletivo, temos o seguinte 'sobre' disponível na página: "Formado pelos designers Bruna Vieira e João Tolentino, e pelos arquitetos Diego Uribbe, Duke Capellão e Rodrigo Kalache em 2010, o Coletivo MUDA vê a cidade como um laboratório de transformação. MUDA vem de mudança. Associada à arte de rua, as suas intervenções espaciais alteram de fato a natureza do Rio de Janeiro, onde espaços públicos por toda a cidade agora servem de palco para as suas mais variadas manifestações".

MODELO NATURAL

Os trabalhos com azulejos são uma intervenção no espaço urbano, módulos trabalhados e pensados especificamente para o espaço que serão instaladas (site specific), trazendo harmonia e surpresa. Os trabalhos são compostos de formas geométricas, combinando o material polido do azulejo com o desenho contemporâneo. Os trabalhos são externos e internos, com suportes diversificados. A seleção das obras foram feitas a partir das semelhanças entre os critérios: cores, formas, repetição e ângulos. As obras selecionadas foram retiradas do portfólio do coletivo: MUDA GG, Mini MUDA e MUDA SP COPA.

MODELO MATEMÁTICO

Formas, repetição, ângulos e orientação: Triângulos retângulos e quadrados são constantes nas três obras, mas a repetição possui algumas variações e especificações. A obra 1 encontra-se na horizontal, já as obras 2 e 3 estão na vertical. A orientação da construção varia com o suporte/localização escolhido pelos artistas, Cada obra passou pela contagem tanto da forma (triangulo superior direito, superior esquerdo, inferior direito, inferior esquerdo e quadrado preenchido) quanto da repetição das mesmas e das cores. Foram obtidas as seguintes tabelas relacionadas a quantidade total e o percentual (basta clicar nas imagens para expandir):

Cores: Os grupos de cores selecionados das três obras compreende a imagem abaixo.
A obra 1 possui combinações de verde com branco, azul com branco, cinca com branco, preenchimento de quadrado verde, azul e branco.
A obra 2 possui combinação de amarelo com cinza e verde com cinza, sendo o amarelo em menor quantidade.
A obra 3 possui 16 quadrados preenchidos nas cores amarelo, preto e laranja (nenhum branco), tendo em média 2 por coluna. Combinações: amarelo com branco e amarelo com cinza, cinza com branco, cinza com preto e cinza com laranja, preto com branco, preto com laranja e laranja com branco.

Para facilitar a percepção da construção das obras, foi esquematizado visualmente os azulejos contidos em cada uma das três obras, criando os módulos que serão criados. Também foi feita a simulação da composição de uma das obras no illustrator. Vale ressaltar que foi decidido ignorar as peças a mais que não se encontram no formato retangular vertical/horizonal das obras.

MODELO COMPUTACIONAL

O código foi comentado em arquivo para facilitar a visualização e entendimento, visto que ele ficou grande por conta das combinações. As obras, apesar de apresentarem características entre si (triângulos e ângulos), suas repetições e localização da cor são um tanto quanto distintas. Para resolver esse impasse, foi decidido que o gerador de arte iria formar "obras" a partir da escolha do usuário, modificando as variáveis. Temos o seguinte, então:

Para mostrar o código de cada obra, ficaria demasiadamente extenso. Foi trabalhado o conceito de 'chances'/porcentagem baseado nas obras originais. Apresento logo as funções já comentadas que são padrão para a geração em comum das três obras (basta clicar nas imagens para expandir).

SEMELHANÇAS E DIFERENÇAS

A obra 1 possui características distintas de aparição dos triângulos, ao contrário da obra 2, que apresenta mais 'faixas' diagonais formadas com os triângulos, a obra 3 tem quadrantes de onde saem tais faixas. Portanto, uma geração varia bastante das outras visto que não consegui implementar as chances de uma cor aparecer próxima a outra. Para o segundo momento do trabalho, acredito que consigo resolver esse probleminha. DE SEMELHANÇA, PORÉM, a quantidade e repetição de elementos está batendo perfeitamente!

Clique aqui para baixar o código. :)

tarefa 12 - aula 13

Desenvolver e explicar uma aplicação que apresenta um mapa isométrico com base em dois tiles à sua escolha.

Os tiles utilizados nessa tarefa foram retirados desse site. Primeiramente foi construída a base para os tiles utilizando o exercício anterior e a seleção dos que seriam utilizados para o exercício.

Em seguida adicionei as imagens a pasta, nomeei e adicionei os seis cases necessários. A linha de código da imagem ficou da seguinte maneira: (IMAGEM AQUI, 250 - i * 50 + j * 50, i * 25 + j * 25).

• 250 é a posição em x onde ficará o mapinha
• i * 50 + j * 50 é a largura;
• i * 25 + j * 25 é a altura (sendo metade do valor usado na largura.

Resultado final do mapa. Clique aqui para baixar o código. :)

tarefa 11 - aula 12

Reimplementar a máquina de estados finitos anterior, substituindo a variável keyPressed pela função keyPressed() e explicando suas diferenças de uso, vantagens e desvantagens.

A variável keyPressed é true, ou seja, trata-se de uma boleana, se uma tecla está pressionada e false se uma tecla não está pressionada. A variável deve ser usada no draw, o que indica que será chamada repetidamente a não ser que se especifique o keyPressed como false. O que tornou a movimentação do personagem não orgânica.

A função é chamada quando uma tecla específica é chamada. Em (keyCode==NÚMERO) é adicionado o número ASCII equivalente a barra de espaço e a tecla esquerda. Nas referências é possível encontrar a seguinte nota: because of how operating systems handle key repeats, holding down a key may cause multiple calls to keyPressed(). *Adicionei uma soma ao x da imagem para permitir a caminhadinha do mário* Clique aqui para baixar o código. :)

tarefa 10 - aula 11

Explicar como se pode detectar cliques do mouse
sobre um botão retangular com cantos arredondados.

O exercício foi chatinho de fazer, mas interessante. Primeiro foi desenhado o esboço de como o botão seria e analisado o passo a passo de sua construção. Dois retânculos sobrepostos (doisRect) e quatro círculos em suas extremidades (quatroBolas).

Dentro do draw foi criado um if contendo o mousePressed, onde incorpora dois outros ifs: 1º dos retângulos (deveria ter usado o distancia1D, mas estou tendo dificuldade para entender a aplicação) e a 2º das elipses. Ao clicar dentro da área das formas com o mouse, o botão fica preto. Um dos problemas que encontrei e não consegui resolver é o serrilhado que se encontra nas elipses. :( Clique aqui para baixar o código. :)

tarefa 9 - aula10

Explicar a técnica de detecção de colisão por bounding box, desenvolvendo uma versão simplificada do jogo Breakout que considere a colisão de toda a bola com o bastão e com dois ou mais obstáculos.

Esse exercício foi o mais chatinho de todos de ser feito. Muitos detalhes a serem adicionados pra criar o joguinho.. mas enfim, lá vai a tentativa de criar o bouding box. Foram criados os vetores boxX e boxY para as caixas, contendo 6 fileiras e 6 colunas, depois a matriz boleana para detectar o hits (ignora o boxCor). A detecção ocorre da mesma forma que a bolinha atinge a barra, são limitadas as laterais das caixinhas e verificado se foram atingidas ou não. se sim, é desfeito o "limite" e coloridas de preto, logo, a passagem da bolinha fica livre.

Foram criadas funções para manter o código organizado: movimentoBarra, movimentoBola e os hitBoxes.

Diferente da tarefa anterior feito em sala, foi excluído o aumento da velocidade da bolinha por motivos de: jogo difícil demais. Por fim, adicionado os println para indicar o toque da bola na barra e se saiu da tela. :) Clique aqui para baixar o código. :)