Image Expansion

For this week’s assignment, I decided to explore image deterioration and I coupled that with the topic of rain forest destruction. A slightly heavier topic than I’ve been exploring in the last couple of weeks. 

 The original image of a healthy forest is easily exploded and destroyed by any movement of the mouse; the user must take time and focus to line the curser back to 0,0 to put the whole image back together again. Below the exploded image is another image of the forest post destruction. The user can blend the two images by getting the mouse close to 0,0. 

Code:

int R, G, B, A; // you must have these global varables to use the PxPGetPixel()
PImage ourImage;
PImage ourImage2;
void setup() {
size(1500, 800);
frameRate(120);
ourImage= loadImage(“https://images.takeshape.io/852126ce-462c-40d9-ae71-1a2c96e82d8f/dev/2925f6d3-c6c3-42e5-89d9-8cf91ed3d28f/Kluet-peat-swamp-forest%2C-Leuser-Ecosystem.-Photo-by-Paul-Hilton%2C-RAN.jpg?auto=compress%2Cformat”);
ourImage.resize (width, height);
ourImage.loadPixels(); // load the pixels array of the image
ourImage2 =loadImage(“https://media.wired.com/photos/59372bbfd80dd005b42b626f/master/w_2560%2Cc_limit/AP4997094644081.jpg”);
ourImage2.resize (width, height);
ourImage2.loadPixels();
}

void draw() {
background (139,0,0);
image(ourImage2,0,0);
loadPixels(); // load the pixels array of the window
for (int x = 0; x<width; x++) {
for (int y = 0; y<height; y++) {
PxPGetPixel(x, y, ourImage.pixels, width); // get the RGB of our pixel and place in RGB globals
int destinationX = x*mouseX;
int destinationY = y*mouseY;

destinationX= constrain(destinationX, 0, width-1);
destinationY= constrain(destinationY, 0, height-1);

PxPSetPixel(destinationX, destinationY, R, G, B, 255, pixels, width); // sets the R,G,B values to the window
}
}
updatePixels(); // must call updatePixels oce were done messing with pixels[]
println (frameRate);
}

// our function for getting color components , it requires that you have global variables
// R,G,B (not elegant but the simples way to go, see the example PxP methods in object for
// a more elegant solution

void PxPGetPixel(int x, int y, int[] pixelArray, int pixelsWidth) {
int thisPixel=pixelArray[x+y*pixelsWidth]; // getting the colors as an int from the pixels[]
A = (thisPixel >> 24) & 0xFF; // we need to shift and mask to get each component alone
R = (thisPixel >> 16) & 0xFF; // this is faster than calling red(), green() , blue()
G = (thisPixel >> 8) & 0xFF;
B = thisPixel & 0xFF;
}

//our function for setting color components RGB into the pixels[] , we need to efine the XY of where
// to set the pixel, the RGB values we want and the pixels[] array we want to use and it’s width

void PxPSetPixel(int x, int y, int r, int g, int b, int a, int[] pixelArray, int pixelsWidth) {
a =(a << 24);
r = r << 16; // We are packing all 4 composents into one int
g = g << 8; // so we need to shift them to their places
color argb = a | r | g | b; // binary “or” operation adds them all into one int
pixelArray[x+y*pixelsWidth]= argb; // finaly we set the int with te colors into the pixels[]
}