//iris yip
//15-104
//deliverable week 15
//final project

var page = 1; //set up a bunch of different "scenes"
let spatula;


function setup() {
  createCanvas(500, 500);
  
}

function preload(){
  img1 = loadImage("https://i.imgur.com/cAQMiab.png");
  img2 = loadImage("https://i.imgur.com/Uab6uYu.png");
  img3 = loadImage("https://i.imgur.com/usB1pJE.png");
  img4 = loadImage("https://i.imgur.com/Imd0Dek.png");
  img5 = loadImage("https://i.imgur.com/XLEACUR.png");
  img6 = loadImage("https://i.imgur.com/iljGqZW.png");
  img7 = loadImage("https://i.imgur.com/Y2B65ub.png");
  img8 = loadImage("https://i.imgur.com/ZI2Soyy.png");
  
  day1 = loadImage("https://i.imgur.com/TPgUWUu.png");
  day3 = loadImage("https://i.imgur.com/XwD89x3.png");
  day4 = loadImage("https://i.imgur.com/i58a6SY.png");
  day6 = loadImage("https://i.imgur.com/WIZ958Z.png");
  day7 = loadImage("https://i.imgur.com/9f5exQ8.png");
  day8 = loadImage("https://i.imgur.com/fWXxfYN.png");
  
  fin = loadImage("https://i.imgur.com/IDq3zRs.png");
  die = loadImage("https://i.imgur.com/smkS7Ca.png");
  
  //spatula
  
  spatula1= loadImage("https://i.imgur.com/FMitxk1.png");
  
  //knife
  
  knife1 = loadImage("https://i.imgur.com/a9yMiM4.png");
  
}

function draw() { //scenes
  
//page 1
  if (page == 1) {
  image(img1, 0, 0);
  }

//page 2
  else if (page == 2) {
  image(img2,0,0);
  }

//page 3
  else if (page == 3) {
  image(img3,0,0);
  }
  
//page 4
  else if (page == 4){
  image(img4,0,0);
  }
  
//page 5
  else if(page ==5){
  image(img5,0,0);
    
  image(spatula1,mouseX,mouseY);
  }

//page 6
  else if(page ==6){
  image(img6,0,0);
  }

  else if(page ==7){
  image(day1,0,0);
  }
  
  else if(page ==8){
  image(day3,0,0);
  }
  
  else if(page ==9){
  image(day4,0,0);
  }
  
  else if(page ==10){
  image(day6,0,0);
  }
  
  else if(page ==11){
  image(day7,0,0);
  }

  else if(page ==12){
  image(day8,0,0);
  }
  
  else if(page ==13){
  image(img7,0,0);
  }
  
  else if(page ==14){
  image(img8,0,0);
    
  image(knife1,mouseX,mouseY);
  }


//bad end
  else if (page == 20) {
    image(die,0,0);
  }
}


function mousePressed() {
  // PAGE 1 COMMANDS
  if (page == 1) {
    if (mouseX > 90 & mouseX < 300 && mouseY > 220 && mouseY < 400) {
     page = 2; //proceed forwards into the game
    }
    else if (mouseX > 300 & mouseX < 400 && mouseY > 350 && mouseY < 400) {
     page = 1; //stays the same
    }
  }
  
  //PAGE 3 COMMANDS
  if (page ==3) {
    if(mouseX > 350 & mouseY > 200){
      page = 4; //proceed forward
    }
  }
  //page 4
  if (page ==4){
    if(mouseX>400 & mouseY> 220){
      page = 5;
    }
  }
  //page 5
  if (page ==5){
    if(mouseX>150 & mouseX<250 && mouseY>50 && mouseY<250){
      page = 6
    }
  }
  //page 6
  if(page ==6){
    if(mouseX > 400 && mouseX<480 && mouseY> 60 && mouseY<200){
      page = 7;
    }
  }
  //page 7
  if(page ==7){
    if(mouseX>400 & mouseX<480 && mouseY> 60 && mouseY<200){
      page = 8;
    }
  }
  
  if(page ==8){
    if(mouseX>400 & mouseY > 60){
      page =9;
    }
  }
  if(page ==9){
    if(mouseX>50 & mouseX<480 && mouseY>60 && mouseY<300){
      page= 13;
    }
  }
  if(page ==13){
    if(mouseX>10 & mouseY>10){
      page= 14;
    }
  }
  if(page ==14){
    if(mouseX>130 & mouseX < 250 && mouseY> 150 && mouseY<200){
      page=15;
    }
  }
}


function keyPressed(){
  //PAGE 2 COMMNADS
  if(page==2){
    if(key=='a'){
    page =3; //proceed forwards
    }
    else if(key != 'a'){
    page =20; //dies
    }
  }
  
  //day1
  if(page== 7 & 8 && 9 && 11 && 12){
    if(key=='k'){
    page = 20
    }
    else if(key != 'k'){
    page =20;
    }
  }
  
  //last step
  if(page ==15){
    if(key=='360'){
    page = fin
    }
    else if(key !='360'){
    page =20;
    }
  }
}

For my final project, I wanted to make a ‘point-and-click’ adventure style game about baking during quarantine, which would act like a little tutorial adventure of sorts. Growing up, I played a lot of Cooking Mama on the Nintendo, which is where the primary inspiration for this game came from. The instructions for each step are given on the screen, which ranges from clicking on certain parts of the screen to pressing a key and clicking and dragging.

Overall, there were a few parts that I could not get to work (certain scenes being skipped, etc.) but it was really cool to try to replicate the type of mini-game that I would play a lot when I was younger! If I had more time, I’d go back and clean up the code so that it would run more efficiently, and also add in more complex scenes and a grading scale/system rather than the instant death mechanic function.

For this week’s looking outwards focusing on Women Practitioners, I decided to research into Angela Washko, who ‘is an artist, writer, and facilitator devoted to creating new forums for discussions of feminism in the spaces most hostile toward it.’ I thought that because she purposefully works in realms and topics of feminism and is currently a tenure-track Assistant Professor of Art at Carnegie Mellon University, it would be especially appropriate for this week’s prompt.

I looked at her project The Game: The Game, which explores and presents the issues and circumstances present around the practices of male pickup artists, which is then presented in the format of a dating simulator. It provides an interesting and female centric look at the social constructs of dating and the systematically dangerous and manipulative implications of the culture. It provides a very interesting look into the language and social formalities of ‘pick-up’ culture and its psychological/predatory implications.

I really liked the way she chose the explore the topic through a somewhat morbid lens without holding back or romanticizing the issue, particularly because dating simulators tend to over-romanticize certain behaviors that the audience as a whole could do to become more critical of. The interactive quality of the game brings another layer of immersion into the game as well, illustrating how well the medium supports the topic/issue that is being presented.

For this week’s looking outwards, I took a look at KNBC by Casey Reas. It uses news broadcast footage and translates them into a collage of pixels, which is then projected onto a wall. I found it a really interesting and meta look at the way we consume information so quickly and abundantly in our day-to-day lives. The work was done in Processing, for which Casey Reas is the co-founder of.

Interestingly, there is still a clear narrative that is being presented in the work, which I found really interesting; even when information has been distorted beyond what is cognitively recognisable, we can still see the beginning and end transitioning into another story altogether.

Overall, I really enjoyed the visual aesthetics of the piece, and how sound plays a large role in both its presentation but also how we come to interpret and understand information as a core piece of the artwork’s intent.

Iris Yip iyip
15-104 Section D
LO-09

This week for Looking Outwards, I looked at Tian’s Looking Outwards post on Stamen Studios as part of interactive informational visualizations. He specifically looked at a map looking at bird populations in National parks. I wanted to write and learn about this topic this week because I felt that he really communicated the importance of interactive maps that allows people to look at an issue from multiple perspectives simultaneously. I think it’s a good way of communicating massive amounts of information with lots of different variables. I think that this particular example definitely helps support how interactive data can achieve ways of communication through motion and interaction that regular types of data visualization might not be able to do.

Another project I was drawn to from the same studio/artist is PENNY, which uses an AI to estimate wealth levels of an area based on images. While not entirely guaranteed to be accurate, there is a lot of consideration for signs of areas of low socio-economic welfare in a more directed way. I think that overall, there is a lot of consideration for the unique ways that digital information can be uniquely synthesized and used to make data collection and analysis easier.

Iris Yip
15-104 Section D
Looking-Outwards
VIMEO VIDEO: UNEXPECTED SPACE EXPLORATION

For this week, I looked at Ariel Waldman’s works, the founder of Spacehack.org, and a multidisciplinary artist who works as the chair of NASA’s Innovative Advanced Concepts Program council. A lot of her work explores the creative side of science and advocates for accessibility on the topic of space exploration and other interesting scientific topics.

The thing I personally admire about her most is her background as an art student and her continued mission to bridge the gap between more stem-oriented and artistically oriented practices in her work.

She also intentionally portrays herself as more approachable, especially seen in her youtube videos (which are done professionally but also with a casual tone) that fall in line with her general philosophy of making a traditionally more serious topic more whimsical and less rigid. One of the works of hers that caught my eye was her 2018 EYEO presentation, UNEXPECTED SPACE EXPLORATION. She goes into depth to take about her work at NASA that specifically works to foster more creative and “sci-fi-esque” ideas that could potentially work to transform future missions.

Iris Yip
15-104 Section D
Looking-Outwards
Information Visualization

For this week I looked at nand.io and the way they synthesis information through custom data software. I took a look specifically at their project ‘Peak Spotting‘, which was a tool designed to visually manage Germany’s complex railroad network and its daily passengers.

Based on machine learning algorithms, it uses load and capacity prediction data heavily to allow traffic managers to look at data up to 100 days in advance so they can optimally calculate ticket prices and supply and service.

I was personally drawn to this project because of its amazing applications. Being able to predict data points up to 100 days in advance while being able to automatically generate concise and readable visual depictions of the data is a huge step in the automation of data visualization.

I also really enjoy the aesthetics of nand.io’s projects from a visual design perspective. The colors used are distinctive and readable yet aesthetically pleasing, making it functional and optimal for data visualization.

For this project, I was inspired by an abstract interpretation of the human eye and wanted to include aspects of that into my project. It was sort of difficult getting my initial equation to work, but after adjusting it to cos/sin it worked a lot better. It also took me a long time to find ways of simplifying my code, since I wanted to work on keeping my code as concise as I can when possible, and to try to find the easiest way to create what I had in mind without extra steps.

//iris yip
//15-104 section D
//project 7

function setup() {
    createCanvas(480, 480); //canvas size
}

function draw() {
    background(0,5) //background opacity
    stroke(255)
    translate(240, 240); //position of interactive circle
    x = cos(frameCount / 30) * (4 * mouseX / 40 * (sin(frameCount / 30)) * 2 - frameCount / 30) //equation
    y = mouseY / 10; //Y position of mouse
    strokeWeight(x / 10)
    rotate(frameCount + x / 100); //action and framerate
  
  //coordinates (movement)
    point(x, y);
    point(y, x);
    point(-x, y);
    point(-y, -x);
}

Iris Yip
15-104 Section D
Looking-Outwards

This week, I am taking a look at Aizek Live‘s series of Generative Studies, which incorporates elements of randomness through allowing an autonomous system to make decisions on its own, partially through an added element of randomness and otherwise through the design of a system for the sole purpose of making these decisions.

All of the projects were created in Notch, running in real-time on Geforce 1080 Ti. I was particularly drawn to this project because it reinforces the idea that there is such a thing as being “designed for randomness”, where certain parameters are still set in place in order the limit the scope of the design. I think the artist did a good job in their rationale highlighting the importance of restraints in design to help achieve something that ‘appears’ completely random or generative, whereas true randomness can may in actuality appear more skewed towards one result over the other.

function setup() {
    createCanvas(600,600)
    background(0)
    angleMode(DEGREES);

    fill(10);
    ellipse(width / 2, height / 2, 400, 400);
}

function draw() {

    //movement
    a = sin(frameCount)
    b = cos(frameCount)

    translate(width / 2, height / 2);
    background(0, 10)

    strokeWeight(0.5);
    //month
    push();
    stroke(155, b * 100 + 55, 155);
    rotate(180 / 12 * month() - 45);
    line(300 * a, 200 * b, 100 * b, 50 * a);
    pop();
    //day
    push();
    stroke(a * 100 + 55, 155, 155);
    rotate(180 / 31 * day() - 45);
    line(50 * a, 10 * b, 300 * b, 300 * a);
    pop();

    strokeWeight(3);
    //hour
    push();
    stroke(100);
    rotate(180 / 24 * hour() - 45);
    line(200 * a, 200 * b, 200 * b, 200 * a);
    pop();
    //min
    push();
    stroke(b * 100 + 155, a * 100 + 155, 255);
    rotate(180 / 12 * min() - 45);
    line(175 * a, 175 * b, 175 * b, 175 * a);
    pop();
    //second
    push();
    stroke(second() * 2 + 135, 375 - second() * 2, 255);
    rotate(180 / 60 * second() - 45);
    line(150 * a, 150 * b, 150 * b, 150 * a);
    pop();

};

For this project, I wanted to go for a more abstract way to display a conventional-looking clock in order to challenge the way we look and think about time. I wanted to focus on temporality and make it so that even the clock base itself isn’t necessarily visible or present.

Iris Yip iyip
15-104 Section D
LO-05

A 3D graphics project I feel particularly drawn to is Catello Gragnaniello‘s ‘Asimov’, a project combining 2D graphics with fashion. I enjoy the combination of realistic textures with foreign-looking materials that give the overall work a futuristic and weightless feeling. The ways that the artist plays around with the same models/figures in different environments is a really fascinating feature that traditional forms of digital art may not afford.

While it doesn’t specify what software the artist uses, a lot of individuals online speculate it being Cinema4D or Maya based on the rendering and motion graphics/animation that the artist showcases in the project.

‘Asimov’ is a really interesting look into the potential future of clothing design, as it is possible to simulate realistic materials and therefore achieve a likeness to an actual product, while simultaneously going outside of the box to create something that may not be possible in real life, asking questions like whether or not the design has to be reproducible, or even real, in order for it to be considered fashion design. With rising cases of 3D-generated models, a lot of people are beginning to question the modern definition of fashion, and ‘Asimov’ explores that idea in a fun and understated way.