Pegando exemplos do Processing

  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();
    }
  }
}