carmenclj-blog

[carmenclj-blog]

#22 - MAMI

A atividade do dia foi fazer um programa em que seja possível desenhar um polígono regular centralizado na tela, com a quantidade de lados informada no próprio código.

Para esta aplicação, praticamente reutilizei o código feito em aula. Só que, em vez de utilizar elipses e linhas, resolvi utilizar as funções beginShape(), vertex() e endShape(). Essas três funções trabalham em conjunto: o beginShape para iniciar a ação, vertex para delimitar as coordenadas de cada vértice do polígono, e endShape para fechar o polígono.  

O código ficou assim:

  float angle = PI/2;  //angulo em radiano   float lightning = 150; //raio

  //Angulo da fatia (1)   float angfat(int l)     {          return 2*PI/l;      }

  float  pegaX(float angulo, float raio) {          return raio*cos(angulo);     }

   //Coordenada Y  float  pegaY(float angulo, float raio) {        return raio*sin(angulo);    }

  void setup() {         size(400, 400);

        fill(255);         ellipse(200,200,300,300);

        noStroke();         beginShape();         fill(20, 60, 50);

    for (int i = 0; i <lados; i++)     {

   float a = i*angfat(lados);    float b = (i+1)*angfat(lados);

   vertex(200+pegaX(a, lightning), 200+pegaY(a, lightning));    }  endShape(); }

[carmenclj-blog]

Trabalho de MAMI - Parte 2

A segunda parte do trabalho consiste em um vídeo explicativo sobre o gerador de arte, com a adição de montar uma interface para o programa.  Além de implementar uma interface, eu acabei realizando algumas alterações no código para que a visualização do resultado da obra nova, seja mais imediata e menos “burocrática” : na parte 1, era necessário mexer em teclas e depois, clicar para então, ver o resultado da obra. Na nova versão, basta utilizar o clique do mouse.  O código pode ser baixado aqui.

Obs: Devido à quantidade de elementos que achei que seriam essenciais para compreender o gerador e para suprir os requisitos do trabalho, acabei excedendo o limite de tempo do vídeo.

[carmenclj-blog]

#19 - MAMI

Design da informação nos jogos

O design da informação é uma interessante solução para apresentar informações de forma mais eficiente e apresenta-se cada vez mais inovador. Nos jogos isso não seria diferente.

Acompanhando o avanço tecnológico, os jogos foram tornando-se cada vez mais complexos, em vários sentidos: mecânicas, visual, história... Muitos são os jogos em que apresentam inúmeras opções de customização e de comandos - e é aí que o design da informação mostra-se evidentemente importante para sua jogabilidade. Um exemplo de design de informação nos jogos, é o de  Dissidia Final Fantasy  XII - Duodecim.

Assim como em outros jogos da série, o Dissidia dispõe de um leque de opções de customização para o jogador, além de ter um formato de jogo interessante. O feedback sobre dano e demais dados é apresentado tanto por números como em barras, e visando a maior imersão e localização no jogo, mostra-se ser ideal.

[carmenclj-blog]

#18 - MAMI

   A atividade proposta foi fazer um resumo sobre a palestra “The beauty of data visualization” , de David McCandless, que pode ser visualizada neste link.

   No primeiro momento da palestra, David apresenta um fato da nossa sociedade atual : o excesso de informações e de dados. Como solução, ele propôs o maior "uso dos nossos olhos" , o que significaria a transformação dessas informações em algo visual .  Algo que, de acordo com o palestrante,  é mais eficiente para focar no que é importante, para contar uma estória, para transmitir conhecimento, visto que podemos ver mais facilmente as conexões e os padrões entre os dados.

   Seu primeiro exemplo foi um esquema de quadros que ele criou para representar, visualmente, montantes de dinheiro na imprensa. Categorizando as informações com cores e com escalas de tamanho diferentes, a relação entre as informações tornou-se bem mais evidente. O mesmo aconteceu no outro exemplo apresentado ( sobre os medos de acordo com a mídia ), sendo possível até determinar um padrão.

   David menciona uma frase muito interessante: " Dados são o novo petróleo".  É uma metáfora sobre o recurso onipresente que é a informação - recurso que pode ser utilizado para inúmeros fins ( comércio, política, etc ). Então, ele apresenta outra frase : "Dados são o novo solo". Refere-se a como os dados - ainda desconexos, brutos, numéricos - compõem um meio fértil já que podem ser utilizados para semear e transmitir conhecimento à partir de sua “composição” criativa, como gráficos e infográficos.    

   Na segunda metade de sua fala, David exemplifica o fato de que a informação visual é  algo que simplesmente "jorra", que é mais fácil de compreender , com outros gráficos criativos (incluindo um infográfico interativo e seu currículo). Outro ponto apresentado é que o design visual é capaz de reunir várias informações em um espaço pequeno, além de ser mais fácil de interagir-los.  

[carmenclj-blog]

#17 - MAMI

A teoria dos conjuntos  é a teoria matemática dedicada ao estudo da associação entre objetos. Na área de multimídia, as relações de união, intersecção e diferença entre conjuntos também são utilizados : um exemplo clássico é a técnica Chroma Key.

Amplamente utilizado em filmes e em telejornais, o Chroma Key é uma técnica de efeito visual que se caracteriza por substituir um fundo de determinada cor (geralmente verde ou azul) por outro cenário.  A teoria dos conjuntos pode ser relacionado no passo em que há a seleção do padrão de cor monocromático ( o fundo ) e há a interseção com os pixels da imagem computadorizada.

[carmenclj-blog]

#10 - MAMI (04/10)

A tarefa do dia foi criar uma aplicação que move um círculo, inicialmente no meio da tela, para qualquer posição clicada na tela.

O código completo ficou assim:

Explicando o código em alguns pontos:

Primeiramente, criei variáveis que seriam as coordenadas iniciais e as posteriores do círculo - essas últimas, terão o valor atribuído a pmouseX e pmouseY ( coordenadas do último frame )na função mouseClicked()- , além de uma variável incremento que seria basicamente, o deslocamento realizado pela bola  e de uma variável booleana clique;

Na função mouseClicked(), eu pude determinar ações que serão realizadas caso o mouse seja clicado. Nele, eu estabeleci que clique seria verdadeiro ( variável que foi utilizado numa parte posterior do código ) e que, caso ele fosse falso, continuasse a atribuir o valor a pxClique e pyClique.

Na função bola(), estabeleci que ela receberia dois parâmetros: pxClique e pyClique. Além disso, descrevi que, à princípio, um círculo seria desenhado no meio da tela. Caso o mouse fosse clicado, uma série de condicionais(if) seriam “ativadas”. Tais condicionais determinariam o sinal do incremento(ou decremento) aos valores pxInicial e pyInicial pré-estabelecidos e determinariam a continuidade dessa ação até ambas coordenadas (x,y) se igualarem às coordenadas pxClique e pyClique.

Por último, s�� fiz chamar a função bola() em conjunto com background, na função draw() para que não apareça o rastro do círculo no programa funcionando.

A seguir, o gif do programa funcionando:

[carmenclj-blog]

Trabalho de MAMI - Parte 1

Como trabalho, tivemos que escolher um artista e uma série deste para criar um gerador de arte e então, descrever o passo a passo no blog. O artista que escolhi foi o suíço chamado Max Bill.

1 - Sobre o artista e a série escolhida, e considerações iniciais

Nascido em 1908, Max iniciou sua carreira ao cursar na Arts and Crafts Academy em Zurique, partindo depois para o renomadíssimo Bauhaus. Durante sua vida, ele atuou como pintor, designer, arquiteto e escultor, sendo mais reconhecido pela sua influência no Concretismo - movimento que preza a racionalidade, a lógica e a precisão das formas. Tal preferência pode ser notada nas várias obras em que ele utiliza apenas formas geométricas puras, principalmente triângulos.

Para o trabalho, escolhi as seguintes obras:

( “Ritmo em cinco cores” - Max Bill )

À partir desses quadros, eu escolhi trabalhar com as seguintes características:

Cores: As diferentes paletas das 3 obras;

Formas: Composições com triângulos;

Divisões: Elas seguem uma lógica em cada quadro  (explicarei melhor a do modelo do gerador mais adiante) ;

Gradações: A sequência de repetição de cores;

Minha ideia foi reproduzir quadros com uma estrutura semelhante à do “Ritmo em cinco cores” , só que com a opção de escolher cores diferentes e também, o número de repetições e divisões dos triângulos. Para isso, tive que primeiro, verificar a disposição dos elementos da obra:

O tamanho do quadro é praticamente um quadrado regular (525x525, no caso);

Utilizando o Photoshop , eu utilizei demarcadores para depois, com o auxílio da ferramenta seleção, medir o tamanho dos catetos superiores e inferiores e constatei que eles estão divididos igualmente - na obra, se eu for analisar as partes superior e inferior. cada uma está divida em 10 triângulos ( largura / 10 );

Há duas sequências de triângulos, que param na diagonal do quadro ( que tem basicamente as dimensões de quadrado regular);

Outro fato interessante é que todos os triângulos convergem para os cantos superior direito e inferior esquerdo;

Há um esquema de 5 cores diferentes que seguem uma sequência que se repete;

Para o modelo matemático, eu inferi que os triângulos possuem 2 vértices em comum ((0,altura total do quadro) e (largura total do quadro, 0)) , sendo o terceiro delimitado pelo incremento ou decremento de um espaçamento, que é definido pela largura dividido pelo número de triângulos de cada “metade” ( do quadrado ). No modelo real, seria 525 / 10 = 52.5 px - o terceiro vértice estaria  a cada 52.5 px da coordenada y correspondente,então triângulos seriam desenhados até a extremidade da largura. Tal modelo será melhor visualizado no código.

2 - A lógica e o código

Após essas primeiras considerações, prossegui então para “traduzi-lo” ao Processing. Comecei então, criando uma função quadro() para ver como eu o implementaria em vetor posteriormente. O código ficou assim:

Como eu queria que fosse o número de triângulos fosse variável, coloquei que quadro() receberia 3 parâmetros: numSequencia ( repetições do núm de triângulos ),  numTriangulos e largura(já que o espaçamento depende da largura). Após relacionar esses parâmetros às outras variáveis (pontos em comum e etc), eu fiz um laço for que desenha, a cada vez que o i é incrementado, um triângulo no qual possui variação em uma das coordenadas x de seus vértices à partir do também incremento do acumuladorPx1 - variável que armazena a soma do espaçamento desenhado. A lógica pode ser visualizada abaixo:

Certo, a parte de desenhar os triângulos foi implementada, mas eu ainda tinha que pensar em uma maneira de inserir as cores no laço for. Utilizando a mesma função, o máximo que consegui fazer foi criar padrões de degradê  ao também incrementar valores do parâmetro fill(r,g,b). O laço ficou assim:

for (int i  = 0; i < numTotal; i++) {    noStroke();    fill(0, g, b);    triangle(pxComum1, pyComum1, pxComum1, pyComum2, largura - acumuladorPx1, pyComum2);    r = r + 20;    g = g + 20;    b = b + 20;

   fill(r1, g1, b1);    triangle(acumuladorPx1, pyComum1, pxComum2, pyComum2, pxComum2, pyComum1);    acumuladorPx1 = espacamentoPx + acumuladorPx1;    r1 = r1 - 20;    g1 = g1 - 20;    b1 = b1 - 20;  

Contudo, meu principal objetivo era preencher os triângulos com cores pré-estabelecidas e de maneira alternada. Segue abaixo o gif dessa tentativa:

Depois de consultar alguns colegas, vi que a melhor solução para o tipo de gerador que eu queria seria utilizar vetores. Então,primeiro eu criei uma classe Quadro e coloquei,o que anteriormente seriam os parâmetros da função, como atributos. Além disso, eu adicionei variáveis que armazenam cores (variáveis do tipo color) para elas serem “sorteadas” depois. Para facilitar a criação dos vetores posteriormente, criei um construtor Quadro() que já delimitará o valor de cada atributo do vetor criado. Essa parte do código ficou assim:

Ainda dentro da classe, eu criei mais 3 funções: o desenha1(), desenha2() e desenha3(), onde cada uma corresponderá a uma paleta de cor. As funções ficaram praticamente, da maneira a seguir, diferenciando-se uma das outras apenas pelo nome e pelas variáveis(cores) nos casos do switch(var) :

A função segue quase a mesma lógica que o primeiro código apresentado nesta postagem, contendo apenas a adição da variável var, a junção de dois laços, de switch case e a delimitação de um limite ao acumuladorPx1 com um “jogo” de if’s.

Dentro do laço for, estabeleci que v = j%5. Por que isso? Bem, a fim de que haja a escolha dos cases de maneira sequencial, eu atribuí tal valor porque os resultados da divisão ( lembrando que % significa dividir o valor e mostrar apenas o que restou ) seguirão sempre a mesma sequência: 0,1,2,3,4  - visto que j é incrementado de 1 em 1, até chegar ao numTotal, que é delimitado à partir;

A diferença entre os dois switches está na ordem dos cases. Eu os defini desta forma para que os triângulos do meio ( os de cada sentido ) não tenham cores iguais, da mesma maneira que a obra original de Max;

Os if’s servem para que o triângulo das extremidades não ultrapasse o que seria a tela do quadro, já que as funções triangle só serão chamadas até que o acumuladorPx1 chegue a 0 ou 525(largura que estabeleci para o quadro).

Depois de criar a classe, seus atributos e funções, passei para a aba de “execução”. Segue um print da primeira parte desta aba:

Com Quadro[], determinei o nome e o tamanho do vetor;

 As variáveis do tipo boolean servem como determinantes da execução de determinadas funções;

As variáveis PImage servem para eu inserir as imagens das paletas de cores;

Na função keyPressed() , estabeleci condições para algumas teclas e suas respectivas respostas para cada vez que forem pressionadas. Por exemplo, determinei que ao pressionar uma das letras ‘A’, ‘S’ ou ‘D’, um boolean paleta será verdadeiro;  ao pressionar as setas direita ou esquerda, o valor de triangulo, que inicialmente é 1, será incrementado ou decrementado por 1 até um determinado limite;  outra condição seria que, caso o valor sequencia zere, as variáveis booleanas das paletas voltariam a ser falsas, o que possibilitaria a mudança de cores no programa;

mouseClicked() reconhece o clique do mouse e executaria a ação de validar o boolean clique;

Na função setup , determinei o tamanho da tela do programa e atribuí as imagens às variáveis p1, p2 e p3.

Acabada esta parte, chegou o momento de enfim, estruturar e chamar as funções em draw(). Essa parte do código ficou assim:

O primeiro laço for  serve para que um objeto seja criado com o construtor Quadro(), sendo seus parâmetros numSequencia e numTriangulos variáveis à partir do que foi estabelecido na função keyPressed();

O segundo for  está inserido dentro de uma condicional if , o que significa que só será executado caso clique seja verdadeiro. Neste laço, inseri funções de texto que mostram dados como o número de triângulos e de sequências, além das instruções do programa. Os dados alteram à medida que clico e utilizo as setas ( como foi determinado na função keyPressed); 

Ainda em relação ao segundo laço for, adicionei 3 condicionais que determinam qual das 3 funções desenha(), criadas na classe Quadro,serão executadas, à partir das variáveis booleanas determinadas também em keyPressed.

Fora do laço, reatribuí clique como falso, para então que o desenho do gerador mude de acordo com os comandos das setas.

3 - O gerador 

Segue o gif do programa funcionando, e algumas obras geradas por ele:

O código, juntamente com as imagens das paletas, podem ser baixados à partir daqui.

[carmenclj-blog]

#8 - MAMI (27/09)

A tarefa foi adicionar dois (ou mais)obstáculos no jogo que produzimos na aula. Eles devem ser destruídos ao serem tocados pela bola. 

Como essa tarefa seria a continuação do que foi realizado em sala de aula, eu tive que adicionar algumas variáveis booleanas e outras condicionais. Vamos por partes:

As variáveis int referem-se às coordenadas, medidas e “auxiliares” ( dX e dY,determinantes do deslocamento dos elementos, ) da bola(bolaX,bolaY) e da barra do pong(bastaoX,altura,largura);

As variáveis booleanas que acrescentei foram colidiu1, colidiu2 e gameOver. Elas seriam responsáveis para determinar a ocorrência de eventos que serão mostrados mais abaixo;

Na função Moviment(), encontram-se as condicionais do movimento da barra, que estão relacionados ao pressionar das teclas(direita e esquerda) e aos limites da tela.

Nessa parte do código, encontram-se as funções restantes:

Em Bolinha(), estabeleci a movimentação do mesmo. Toda vez que esta função for chamada no draw(), ele desenhará uma elipse com as coordenadas bolaX e bolaY - ambas sendo incrementadas por dX e dY. Além disso, determinei, utilizando if’s os limites em que a bola pode percorrer e determinei que dX e dY inverteriam de sinal toda vez em que ela encostar nesses mesmos limites. Inseri também uma condicional que determinará o fim do jogo caso a bola encoste na borda inferior da tela, ao associar esse vento ao boolean gameOver;

Para que os obstáculos sejam independentes, eu criei funções que seguem a mesma lógica para cada um. Em obstaculo1 e 2(), eu defini que ele seria desenhado até a variável booleana colidiu1,2 ser verdadeira;

Implementei as funções verificarColisao() relacionadas a cada obstáculo, definindo que, caso a bola entrar em contato com os limites estabelecidos de cada obstáculo, colidiu seria verdadeiro ( interferindo, então, na execução da função obstaculo() ) e que as variáveis auxiliares (dX e dY) se inverteriam, criando o efeito de “bater e voltar” da bola;

Restou, então, a parte de estruturar a “execução” do programa:

Na função draw() - que funciona em loop - defini que o bastão seria desenhado (rect) e a continuidade das ações Moviment() e Bolinha(). Além disso, coloquei 4 condicionais:

As duas primeiras estabelecem a colisão da bola no obstáculo apenas quando colidiu estiver falso, já que com ele verdadeiro, obstaculo() não desenharia o objeto, como foi mencionado anteriormente;

Na terceira condicional, estabeleci que, ao ter colidido e destruído todos os obstáculos, a tela seria preenchida com background e a palavra “Vitória”, finalizando assim, o jogo;

Na última, determinei que enquanto a variável booleana gameOver for falsa, ou seja, enquanto a bola não atingir a borda inferior, os obstáculos continuariam a ser desenhados, permitindo assim a continuidade do jogo.

Segue abaixo um gif do programa funcionando:

(Obs: relevem o movimento da bola, que está um pouco esquisita porque eu havia me esquecido de colocar noStroke() ao gravar o gif)

[carmenclj-blog]

#7 - MAMI (20/09)

A tarefa do dia foi fazer o A da Braun pulsar(lenta e continuamente aumentar e diminuir de tamanho) no centro da tela.

O primeiro passo foi entender as formas que compõe a letra e suas relações de medida, a fim de poder reproduzir-lo com tamanhos variados e de forma mais simples. O que pude notar foi: 

A altura total da letra é igual a 8 quadradinhos (com o lado que chamarei  de módulo);

A letra é composta por 4 retângulos e 2 arcos;

Os 2 retângulos maiores têm altura equivalente a 7 módulos e largura de 1 módulo, e o espaçamento entre eles é de 1.5 módulo.

Os dois retângulos que ficam entre os maiores possuem altura de 1 módulo e largura, de 1.5 módulo (dado reforçado pelo professor na aula). Um localiza-se logo acima dos maiores e o outro(vértice a 1 módulo acima), quase na metade da altura dos maiores (como a posição dá-se pelo vértice superior esquerdo, posso dizer que ele localiza-se na metade da altura do retângulo maior) ;

A altura e a largura dos arcos são de 2 módulos.

Tais informações foram imprescindíveis para eu declarar as variáveis dos elementos que compõem a letra. Elas ficaram assim:

void A(float t)      {              // t seria o tamanho vertical da letra completa    

    float hRect = 7*t/8;        // altura dos retângulos maiores

    float lRect = t/8;            // módulo adotado = largura dos retângulos maiores e de demais elementos  

    float lRectMeio = lRect*1.5;  // ele localiza-se 0.5x abaixo do centro da letra (metade da altura e largura deste)

    float r = lRect;    }          // raio do semi-circulo

Outra problemática foi estabelecer o posicionamento dos elementos para que, no fim, o “A” fique centralizado. Para descobrir os valores, primeiro identifiquei que o centro da letra é equivalente ao centro da tela, então teriam as coordenadas iguais à ( width(largura da tela) / 2  ,  height (altura)  / 2 ). À partir disso, pude atribuir o valor das demais coordenadas:

As variáveis das principais coordenadas ficaram :  

   float pxRectMaior1 = width/2 - lRectMeio/2 - lRect;     // posição x

   float pyRectMaior1 = height/2 - hRect*3/8;                  // posição y

   float pxRectMaior2 = width/2 + lRectMeio/2;               // posição x

   float pyRectMaior2 = height/2 - hRect*3/8;                  // posição y

Entre os elementos, os que mais senti dificuldade em definir os parâmetros foram os dois arcos, mais especificamente, os pontos de começo e fim. Para isso, eu inverti a imagem, já que o plano cartesiano no Processing possui o Y invertido.

Levando em conta o círculo trigonométrico, e que ele continua “crescendo” no sentido horário, podemos dizer que o arco da direita (na imagem) tem início em 180° e vai até 450° (180 + 180 + 90) e o da esquerda tem início em 90° e vai até 360°.  Como os parâmetros recebem valores relacionados a  π = 3.14, o conjunto de parâmetros de cada um, respectivamente, foi  (3.14, 7.85) e (1.57, 6.28). No código, ele ficou: 

 arc(pxRectMaior2, pyRectMaior1, r*2, r*2, 3.14, 7.85, PIE);

 arc(pxRectMaior1+lRect, pyRectMaior1, r*2, r*2, 1.57, 6.28, PIE);

Os parâmetros são, respectivamente: posição x, posição y, largura do arco, altura do arco, ponto de início do arco, fim do arco, tipo de arco.

Com a ilustração mostrada anteriormente , a função A() ficou assim:

Para fazê-lo pulsar, eu primeiro declarei a variável dX, que seria o valor acrescentado ao tamanho ( parâmetro e variável que a função A() receberá ). Na função draw() - que funciona em loop  - , chamei a função A(tamanho) e fiz com que tamanho fosse incrementado até chegar a um tamanho limite e decrementado por dX do tamanho limite até chegar ao valor atribuído a tamanho à partir de duas condicionais if(),criando o efeito de pulsar desejado no enunciado. 

A parte final do código ficou assim:

E enfim , programa feito! Ela rodando em 2 fps ficou assim:

[carmenclj-blog]

#6 - MAMI(13/09)

O enunciado do dia foi o seguinte:

”Considerando a lei federal n 5.700, discutir, passo a passo, a criacao do procedimento mostraBandeira(x,y,l),”

Primeiro , estabeleci o valor das variáveis de acordo com o módulo e suas relações de medida, encontradas na lei 5.700:

h (altura) / 14 = m (módulo)

l (largura) = 20 * m

d (distância entre os vértices do losango ao retângulo) = 1.7 * m

r (raio do círculo) = 3.5 * m

Decidi adotar como referência a variável l (largura),já que ele será um dos parâmetros exigidos pela função mostraBandeira() . Aplicando a regra de três, vi que:

h ( altura ) = 0.7 * l (largura)

m (módulo) = l / 20

d (distância entre um ponto do losango ao retângulo) = m * 1.7

r (raio do círculo) = 3.5 * m

Declarei, então, (h,m,d,r) como variáveis do tipo float . Em seguida, tentei ilustrar a bandeira e as medidas para posteriormente, saber as coordenadas de cada elemento desta.

Levando em conta que os parâmetros (x,y) da função em questão seriam as posições x e y quaisquer do retângulo e que px e py seriam as posições do centro círculo, que localiza-se exatamente no centro da bandeira, estabeleci que px = x + l(largura)/2  e py = y + h(altura)/2.

Enumerei a sequência dos parâmetros(x,y) que a função quad() recebe (no caso, seria à partir do vértice superior e prossegue em sentido horário). Tive que levar sempre em consideração o plano cartesiano do processing, a altura e a largura da bandeira e a distância d para estabelecer as coordenadas do losango.

Atribuídos os valores dos parâmetros, o código completo ficou assim:

Utilizando a ferramenta Color Selector, peguei os números RBG da cor de cada elemento para utilizá-los no fill(). Resolvi utilizar um for() com em void draw para chamar várias bandeiras com posições e tamanhos randômicos e verificar se as proporções da função mostraBandeira() estavam corretas. Segue o gif do programa rodando em 2 fps:

[carmenclj-blog]

#5 - MAMI (09/09)

Depois de fazermos um simulador balístico na aula, a tarefa dada foi incluir as variáveis utilizadas na própria tela do programa com a função text(). No caso, incluí as variáveis px (determinada pela função MRU), py(determinada pela função MRUV) e t(tempo).

 A função text() só recebe uma “frase” por vez, então tive que implementar as informações separadamente na função draw(). O primeiro parâmetro recebido foi o valor / String que seria desenhado na tela; em seguida, as coordenadas x e y do texto - estas, determinei utilizando o comando tweak , que permite modificar e visualizar as mudanças direto do programa. 

A parte implementada foi basicamente esta: 

A função caixa() foi criada apenas para determinar um retângulo no canto superior da tela. A função textSize(), permite configurar o tamanho da letra; fill(), a cor. O valor da coordenada y é dado por 600-py devido ao plano cartesiano(no processing)ter início no canto superior esquerdo da tela, com x positivo para a direita, e y, para baixo.

O código completo ficou assim:

Segue um gif do funcionamento do programa, em 5fps:

[carmenclj-blog]

#4 - MAMI (06/09)

A tarefa do dia foi explicar as alterações necessárias para que o simulador balístico feito em sala, opere em 60 fps e em tempo real.

O código original (em 1 fps) foi dividido em duas partes: uma só para as funções, e outra para a “execução” do exemplo:

1. A função Mapa() foi criada para desenhar a malha do programa. Já o MRU, para calcular a distância percorrida de um objeto à partir de dois parâmetros: v(velocidade) e t(tempo).

2. Na função setup(), determinei as medidas da tela e a cor de fundo, chamei a função Mapa() para mostrar a malha e estabeleci com frameRate() que, ao rodar o programa, cada operação (em loop), rode em 1 fps.

3. Em draw(), coloquei que os valores sejam printados no console (para verificar se estão corretos) e 

Para a melhor visualização e manter o tempo real do programa em 60 fps (frameRate(60)), tive que alterar o valor da variável tAtual: em vez de incrementar +1, teria que incrementar + 1/60, para de fato ter 60 bolas desenhas em 1 segundo. Atribuí o novo incremento como tBola, retirei o valor de tAtual ( que era 0 ), e estabeleci posteriormente que tAtual = tAtual + tBola.

 Além disso, também alterei os seguintes valores só para “focar” no trajeto da bala:

size(): de 600x600 para 600x200, já que a bala, no caso, se movimenta horizontalmente;

ellipse(): de (dAtual, 300, 10, 10) para (dAtual, 100, 20, 20), mudei o parâmetro y devido à alteração no tamanho da tela, e o tamanho, para uma melhor visualização;

[carmenclj-blog]

#3 - MAMI (30/08)

O enunciado do dia foi criar função flor3(x, y, r) que cria uma flor como o exemplo abaixo e depois, chamá-la 100 vezes com posições e raios randômicos.

Primeiro, tive que determinar as posições dos círculos por variáveis. 

Para isso, levei em conta que a distância entre o centro de dois círculos é a, onde a = 2*raio, e que, adicionando mais um ponto, podemos formar um triângulo retângulo isósceles. Com isso, tornou-se mais fácil achar o valor de b, que me dará a posição x e y dos demais círculos.

Considerando a regra de que a soma dos ângulos internos de um triângulo é igual a 180* , e considerando que temos dois lados iguais e um ângulo reto, podemos dizer que os outros ângulos são iguais a 45* e, portanto, que o triângulo desenhado é igual a metade de um quadrado perfeito.

A diagonal desse quadrado corresponde ao cateto a, portanto é igual a 2*raio. A diagonal de um quadrado é igual ao lado * sqrt(2) [Sqrt corresponde a raiz quadrada]. Fazendo uma regra de 3 de l * sqrt(2) = 2*r, podemos relacionar que l = r * sqrt(2). Substituindo com as variáveis do triângulo ab, temos que b = a/2 * sqrt(2). As posições dos centros dos demais círculos puderam ser relacionados com a soma e/ou subtração das coordenadas(x,y) do círculo central com b:

Pude , então, atribuir os valores dos parâmetros à função flor3. Nela, utilizei a função circulo() para facilitar a criação dos círculos, já que com ele pude reduzir um parâmetro. Além disso, criei 3 variáveis com valores randômicos(cor1,cor2,cor3) para elas serem utilizadas na função fill(R,B,G), possibilitando assim que a flor tenha uma cor diferente toda vez que for desenhada. Essa parte do código ficou assim:

A outra parte do código consiste apenas num void setup(). Nela, estabeleci as configurações da tela ( tamanho e cor de fundo ), além do frameRate ( que neste caso, foi praticamente inútil ) e de implementar um for para, finalmente, chamar função flor3() 100 vezes.

No for , eu declarei uma variável i para ela ser incrementada até chegar a 100. Nela, declarei as variáveis do posicionamento x e y (px,py) e do diâmetro com valores randômicos para serem utilizadas na função flor3(). Deste modo, a função será chamada 100 vezes (todos simultaneamente), com posições, cores e tamanhos diferentes.

 Fiz um gif de alguns resultados do programa:

[carmenclj-blog]

#2 - MAMI (25/08)

A tarefa do dia foi criar uma aplicação que organiza as imagens(retângulos de 20x30px) de acordo com as duas variáveis: h para a quantidade de imagens na horizontal, e v para a quantidade de imagens na vertical.

Primeiramente, declarei as variáveis que serão utilizadas no programa:

A definição de cada uma está comentada no código. As variáveis p e p2 representam o parâmetro x da função rect(desenha retângulos), que diz respeito à posição x na tela do programa. Ambas foram utilizadas nas funções for situadas na outra aba.

Primeiramente, estabeleci o tamanho da tela do programa utilizando o void setup() {   size();  }. 

Em seguida, criei uma função void chamada desenhando(). Nessa função, determinei dois laços de repetição: um para desenhar as imagens na horizontal(primeiro laço) e outra, na vertical. 

Laço 1:  Como o valor de espaços entre as imagens é igual ao número das imagens + 1 e que é necessário dar um espaçamento inicial, estabeleci na fórmula que p (posição do vértice inferior esquerdo do desenho)  é igual a quantidade de espaços (x+1) vezes a distância desse espaço (espaco) mais o espaço ocupado pela(s) imagem(s)(x*30). Dessa forma, o p irá “se acumular”, desenhando as formas sem sobrepor-las.

Laço 2: Levando em consideração que ele já recebe o espaçamento de p, o segundo laço apresenta algumas diferenças. y começa por 0, a fim de não contar o espaçamento inicial, sendo incrementado até o valor menor que o número v(imagens na vertical). O valor de p2 dá-se pela soma dos pixels ocupados pelos espaçamentos e pelas imagens na horizontal (p), somada ao número de espaçamentos entre as imagens vezes o valor ocupado(y*espaco), somado ao valor ocupado pelas imagens na vertical(y*20);

Testando o aplicativo com valores diferentes:

.

[carmenclj-blog]

#1 - MAMI (23/08)

A primeira atividade da cadeira de Matemática Aplicada a Multimídia foi pegar um exemplo do site do processing, analisá-lo e modificá-lo. Optei por um exemplo da categoria Input : MousePress. 

A função MousePress permite que você possa implementar ações que ocorram apenas quando qualquer um dos botões do mouse estiver pressionado.  No exemplo do site, a cor do símbolo (que era reproduzido acompanhando a posição da seta ), mudava de cor sempre que movíamos o mouse com o botão pressionado.  

(Printscreen do exemplo apresentado no site.)

O código do programa era:

void setup() {                      // função de configurações da tela  size(640, 360);                   // função que determina o tamanho da tela  noSmooth();  fill(126); // função que determina o preenchimento  background(102);                  // função que determina a cor do fundo } void draw() {                       // função que possibilita a criação de formas na tela  if (mousePressed) { // função de condição    stroke(255);                    // cor do traço  } else {    stroke(0);  }  line(mouseX-66, mouseY, mouseX+66, mouseY);     //função que, ao inserir dois parâmetros, delimita um segmento na tela  line(mouseX, mouseY-66, mouseX, mouseY+66); }

Para starters, resolvi fazer pequenas alterações:

void setup() {               size(640, 360);             background(7993);           } void draw() { if (mousePressed) {           stroke(255);               noFill();                   ellipse(mouseX, mouseY, mouseX+30, mouseY);     } else {   background(7993);   stroke(200,180);   line(mouseX-66, mouseY, mouseX+66, mouseY);   line(mouseX, mouseY-66, mouseX, mouseY+66); } }

Na função setup, eu retirei as funções noSmooth (trabalha com as bordas) e fill(trabalha com o preenchimento). Não houve alterações aparentes quando rodei o programa.

Na função draw, implementei uma função if-else: caso qualquer uma das teclas do mouse estiver pressionada, elipses serão desenhadas e acompanharão o movimento do mouse. Caso não, permanecerá o símbolo do exemplo original. A função background sobrepõe o desenho anterior, “limpando” a tela.

Visualização do programa funcionando. A forma da elipse vai variar de acordo com a posição do mouse.

[carmenclj-blog]

Treininho básico no Animate! O caminhar ficou imperfeitíssimo, mas valeu como experiência.

[carmenclj-blog]

Exemplos (bons e outros, nem tanto) dos 12 princípios de Animação

1. Comprimir e esticar

(-) Nesta sequência de frames, não acho que o princípio foi aplicado de forma correta. 

(+)

2. Antecipação

(-) Não há um frame de antecipação da ação, o que deixa o movimento não muito natural (embora os outros frames estejam ok).

(+) 

3. Encenação

(-) O posicionamento do personagem e da arma não seriam explícitos caso fosse aplicado uma sombra.

(+) Na sequência de frames a seguir, os gestos do personagem são bem destacados e abrangentes.

4. Animação pose-a-pose ou direta

Direta

Creio que algumas partes tenham sido pose-a-pose (primeira e segunda linhas)

5. Sobreposição e continuidade de ação

(-) Há elementos estáticos que não contribuíram para a fluidez do movimento (partes do cabelo e da roupa).

(+) 

6. Aceleração e desaceleração 

(++) Além de ser bom um exemplo deste princípio, também serve para o princípio 1.

https://jackstollery.tumblr.com/image/145801790502

7. Arcs

(-) Reparem no braço do Tuxedo Mask. A readaptação de Sailor Moon recebeu várias críticas em relação à qualidade da animação.

(+) O certo seria se atentar aos movimentos, como na imagem abaixo.

8. Ação secundária

(-) Outro fragmento de Sailor Moon que carece fluidez - mais especificamente no Tuxedo Mask. 

(+) O Studio Ghibli é mundialmente famoso pela qualidade de suas animações e estórias. Um exemplo magnífico de movimentos secundários fluidos de um de seus clássicos, Castelo Animado.

(post original deste gif aqui)

9. Temporização

(+)

10. Exagero

(+) O exagero nas reações dos personagens dão um ar de comicidade no personagem. 

11. Desenho volumétrico

(-) O desenho Charlie&Lola possui uma característica marcante: os personagens “flat”. 

(+) 

12. Appeal

(-) A falta de appeal no personagem principal de One Punch man (anime&mangá hilários, aliás) é proposital para reforçar a ideia de que ele é subestimado pelas aparências e comportamento, embora seja o mais forte, até o momento, na história.

(+) Esboços do Banguela, um dos dragões mais fofos da história dos filmes.