Mona the Dancing Queen

This week’s assignment offered a lot of freedom in terms of what to do. Maybe, for my indecisive soul, a little too much of it. Coming up with an ‘art piece’ from scratch was above my end-of-the-semester exhausted creative capabilities – so I decided to take on a slightly different direction and make an already existing art piece interactive. I also wanted to learn to work with images, so this was a perfect opportunity to do so.

I took the most mainstream piece of artwork you can find – Mona Lisa- and gave her hands that move with the cursor. I started with slicing existing images in Photoshop, getting rid of the background and creating a png.  The code is very similar to what we did in class- but writing it on my own and mending it to what I needed to achieve with this assignment actually helped to contextualize and understand Object Oriented Programming a lot more. I did not want to research much and attempted to write the code with as little outside help as possible.

The only issues I encountered was figuring out how to place and rotate the hand images. I knew how to do it with small objects that were drawn in Processing, and it took me a lot of trials and errors until I got a hang of it. What is more, I wanted to make the disco lights a little more interesting by adding some randomized blur to them, but using the filter(BLUR) function slowed down the image so much that the hands stopped moving smoothly- and I rather dropped the idea.

Another difficult part was getting used to thinking in terms of classes and not linear lines of codes. But, to be honest, it made the code incredibly neat and clean and made it very easy to change things up (especially pictures), whenever I wanted to trie or change something. Now I really can see why there is so much hype around it!

Here is the main code followed by the class code:

Hands handL;
Hands handR;
PImage Mona;

void setup() {
  size(640, 460);
  
  //loading the image of Mona from a folder
  Mona = loadImage("hey mona final.png");

  //locating where the cookies will be when cut out of the cookie cutter
  handL = new Hands(150, 500);
  handR = new Hands(400, 600);
}

void draw () {
  background(0);

  //Disco lights that follow the cursor - there is a little randomness in strokeweight, colors and lenght
  for ( int i = 0; i < 5; i++) {
    pushMatrix();
    strokeWeight(random(1, 3));
    stroke(random(255), random(255), random(255));
    line((random(width)), random(height), mouseX, mouseY);
    popMatrix();
  }

  //locating Mona to her spot on the screen
  image(Mona, 0, 0);

  //cutting the exact cookies out
  handL.update();
  handL.displayL();
  handR.update();
  handR.displayR();
}

class Hands {

  float angle;
  PVector origin;
  PImage handL, handR;

  Hands(float x, float y) {
    origin = new PVector(x, y);
    angle = 0;
  }

  void update() {

    PVector destination = new PVector(mouseX, mouseY);
    PVector direction = PVector.sub(destination, origin);
    angle = direction.heading();

    handR = loadImage("ruka dlha copy.png");
    handL = loadImage("ruka dlha.png");
  }

  void displayL() {
    pushMatrix();
    translate(origin.x, origin.y);
    rotate(angle);
    //handL.resize(200, 100);
    image(handL, 0, 0);
    popMatrix();
  }
  
  void displayR() {
    pushMatrix();
    translate(origin.x, origin.y);
    rotate(angle);
    //handL.resize(200, 100);
    image(handR, 0, 0);
    popMatrix();
  }
}