Author: jooheek@andrew.cmu.edu

jooheek&heeseoc – FinalProject

Press 1 to start!

sketch

//JooHee Kim & Steph Chun
//jooheek@andrew.cmu.edu
//heeseoc@andrew.cmu.edu
//Section E & A
//FinalProject

//background peak variables
var peakDetail = 0.005;
var peakSpeed = 0;
//image variables
var startingImg;
var roseImg, foxImg, kingImg, heartImg, princeImg;
var rose1, rose2, fox1, fox2, king1, king2;
var stage1, stage2;
//image size variable
var imgSize = 30;
//image x location for the rose, fox, king, heart
var roseImgX, foxImgX, kingImgX, heartImgX;
//prince x and y location variables
var princeX = 0;
var princeY = 300; 
//prince velocity
var step = 3;
//variable to show different maps
var gameState = "startingPage";

function preload() {
	//starting page image load
	startingImg = loadImage("https://i.imgur.com/FaTj1qD.png");
	//characters image load
	roseImg = loadImage("https://i.imgur.com/GOidsQF.png");
	foxImg = loadImage("https://i.imgur.com/82QrEHu.png");
	kingImg = loadImage("https://i.imgur.com/VGJWuoN.png");
	heartImg = loadImage("https://i.imgur.com/n5dXPi2.png");

	//dialogues image load
	rose1 = loadImage("https://i.imgur.com/tqYH2Mj.png");
	rose2 = loadImage("https://i.imgur.com/dKifumO.png");
	fox1 = loadImage("https://i.imgur.com/6TTLTzV.png");
	fox2 = loadImage("https://i.imgur.com/54o8F0T.png");
	king1 = loadImage("https://i.imgur.com/CJzrcxQ.png");
	king2 = loadImage("https://i.imgur.com/Q8F6SeH.png");

	//stage continue image loads
	stage1 = loadImage("https://i.imgur.com/W075rzc.png");
	stage2 = loadImage("https://i.imgur.com/E0UeoHi.png");

	//prince image load
	princeImg = loadImage("https://i.imgur.com/nHWDXuC.png");

}

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

}

function draw() {

	//loads different map functions at different conditions
	if (gameState == "startingPage") {
		startingPage();
	} else if (gameState == "mapOneMakePlanetMountains") {
		mapOneMakePlanetMountains();
	} else if (gameState == "mapTwoDesertMountainsAndPlatforms") {
		mapTwoDesertMountainsAndPlatforms();
	} else if (gameState == "mapThreeKingPlanet") {
		mapThreeKingPlanet();
	}

	//moves prince with up and right arrow
    if (keyIsDown(RIGHT_ARROW)){
    	princeX += step; //right
    }

    if (keyIsDown(UP_ARROW)){
    	princeY -= step; //up
    } else {//if key is released, the prince falls until the floor
    	princeY += step;
    	princeY = min(princeY, height*3/4-princeImg.height);
    }

}

function keyPressed() {
	//when 1, 2, 3 keys are pressed, the map changes
	if (key == '1') {
		gameState = "mapOneMakePlanetMountains";
		princeX = 0;
		princeY = 300;
	} else if (key == '2') {
		gameState = "mapTwoDesertMountainsAndPlatforms";
		princeX = 0;
		princeY = 300;
	} else if (key == '3') {
		gameState = "mapThreeKingPlanet";
		princeX = 0;
		princeY = 300;
	}
}

//First Game Start Page
function startingPage() {
	image(startingImg, 0, 0, width, height);
	
}

//Map One
function mapOneMakePlanetMountains() {
	background(40, 40, 80);
	noStroke();

	//stars in the background
	fill(255);
	ellipse(random(0, width), random(0, height), 10, 10);

	//peaks in the background
	fill(200);
	beginShape(); 
    for (var planet = 0; planet <= width; planet++) {
        var planetOverallSpeed = (planet * peakDetail) + (millis() * peakSpeed);
        var planetPeaks = map(noise(planetOverallSpeed), 0, 1, width/2, height/4);
        vertex(planet, planetPeaks); 
    }
    vertex(width,height);
    vertex(0, height);
    endShape();

	//plant floor
	var planetFloorY = height*3/4;
	fill(100);
	rect(0, planetFloorY, width, height);

	//rose image
	roseImgX = width - 60;
	image(roseImg, roseImgX, planetFloorY - imgSize, imgSize, imgSize);

	//heart image
	heartImgX = width/2;
	//if prince touches heart it disappears
	if (princeX < heartImgX) {
		image(heartImg, heartImgX, planetFloorY - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//speech bubbles appear when prince and rose meet
	if (princeX >= roseImgX-60) {
		image(rose1, roseImgX - 130, height*3/4 - 150, imgSize*3, imgSize*3);
		image(rose2, roseImgX - 60, height*3/4 - 130, imgSize*3, imgSize*3);
	}

	//next stage sign when prince goes to end
	if (princeX > roseImgX) {
		image(stage1, 2, height/2-stage1.height/2, stage1.width, stage1.height);
	}

}

//map two
function mapTwoDesertMountainsAndPlatforms() {
	background(131, 234, 255);
	noStroke();
    
    //desert peaks background
    fill(255, 210, 139);
    beginShape(); 

    for (var desert = 0; desert <= width; desert++) {
        var desertOverallSpeed = (desert * peakDetail) + (millis() * peakSpeed);
        var desertPeaks = map(noise(desertOverallSpeed), 0, 1, width/2, height/4);
        vertex(desert, desertPeaks); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //floor rectangles
    var floorY = height*3/4;
    fill(213, 148, 92);

    rect(0, floorY, width/4, height/4);

    rect(width/2, floorY, width/2, height/4);

    //fox image
    foxImgX = width - 60;
    image(foxImg, foxImgX, floorY - imgSize, imgSize, imgSize);
	
	//heart image
	heartImgX = width/2;
	//if prince touches heart, it disappears
	if (princeX < heartImgX) {
    	image(heartImg, heartImgX, floorY - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//speech bubbles appear when prince meets fox
	if (princeX >= foxImgX-50) {
		image(fox1, foxImgX - 130, floorY - 150, imgSize*3, imgSize*3);
		image(fox2, foxImgX - imgSize*2, floorY - 130, imgSize*3, imgSize*3);
	}
	
	//next stage sign when prince touches edge
	if (princeX > foxImgX) {
		image(stage2, 2, height/2-stage2.height/2, stage2.width, stage2.height);
	}


}

//map three
function mapThreeKingPlanet() {
	background(40, 40, 80);
	noStroke();

	//stars in background
	fill(255);
	ellipse(random(0, width), random(0, height), 10, 10);

    //peaks in background
    fill(200);
	beginShape(); 
    for (var planet = 0; planet <= width; planet++) {
        var planetOverallSpeed = (planet * peakDetail) + (millis() * peakSpeed);
        var planetPeaks = map(noise(planetOverallSpeed), 0, 1, width/2, height/4);
        vertex(planet, planetPeaks); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //floors rectangles
    var kingFloorY = height*3/4;

    fill(100);
    rect(0, kingFloorY, width/6, height/4);

    rect(width/3, kingFloorY, width/6, height/4);

    rect(width*2/3, kingFloorY, width/6, height/4);

    rect(width*5/6, height/2, width/6, height/2);

    //king image
    kingImgX = width - width/8;
    image(kingImg, kingImgX, height/2 - imgSize*2, imgSize*2, imgSize*2);
	
	//heart image
	heartImgX = width*2/3;
	//heart disappears when prince touches heart
	if (princeX < heartImgX) {
    	image(heartImg, heartImgX, height*3/4 - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//if prince reaches king, speech bubbles appear
	if (princeX >= kingImgX-80) {
		image(king2, kingImgX - 140, height*3/4 - imgSize*4, imgSize*3, imgSize*3);
		image(king1, kingImgX - 60, height/2 - imgSize*4, imgSize*3, imgSize*3);
	}
}

We wanted to make an interactive game like SuperMario with the visual/thematic concept as The little Prince. In our game, the player controls the main character to avoid the obstacles, collect items, and in addition to that, we added a dialogue feature so that we can implement the storyline of The Little Prince better. Because of the time constrain, we weren’t able to achieve everything that we’ve listed in the project brief, and we had to re-distribute the workload so that it makes sense to the timeframe that we’ve got.
Also, making the game itself work was more difficult that we thought because of the unexpected details that we had to tackle.

LookingOutwards12 – jooheek

One source or inspiration for our project is the video of Spirited Away in 8 bit game form. In this game, the character is moved through keys and there are various interactions that the character has throughout. She meets other characters that are in the movie and there are different missions that she has to complete in order to go through the next scene. This game is similar to what we want to make because of the interactiveness of the game. Just like this video, we want the user to be able to control the character and get to an end goal by achieving different items or missions, or interacting with other characters. I really admire the visuals and the different interesting interactions that are included in the game that go very well with the theme of the actual movie.

Another source of inspiration for our project is the dinosaur game on Google Chrome when there is no internet connection. For this game, the movement of the dinosaur is similar to what we want the movement of our character in our game to be. This game is similar to the Spirited Away game above in that their concepts are similar where the character is moved by the user and have to avoid obstacles to get to the end goal. However, the dinosaur game and the Spirited Away game are different in that the Spirited Away one has more components to it, as the dinosaur one is just jumping over cacti. We want to combine the interaction that is included in these games to create our game for our final project.

The dinosaur game

jooheek-FinalProjectProposal

For this project, I will be collaborating with HeeSeo Chun. We will be making an interactive game where you control the character’s movement by pressing keys (something like Super Mario or Cookie Run). We are taking inspiration from this video of Spirited Away in game form.

We want to make this a simple game where you go through the map by jumping or ducking. But in addition to these interactions, we want to have some more aspects of interaction such as: dialogue with other characters, acquiring items, etc. As a visual theme, we want to keep the 8 bit visual but as a conceptual theme, we want to use “The Little Prince”. For example, the little prince will be the main character that the user moves throughout the game, and he will meet the rose, the fox, and other characters as he runs. All of these aspects of the game are temporary for now, according to how possible some aspects are to code with our knowledge of coding.

LookingOutwards11-jooheek

The Classyfier – AI detects situation and appropriates music

Website: http://www.creativeapplications.net/processing/the-classyfier-ai-detects-situation-and-appropriates-music/

This project is called “The Classyfier”, a table that detects what beverages people are drinking around them, and chooses music that fits with that certain beverage. There is a microphone on the table that catches the characteristic sounds of the beverage, and goes through a pre-inputed list of songs that are categorized as hot beverages, wine, and beer. It goes through and chooses a song that fits your beverage, and you can choose the song in the certain category by knocking on the table. The objective of this project is to create a smart object that combines machine learning and natural sounds to create an ambience of different situations.

I thought this project was interesting because it uses computation to create a musical environment that is dependent on an object, in this case a beverage. The thought and idea of a computer analyzing what you are drinking and creating music that fits that drink is very innovative and clever. Now, you won’t have to go through all of your music to find the right music for your mood; you can just use “The Classyfier”.

LookingOutwards10-jooheek

Heather Kelley – Perfect Plum

Website: http://www.perfectplum.com/

Perfect Plum is the design concern of Heather Kelley, a veteran game designer, digital artist and media curator. It focuses on under-explored aesthetic experiences and sensory interactions (smells, sounds, touch, etc.). Heather Kelley has an extensive career in the gaming industry, as she has contributed in the design and production of AAA next-gen console games, interactive smart toys, handheld games, research games, and web communities for girls. She was named one of the five most powerful women in gaming by Inc. magazine in 2013. In 2011, she was named one of the most influential women in technology by Fast Company.

One of her projects that I thought was interesting was SUPERHYPERCUBE, a VR game that was the launch title for PlayStationVR. It is an intuitive shape-matching gameplay where you control a group of cubes, rotating it to fit through a hole in a series of floating walls that are constantly moving toward you. As you keep making goals, your cube gets bigger, which makes you lean around it to see the hole coming, and makes you think quickly about what moves to make to make it fit. I thought this game was very intuitive because it makes you really think about how to play the game. It was also very interesting because it is a virtual reality game, which I personally always find very interesting and exciting. I also like the aesthetics of this game where it doesn’t use a real life setting, but a made up, designed space. Of course it could work as a 2D game as well, but because it is 3D and in virtual reality, it makes the game more interesting and more intuitive by making you use a lot of your senses.

jooheek-Project10-Generative Landscape

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-10

var animals = [];
var mountainSpeed1 = 0.00005;
var mountainDetail1 = 0.005;
var mountainSpeed2 = 0.0001;
var mountainDetail2 = 0.003;
var mountainSpeed3 = 0.0002;
var mountainDetail3 = 0.001;

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

    //creates 5 animals at start
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        animals[i] = makeAnimals(rx);
    }

    frameRate(30);
}


function draw() {
    background(210, 240, 255); 

    makeMountains();
    makeOasis();
    updateAndDisplayAnimals();
    removeAnimals();
    addNewRandomAnimals(); 

}

function makeMountains() {
    //first farthest mountain
    noStroke();
    fill(125, 185, 130);
    beginShape(); 
    for (var m1 = 0; m1 < width; m1++) {
        var mountainOneSpeed = (m1 * mountainDetail1) + (millis() * mountainSpeed1);
        var mountainPeaksOne = map(noise(mountainOneSpeed), 0, 1, width/2, height/4);
        vertex(m1, mountainPeaksOne); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //second mountain
    fill(155, 215, 140);
    beginShape(); 
    for (var m2 = 0; m2 < width; m2++) {
        var mountainTwoSpeed = (m2 * mountainDetail2) + (millis() * mountainSpeed2);
        var mountainPeaksTwo = map(noise(mountainTwoSpeed), 0, 1, width/2 + 10, height/4 + 30);
        vertex(m2, mountainPeaksTwo); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //third closest mountain
    fill(185, 245, 150);
    beginShape(); 
    for (var m3 = 0; m3 < width; m3++) {
        var mountainThreeSpeed = (m3 * mountainDetail3) + (millis() * mountainSpeed3);
        var mountainPeaksThree = map(noise(mountainThreeSpeed), 0, 1, width/2 + 20, height/4 + 60);
        vertex(m3, mountainPeaksThree); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

}


function updateAndDisplayAnimals(){
    for (var i = 0; i < animals.length; i++){
        animals[i].move();
        animals[i].display();
    }
}


function removeAnimals(){
    var animalsToKeep = [];
    for (var i = 0; i < animals.length; i++){
        if (animals[i].x + animals[i].breadth > 0) {
            animalsToKeep.push(animals[i]);
        }
    }
    animals = animalsToKeep;
}


function addNewRandomAnimals() {

    var newAnimals = 0.009; 
    if (random(0,1) < newAnimals) {
        animals.push(makeAnimals(width));
    }
}

function animalsMove() {
    this.x += this.speed;
}
    
function animalsDisplay() {
    noStroke(); 
    push();
    translate(this.x, height - height/4);
    //shadow of animals
    fill(100, 100, 100, 60);
    ellipse(this.size/4, this.size*3/4, 150, 30);
    //the butts of the animals
    fill(this.color); 
    ellipse(0, 0, this.size, this.size);
    ellipse(this.size/2, 0, this.size, this.size);
    //the tails of the animals
    fill(50);
    ellipse(this.size/4, -this.size/2+this.size/4, this.size/8, this.size/4);
    //the legs of the animals
    fill(this.color);
    quad(-this.size/4-5, 0, -this.size/8-5, this.size*3/4, this.size/8-5, this.size*3/4, this.size/4-5, 0);
    quad(this.size/2-(this.size/4-5), 0, this.size/2-(this.size/8), this.size*3/4, this.size/2+(this.size/8), this.size*3/4, this.size/2+(this.size/4+5), 0);
    pop();
}


function makeAnimals(birth) {
    var ANIMALS = {
                x: birth,
                breadth: 50,
                size: 100,
                speed: -7.0,
                move: animalsMove,
                display: animalsDisplay,
                color: [random(50, 255), random(50, 255), random(50, 255)]
            }

    return ANIMALS;
}

function makeOasis() {
    fill(120, 170, 245);
    rect(0, height/2+80, width, 100);

}

I got inspiration for this project from the Lion King, where the animals drink from a pond or lake. I wanted to use this project to show animals drinking from a lake as well while the background (mountains) is moving. There are three mountains that vary in color to show depth and there are animals in the foreground drinking from the water. This is the picture that gave me the inspiration from the movie.

LookingOutwards09-jooheek

Living Sculptures Series – Mike Campau

Hee Seo Chun’s Looking Outwards #5 Post

In this post, Hee Seo talks about a project series by Mike Campau where he creates portraits of different people using non-humanistic features generated from computer graphics. I agree with her in that it’s interesting how he uses non-humanistic features to personify a person by juxtaposing them next to humanistic features (like clothing, posture, etc.). I also think it’s interesting how these non-humanistic features can give this portrait character. It shows how you don’t always have to personify a person with a head, arms, body and legs. Also, the fact that this was generated on the computer and made to look very surreal is what makes this piece very compelling. By using non-natural ways of generating and non-natural features to create a “natural” subject, Mike Campau creates an interesting computational art series.

https://www.behance.net/gallery/19683165/LIVING-SCULPTURES-2

Three examples of the series

jooheek-Project09-ComputationalPortrait

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project09-ComputationalPortrait

//global variable for image
var susieImg;
var susieImgURL;

function preload() {
	//loading image
	susieImgURL = "https://i.imgur.com/ezOtPFw.jpg?1";
	susieImg = loadImage(susieImgURL);
}

function setup() {
    createCanvas(360, 480);
    background(255, 200, 200);
    //load image pixels
    susieImg.loadPixels();
    //at a frame rate of 30
    frameRate(30);
}

function draw() {

	//variables for drawing circles
	var pixelX = random(width);//for position of circles
	var pixelY = random(height);
	var imageX = constrain(floor(pixelX), 0, width-1);//position of image pixel that we need to get color from
	var imageY = constrain(floor(pixelY), 0, height-1);
	var pixelDiam = random(1, 20);//for size of circles
	var colorOfImgPixel = susieImg.get(imageX, imageY);//getting color of pixel at imageX & imageY

	//drawing circles positioned at random with random sizes
	//filled with color of pixel at that position
	noStroke();
	fill(colorOfImgPixel);
	rect(pixelX, pixelY, pixelDiam, pixelDiam);

	//drawing outlined circles at mouse position
	//with stroke outline color of pixel at mouse position

	var strokeEllipseSize = random(15, 25);
	var ellipseStroke = random(1, 5);
	var colorOfImgPixelAtMouse = susieImg.get(mouseX, mouseY);
	stroke(colorOfImgPixelAtMouse);
	strokeWeight(ellipseStroke);
	noFill();
	rect(mouseX, mouseY, strokeEllipseSize, strokeEllipseSize);
}

The portrait I used for this project is of my dear friend, Susie. I decided to make the image out of rectangles to kind of make it look very pixelated. I also made stroke rectangles following my mouse position so that there is a contrast of solid and outlined rectangles.

Original Photo of Susie
First stage
Second Stage

LookingOutwards08-jooheek

Events in Space Time – Jesse Louis-Rosenburg & Jessica Rosenkrantz (Eyeo 2015)

Talk: https://vimeo.com/channels/eyeo2015/133709845

Jesse Louis-Rosenburg and Jessica Rosenkrantz are part of Nervous System,  a generative design studio that works at the intersection of science, art, and technology. Jesse has a background in math and computer science, while Jessica in biology and architecture. In their projects, they are interested in focusing on three main areas of research: science and nature, digital fabrication, and co-creation. They start all of their projects by studying natural phenomena, and translate them into one of a kind products by using design tools, algorithms, and technological systems (essentially digital fabrication) that they create to represent those natural phenomena.


Floraform from Nervous System on Vimeo.

It’s interesting how they are using digital fabrication to find new ways of translating nature and biology into different kinds of products. One project that interested me the most is Floraform. In this project,they delve into how biological systems create form by varying growth rates through space and time, hence the title of their talk. They then created algorithms and mechanisms that created a simulation of differentially growing elastic surfaces that represented these differential growths. These experiments were then used to create 3D sculptures and wearable products. What interested me about this project was how they took a natural phenomenon and created their own algorithms to translate them into physical objects.

Natural phenomenon of a flower
Simulation that follows the natural phenomenon
Wearable product created from the simulation

Throughout the talk, they used pictures, videos, simulations, and other different types of visualization to present their works in their presentations. I believe this is the most effective way to show their work, which are mostly composed of computer generated products. This makes me realize that there are many different ways of showing not just your end product but also your process of designing that product as well.