exerciciosmateuslima

[exerciciosmateuslima]

Trabalho Parte II

https://youtu.be/mnAPLO6F5z0

[exerciciosmateuslima]

Exercício 15 - Discutir, através de exemplos, como a teoria dos conjuntos é aplicada ao desenvolvimento de aplicações multimídias.

“Um conjunto é qualquer coleção, dentro de um todo de objetos definidos e distinguíveis, chamados elementos, de nossa intuição ou pensamento” - Georg Cantor.

No photoshop é possível perceber vários exemplos da teoria de conjuntos, por exemplo, os vários tipos de ferramentas de seleção existentes que selecionam um conjunto de pixels. Ainda no photshop existe a ferramenta carimbo que copia um conjunto de pixels para outra posição.

[exerciciosmateuslima]

Exercício 14 - Criar uma aplicação que simula o funcionamento de um knob, realizando o efeito dissolve entre duas imagens de acordo com a posição vertical do mouse.

Utilizei como base o exercício de FadeOut feito em classe:

Criei duas variáveis do tipo PImage, criei a varíável do tipo float a2 para a segunda imagem e crie mais três variáveis para receber os valores r, g e b da segunda imagem.

Após isso pré-carreguei as imagens no processing:

Como a=1 a posição Y do mouse será o valor proporção em relação a altura da imagem e a2 vai ser igual 1 que se refere a opacidade total subtraído do valor de a. Essa estrutura é a responsável pela “troca” de imagens dependendo da posição do mouse.

Por último, isolei os canais RBG das duas imagens e no fim uni os dois valores.

O resultado final é esse:

[exerciciosmateuslima]

Exercício 13 - Discutir como ajustar o contraste de uma imagem de acordo com o valor de uma variável específica.

   O contraste de uma imagem refere-se à diferença entre a região clara e escura. No processing, para alterar o contraste de uma imagem, utilizando como base o programa feito em sala onde se separa os canais RGB de uma imagem em variáveis diferentes.

A mudança que fiz foi criar uma nova variável do tipo float e multipliquei os valores das variáveis r, g, e b por essa nova variável.

Quando con=1 a imagem fica normal.

Quando con>1 o contraste aumenta.

Quando con<1 o contraste diminui.

[exerciciosmateuslima]

Exercício 12 - Discutir a criação de um mapa a partir de um tileset isométrico.

   Tileset isométrico é aquele onde seus tiles foram desenhados sobre um plano ortogonal em relação aos eixos X, Y e Z. Isso faz com que o tile pareça ter profundidade, o que dá uma impressão 3D no desenho, mesmo ele tendo sido criado em um plano 2D.

   Para criar um mapa isométrico no processing, primeiro criei duas variáveis do tipo PImage que recebe imagens como valores.

   Após isso criei uma matriz de nome mapa composta por 1 linha e 2 colunas, preenchida com os números 0 e 1.

   Inicialmente não atribui valores(imagens) para as variáveis imgSolo e imgArvore, para atribuir a elas as imagens que serão utilizadas utilizei a estrutura loadImage().

   Para criar o mapa completo, criei duas estruturas for() que irão percorrer a matriz mapa[][], quando o valor percorrido for igual a 0 a variável imgSolo será carregada e quando o valor for 1 a variável imgArvore será carregada. Cada tile possuirá uma posição X e uma posição Y específica.

      Para posicionar os tiles usei a estrutura image(), dentro dela especifiquei que imagem seria mostrada na tela(quando 0 mostra imgSolo, quando 1 mostra imgArvore) e as posições X e Y de cada tile.

   Para que os tiles se posicionem de maneira correta é necessário sobrepor algumas partes. Por exemplo:

   Depois de centralizar o tile 01 na tela, para que o tile 02 ficasse alinhado com o outro tile peguei o valor da posição X que está a 53pxls do canto esquerdo da tela e dividi pela metade do tile 01 ou seja, movi o tile 02 por 26,5pxls.

   O resultado final foi esse:

[exerciciosmateuslima]

Trabalho - Parte 01

   Como obra de referência, escolhi a Geometric Modern House localizada em Atenas, projetada pelo 314 Architecture Studio.

   De início vetorizei a estrutura da casa no Illustrator e tirei as medidas do vetor em cm:

   Para a replicação utilizei a barra vertical da esquerda como base para cálculos, fazendo uso de escala defini que 2,5cm na imagem vetorizada corresponde a 100px no processing.

Criando a primeira barra:

   Para definir a altura usei a escala que defini, a barra possui 2,5cm de altura na imagem vetorizada que irá corresponder no processing a 100px, a largura da barra mede 0,2cm para achar o valor em pixels utilizei proporção onde se 2,5cm correspondem a 100px, 0,2cm vai corresponder a 8px.

Segunda barra:

   Ela possui uma largura de 3,0cm que corresponde a 120px e sua altura tem o mesmo valor da largura da primeira barra que mede 8px.

Terceira barra:

   Para definir sua posição X na tela, subtrai do valor da posição X da primeira barra que é igual a 300px o valor de 4px que é correspondente a 0,1 cm que é a distância do começo da barra 1 para a barra 3. Para sua posição Y fiz a mesma coisa porém somei ao valor de Y da primeira barra o valor de sua altura(100px).

   Sua largura mede 9,5cm que corresponde a 380px e sua altura mede 0,3cm que é igual a 12px.

Quarta barra:

   Sua altura é de 2cm que vai ser igual a 80px e sua largura possui 0,4cm que corresponde a 16px.

   Sua posição X vai ser igual a posição X da primeira barra(300px) somado com a largura da mesma barra(8px) somado a distância entre as duas barras que possui 4,0cm e corresponde a 160 então: 300+8+160=468. Sua posição Y será definida pela subtração entre a posição Y da barra 3(400px) e o valor de sua altura, então: 400-80=320px.

Quinta barra:

   Sua altura e largura possuem as mesmas medidas da altura e largura da barra 4(16px,80px). Além disso sua posição Y também possui o mesmo valor(320px).

   Sua posição X vai ser igual a soma entre a posição X da barra 4(468px), a largura da mesma(16px) e a distância entre as duas barras que corresponde a 1,5cm(60px), então:468+16+60=544.

Sexta barra:

   O valor de sua posição X é a soma da posição X da barra 2(300px) com a largura da barra 2(120px) e a distância entre elas que é de 0,2cm(8px): 300+120+8=128. Sua posição Y vai ser a subtração entre a posição Y da barra 3(400), a altura das barras 4 e 5(80) e a largura da barra atual que mede 0,3 que corresponde a 12px: 400-80-12=308.

   Possui altura de 0,3cm(12px) e de largura possui 4,0cm(160px).

Sétima barra:

   Sua posição X possui o mesmo valor da barra de número 6(428px) e sua posição Y é o valor da soma entre a posição Y e a largura da barra 6(308px+12px) subtraindo o valor da distância entre as barras que é de 2,0cm(80px):320-80=240.

   Possui o mesmo valor da altura da barra 6(12px) e sua largura possui 170px( para poder criar a barra diagonal aumentei a largura da barra 6 em 10px).

Oitava barra:

   Para formar essa barra diagonal como primeiro parâmetro X a posição inicial da barra 7 somada a sua largura(428px+70px=498px) e como Y a mesma posição da barra 7(240px). No segundo parâmetro X somei o valor de X do primeiro parâmetro com 10px e como Y o mesmo valor do primeiro parâmetro(240px). Como terceiro parâmetro X somei a posição X da barra 6 com sua largura(428px+160px=588px) e como Y somei a posição Y da barra 6 com sua altura(308px+12px=320px). Por último como quarto parâmetro na posição X subtrai 10px do valor da posição X do terceiro parâmetro e como posição Y utilizei o valor da posição Y da barra 6(308px).

Conjunto de pequenas barras:

   Para criar essas cinco barras seguidas crie uma estrutura for onde a posição X de todas serão igual a posição X das barras 6 e 7(428px) somada a 10px e para a posição Y a primeira barra começa na posição 256px(soma da posição Y da barra 7 com sua largura e 4px) e vai até a posição Y da barra de número 2 onde a cada 10px uma barra de 8px de largura e 4px de altura será criada.

Preenchimento interno:

   Para formar o preenchimento, como primeiro parâmetro X somei a posição X da sequência de pequenas barras com 10px(438px+10px=448) e como Y subtrai da posição Y da barra 6 o valor de 4px(308px-4px=256px). No segundo parâmetro X atribui o valor de 575px Y o mesmo valor do primeiro parâmetro(304px). Como terceiro parâmetro X atribui o valor de 589px e como Y utilizei o valor da posição Y da primeira barra da sequência de cinco barras(256px). Por último como quarto parâmetro na posição X utilizei o mesmo valor da posição X do primeiro parâmetro e como Y utilizei o mesmo valor da posição Y do terceiro parâmetro.

   Para modularizar a parte de construção fiz as seguintes alterações:

   Criei um procedimento chamado módulo que recebe como parâmetro as variáveis x(referente a posição X), y(referente a posição Y) e m(referente a altura e largura). O que fiz basicamente foi substituir os valores predefinidos pela divisão deles pelo número 100.

   Após isso dupliquei a parte interna do procedimento módulo e fiz com que uma segunda estrutura da casa fosse criada, porém invertida.

  A estrutura rotate() é a responsável por inverter a imagem.

   Após modularizar a construção, chamei o procedimento no draw(). Utilizei duas estruturas for’s, o primeiro for é responsável por desenhar colunas com os módulos criados a cada 100px percorridos e vai até a posição do valor da largura da tela e o segundo for desenha linhas com os módulos a cada 40px percorridos e vai até a posição do valor da altura da tela.

Ao se alterar o valor da referente ao parâmetro m no procedimento modulo se consegue diferentes padronagens. Resultados finais:

m=10;

m=20;

m=30;

m=40;

m=50;

https://www.dropbox.com/s/9etovh3vevgd70h/TrabalhoFinalMateusLima.pde?dl=0

[exerciciosmateuslima]

Exercício 11 - Considerando o exemplo visto em aula, discutir como a transformação em procedimento/função pode simplificar a programação.

   Modularizar partes de código utilizando procedimentos e funções facilita a detecção de erros, é mais fácil testar módulos separadamente do que o código completo, evita a duplicação de código quando é necessário repetir uma mesma operação mais de uma vez, a manutenção do código se torna mais fácil, permite também o desenvolvimento separado de cada módulo e permite a reutilização do código.

[exerciciosmateuslima]

Exercício 10 - Considerando também a movimentação vertical, criar uma versão simplificada do jogo Pong, com um único ponto disputado.

Primeiro declarei variáveis para as posições X e Y da bola, o deslocamento da bola e posições Y dos dois paddles:

Para movimentar os paddles na vertical utilizei a seguinte função:

Criei um função booleana onde se a bola tocar o paddle a função retorna true:

Parte responsável por criar a bola e os paddles na tela:

Para que a bola ao colidir com a parte superior e inferior da tela utilizei a mesma estrutura if da atividade 09 porém sem o aumento de 1% a cada colisão.

Removi as colisões nos cantos laterais da tela e quando a bola atravessa uma das extremidades um dos jogadores é declarado campeão.

Fiz duas estruturas if’s onde quando a função colisãoPaddle - utilizando como parâmetros as extremidades direita e esquerda da bola e as extremidades iniciais e finais no eixo X dos dois paddles - for verdadeira e a posição da bola no eixo Y estiver entre o topo e a base do paddle a bola irá colidir com um paddle e se movimentará no sentido contrário.

O resultado final é esse:

[exerciciosmateuslima]

Exercício 9 - Aumentar a velocidade da bola em 1% a cada colisão e relacionar com o modelo de MRUV anteriormente trabalhado, discutindo a diferença de abordagem na solução.

O código é praticamente o mesmo da atividade feita em sala, a única diferença é que toda vez que a bola colidir em uma das extremidades da tela seu deslocamento será somado com 1% do valor do deslocamento atual.

O código completo:

Assim como no código do movimento de MRUV a bola vai possuir uma velocidade de deslocamento tanto na horizontal como na vertical.

[exerciciosmateuslima]

Exercício 8 - Criar e discutir uma aplicação que muda individualmente a cor do preenchimento de dois círculos, com raios e centros randômicos, sempre que o cursor do mouse passar sobre os mesmos.

   Primeiramente criei variáveis que recebem valores randômicos para as posições X e Y dos dois círculos e seus diâmetros.

   Para desenhar os círculos na tela e fazê-los mudar sua cor preenchimento quando o mouse estiver sobre eles utilizei a seguinte estrutura:

   O que faz com que o preenchimento mude de cor são as estruturas if’s que utilizei onde um círculo mudará sua cor com quando as posições X e Y do mouse estiverem entre as posições centrais X e Y do círculos menos o diâmetro/2 e as posições centrais mais o diâmetro/2 ((mouseX>=x-diametro/2 && mouseX<=x+diametro/2) && (mouseY>=y-diametro/2 && mouseY<=y+diametro/2)).

O resultado final é esse:

[exerciciosmateuslima]

Exercício 7 - Fazer o “A” da Braun continuamente aumentar e diminuir de tamanho no centro da tela.

Para construir o A utilizei por base a seguinte foto apresentada no slide da aula:

Na construção da perna esquerda do A utilizei a estrutura: 

Após a criação da perna esquerda, criei a parte central superior da letra e a parte que fica entre as pernas da letra utilizando a estrutura:

Criei a perna direita utilizando a mesma estrutura usada na perna esquerda modificando apenas sua posição no eixo “x”:

Para “fechar” a letra criei dois arcos em forma de torta:

Para arredondar a parte interior superior da letra, primeiramente fiz dois quadrados utilizando como medida 1/4 do lado de 1 módulo:

Após isso fiz duas elipses na cor do fundo para arredondar:

Por último para que o A ficasse mudando constantemente de tamanho e permanecesse sempre no centro da tela fiz o seguinte:

Resultado Final:

[exerciciosmateuslima]

Exercício 6 - Considerando a Lei Federal Nº 5.700, criar uma função mostraBandeiraBrasil(x,y,l).

Segundo a lei:

Criei a função mostraBandeiraBrasil(x,y,l) e seguindo a lei nacional encontrei os valores de um módulo e da altura da bandeira.

Criando o retângulo:

Criando o losango:

Para criar o círculo:

Para centralizar ele somei o valor da coordenada x da bandeira com a metade do valor da largura, a mesma coisa fiz com a posição y só que somando com a metade da altura. Para cálculo do raio utilizei o que foi especificado na lei.

[exerciciosmateuslima]

Exercício 5 - Alterar a aplicação de lançamento balístico para recálculo a cada 0,1 segundo  (=10 fps), porém mantendo o tempo real.

  Para fazer o código de lançamento balístico basta criar uma aplicação que una o movimento MRU com o MRUV. O movimento MRU é o responsável pelo deslocamento horizontal e o MRUV o vertical do projétil. 

  Ao se alterar o frame rate para 10 fps é necessário alterar o tempo de recálculo para tAtual=tAtual+0.1, isso faz com que o simulador funcione em tempo real. Não aplicar essa alteração no tempo de recálculo faz com que o percurso do projétil não seja mostrado por completo.

[exerciciosmateuslima]

Exercício 4 - Alterar o simulador de MRU feito em sala de acordo com uma harmonia cromática á sua escolha e, informar na própria tela (comando text) em tempo real, os valores de todas as variáveis envolvidas na simulação.

Código final com as alterações de cores:

Escolhi usar a harmonização de cores em quadrado que consiste em utilizar quatros cores igualmente espaçadas no círculo de cores. Para a escolha das cores presumi que o simulador de MRU é destinado ao aprendizado de jovens na matéria de física.

Segundo a psicologia aplicada a cores:

>  VERMELHO é uma cor que transmite excitação, energia e coragem.           >  LARANJA representa juventude, alegria, otimismo, é uma cor amigável e convidativa.                                                                                                         >  VERDE transmite tranquilidade, prosperidade e crescimento.                         >  VIOLETA possui o estimulo do vermelho e a calma do azul. Reflete dignidade além de criatividade e imaginação.

Resultado final:

[exerciciosmateuslima]

Exercício 3

Transformando a flor em formato de cruz do exercício aplicado em sala em uma flor em formato de X.

SUPER FÁCIL E PRÁTICO!!! XD XD XD

Agora sério...

Código:

Relação entre as flores:

Resultado Final:

Download do código

[exerciciosmateuslima]

Exercício 2 - Pegar um dos exemplos no site https://processing.org e fazer mudanças

Escolhi o exemplo onde o usuário desenha uma linha enquanto o mouse estiver pressionado.

Modifiquei para que a linha ficasse sempre mudando sua cor e sua espessura.

Link para os arquivos: https://www.dropbox.com/s/q476lial1qunf79/Exercicio2.rar?dl=0

[exerciciosmateuslima]

Exemplos de artes feitas no Processing pelo artista croata Paolo Ceric

Tumblr do artista: http://patakk.tumblr.com