For my final project, I’ll be making a game that is inspired by the games Pacman and Slither.io. The goal of this game will be to drag the character around the screen to ‘eat’ all the items that are spread throughout the maze. However, the maze consists of walls that the character shouldn’t touch, or else, the game will be over. The maze walls will have dead ends that will make it harder for the user to accomplish the game. The tricky part of this game is that the character will move where the mouse moves, which is hard to control to prevent the character from touching the complex walls. My overall idea is to code so that when the character moves over and through each item, the item will disappear and the scoreboard will increase by one. When the character touches the wall, the phrase “Game Over” will come out. Although I don’t know what the items around the maze will look like, as a person who loves sweets, I was thinking of creating colorful desserts like donuts for the character to eat. 

The two projects that I looked closely into and was inspired to create an idea for my final project was Pacman and Slither.io. Pacman and Slither.io. They are both games that has a goal of ‘absorbing’ items on screen. Pacman is a game where the ‘Pacman’ walks around the maze to eat all the items given. However, there is an ‘enemy’ that the Pacman has to get away from and make sure not to touch. Slither.io is a game where the user starts off controlling a small worm and has to ‘absorb’ or ‘eat’ smaller worms from the head, which makes the user’s worm get bigger in size. If the user’s worm gets eaten by a bigger worm, the game ends. Pacman is a very traditional game that was created decades ago but is still famous today. I admire how long the game has been famous and played by users for years. I feel like the goal of this game is simple for people of all ages to understand and easily play, which I think is one of the main reasons why the Pacman is still famous today. Slither.io is also a famous game, which I saw my friends play many times before. I admire this work because of its simplicity of the game’s goal, but complex visuals that makes the users challenge every time they play the game. Slither.io and Pacman are very similar, however, Slither.io is comparably created more recently than the Pacman. The difference between Pacman and Slither.io is that Pacman is played in the setting of a maze, where Slither.io is not. Thus, another difference is that the character of Slither.io increases in size every time the character eats an item, which is not the case with Pacman.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-11-Landscape

let car = [];
let num = 10; //number of cars

function setup() {
  createCanvas(400, 400);

  for (let i = 0; i < num; i++) {
    car[i] = new Car(random(height),
      random(width),
      color(random(255), random(255), random(255)), //color of car
      random(1, 7), //car speed
      random(10, 100) //car size
    );
    print(car[i]);
  }

}

function draw() {
  background(0, 41, 58);

  fill(241, 244, 15);
  ellipse(300, 50, 5, 5);
  ellipse(270, 74, 5, 5);
  ellipse(130, 50, 5, 5);
  ellipse(20, 80, 5, 5);
  ellipse(360, 100, 5, 5);
  ellipse(70, 160, 5, 5);
  ellipse(230, 140, 5, 5);
  ellipse(330, 170, 5, 5);
  ellipse(180, 230, 5, 5); //stars 

  fill(200);
  rect(0, 300, 400, 30);
  fill(200);
  rect(0, 290, 400, 3);
  fill(200);
  rect(80, 70, 30, 330);
  fill(200);
  rect(320, 70, 30, 330);
  stroke(200);
  strokeWeight(5);
  line(95, 90, 215, 315)
  stroke(200);
  strokeWeight(5);
  line(95, 90, 0, 275)
  stroke(200);
  strokeWeight(5);
  line(335, 90, 215, 315);
  stroke(200);
  strokeWeight(5);
  line(335, 90, 400, 220); //bridge


  for (let i = 0; i < 10; i++) {
    car[i].move();
    car[i].display(); //making cars show
  }
}



class Car {
  constructor(x, y, z, s, l) {
    this.x = x;
    this.y = y;
    this.z = z; //color of car
    this.l = l; //length of car
    this.speed = s; //speed
  }
  
  move() {
    this.x = this.speed + this.x; //making cars move
    if (this.x > width) {
      this.x = 0; //where the cars come out
    }
  }

  display() {
    noStroke();
    fill(this.z);
    rect(this.x, 270, this.l, 30, 20); //position of cars moving, adjusting shape of cars 
  }
}

Recently, I went outside with my friends to see the night view of Pittsburgh near downtown. I wanted to create what I saw that day by creating what I think is the most symbolic landscape of Pittsburgh, the yellow bridge. I created an illustration of the yellow bridge and the night sky, and made the cars in different lengths and colors move across the bridge. The yellow bridge and the night sky with stars are static because I wanted to emphasize the movement of the vehicles. The cars are coded to move from left to right in different speeds, lengths, and colors to represent the diversity of vehicles I saw the day I went out.

Amor Munoz, born in Mexico City, studied Law at the UNAM and at the New Orleans Academy of Fine arts. Notes and folds by Amor Munoz in 2019 is an interactive installation that is built to create  a connection between sound and form, using programming and handcraft. There are three cylindrical sculptures that emits sound, which made out of pleated textiles with three different textures. These textures of each cylinder are unique depending on the musical patterns of each sound. This sculptures are activated when people approach their hands to the fabric, creating the cylinder to rotate at different speeds and sounds as they are programmed. I admire this installation by its complex programming and interesting interpretation of sound. Currently a member of the National System of Art Creators, Amor Munoz usually combines performance and experimental electronics with traditional media, which really shows in this work. There is performance (public approaching sculpture to activate) and experimental electronics with traditional media (using textile and sculpture with sound to rotate). I am amazed at how Amor Munoz interpreted and combined sound with technology into an interaction installation, only making it activate when the public reach out.

Urban Lights Contacts is an interactive installation the senses varying degrees of electrostatic contact according to how close people’s bodies are. The only way to activate this work is to make multiple people contact each other’s skin. For example, a person put his or her hands onto the interactive shiny sphere, but him or her alone won’t create any sound. He or she must make another come and touch his or her hand to make the installation activate. This installation encourages people to touch and come close together to create a new sound at the moment. The sensory of the work is tactile, creates light, and also emits sound. It encourages interactive stagings of the public’s bodies, which basically makes the people turn into a “human instrument.” I am admired by this installation because it brings together the public for a unique art and technology experience. Also, I find it interesting that this work creates unpredictable relationships between the public who interacts with the installation. 

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-10-Sonic Sketch

var buttonA;
var buttonB;
var buttonC;
var buttonD;

function preload() {
    buttonA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snaredrum-1.wav");
    buttonA.setVolume(1);
    buttonB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/drumstick-1.wav");
    buttonB.setVolume(1);
    buttonC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hitdrum.wav");
    buttonC.setVolume(1);
    buttonD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lowdrum.wav");
    buttonD.setVolume(1); //loading sound
}

function setup() {
    createCanvas (600, 600);
    useSound();
}



function draw() {
    background(232, 192, 244);
    noStroke();
    fill(90);
    rect(85, 115, 400, 400);
    fill("black");
    rect(100, 100, 400, 400); //base of the beat maker

    fill(100);
    circle (158, 150, 50, 50);
    fill(100);
    circle (248, 150, 50, 50);
    fill(100);
    circle (338, 150, 50, 50);
    fill(100);
    circle (428, 150, 50, 50); //upper circular button of beat maker


    fill("white");
    rect(120, 200, 80, 80);
    fill("yellow");
    rect(120, 290, 80, 80);
    fill("yellow");
    rect(120, 380, 80, 80);
    fill("red");
    rect(210, 200, 80, 80);
    fill("white");
    rect(210, 290, 80, 80);
    fill("white");
    rect(210, 380, 80, 80);
    fill("blue");
    rect(300, 200, 80, 80);
    fill("blue");
    rect(300, 290, 80, 80);
    fill("blue");
    rect(300, 380, 80, 80);
    fill(33, 232, 6);
    rect(390, 200, 80, 80);
    fill(33, 232, 6);
    rect(390, 290, 80, 80);
    fill("white");
    rect(390, 380, 80, 80); //square buttons of the beat maker

}



function mousePressed(){
    if(mouseX < 250 & mouseY < 250){
        buttonA.play();
    }

    if(mouseX < 250 & mouseY > 250){
        buttonC.play();
    }

    if(mouseX > 250 & mouseY < 250){
        buttonB.play();
    }

    if(mouseX > 250 & mouseY > 250){
        buttonD.play(); //creating sound when click on button
    }
}

I wanted to create a beat making machine because I enjoy listening to music with interesting beat. I made the beat making machine create drum sounds when clicked.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project 09 - Portrait

var self;
var size;

function preload() {
  self = loadImage("https://i.imgur.com/oLizrAT.jpg");
} //load image

function setup() {
  createCanvas(400, 600);
  size = 6; //size of heart
  noStroke();
  background(20); //background color before image shows
  imageMode(CENTER);
  self.loadPixels(); //loading pixels
  frameRate(30); //how fast heart covers canvas
  
}

function draw() {
    var x = random(self.width);
    var y = random(self.height);
    var pixie = map(0, 0, width, size, size);
    var p = self.get(x, y); //variables to create heart
    fill(p);
    ellipse(x+5, y-5, pixie, pixie);
    ellipse(x, y, pixie, pixie);
    ellipse(x-5, y-5, pixie, pixie);
    ellipse(x-10, y-10, pixie, pixie);
    ellipse(x+10, y-10, pixie, pixie);
    ellipse(x+2.5, y-2.5, pixie, pixie);
    ellipse(x-2.5, y-2.5, pixie, pixie);
    ellipse(x+7.5, y-7.5, pixie, pixie);
    ellipse(x-7.5, y-7.5, pixie, pixie);
    ellipse(x+7.5, y-12.5, pixie, pixie);
    ellipse(x-7.5, y-12.5, pixie, pixie);
    ellipse(x+5, y-15, pixie, pixie);
    ellipse(x-5, y-15, pixie, pixie);
    ellipse(x+2.5, y-12.5, pixie, pixie);
    ellipse(x-2.5, y-12.5, pixie, pixie);
    ellipse(x, y-10, pixie, pixie); //coordinates to create heart
}

I created hearts to cover up the canvas and show an image of me in Lawrenceville. I tried to show how much fun I had in Lawrenceville by filling up the canvas with hearts, and the bright colors of the image fits well with the hearts as well. 

I looked at Sammie’s assessment on the “Digital Grotesque,” which is a large architectural artwork that was 3D printed out of sandstone. I agree with Sammie that the massive scale of this piece blows my mind because in the past 3D technology was used for small objects/projects, but the “Digital Grotesque” is a huge architectural piece. The extremely complex details and geometry (260 million individual facets) amazes me as well. She mentions how she was admired by the fact that “the base algorithms produce results that are not entirely predictable, though not random,” which I couldn’t agree more with. I feel like Sammie really looked deeply into the project and research a lot about how the artwork was structured. In her Looking Outwards, I can see she deeply understands how the piece was created in detail. I feel like she explained well about how the piece was structure/created, but I feel like it would’ve been more interesting if she also mentioned about the meaning behind the artwork. 

https://courses.ideate.cmu.edu/15-104/f2019/2019/09/09/sammie-kim-looking-outwards-03/

Sammie Kim, Looking Outwards 03, 2019

Liam Young is an Australian born architect who is situated within the areas of design, fiction, and future. His works are well known for incorporating the boundaries among fiction, storytelling, design, and film, where its goal is to image and prototype the future of city. Young’s works deviate from how architects normally practice their fields (deviated from tradition), which did cause some controversy within the architectural world. In a project called “Under Tomorrow’s Sky,” Liam Young gathered ideas of madness, visionaries, speculative gamers, literary astronauts, digital poets, and luminaries to create a future city of his own. Like this, Liam Young often escapes from the norm and sees architecture and design from a whole different perspective, which really caught my attention and made me realize how much an artist can be so creative in expressing ideas into his work. The fact that Liam Young was successfully able to think outside the box and express his definition of art to his work inspired me to also express my creative ideas into my work as well.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project - 07 - Curves

var nPoints = 100;

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


function draw() {

    fill(20, 8, 78); //color for background
    rect(0, 0, width, height); 
    
    push();
    translate(width / 1.4, height / 2);
    drawCurve();
    pop();

}

function drawCurve() {
    var cR = map(mouseX, 0, width, 100, 200);
    var cG = map(mouseX, 0, width, 200, 250);
    var cB = map(mouseX, 0, width, 230, 255); //color for shape

    var s = 100; // size
    var a = constrain(mouseX/2, 0, width) / 30; // mousex position
    var b = constrain(mouseY/2, 0, height) / 30; // mousey position

    fill(cR, cB, cG);
    strokeWeight(5);
    stroke(255);

    beginShape(); 
    for (var i = 0; i < nPoints; i++){ 
    var t = map(i, 0, nPoints, 0, TWO_PI); 

    x = s * (cos(a+t) * (1-(cos(a+t))));
    y = s * (sin(b+t) * (1-(cos(b+t)))); // equation of curve to create shape

    vertex(x,y);// drawing vertex
  }
  endShape(CLOSE); 
}

I used the Cardioid Curve from the Mathworld curves site to create this project. At first, I thought the movement of the curve was interesting, which is why I chose to use this particular curve. I thought the circular movement of the curve looked like the tornado-like movement of water when it is spun. I tried to express that circular movement of water with cardioid. By making the background color dark blue and the shape itself change colors between different shades of blue, I tried to express water and the spiral movement of water. Everytime I move the mouse left, the shape will turn clockwise and the color will turn vivid blue-green. When the mouse is moved right, the shape will turn counter-clockwise and the color will turn light blue.