tarefa 8 - aula 9

Explicar a criação e exemplificar o uso da função moveCaixa2(x1, y1, x2, y2, n), que realiza o movimento interpolado de um quadrado de lado 10 pixels entre (x1, y1) e (x2, y2), em n passos.

O exercício foi bem simples de ser executado, visto que ele é complemento das atividades feitas em sala. Em draw foi criada a função MoveCaixa2 que recebe primeiramente as duas posições iniciais, as duas finais e a quantidade de passos. Dentro da função é criado um if que moverá a caixa. Vale ressaltar que em: i = i + (1.0 / n), 1.0 é igual 1 dividido por 100 (que é o número de passos). Clique aqui para baixar o código. :)

tarefa 7 - aula 8

Discutir os aspectos matemáticos envolvidos na criação e no uso de um adaptive logo, à sua escolha.

Sobre a identidade visual do MIT Media Lab: é inspirada pela comunidade que compreende pessoas altamente criativas de todos os tipos que se unem, se inspiram e desenvolvem uma visão colaborativa de futuro. Cada uma das três formas representa a contribuição de um indivíduo, a forma resultante representa o resultado desse processo: uma redefinição constante do que a mídia e a tecnologia significam hoje. A logo é baseada em um sistema visual, um algoritmo que produz uma logo exclusivo para cada pessoa, para professores, funcionários e alunos.

Sua construção é feita da seguinte maneira: três quadrados pretos são gerados dentro do espaço de um quadrado maior. Este maior é percebido pela luz colorida que sai de cada quadradinho preto, sendo esta um prolongamento ampliado do mesmo. A grade é contruída com base de um quadrado (azul). A largura e a altura que limita a logo é equivalente a nove quadradinhos (cinza). A luz expandida é de três por três (vermelho).

tarefa 6 - aula 7

Considerando a Lei Federal Nº 5.700, apresentar a criação do procedimento mostraBandeiraBrasil(x, y, l), explicando como rectMode e ellipseMode podem simplificar o processo.

Em draw() foi iniciada a função mostraBandeiraBrasil(), sendo os valores dos três parâmetros necessários (x, y, l), como pede a "lei" - x e y são as coordenadas do ponto central da bandeira, width/2, height/2 (proporcional sempre ao tamanho do canvas e l a altura, valor 300. Em mostraBandeiraBrasil(), as dimensões da bandeira, de acordo com a lei especificada são:

• mod = a/14;
• largura = mod*20;
• Criação dos elementos retângulo, losango (distVer = mod*1.7) e círculo (raio = 3.5*mod), sem borda e com os preenchimentos devidos;
• Dimensões e posições de cada um desses elementos são definidas neste ponto, também de acordo com as especificações da lei.

O rectMode(CENTER) é o modo de alinhamento do ponto referencial para o desenho da figura; centralizado, nesse caso. Facilitando a construção da bandeira sem que precise fazer o cálculo do seu posicionamento. Para a construção do losango, foi utilizada a seguinte função, já vista nas atividades anteriores em sala: quad(x1,y1,x2,y2,x3,y3,x4,y4). Cada par de valores dentro dos parêntesis representa as coordenadas de cada um dos vértices da figura. Clique aqui para baixar o código. :)

tarefa 5 - aula 6

Empregando a função lancamento, explicar o desenvolvimento de uma aplicação que simula o quicar de uma bola lançada para cima e para frente, e cujas velocidades horizontal e vertical diminuem sempre que o chão é tocado.

Reaproveitando o código usado no exercício anterior, algumas alterações foram feitas:

• O tempo anteriormente era o mesmo para o MRU E O MRUV, foi então adicionado tempo tanto para a vertical quanto horizontal;
• O valor das variáveis foi modificado para facilitar a visualização dentro do canvas.

Dessa forma, adicionei um if para verificar o momento que a distância vertical da bola ficar igual ou menor que 0. Se positivo, a variável dVy é zerada, juntamente com o tV. Para que a bola diminua a altura a medida que vai quicando pelo canvas, basta estabelecer que a velocidade vertical será ela mesma dividida por, no caso, 1.5. Clique aqui para baixar o código. :)

tarefa 4 - aula 5

Explicar a criação de uma aplicação que inicialmente armazena, num vetor, as velocidades aleatórias de vinte carros (retângulos coloridos) e, empregando a função MRU, mostra na tela uma corrida disputada entre os mesmos e identifica o carro vencedor.

Usando como base o último código feito em sala, além da função MRU e mostraMundo, foram criadas mais duas, Corrida e Carros, além do vetor carrinhos, onde armazena as posições dos 20 concorrentes.  Vamos as etapas:

• float [] carrinhos = new float [20]: vetor que armazena 20 posições.
• Foi criado um laço para gerar a velocidade dos carrinhos, variando entre 0 e 3 (carrinhos[i] = random(0, 3)).
• Dentro do draw chamei a função Corrida e mostraMundo.
• Em Corrida: adiciono o randomSeed(1) para evitar a alteração dos números random, criei uma variável int espaco = 25 para especificar a distância de um carrinho pro outro, novamente dentro de laço chamado Carros(i, espaco). 
• Dentro da função Carros: é chamada a função MRU, sendo esta igualada a float distancia. Em seguida é criado o carrinho com formas geométricas, utilizando a distancia e o espaço para a localização.
• O último if verifica qual passou da linha de chegada e printa na tela o número do carrinho.

Clique aqui para baixar o código. :).

*o código tá certinho, mas quando fiz o gif, acabei deixando 21 carrinhos. :P 

tarefa 3 - aula 4

"Apresentar o desenvolvimento de uma aplicação que gere quadros com a função bloco utilizando duas sliders, em posições na tela à sua escolha, para definir as quantidades de blocos na horizontal e na vertical."

A primeira parte da tarefa foi feita na primeira atividade em sala. Foram criadas duas funções, onde a círculo seria chamada dentro da função bloco. De acordo com o exemplo no slide, os círculos internos passam a ter variação de cor e tamanho, para tanto foi adicionado o elemento random e randomSeed (este último impede que o programa continue gerando numeros aleatórios). Em draw foram criadas dois laços para a criação dos blocos na vertical e horizontal e em setup foi adicionado o código para utilização dos sliders da biblioteca controlP5. Clique aqui para baixar o código. :)

*Perdão pela qualidade do gif.

tarefa 2 - aula 3

"Discutir o emprego da ferramenta debug no processo de criação de uma aplicação que apresenta, numa janela de 320 px de largura, imagens de 60 x 80 px de acordo com base em duas variáveis globais: h para a quantidade de imagens horizontais e v para a quantidade de imagens verticais."

Primeiramente, debug, segundo o site do processing, é uma ferramenta de depuração, usada para diagnosticar problemas no sketch (esboço?). Após habilitado, o debugger pausa o sketch durante a execução e avança através do código uma linha por vez. Ou seja, debug é o processo de encontrar e corrigir erros de codificação de software.

Segundamente, vamos ao que foi pedido na tarefa: criação de uma janela de 320px de largura (não tem indicação de altura), contendo imagens (não definidas previamente, logo, eu digo quantas são), com duas variáveis globais, h e v. Visto que a questão teve várias interpretações, fiz a atividade de forma que independente da quantidade de retângulos que fosse posto nas variáveis, o canvas se ajustaria.

Tamanho significa o tamanho da tela de acordo com o número de espaços e o número de imagens. Constatei que o Processing 3 não permite utilizar uma variável dentro do size do setup (ao contrário do Processing 2), então pesquisei nas referências sobre o settings (It's only useful when it's absolutely necessary to define the parameters to size() with a variable). O cont_vert é contador utilizado pra auxiliar no cálculo do espaçamento pras imagens na vertical (em pé). Em seguida delimito a criação das imagens na horizontal (deitadas) primeiro, crio uma variavel 'x' para controlar a posição inicial de cada imagem (deitada) e depois que são criadas as imagens na horizontal (deitadas), o resto que sobra é vertical.

Sobre o debug: pelo posicionamento dos breakpoints adicionados, é possível perceber as etapas de construção das formas:

• 1º breakpoint: entrada do laço;
• 2º breakpoint: entrada na condicional de criação de quadrados horizontais. Equação para definir posição.
• 3º breakpoint: retângulo horizontal com posição criada em x.
• 4º breakpoint: após rodar todas as possibilidades de retângulos horizontais, o programa inicia o cálculo da posição do x para os retângulos verticais.
• 5º breakpoint: retângulo vertical com posição criada em x.
• 6º breakpoint: Contador dos retângulos verticais.

O debug auxiliou bastante a construção do programa, principalmente quando estava perdida no posicionamento e quantidade de elementos na tela. Clique aqui para baixar o código comentado. :)

"Explicar o uso da ferramenta debug e exemplificar como ela pode facilitar o desenvolvimento de uma aplicação que posiciona, contiguamente da direita para a esquerda, n quadrados de 50 pixels de lado - sendo n uma variável global definida no início do código"

Como houveram dois slides diferentes para as duas turmas, decidi estudar um tiquinho mais e fazer esse exercício também. Clique aqui para baixar o código. :)