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.