Week 5: Image Manipulation

For this week’s assignment, I was not sure about what I wanted to accomplish or work on. Therefore, I just searched online for some image manipulation examples and tried to recreate some of the ones that I thought was interesting or cool, or in this case makes me go “wow”. I stumbled upon this video that demonstrated changing the pixels of an original image in whatever way the person wanted, and that made me go “wow”, so I decided to try to recreate it.

Not only did I learn how to manipulate with the colors of each pixel, but I also learned a tiny tip from the video of how to make a “replica” or “copy” of the original image in order to guarantee that the original image is going to be the way it is while tampering with the replica whatever way we wanted to.

I mainly wanted to try out to two different image manipulation effects: The first one being able to manipulate the pixel colors and create an image filter. The second one being able to control the different grey scaled color gradients in accordance to my position values of my mouse.

Initially, of course, I had no idea how to create it from scratch. But, after looking through many videos and class examples, I learned different functions such as the brightness function from online and also several other techniques from the class. I mainly struggled with understanding the logic behind the codes (since like day one) due to my inexperience in coding, but I realized I am slowly understanding it, and emphasis on the “slow”.

PImage froggie;

void setup() {
  size(940, 412);
  //load image into sketch
  froggie= loadImage("colorful frog.jpg");
}

void draw() {
  displayfrog();
  changefrogcolor();
  changebwfrog();
  updatePixels();
}

void displayfrog() {
  //display image
  image(froggie, 0, 0);
  //loads the pixel data of the picture into the pixel [] array 
  loadPixels();
  //might not be necessary to load pixels, but better to load it. 
  froggie.loadPixels();
}

void changefrogcolor() {
  if (mousePressed) {
    for (int x=0; x<width; x++) {
      for (int y=0; y<height; y++) {
        int loc = x+y*width; 
        //this gets the pixels from the desert image and puts it on the screen at the same location, like making a replica of the original image to mess with the pixels 
        //gets the red part of the pixels 
        float r = red(froggie.pixels[loc]);
        //gets the green part of the pixels 
        float g = green(froggie.pixels[loc]);
        //gets the blue part of the pixels
        float b=blue(froggie.pixels[loc]);
        //places these new colors into the window 
        pushMatrix();
        //float factor=random(0,20);
        pixels[loc]=color(random(g), random(b), random(r));
        popMatrix();
      }
    }
  }
}
//the interaction between the black and white color pixels of the frog image
void changebwfrog() {
  if (keyPressed) {
    for (int x=0; x<width; x++) {
      for (int y=0; y<height; y++) {
        int loc = x+y*width;
        //extracts the brightness value from each color of each pixel of the image
        float b=brightness(froggie.pixels[loc]);
        //if the brightness of each pixel is greater than mouse X and less than mouse Y, it'll change a random grey scale color, or else it'll turn into black color
        if (b>mouseX && b<mouseY ) {
          //turns the color that are not greater than mouse X or less than mouse Y into a random grey scale 
          pixels[loc]=color(random(255));
        } else {
          //turns the pixels that are not greater than mouse X or less than mouse Y into black 
          pixels[loc]=color(0);
        }
      }
    }
  }
}