Image Manipulation – Lakers 2020

I’ve been a Kobe fan for forever and a Lakers fan since 2012, and it’s been a hard decade for the team. hard. So, in light of the Lakers winning the 2020 NBA championship today, I wanted to do something with image manipulation that was related to the lakers.

My idea is to fill the screen with the laker logo, and every time I draw on the screen via my mouse, another image would appear with tints and effects. This way I can draw stuff like “2020 champs” etc etc.

I do feel kind of weird about the project, I felt like to do what I was doing, there were more object-oriented programming than image manipulation. Perhaps next time it might be better to focus on one image and changing its properties than to change a whole bunch of images.

PImage img, lebron;
float unit = 30;    //unit of each picture
int count;          //how many pictures are there in a certain sized frame
Ring[] ring;

void setup(){
  size(1500, 900);  
  img = loadImage("lakers.png");
  lebron = loadImage("lebron.png");
  int wideCount = width / int(unit);
  int highCount = height / int(unit);
  count = wideCount * highCount;
  
  //calling an array of image objects with the width and height counts
  ring = new Ring[count];      
  int index = 0;
  for (int y = 0; y < highCount; y++) {
    for (int x = 0; x < wideCount; x++) {
      ring[index++] = new Ring(x * unit, y * unit, width/unit, width/unit);
    }
  }
  
}

void draw(){
  //running the functions for every image
  for (Ring ring : ring) {
    ring.display();
    ring.update();
    
  }

}

class Ring {
  float x;
  float y;
  float w;
  float h;
  
  //for images that have been hovered over
  boolean changed = false;

  Ring(float tempX, float tempY, float tempW, float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
  }

  void display() {
    //original image
    if (changed == false){
      noTint();
      image(img, x , y, w, h);
    }
    //changed images
    if (changed == true){
      tint(165, 111, 124, 50); 
      image(lebron, x, y, w, h);
    }
  }
  
  void update() {
    //checking if an image is clicked on
    if (mousePressed){
      if (x < mouseX && mouseX < x+unit && mouseY > y && mouseY < y + unit){
        changed = true;
      }
    }
  }
}