p5.js Web Editor | P5-IML300-Project1-Unwell-Final

xxxxxxxxxx
/* 
Nikia Fenix - Projectt 1 - IML300 - Spring 2023 
Welcome to "Unwell". Greet one of six strangers in the subway. If their happiness feels like too much for you, hit press 'ESC' to return back to the station. 
​
"Unwell" begs the question: "At what point does a smile become a grimace?" At what point does over-emulation create inauthenticity? For this piece, I wanted to explore themes of balance and uncaniness. Hoping to create an uneasy experience for the viewer, this work synthesizes surreal art, AI generated faces and expressions, and pitch distortion. Within the piece, the six characters' smile-turned-grimaces embody the experience of artificial positivity and joy. As their straight expression turns into a genuine smile, the music is pitched to it's original sound, but as the smile gets progressively wider and painful, the music slows. For my own world-building purposes LOL, each character has a song that I think they would enjoy listening to. As the tempo gets slower, however, the lyrics are recontextualized and seem much more depressing than they originally did. Outside the piece, the work hints at some of my fears surrounding the rise of artificial intelligence. The faces and smiles seem real and authentic, until the computer effect goes too far and the characters lose their humanity. I wonder at what point our innocent explorations into AI will start to do the same. 
​
To create the homescreen, I edited my characters' faces onto George Tooker's "The Subway" and pixelated it. In order to create the highlight effect, I had to create a transparent png of all characters that would appear once my mouse scrolled over their regions. Using the mousepressed() function corresponding with different modes and custom functions, each character essentially became a button leading to their own function. In order to avoid uploading 50 separate images of my characters, I created my own spritesheets (inspired by the popular website eelslap.com). To actually create my characters, I used thispersondoesnotexist.com (and was made very aware of how white its data was!) and then 'FaceApp'ed them 12 times each. Somehow, this code ended up being around 550 lines so I would really like to figure out how I could optimize it! 
​
Home Screen Painting: "The Subway" by George Tooker
Faces generated by: thispersondoesnotexist.com
Songs: "Friday I'm in Love" by The Cure, "I Don't Care" by The Ransom Collective, "Susie Save Your Love" by Allie X and Mitski, "Super Trouper" by ABBA, "Silk Chiffon" by MUNA & Phoebe Bridgers, "What You Know" by Two Door Cinema Club
Sprite Sheets for anyone interested: https://www.canva.com/design/DAFZ-vzZbJo/3qk0uIqdm6fPfloyXvaivQ/view?utm_content=DAFZ-vzZbJo&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton
*/
​
let mode;
​
function preload() {
  title = loadImage("Assets/Title.png");
  Outlines = loadImage("Assets/Outlines.png");
  Dhruv = loadImage("Assets/Dhruv.png");
  Friday = loadSound("Assets/Friday.mp3");
  Aidan = loadImage("Assets/Aidan.png");
  IDontCare = loadSound("Assets/IDontCare.mp3");
  Ellie = loadImage("Assets/Ellie.png");
  Susie = loadSound("Assets/Susie.mp3");
  Janet = loadImage("Assets/Janet.png");
  ABBA = loadSound("Assets/ABBA.mp3");
  Fatema = loadImage("Assets/Fatema.png");
  Silk = loadSound("Assets/Silk.mp3");
  Benny = loadImage("Assets/Benny.png");
  Alone = loadSound("Assets/Alone.mp3");
}
function setup() {
  mode = 0;
  createCanvas(windowHeight, windowHeight);
 }
​
function draw() {
  clear();
  if (mode == 0) { //home screen
    background(0);
    image(title, 0, windowHeight / 4, windowHeight, windowHeight / 2);
    //Dhruv
    if (
      mouseY > 12 * (windowHeight / 20) &&
      mouseY < 15 * (windowHeight / 20) &&
      mouseX > windowHeight / 20 &&
      mouseX < 5 * (windowHeight / 40)
    ) {
      image(Outlines, 0, windowHeight / 4, windowHeight, windowHeight / 2);
    } else if (
      mouseY > (11 * windowHeight) / 40 &&
      mouseY < (13 * windowHeight) / 20 &&
      mouseX > (5 * windowHeight) / 20 &&
      mouseX < (6 * windowHeight) / 20
    ) {
      image(Outlines, 0, windowHeight / 4, windowHeight, windowHeight / 2); // Aidan
    } else if (
      mouseY > (7 * windowHeight) / 20 &&
      mouseY < (9 * windowHeight) / 20 &&
      mouseX > (8 * windowHeight) / 20 &&
      mouseX < (10 * windowHeight) / 20
    ) {
      image(Outlines, 0, windowHeight / 4, windowHeight, windowHeight / 2); // Ellie
    } else if (
      mouseY > (5 * windowHeight) / 20 &&
      mouseY < (15 * windowHeight) / 20 &&
      mouseX > (21 * windowHeight) / 40 &&
      mouseX < (13 * windowHeight) / 20
    ) {
      image(Outlines, 0, windowHeight / 4, windowHeight, windowHeight / 2); // Janet
    } else if (
      mouseY > (11 * windowHeight) / 40 &&
      mouseY < (12 * windowHeight) / 20 &&
      mouseX > (27 * windowHeight) / 40 &&
      mouseX < (15 * windowHeight) / 20
    ) {
      image(Outlines, 0, windowHeight / 4, windowHeight, windowHeight / 2); // Fatema
    } else if (
      mouseY > (6 * windowHeight) / 20 &&
      mouseY < windowHeight / 2 &&
      mouseX > (16 * windowHeight) / 20 &&
      mouseX < (35 * windowHeight) / 40
    ) {
      image(Outlines, 0, windowHeight / 4, windowHeight, windowHeight / 2); // Benny
    }
  }
​
  //employ function when clicked
  if (mode == 1) {
    dhruv(windowHeight / 8, windowHeight / 8);
  }
​
  if (mode == 2) {
    aidan(0, 0);
  }
​
  if (mode == 3) {
    ellie(windowHeight / 8, windowHeight / 8);
  }
​
  if (mode == 4) {
    janet(0, 0);
  }
​
  if (mode == 5) {
    fatema(0, 0);
  }
​
  if (mode == 6) {
    benny(0, 0);
  }
  
  //music speed responds to mouseX
  let pace = map(-(mouseX - windowHeight), 0.1, width, 0, 2); // multiply by (-) so gets slower as you move to the right
  pace = constrain(pace, 0.2, 1.4); // sets boundaries for how slow and fast 
  Friday.rate(pace);
  IDontCare.rate(pace);
  Susie.rate(pace);
  ABBA.rate(pace);
  Silk.rate(pace);
  Alone.rate(pace);
}
​
// creates buttons out of each character
function mousePressed() {
  if (
    mouseY > 12 * (windowHeight / 20) &&
    mouseY < 15 * (windowHeight / 20) &&
    mouseX > windowHeight / 20 &&
    mouseX < 5 * (windowHeight / 40)
  ) {
    mode = 1;
    ABBA.stop();
    Alone.stop();
    Friday.loop();
    IDontCare.stop();
    Silk.stop();
    Susie.stop();
  }
  if (
    mouseY > (11 * windowHeight) / 40 &&
    mouseY < (13 * windowHeight) / 20 &&
    mouseX > (5 * windowHeight) / 20 &&
    mouseX < (6 * windowHeight) / 20
  ) {
    mode = 2;
    ABBA.stop();
    Alone.stop();
    Friday.stop();
    IDontCare.loop();
    Silk.stop();
    Susie.stop();
  }
  if (
    mouseY > (7 * windowHeight) / 20 &&
    mouseY < (9 * windowHeight) / 20 &&
    mouseX > (8 * windowHeight) / 20 &&
    mouseX < (10 * windowHeight) / 20
  ) {
    mode = 3;
    ABBA.stop();
    Alone.stop();
    Friday.stop();
    IDontCare.stop();
    Silk.stop();
    Susie.loop();
  }
  if (
    mouseY > (5 * windowHeight) / 20 &&
    mouseY < (15 * windowHeight) / 20 &&
    mouseX > (21 * windowHeight) / 40 &&
    mouseX < (13 * windowHeight) / 20
  ) {
    mode = 4;
    ABBA.loop();
    Alone.stop();
    Friday.stop();
    IDontCare.stop();
    Silk.stop();
    Susie.stop();
  }
  if (
    mouseY > (11 * windowHeight) / 40 &&
    mouseY < (12 * windowHeight) / 20 &&
    mouseX > (27 * windowHeight) / 40 &&
    mouseX < (15 * windowHeight) / 20
  ) {
    mode = 5;
    ABBA.stop();
    Alone.stop();
    Friday.stop();
    IDontCare.stop();
    Silk.loop();
    Susie.stop();
  }
  if (
    mouseY > (6 * windowHeight) / 20 &&
    mouseY < windowHeight / 2 &&
    mouseX > (16 * windowHeight) / 20 &&
    mouseX < (35 * windowHeight) / 40
  ) {
    mode = 6;
    ABBA.stop();
    Alone.loop();
    Friday.stop();
    IDontCare.stop();
    Silk.stop();
    Susie.stop();
  }
}
​
//brings back to home page on ESC
function keyPressed() {
  if (keyCode === ESCAPE) {
    mode = 0;
    ABBA.stop();
    Alone.stop();
    Friday.stop();
    IDontCare.stop();
    Silk.stop();
    Susie.stop();
  }
}
​
//sequences for each person 
function dhruv(x, y) {
  background(0, 0, 255);
  if (mouseX <= windowHeight / 7) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      0,
      0,
      200,
      200
    );
  } else if (mouseX > windowHeight / 7 && mouseX < (2 * windowHeight) / 7) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      200,
      0,
      200,
      200
    );
  } else if (
    mouseX > (2 * windowHeight) / 7 &&
    mouseX <= (3 * windowHeight) / 7
  ) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      400,
      0,
      200,
      200
    );
  } else if (
    mouseX > (3 * windowHeight) / 7 &&
    mouseX <= (4 * windowHeight) / 7
  ) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      600,
      0,
      200,
      200
    );
  } else if (
    mouseX > (4 * windowHeight) / 7 &&
    mouseX <= (5 * windowHeight) / 7
  ) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      800,
      0,
      200,
      200
    );
  } else if (
    mouseX > (5 * windowHeight) / 7 &&
    mouseX <= (6 * windowHeight) / 7
  ) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      1000,
      0,
      200,
      200
    );
  } else if (mouseX > (6 * windowHeight) / 7) {
    image(
      Dhruv,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      1200,
      0,
      200,
      200
    );
  }
​
  let speed = map(-(mouseX - windowHeight), 0.1, width, 0, 2);
  speed = constrain(speed, 0.1, 2);
  IDontCare.rate(speed);
}
​
function aidan(x, y) {
  background(0, 0, 255);
  if (mouseX <= windowHeight / 7) {
    image(Aidan, x, y, windowHeight, windowHeight, 0, 0, 200, 200);
  } else if (mouseX > windowHeight / 7 && mouseX < (2 * windowHeight) / 7) {
    image(Aidan, x, y, windowHeight, windowHeight, 200, 0, 200, 200);
  } else if (
    mouseX > (2 * windowHeight) / 7 &&
    mouseX <= (3 * windowHeight) / 7
  ) {
    image(Aidan, x, y, windowHeight, windowHeight, 400, 0, 200, 200);
  } else if (
    mouseX > (3 * windowHeight) / 7 &&
    mouseX <= (4 * windowHeight) / 7
  ) {
    image(Aidan, x, y, windowHeight, windowHeight, 600, 0, 200, 200);
  } else if (
    mouseX > (4 * windowHeight) / 7 &&
    mouseX <= (5 * windowHeight) / 7
  ) {
    image(Aidan, x, y, windowHeight, windowHeight, 800, 0, 200, 200);
  } else if (
    mouseX > (5 * windowHeight) / 7 &&
    mouseX <= (6 * windowHeight) / 7
  ) {
    image(Aidan, x, y, windowHeight, windowHeight, 1000, 0, 200, 200);
  } else if (mouseX > (6 * windowHeight) / 7) {
    image(Aidan, x, y, windowHeight, windowHeight, 1200, 0, 200, 200);
  }
}
​
function ellie(x, y) {
  background(0, 0, 255);
  background(0, 0, 255);
  if (mouseX <= windowHeight / 7) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      0,
      0,
      200,
      200
    );
  } else if (mouseX > windowHeight / 7 && mouseX < (2 * windowHeight) / 7) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      200,
      0,
      200,
      200
    );
  } else if (
    mouseX > (2 * windowHeight) / 7 &&
    mouseX <= (3 * windowHeight) / 7
  ) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      400,
      0,
      200,
      200
    );
  } else if (
    mouseX > (3 * windowHeight) / 7 &&
    mouseX <= (4 * windowHeight) / 7
  ) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      600,
      0,
      200,
      200
    );
  } else if (
    mouseX > (4 * windowHeight) / 7 &&
    mouseX <= (5 * windowHeight) / 7
  ) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      800,
      0,
      200,
      200
    );
  } else if (
    mouseX > (5 * windowHeight) / 7 &&
    mouseX <= (6 * windowHeight) / 7
  ) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      1000,
      0,
      200,
      200
    );
  } else if (mouseX > (6 * windowHeight) / 7) {
    image(
      Ellie,
      x,
      y,
      windowHeight * 0.75,
      windowHeight * 0.75,
      1200,
      0,
      200,
      200
    );
  }
}
​
function janet(x, y) {
  background(0, 0, 255);
  if (mouseX <= windowHeight / 7) {
    image(Janet, x, y, windowHeight, windowHeight, 0, 0, 200, 200);
  } else if (mouseX > windowHeight / 7 && mouseX < (2 * windowHeight) / 7) {
    image(Janet, x, y, windowHeight, windowHeight, 200, 0, 200, 200);
  } else if (
    mouseX > (2 * windowHeight) / 7 &&
    mouseX <= (3 * windowHeight) / 7
  ) {
    image(Janet, x, y, windowHeight, windowHeight, 400, 0, 200, 200);
  } else if (
    mouseX > (3 * windowHeight) / 7 &&
    mouseX <= (4 * windowHeight) / 7
  ) {
    image(Janet, x, y, windowHeight, windowHeight, 600, 0, 200, 200);
  } else if (
    mouseX > (4 * windowHeight) / 7 &&
    mouseX <= (5 * windowHeight) / 7
  ) {
    image(Janet, x, y, windowHeight, windowHeight, 800, 0, 200, 200);
  } else if (
    mouseX > (5 * windowHeight) / 7 &&
    mouseX <= (6 * windowHeight) / 7
  ) {
    image(Janet, x, y, windowHeight, windowHeight, 1000, 0, 200, 200);
  } else if (mouseX > (6 * windowHeight) / 7) {
    image(Janet, x, y, windowHeight, windowHeight, 1200, 0, 200, 200);
  }
}
​
function fatema(x, y) {
  background(0, 0, 255);
  if (mouseX <= windowHeight / 7) {
    image(Fatema, x, y, windowHeight, windowHeight, 0, 0, 200, 200);
  } else if (mouseX > windowHeight / 7 && mouseX < (2 * windowHeight) / 7) {
    image(Fatema, x, y, windowHeight, windowHeight, 200, 0, 200, 200);
  } else if (
    mouseX > (2 * windowHeight) / 7 &&
    mouseX <= (3 * windowHeight) / 7
  ) {
    image(Fatema, x, y, windowHeight, windowHeight, 400, 0, 200, 200);
  } else if (
    mouseX > (3 * windowHeight) / 7 &&
    mouseX <= (4 * windowHeight) / 7
  ) {
    image(Fatema, x, y, windowHeight, windowHeight, 600, 0, 200, 200);
  } else if (
    mouseX > (4 * windowHeight) / 7 &&
    mouseX <= (5 * windowHeight) / 7
  ) {
    image(Fatema, x, y, windowHeight, windowHeight, 800, 0, 200, 200);
  } else if (
    mouseX > (5 * windowHeight) / 7 &&
    mouseX <= (6 * windowHeight) / 7
  ) {
    image(Fatema, x, y, windowHeight, windowHeight, 1000, 0, 200, 200);
  } else if (mouseX > (6 * windowHeight) / 7) {
    image(Fatema, x, y, windowHeight, windowHeight, 1200, 0, 200, 200);
  }
}
​
function benny(x, y) {
  background(0, 0, 255);
  if (mouseX <= windowHeight / 7) {
    image(Benny, x, y, windowHeight, windowHeight, 0, 0, 200, 200);
  } else if (mouseX > windowHeight / 7 && mouseX < (2 * windowHeight) / 7) {
    image(Benny, x, y, windowHeight, windowHeight, 200, 0, 200, 200);
  } else if (
    mouseX > (2 * windowHeight) / 7 &&
    mouseX <= (3 * windowHeight) / 7
  ) {
    image(Benny, x, y, windowHeight, windowHeight, 400, 0, 200, 200);
  } else if (
    mouseX > (3 * windowHeight) / 7 &&
    mouseX <= (4 * windowHeight) / 7
  ) {
    image(Benny, x, y, windowHeight, windowHeight, 600, 0, 200, 200);
  } else if (
    mouseX > (4 * windowHeight) / 7 &&
    mouseX <= (5 * windowHeight) / 7
  ) {
    image(Benny, x, y, windowHeight, windowHeight, 800, 0, 200, 200);
  } else if (
    mouseX > (5 * windowHeight) / 7 &&
    mouseX <= (6 * windowHeight) / 7
  ) {
    image(Benny, x, y, windowHeight, windowHeight, 1000, 0, 200, 200);
  } else if (mouseX > (6 * windowHeight) / 7) {
    image(Benny, x, y, windowHeight, windowHeight, 1200, 0, 200, 200);
  }
}
​
Cookies

Sketch Files

Console

Preview
