Botão no processing? E existe uma função disso? Bem vamos criar uma função só pra animar um botão simples circular. Então ele vai ter na tela de desenho um botão.
Criaremos os 3 principais estados do botão o UP, OVER e DOWN. Com um calculo de distancia em duas dimensões, sabemos se o cursor do mouse esta dentro ou fora do nosso botão. Para o resultado estar dentro de uma unica equação vamos usar o produto notável da diferença.

 Então vamos começar a programar no processing. Para cada estado do nosso botão eu atribui uma cor para ele, assim sabemos em que estado ele se encontra. E finalmente, o código ficará assim como está logo abaixo:

int MLargura;
int MAltura;
int diametro;
float x;

//função para determinar a distancia entre dois pontos (usando produtos notaveis)

float distancia2D(int X1,int Y1, int X2,int Y2){
  float R;
  R = sqrt((X1*X1) -(2*X1*X2) + (X2*X2) + (Y1*Y1) - (2*Y1*Y2) + (Y2*Y2));
  return R;
}

void setup(){
size(600,600);
MLargura = width/2;
MAltura = height/2;
diametro = 100;
}



void draw(){
 x=(distancia2D(MLargura,MAltura,mouseX,mouseY));
 if (x > diametro/2) {    // status UP do botão
      fill(246,172,95);
      noStroke();
      ellipse(MLargura,MAltura,diametro,diametro);
      } else if(mousePressed == true){ // status DOWN do botão       
        fill(183,245,102);
        ellipse(MLargura,MAltura,diametro,diametro);
        }  else { // status OVER do botão
           fill(102,245,206);
           ellipse(MLargura,MAltura,100,100);
           }           
}

Hoje vamos fazer não apenas um simbolo Yin-Yang, mas vamos a loucura fazendo 100 aparecendo em uma tela, lotando a tela.

Começando com o processing.
Vamos fazer o seguinte. Criaremos uma função para desenhar ele, utilizando um único parâmetro para todos os raios das circunferências que serão 5 ao todo, e um arco. Fica assim a função:

void yinYang(float r,float x,float y){       // r é o raio dos circlos menores, x e y as coordenadas do centro da figura.
  fill(255);
  ellipse(x,y,(r*5)*2,(r*5)*2);                 // circulo branco grande
  fill(0);
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);         // Meio circulo preto, metade de cima
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo preto de raio 2,5 x raio do circulo menor
  fill(255);
  noStroke();
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo branco de raio 2,5 x raio do circulo menor
  ellipse(x+(2.5*r),y,r*2,r*2);                // circulo branco de raio r, é o circulo menor
  fill(0);
  ellipse(x-(2.5*r),y,r*2,r*2);                // circulo preto de raio r, é o circulo menor
}

Depois de fazer essa função, faremos ela aparecer 100 vezes, como ela aparecerá apenas as 100 vezes, iremos por tudo no "setup()". E o codigo se finalizará assim:

float r;           // raio da menor ellipse
float x;           // coordenada x do centro da ellipse grande
float y;           // coordenada y do centro da ellipse grande 
float altura;     // altura da janela
float largura;   // altura da largura 


void yinYang(float r,float x,float y){                // r é o raio dos circlos menores, x e y as coordenadas do centro da figura.
  fill(255);
  ellipse(x,y,(r*5)*2,(r*5)*2);                 // circulo branco grande
  fill(0);
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);         // Meio circulo preto, metade de cima
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo preto de raio 2,5 x raio do circulo menor
  fill(255);
  noStroke();
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo branco de raio 2,5 x raio do circulo menor
  ellipse(x+(2.5*r),y,r*2,r*2);                // circulo branco de raio r, é o circulo menor
  fill(0);
  ellipse(x-(2.5*r),y,r*2,r*2);                // circulo preto de raio r, é o circulo menor
}
 
void setup(){
size(1000,600);   
largura = width;
altura = height;
  
  for (int i = 0; i < 100; i++){
    yinYang(random(5,20),random(largura),random(altura));
    }
}

O resultado em imagem é algo próximo disso.

Olá pessoal, hoje vamos brincar um pouco de processing, vamos criar um belo jardim na sua tela. Bem é claro que o resultado não será esse da foto, ela é apenas ilustrativa.

Pois bem vamos por partes:
Da maneira que eu desejo fazer (claro que existem varias maneiras de se desenhar uma flor, e varias maneiras de se desenhar no processing), eu preciso desenhar alguns círculos, representando as pétalas da flor e o seu centro. Para facilitar fazemos dentro de uma função, e para nossa facilidade, fazemos a flor em outra função variando a cor do centro com as petalas.
O código ficará dessa forma a seguir:

int altura;
int largura;
void setup (){
size(800,600);
frameRate(5);  //diminui o framerate para 5FPS
altura = height;
largura = width;
}

 void circulo(float x,float y, float r){ 
     ellipse(x,y,r*2,r*2);
}


void flor(float x, float y, float r){ 
  fill(random(255),random(255),random(255));  // cor do centro da flor
  circulo(x,y,r);
  fill(random(255),random(255),random(255));  // cor das pétalas
  circulo(x+(2*r)*0.7,y+(2*r)*0.7,r);
  circulo(x-(2*r)*0.7,y-(2*r)*0.7,r);
  circulo(x-(2*r)*0.7,y+(2*r)*0.7,r);
  circulo(x+(2*r)*0.7,y-(2*r)*0.7,r);
}

void draw(){
  flor(random(largura),random(altura),8);
}

 Clique no botão para ver.

Arcade do Pong

Pong, um dos jogos mais nostálgicos de todos os tempos. Mas vocês já pararam para pensar como foi pra fazer essa faceta? Pois bem, vamos contar um pouco da história da criação do game, sendo o primeiro arcade do mundo, o inicio de uma nova industria milionária. 

Com apenas um pequeno aparelho movido a moedas dentro de um bar, a Atari iniciou sua ascensão com um jogo bem simples feito com o gênio chamado Ralph Baer, desenvolveu toda a logica do jogo, que consistia simplesmente de duas barrinhas laterais(como se fossem as raquetes de um ping-pong) que subiam e desciam na tela controladas por um botão no arcade, uma bolinha (era um quadrado na realidade, mas representa uma bola), uns tracejados no meio da tela, e um contador em cima. Ganhava pontos quem fizesse uma especie de gol, o que foi uma febre nos anos 70. 

O jogo Pong de 1972

Ele usou os circuitos da placa para criar a logica. Colocando o sistema de porta aberta e fechada como 0 e 1. Assim foi acionando para a bolinha ganhar velocidade conforme ele vai batendo na barra(apesar que isso foi um defeito que ele criou e virou como forma de dificultar o jogo), também a barra não chegar no máximo da tela(ele não conseguia fazer ela chegar de fato e usou isso ao seu favor como uma forma a mais de desafio) Então depois de muito sacrifício, ele consegue montar o primeiro de que seriam muitos. Assim foi a história do pong de forma resumida.

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: