In-Class Example

I was trying to work on this example:

  • Take an image and draw it with rectangles with the proper colors
    • Make those rects explode along the Z-axis based on the brightness of each pixel ( you need to set P3D in the size statement at the beginning of the sketch, i.e. size(512,512,P3D) )
    • Make it interactive with the mouse, the further you move the mouse in one direction the more it explodes, or goes back to it’s original position.
Here’s an attempt:

And here’s a little “bleeding effect” I made by tweaking the explode3d example:

 

Here’s the code:

PImage source;
int increment=10;
void setup() {
  size(500, 402);
  source = loadImage("godiva.jpg");
  noStroke();
}

void draw() {
  background(0);
  source.loadPixels();
  for (int y=0; y<height; y+=increment) {
    for (int x=0; x<width; x+=increment) {
      int loc = x+(y*width);
      color pix=source.pixels[loc];
      float dims=brightness(pix);
      dims=increment*(dims/205);
      fill(pix);
      rect(x,y,dims,dims);
    }
  }
  source.updatePixels();
  increment=(int)map(mouseX,0,width,5, 20);
}
PImage source;
int cellSize=2;
int columns, rows;
int inrement=10;
//int mouseX= 0;
//int mouseY= 0;
//boolean makeBW = true;
void setup() {
  size(500, 402, P3D);
  source = loadImage("godiva.jpg");
  noStroke();
  columns=width/cellSize;
  rows=height/cellSize;
}

void draw() {
  background(0);
  source.loadPixels();
  for (int i=0; i<columns; i++) {
    for (int j=0; j<rows; j++) {
      int x= i*cellSize+cellSize/2;
      int y= j*cellSize+cellSize/2;
      int loc = x+(y*width);
      color pix=source.pixels[loc];
      //float z=map(brightness(pix), 0, 255, 0, mouseX);
      pushMatrix();
      //translate(x,y,z);
      fill(pix);
      rectMode(CENTER);
      float dims=brightness(pix);
      dims=increment*(dims/255);
      rect(x,  y,dims,dims);
      popMatrix();
    }
  }
  source.updatePixels();
   increment=(int)map(mouseX,0,width,5,50);
}

  //void mousePressed(){
  
  //  for (int i =0; i<columns.length();i++){
    
  //   pixels[i].mouseX = random(-5,5);
  //   pixels[i].mouseY = random(-5,5);

  //  }
  //}

 

 

Leave a Reply