hi everyone,

i am super new to processing and have just started getting the hang of it.
i have been playing around with how to make it seem like you are wiping away one layer to reveal the one below it.
this is one example i have come up with

http://itp.nyu.edu/~lg1285/ICM/final/

i am playing with the alpha and believe i am actually painting the loaded image of the wall over the top layer.

i am glad i am making some headway but,

my goal was to use the mouse input either dragged or moved to jostle the pixels so they fall away to expose the under layer.

right now, this is a little too smooth and would really like to make it seem like i was "chipping" or "peeling" away at a layer.

is there any way to read the pixels of the top layer and make them fall away to show a layer underneath?

thank you and forgive me for not being schooled enough to ask a more specific syntax question .

thank you PhiLho,

i will play with mask a bit,

what do you mean by chip patterns?
unfortunately i have no idea on how to rotate by making noise on the border of the circle.

thanks again for the reply... i will try to post any progress. i need to finish this soon, so i will be plugging away.

wow, thank you so much PhiLho, really appreciate it.
o.k., so from the rotating suggestion, i went onto mapping my 2d image to 3d and have caused some pixels to fall.  (which i was very excited about : ) !)
when you click the mouse, the pixels fall away (watch carefully)
they only fall away once though.


http://itp.nyu.edu/~lg1285/ICM/final2/

now, my wish is to be able to have a history of where my mouse has been. to  make a path of dropped pixels to get to the image underneath.

the suggestion i have gotten so far was to create a 2d array to hold my pixels and a boolean array..... i have started declaring them (haven't initialized them yet) and wrote a couple "if" statements.
the code i am stuck on is commented out between the rows of ======


questions :
-where do i initialize these arrays? my code is getting complex and i still can't swing elegant/simplified code (still don't quite understand classes)
- are width and height what i want to be passing into my arrays? or would it be the number of pixels, such as the dimensions?
- anyone know why i lost some of the opacity of my images?

thanks!

not sure why i can't load my a new applet so here is the code with the commented out parts that i'm stuck on.


here is the code:

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

=============================
/*

int[][] pixelLoc = new int [width][height];
boolean[] beenTouched = new boolean [width,height];

*/

=============================

void setup() {

 size(600, 450, P3D);

 img1 = loadImage("grey.4.jpg");
 img = loadImage("layer.2.jpg");  // Load the image

   columns = img.width / cellsize;  // Calculate # of columns
 rows = img.height / cellsize;  // Calculate # of rows
}
int speed = 0;
int gravity = 1;

void draw() {

 background(img1);


 int mx = mouseX;
 int my = mouseY;

 // 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
     float distance = dist(x,y,mouseX,mouseY);
     float z = 0;


     if (distance < 10  && mousePressed == true) {
       y = y + speed;
       speed = speed + gravity;

     }

==========================
     /*     if (distance < 10) {
     
     
      beenTouched[i][j]= true;
     
     
      }
      if (y > height) {
      y = 0;
      }
     
      */

=========================
     // Translate to the location, set fill and stroke, and draw the rect
     pushMatrix();
     translate(x, y, z);
     fill(c, 204);
     noStroke();
     rectMode(CENTER);
     rect(0, 0, cellsize, cellsize);
     popMatrix();
   }



 }

 updatePixels();
}

I see (at least, not tested) two issues:
- you use pixels[] array without doing a loadPixels() call;
- the test

if(distance <= 10 && mousePressed == true)
{
 wasTouched[i*j] = true;

 if(wasTouched[i*j] == true)
 {
   y = y + speed;
   speed = speed + gravity;
 }

is fishy: no need to test the boolean just after having tested it. I think you want to put a closing brace just after = true and test the boolean even if mouse isn't pressed.
BTW, I am among those thinking there is no need for == true or == false (or !=) because booleans are, by definition, self-sufficient in tests.