Egyptian King(s)

I am no different than any other Egyptian when it comes to loving the Liverpool forward Mohamed Salah who is known as “The Egyptian King”. This man has done so much for Egypt and the world and I am proud to say he is a role model for me. Nevertheless, another more original “Egyptian King” is very close to my heart, the timeless singer Mohamed Mounir. Seeing that they are both always smiling and have distinctive curly black hair, I decided to manipulate images of them as my assignment for this week.

The most difficult part for starting was actually choosing the images from the internet. I tried very high quality pictures but they had too many pixels in them. I tried very small ones but they were too tiny to be able to deal with them. When I got PNG images with transparent backgrounds the effects I had did not work as intended because of the limited space used. Even after finding proper pictures I had to find ones for both Salah and Mounir which are similar in posture, size, and quality. These are some images which I tried but did not work for me:

After several trials and errors, I decided to use these two images after I cropped them to be exactly the same size.

Then I decided to get the best out of some code  found on the Pixels tutorial page on Processing.org and the past geomerative class. I used the idea of getting the colors of the image and filling some rectangles with them as if they were large pixels. I then made on of the images the background (Mounir) which is hidden under the image on top (Salah) and tried the idea of making use of distance to significantly change the z-dimension of the squares as if they were flying away with the movement of the mouse as if the user was using a magnifying glass to have a look at the background. I made sure the picture returns to its original state as soon as the mouse leaves the plane so that the image doesn’t remain distorted afterwards.

This is the code I used for the interactive image manipulation.

//inspired from the pixels tutorial on teh processing website
 
PImage mounir;
PImage salah;       // The source image
int rectify = 4; // Dimensions of each cell in the grid
int cols, rows;   // Number of columns and rows in our system
int offset =255;

void setup() {
  size(460, 275, P3D); 
  salah  = loadImage("salah2.jpeg"); // Load the image
  mounir = loadImage("mounir.jpg");
  cols = width/rectify;             // Calculate # of columns
  rows = height/rectify;            // Calculate # of rows
}

void draw() {

  background(mounir);
  loadPixels();
  // Begin loop for columns
  for ( int i = 0; i < cols;i++) {
    // Begin loop for rows
    for ( int j = 0; j < rows;j++) {
      int xS = i*rectify + rectify/2; // x position
      int yS = j*rectify + rectify/2; // y position
      int locS = xS + yS*width;       // Pixel array location
      float r = red(salah.pixels[locS]);
      float g = green(salah.pixels[locS]);
      float b = blue(salah.pixels[locS]);
     // Grab the color
      //color cM = mounir.pixels[locS];
      offset -= mouseX/500;
      constrain(offset,0,255);
      // Calculate a z position as a function of mouseX and pixel brightness
      float zS =(8000/dist(mouseX, mouseY, xS, yS)) ;
      if (mouseX > 450 || mouseX < 10 || mouseY > 266 || mouseY < 10) {
          zS =30;
      }
      // Translate to the location, set fill and stroke, and draw the rect
      pushMatrix();
      translate(xS,yS, zS);
      tint(255, offset);
      fill(r, g, b);
      noStroke();
      rectMode(CENTER);
      rect(0,0,rectify,rectify);
      popMatrix();
    }
  }
  updatePixels();
}

The logic itself is a bit simple but it conveys the message and the purpose directly and creatively, which is the most important thing for me. It represents who I am and that is why I personally like it and feel it is me.