Olá pessoal, hoje vamos ver como da até para criar joguinhos simples com o Processing. Como ainda não estou muito expert no Processing, ele será bem simples,e seguindo os contextos físicos e matemáticos do movimento retilíneo uniforme e movimento retilíneo uniformemente variável. E com algumas coisinhas simples do Processing como o de clicar com o mouse vamos fazer com que a ideia de uma bolinha seguirá da parte de baixo da tela para cima usando os preceitos físicos descritos acima, e ele tem que atingir um retângulo que aparecerá aleatoriamente na tela.

Então o código fica mais ou menos assim como esta a baixo no botão:

float dy; //distancia em y
float t=0; //tempo inicial
float vyi=80; //velocidade inicial em y
float vyf; //velocidade final em y
float a=-9.8; // aceleração da gravidade
float largura; // largura da tela
float altura; // altura da tela
float dx; //distancia em x
float vx=60; //velocidade em x
int md; //modulo da distancia de y
int mt; //modulo do tempo
int mv; //modulo da velocidade inicial em y
int mvt; //modulo da velocidade final em y
float x; // eixo x onde o mouse clicará
float y; // y inicial da bola
float xr; // valor random de x do alvo
float yr; // valor random de y do alvo


  //função movimento retilineo uniformemente variavel
  void moveBolaMRUV(){
    dy=vyi*t + a*(t*t)/2;
    vyf=vyi+a*t;
    ellipse(x + dx,y-dy,20,20);
  }
  void mouseClicked(){
    x = mouseX;
    y = height;
    dy = 0;
    dx = 0;
    t = 0;
    
  }
  // função movimento retilineo uniforme
  void moveBolaMRU(){
    dx=vx*t;    
  }


  void setup(){
    frameRate(10);
    size(600,600);
    largura = width;
    altura = (height);
    xr = random(0, width);
    yr = random(0, height);
  }
  
  void draw(){
    background(125);

    moveBolaMRUV();
    moveBolaMRU();
    t=t+0.1;
    rect(xr, yr, 65, 65);
    md = int(dy);
    mt = int(t);
    mv = int(vyi);
    mvt = int(vyf);
    text("DISTANCIA     :"+md,40,50);
    text("TEMPO           :"+ mt,40,80);
    text("VELOCIDADE INST.:"+ mvt,40,110);
    }

Como ainda estou em estudos da linguagem do Processing, eu não sei como por na sua sintaxe a codificação para colisões, então em uma próximo encontro teremos esse joguinho com as suas correções devidas.

Olá pessoal, hoje vamos fazer um atividade simples que envolve matemática básica, e claro que a física básica. Vamos trabalhar com o Processing novamente, mas criando um simulador de movimento retilíneo uniforme, o famoso MRU. Para isso vamos pensar matematicamente como funciona a equação do MRU:

Onde o 'D' é a distância o 'V' é a velocidade e o 'T' é o tempo. E com essa função vamos criar um arquivo no Processing com uma função com essa ideia matemática, porem escrita de maneira que o software compreenda. O código esta descrito logo abaixo no botão

float d; // distância
float t=0; // tempo q inicia no ponto 0
float v=10; // velocidade constante de 10
int mt; // modulo do tempo
int md; // modulo da distância

  void setup(){
    frameRate(10);
    size(600,600);
  }
  //função do movimento retilineo uniforme sendo criada
  void moveBolaMRU(){
    d=v*t;
    ellipse(d,150,20,20);
  
  }
  //função de grade criada para quadro de telas 600x600
  void exibeGrade(){
    for(int i=0;i<24;i++){
      line(i*50,0,i*50,1200);
      line(0,i*50,1200,i*50);
      }
    }
     
  void draw(){
    background(125);
    exibeGrade();
    moveBolaMRU();
    mt = int(t);
    md = int(d);
    t=t+0.1;
    text("Tempo: "+ mt + " s", 40, 60); //mensagem de tempo exibido na tela
    text("Distância: "+ md + " m", 40, 80); // mensagem de distância exibido na tela
  }

O resultado obtido é para ser exatamente assim:

  Olá pessoal, hoje vamos brincar um pouco com o Processing utilizando alguns exemplos que o próprio site deles fornece, e mudar um pouco o código pra ver o que acontece. Eu peguei uma que quebra a imagem que você colocar em pedaços quebrando a imagem conforme a posição do mouse. Esse exemplo usa o efeito de 3D. Então siga o código que esta no botão logo abaixo.

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows;   // Number of columns and rows in our system

void setup() {
  size(640, 360, P3D); 
  img = loadImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVN9elUNjLMUOr4SWMl-J2cLojOvhWauvJeyyTp92DmbxseqdU7iYZgcTThgCyVRVeNprgc7YOqCnQJWRfCHggiYdP-DuJmL5u4q_7xwLRRY0sEkcK-K7EtUPYGm8aGJ_BO0-I95KHQkiw/s1600/logo1.png");  // Load the image  
  columns = img.width / cellsize;  // Calculate # of columns
  rows = img.height / cellsize;  // Calculate # of rows
}

void draw() {
  background(0);
  // Begin loop for columns
  for ( int i = 0; i < columns; i++) {
    // Begin loop for rows
    for ( int j = 0; j < rows; j++) {
      int x = i*cellsize + cellsize/2;  // x position
      int y = j*cellsize + cellsize/2;  // y position
      int loc = x + y*img.width;  // Pixel array location
      color c = img.pixels[loc];  // Grab the color
      // Calculate a z position as a function of mouseX and pixel brightness
      float z = (mouseX / float(width)) * brightness(img.pixels[loc]) - 20.0;
      // Translate to the location, set fill and stroke, and draw the rect
      pushMatrix();
      translate(x + 200, y + 100, z);
      fill(c, 204);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, cellsize, cellsize);
      popMatrix();
    }
  }
}

Então Como foi usado o código dessa maneira eu modifiquei um pouquinho e fiz algumas alterações simples da posição do desenho, só para ver como se sairia o resultado. Então para ver o resultado ponha o seguinte código, logo abaixo, no seu Processing e mande carregar, e veja o resultado.

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows;   // Number of columns and rows in our system

void setup() {
  size(640, 360, P3D); 
  img = loadImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVN9elUNjLMUOr4SWMl-J2cLojOvhWauvJeyyTp92DmbxseqdU7iYZgcTThgCyVRVeNprgc7YOqCnQJWRfCHggiYdP-DuJmL5u4q_7xwLRRY0sEkcK-K7EtUPYGm8aGJ_BO0-I95KHQkiw/s1600/logo1.png");  // Load the image  
  columns = img.width / cellsize;  // Calculate # of columns
  rows = img.height / cellsize;  // Calculate # of rows
}

void draw() {
  background(0);
  // Begin loop for columns
  for ( int i = 0; i < columns; i++) {
    // Begin loop for rows
    for ( int j = 0; j < rows; j++) {
      int x = i*cellsize + cellsize/2;  // x position
      int y = j*cellsize + cellsize/2;  // y position
      int loc = x + y*img.width;  // Pixel array location
      color c = img.pixels[loc];  // Grab the color
      // Calculate a z position as a function of mouseX and pixel brightness
      float z = (mouseX / float(width)) * brightness(img.pixels[loc]) - 20.0;
      // Translate to the location, set fill and stroke, and draw the rect
      pushMatrix();
      translate(z + 200, y + 150, x+100);
      fill(c, 204);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, cellsize, cellsize);
      popMatrix();
    }
  }
}

   Olá pessoal, hoje vamos falar do querido "Processing", um open source (linguagem aberta) de IDE (Ambiente de Desenvolvimento Integrado, em tradução livre). Mas para começarmos a falar dele, vamos mostrar um pequeno documentário para tentar esclarecer mais as ideias.

   Agora que viram ao vídeo, vamos falar um pouco do "Processing", bem como no vídeo mostra, ele foi criado para servir como uma ferramentas de desenhos para um designer programar a maquina. Então como o computador é meio "burrinho", temos que explicar direitinho passo-a-passo o que queremos que ele faça. Então para pouparmos de decorar a linguagem de maquina feito louco, coisa que os designer não fazem muita questão, não que seja algo importante, criaram esse IDE que é mais próximo da linguagem humana. E com ela podemos fazer muita coisa, mas não é tão fácil como no vídeo mostra. Mas logico que podemos fazer sim.

   Esse IDE foi criado com a finalidade de ser aberto, para que qualquer designer possa criar e/ou desenvolver suas próprias invenções e melhorias também para o sistema. Ele foi pensado e projetado com essa finalidade. Dessa forma um designer poderá também programar sem ser um super programador, basta ele ter noções de lógicas matemática que já será uma grande para ele.

   Continuando um pouco mais sobre o estilo de jogo point-and-click, existe uma serie na web bastante conhecida já o "submachine escape" pelo qual você deve fugir de um subsidio muito louco, que mais parece um labirinto, cheio de puzzles para resolver. Esse jogo é um grande jogo de point-and-click de tantos outros perdidos pela internet. Mas esse é viciante.

submachine escape 1

   Visto que o vício do jogo é alto recriei de maneira curta e bem simplificada do jogo. para jogar basta clicar na imagem que esta logo abaixo:

   Vamos falar sobre uma modalidade de jogo conhecida, não tão conhecida hoje chamada de "point-and-click".

   Agora porque o nome ser esse. Vou lhe explicar agora a modalidade do jogo como o nome já sugere é apontar e clicar. Você aponta com o mouse e clica para o objeto e interage com o jogo. Geralmente são bem simples de se jogar, o que o torna viciante.

   Veja agora um pequeno exemplo de jogo logo abaixo que existe para snes nessa modalidade:

   Essa serie faz tanto sucesso que existem alguns designers que comumente fazem fanarts do game, como essa aqui abaixo:

   Atualmente existe um mais sofisticado baseado na famosa serie de zumbis o "the walking dead" que saiu para varias plataformas atuais. Veja logo abaixo:

   E vendo a volta dessa modalidade de jogo, temos uma versão feita em flash usando alguns botões (usei um botão baseado no flashbuttons.com um site ate bom porem cuidado para não fazer um botão muito exagerado, dependendo da ocasião não será uma boa escolha), sendo apenas uma homenagem, bem curtinho. Clique na imagem abaixo para desfrutar:

   Caros leitores, existe um pequeno instrumento musical, bastante peculiar chamado teremin. Aí você se pergunta "tere... o que?" . Calma vou lhes explicar de uma maneira rápida e simples.

   Teremin é um dos primeiros instrumentos musicais completamente eletrônicos, controlado sem qualquer contato físico pelo músico. O nome foi dado em homenagem ao físico russo que o inventou o Léon Theremin em 1928. O instrumento é controlado por duas antenas de metal, que percebem as mãos do musico e controlam ociladores de frequência com uma das mãos, e com a outra a amplitude, e os sinais são enviados para o autofalante.

Este é o teremin.

  Para saber um pouquinho mais dele veja esse pequeno vídeo abaixo que explica como ele funciona:

   O teremin não é um instrumento tão fácil de se utilizar porem pode ser bastante interessante quando sabe usar. Tem algumas bandas que já utilizaram/utilizam o instrumento uma delas é o pato fu confira um pouco de um videoclipe deles com o instrumento:

   Existem muitas pessoas que usam ele para fazer musicas aleatorias ate de jogo veja mais um exemplo:

   Agora que você leitor já entende mais sobre o instrumento, no dia 25/07/13 ocorreu uma exposição na UFC (Universidade Federal do Ceará) chamada de "video +" onde teve um pequeno teremin feito com arduíno. Agora você fica se perguntando como fazer um?

   Utilizando alguns componentes como um sensor de ultrassom, um de luminosidade  e um buzzer, pode-se criar um pequeno teremin, e nele é capaz de tocar que nem o teremin tradicional.

Teremin apresentado na video 

  

sensor de luminosidade 

 

     buzzer 

sensor de ultrassom

   Depois dessas imagens vamos ver como ficou o resultado do experimento utilizando-se do arduíno para reproduzir um teremin:

   Hoje vamos brincar com animações, e sempre é bom vermos algumas animações para ganhar inspiração. Por mais que fique extremamente parecido com o original, ele sempre tem suas diferenças, pois a maquina reproduz o que você fez, então sempre vai ser diferente pelo fato de cada designer faz de sua maneira.

   Eu tive a brilhante idéia de reproduzir uma das várias animações do Rogério Doki. Com ela fica mais simples e prático usar apenas o flash para desenhar todos os detalhes e a animação em si.
   Iniciamos fazendo os olhos, cujo é o mais simples e prático. Desenhando em um "movieclip" faça o olho fechado, e logo apos, na linha do tempo em alguns frames depois (fica ao seu dispor quanto ao tempo que vai durar para ele piscar os olhos) faça o olho fechado. Depois ainda coloque mais alguns para ele ficar dando algumas piscadas de olho. E no final deiche mais alguns frames para dar um tempo a mais para ele picar novamente (caso contrario ocorrerá uma loucura com os olhos, ele ficará piscando o olho direto sem parar).

   Logo mais a frente faça outro "movieclip" para a cabeça, nesse você fará todo o desenho da cabeça, quando terminar o desenho da cabeça, pegue toda a cabeça dentro da "timeline" do "movieclip" e crie outro "movieclip" e nesse outro não mecha nada, apenas coloque os olhos. No Seu "movieclip" em que transformou em outro "movieclip", ou seja aonde você criou todo o desenho da cabeça, mecha na timeline dele fazendo a cabeça balançar um pouco, e para parecer algo mais interessante use o "ease" para dar atraso no movimento da cabeça.

   E analogamente faça o mesmo com o rabo. Com todas essas partes prontas crie outro "movieclip" para o corpo, e quando terminar o corpo, coloque a cabeça e o rabo nesse "movieclip".

   Agora você terá já todo o porco pronto. Falta apenas criar o "movieclip" da bolha, que usaremos em forma de elipse e sem preenchimento, e depois cria uma imagem em "movieclip" e nesse você usa o efeito de "blur" em pequenos niveis e o coloque em posições estratégicas dando uma impressão da refração da luz que contem em bolhas (bastam duas, uma do tamanho da metade da bolha, e outra bem pequena no canto superior).

   Agora é com vocês colocarem os objetos na timeline, e criar a animação do jeito que quiserem, o fundo fica a criterio de vocês também.

 Agora Veja como ficou o resultado final clicando na imagem abaixo:

    Em uma época dessas onde o nosso queridinho pássaro azul perde espaço para um 'f' também em azul, decidi fazer uma pequena homenagem com o queridinho Larry. Isso mesmo o nome do nosso passarinho é Larry.

    Vamos aqui explicar um pouco a respeito da nossa ave. Esse nome surgiu devido a um grande ex-jogador de basketball do Boston Celtics, o Larry Bird, time da cidade natal do co-fundador do microblog. Então devido a circunstancia do sobrenome do ex-jogador ser "Bird" eles homenagearam-no colocando o seu nome na ave.

    A ave já sofreu alguns redesenhos porem hoje ele tem uma imagem bem interessante. Basta olharmos o antigo para o atual desenho da ave.

logo antiga

logo atual

     Então vamos falar sobre a homenagem, e para isso eu entrei em um site de um animador muito bom por sinal que utiliza-se de flash para animar suas obras. Para ver o site clique aqui

    Eu vi uma animação cujo havia uma ave que voava pelos céus e passava por cidades morros, entre outros. Com isso eu vetorizei algumas das imagens dele pelo flash ou pelo illustrator, logo apos comecei a anima-lo no flash. E a obra você pode ver clicando na imagem logo abaixo:

     Para fazer download do editavel basta clicar aqui

   Bem hoje vamos fazer uma pequena animação com uma musica infantil bastante famosa chamada "meu pintinho amarelinho". 

   Essa animação sera feita toda em flash e photoshop, mas também podemos utilizar de illustrator, pois o mesmo é ótimo para vetorização. Começamos fazendo o fundo, depois do fundo vamos criar a ave, e na ave faremos parte a parte para pôr movimentação no mesmo.

     Mais a frente faremos os detalhes.

O resultado encontra-se logo abaixo:

     Agora vamos fazer uma animação em flash com espaçonave, porem já temos um script pré-definido, e vamos ter que segui-lo. Segue o roteiro abaixo o nosso famoso stroyboard.

    Como se dará a animação é por conta de você caro leitor, mas tem que seguir o roteiro, com os detalhes de cenário e deve existir sonoplastia para as ações. 

   Eu irei fazer a animação com pixel art, e essa animação cada parte será feita com photoshop, desde a nave, a cidade e o céu. Depois de feito, transfiro para o flash e os transformo em "movieclip" e coloco-os na biblioteca do flash.

     Depois de colocado, o resto é animar o video. A sonoplastia capturei o audio por videos do "youtube", mas você pode pegar de qualquer outro lugar, isso cabe ao critério de cada um.

      O resultado você confere logo abaixo:

    Bem pessoal hoje vamos fazer uma animação utilizando uma técnica muito famosa chamada mickeymousing.

      Agora você se pergunta "o que raios é mickeymousing?", vamos fazer uma explicação bem simples. Mickeymousing é uma técnica de composição para a imagem que se originou, como o nome sugere, em desenhos animados, mais especificamente nas produções de estúdios americanos do final dos anos 1920, utilizando o som como guia da animação.

        Vamos utilizar dessa técnica para criar uma abertura de três porquinhos, com um áudio da narrativa e uma imagem de uns desenhos, como mostra a imagem abaixo:

       Com essa imagem, vamos recorta-las no photoshop, parecendo como se fossem recortes de criança, deixando um pouco de espaçamento branco nas bordas. Assim a animação vai ficar com cara meio de stopmotion.

             Logo apos isso, vamos pegar o áudio que vai se combinar com as imagens fazendo a animação. Som da animação.

          Com todas as ferramentas você já tem "a faca e o queijo na mão" e já pode fazer a animação com o flash e depois veja o resultado.      

              Então agora vamos ver como ficou o resultado final dessa animação com o vídeo logo abaixo: