Trabalho Final - Laboratório de criatividade

*Voz de locutor* Você já recebeu alguma stick animation no seu email na vida?

Provavelmente você já ouviu falar de alguns desses:





Animation vs Animator

Castle Series







Ghost Fight







Xiao Xiao


Existe toda uma cultura sobre essas animações que é alimentada constantemente até os dias de hoje no Youtube e no Vimeo. Antigamente o foco era em sites de nicho como a newgrounds, stickpage, albino blacksheep. Muitos animadores dessa época ganharam visibilidade a partir desse trabalho e hoje em dia atuam em empresas de grande porte. Os temas foram mudando com o tempo devido ao assuntos em destaque e a tecnologia de produção de animação. Enquanto antigamente os temas eram mais livres e vinham inspirados em cenas de ação de filmes ou testes de roteiro dos próprios criadores, atualmente há muito mais conteúdo relacionado a jogos como também uma exploração das possibilidades de uma nova tecnologia ou de um estilo visual main stream.


Nesse semestre na cadeira de técnicas de animação analógica decidi produzir uma cena nesse estilo de animação e vou contar um pouco de como está sendo:

A ideia vem inspirada em jogos de MMORPG, em que em um universo existiria um torneio de magos que disputariam qual deles teria o maior DPS (dano por segundo) dentro dos clãs que eram divididos pela escola ou especialização de cada um. Por exemplo um deles seria o mais forte na escola de especialização de fogo e foi escolhido para participar do torneio representando todos os seus estudantes.

Toda a cena de efeitos visuais séria orquestrada por uma música de fundo do Klaypex, que traria um ritmo bem acelerado e energético.



Identificação de dificuldades a serem vencidas:

* Dificuldades de mão de obra

- timing e roteiro necessitam de uma precisão de centésimos

- 24 quadros por segundo animados de forma tradicional

* Dificuldades criativas

- encontrar o movimento certo dos personagens para se adequar ao ritmo escolhido

- criar focos de atenção

- composição




Identificação de como as dificuldades foram superadas

*Dificuldades de mão de obra:

- utilização de softwares de som para montagem do timing

- Reaproveitamento de frames com mudanças de forma

* Dificuldades criativas

- utilização de referências mudando a velocidade delas

- movimentação de câmera

- Ainda não resolvido  =(





Aspectos de inovação que o seu tema explora

Creio que o produção do estilo de animação em um ritmo diferente. Visualização de um elemento de jogos que normalmente é criado pela comunidade, em um universo, criando identificação com os jogadores.



Outras possiblidades:

- Torneio de outro grupo de classes

- Utilização de algum universo existente

- Outra música

- Outro processo de animação com 3D e tal

- Mais carisma pros personagens

- Misturar com outros estilos como se fosse um programa de TV



Rascunho da animação:

Trabalho Vídeo

MAMI Trabalho

A obra escolhida foi :

                                                        Jesús Rafael Soto , Répétition optique Nº 2 , 1951

                1)Estudo de padrão

       

                                   

              Após o reconhecimento do padrão foi necessário reconhecer as formas envolvidas e 

               suas relações para passar pro programa.

                Depois criar uma disposição igual à obra.

               2)Criação do código

                  a)Criar função do padrão.

                  b)Criar um método de repetição para preenchimento de qualquer tamanho de tela.

float lar = 30;            //largura desejada

float alt = lar * 2;      //altura em relação com largura

float x = 100;            //posição x do primeiro padrão a ser criado

float y = 100;            //posição y do primeiro padrão a ser criado

float xAt = x;

float yAt = y;

int cont = 0;

int cont2 = 1;

void setup()

{

  size(800,600);

  noStroke();

}

void padrao(float l , float h,float x ,float y)             //padrão

{

  fill(255);

  quad(x , y , x+l , y , x+l , y+h , x , y+h);

  fill(255,195,85);

  quad(x , y , x+ l/2  ,y , x+l/2 , y + h/2 , x , y+h/2);

  fill(44,37,39);

  quad(x+l/2 , y + h/2 , x+l , y+h/2 , x+l , y+h , x+l/2 , y+h);

  triangle(x , y , x + l/4 , y , x , y + h/2);

  triangle(x + l/4 , y + h/2 , x + l/2 , y + h/2 , x + l/2 , y + h);

  fill(255);

  triangle(x + 3*l/4 , y+h/2, x+l , y+h/2 , x + l , y + h);

}

void draw()

{

  

  if((xAt > -lar) && (cont == 0))           //criação da linha para a esquerda

  {

  padrao(lar,alt,xAt,yAt);

  xAt = xAt - lar;

  }

  else

  {

    if(cont == 0)

    {

    cont = 1;

    xAt = x;

    }

  }

  if((xAt < width) && (cont == 1))   //criação da linha para a direita

  {

    padrao(lar,alt,xAt,yAt);

    xAt = xAt + lar;

  }

  else

  {

    if (cont == 1)      //alteração de colunas

    {

      cont = 0;

      yAt = yAt + cont2 * alt;

      xAt = x;

    }

    else

    {

      if(yAt > height)  //inversão da criação de colunas

      {

        yAt = y;

        xAt = x;

        yAt = yAt -  alt;

        cont = 0;

        cont2 = -cont2;

        

      }

    }

  }

}

               

          

         Resultado:

                          

                 3)Aplicação

                 Estudo de linhas para criação de aplicações:

                     

                 3.1)  Retirando elementos conseguiu-se os seguintes resultados:

                 

                                 variação 1

                   

                              variação 2

  fill(255);

  triangle(x , y , x + l/3 , y + h/2 , x , y + h/2);

  triangle(x + l/3 , y , x + 2 * l/3 , y + h/2 , x + l/3 , y + h/2);

  fill(0); 

  triangle(x + l/3 , y+h/2, x+2*l/3 , y+h/2 , x + 2*l/3 , y + h);

  triangle(x + 2*l/3,y + h/2, x+l , y + h/2,x + l, y+h);

                                 

                  3.2)Utilização de cores randômicas criando texturas:

  quad(x , y , x+l , y , x+l , y+h , x , y+h);

  fill(random(0,255));

  quad(x , y , x+ l/2  ,y , x+l/2 , y + h/2 , x , y+h/2);

  fill(random(0,255));

  quad(x+l/2 , y + h/2 , x+l , y+h/2 , x+l , y+h , x+l/2 , y+h);

  triangle(x , y , x + l/4 , y , x , y + h/2);

  triangle(x + l/4 , y + h/2 , x + l/2 , y + h/2 , x + l/2 , y + h);

  fill(random(0,255));

  triangle(x + 3*l/4 , y+h/2, x+l , y+h/2 , x + l , y + h);

                 3.3) Inspiração em obra física de Jesús Soto:

float lar = 10;

float alt = lar * 20;

float x = 100;

float y = 100;

float xAt = x;

float yAt = y;

int cont = 0;

int cont2 = 1;

void setup()

{

  size(800,600);

  noStroke();

}

void padrao(float l , float h,float x ,float y)

{

  fill(0);

  quad(x , y , x+l , y , x+l , y+h , x , y+h);

  quad(x , y , x+ l/2  ,y , x+l/2 , y + h/2 , x , y+h/2);

  quad(x+l/2 , y + h/2 , x+l , y+h/2 , x+l , y+h , x+l/2 , y+h);

  fill(255);

  triangle(x , y , x + l/6 , y , x , y + h/2);

  triangle(x + l/6 , y + h/2 , x + l/2 , y + h/2 , x + l/2 , y + h);

  triangle(x + 3*l/4 , y+h/2, x+l , y+h/2 , x + l , y + h);

}

Referências :

                 

MAMI Atividade 11

Função é um objeto de trabalho valioso nas mãos de bons programadores.Pode ser muitas vezes não ser necessária para a funcionalidade do código,mas ele fica desorganizado e extremamente mais extenso.O programador que usa função economiza tempo de trabalho além de deixar seu código mais didático.Facilita a alteração, caso seja preciso, e a percepção de objetos dentro do programa.

   Um excelente exemplo para isso é o jogo Light-Bot que o jogador deve atribuir ao protagonista determinadas tarefas.Quando elas chegam a ficar repetitivas o jogo obriga o usuário a utilizar função e o que no começo seria estranho devido a saída da zona de conforto passa a ser bem mais prático e rápido.

Link do jogo:
http://www.clickjogos.com.br/Jogos-online/Puzzle/Light-Bot/

MAMI Atividade 10

   O pong se resumiu a união de todos os ensinamentos até agora com a adição de movimentação pelo teclado. A utilização de funções foi fundamental para resumir o código e não torna-lo tão repetitivo.

- Primeiro devia-se criar os elementos que seriam um círculo e dois retângulos.

- Estabelecer os pontos de colisão.

- Criar as regras de colisões e os movimentos dos elementos e o que cada causaria.

Obs: use as teclas UP e DOWN (para o retângulo esquerdo)  5 e 2 ( para o retângulo direito)

Código:

float ex = 160;
float ey = 120;
int xRec1 = 280;
int yRec1 = 80;
int xRec2 = 20;
int yRec2 = 80;
float vx = -0.7;
float vy = -0.5;
void setup()
{
  size(320,240);
  background(0);
  noStroke();


}
boolean Colisaoxa(float xp ,int x1 ,int x2)
{
  if (( xp >= x1) && (xp <= x2))
  {

    println("Dentroxa");
    return true;
  }
  else
  {
    println("Foraxa");
     return false;
  }
}
boolean Colisaoya(float yp ,int y1 ,int y2)
{
  if (( yp >= y1) && (yp <= y2))
  {

    println("Dentroya");
    return true;
  }
  else
  {
    println("Foraya");
     return false;
  }
}
boolean Colisaoxb(float xp ,int x1 ,int x2)
{
  if (( xp >= x1) && (xp <= x2))
  {

    println("Dentroxb");
    return true;
  }
  else
  {
    println("Foraxb");
     return false;
  }
}
boolean Colisaoyb(float yp ,int y1 ,int y2)
{
  if (( yp >= y1) && (yp <= y2))
  {

    println("Dentroyb");
    return true;
  }
  else
  {
    println("Forayb");
    return false;
  }
}

void draw()
{

  background(0);
  ellipse( ex , ey ,20,20);
                                                               
  rect(xRec1 , yRec1 , 20, 80);
  rect(xRec2 , yRec2 , 20 , 80);
 if( (Colisaoxa(ex ,  xRec1 - 10  ,xRec1 + 10)) && (Colisaoya(ey , yRec1  , yRec1 + 80)))
 {
 println("retorna");
 vx = -vx;


 }
  if ((Colisaoxb(ex , xRec2 +10 ,xRec2 + 30)) && (Colisaoyb(ey , yRec2 , yRec2 + 80)))
  {
   println("retorna");
   vx = -vx;
   vx = vx + 0.5 * vx;

 }
 if ((ey <= 10) || (ey >= (height - 10)))
{
 println("retorna");
 vy = -vy;
 vy = vy + 0.5 * vy;
}

ey = ey + vy;
ex = ex + vx;

}

void keyPressed()
{
   if((keyCode == UP) && (yRec2 >= 10))
  {
    yRec2 = yRec2 - 5;
 
  }
  if((keyCode == DOWN) && (yRec2 <= 150))
  {
    yRec2 = yRec2 + 5;
 
  }

  if((key == '5') && (yRec1 >= 10))
  {
    yRec1 = yRec1 - 5;
 
  }
  if((key == '2') && (yRec1 <= 150))
  {
    yRec1 = yRec1 + 5;
 
  }
}

MAMI Atividade 9

Primeiro precisa-se limitar até onde a bola chegará relacionando com o raio que está em constante mudança.Nesse limite invertemos as velocidades para ele ricochetear e adicionamos o aumento desejado.

Foi criado um limite para a alteração do raio da circunferência.

Código:

float xBola = 21;
float yBola = 300;
float Vx = 5;
float Vy = 5;
float R = 20;
float T = 0.1;
void setup()
{
  size(800,600);
  noStroke();
}

void draw()
{
  background(125);
  R = R + T;
  if ((xBola >= width - R) || (xBola <= R))
 {
   Vx = Vx + 0.01 * Vx;
   Vy = Vy + 0.01 * Vy;
   Vx = Vx * -1;
 }
 if ((yBola >= height - R) || (yBola <= R))
 {
   Vx = Vx + 0.01 * Vx;
   Vy = Vy + 0.01 * Vy;
   Vy = Vy * -1;
 }
 
  fill(0);
  ellipse(xBola,yBola,2*R,2*R);
 if((R <= 10) || (R >= 40))
 {
  T = -T;
 }


xBola = xBola + Vx;
yBola = yBola + Vy;
println(Vx,Vy);
}

Resultado:

MAMI Atividade 8

Para resolvermos o problema precisamos de usar o teorema de Pitágoras para saber a distância usamos então como demostrado abaixo:

Depois é só relacionar esses valores ao x,y do mouse com o x,y da circunferência.

Código:

float R1 = random(50,300);

float R2 = random(50,300);

float X1 = random(10,200);

float X2 = random(410,600);

float Y1 = random(100,500);

float Y2 = random(100,500);

void setup()

{

  size(800,600);

  noStroke();

}

void draw()

{

  if ( (mouseX - X1)*(mouseX - X1) + (mouseY - Y1)*(mouseY - Y1) <= (R1 * R1))

 {

  fill(75); 

 } 

 else

 {

   fill(0);

 }

  ellipse(X1,Y1,2*R1,2*R1);

  if ( (mouseX - X2)*(mouseX - X2) + (mouseY - Y2)*(mouseY - Y2) <= (R2 * R2))

 {

  fill(75); 

 } 

 else

 {

   fill(0);

 }

  ellipse(X2,Y2,2*R2,2*R2);

  println(mouseX,mouseY);

}

Resultado: