The first project I found as a precedent for my final project is a virtual dining experiment by Heston Blumenthal and Marshmallow Laser Feast back in 2016. This event provided visitors with a groundbreaking experience of dining in a virtual reality. The software itself uses tracking technology, and real-time motion capture for a “multisensory, mixed-reality cuisine”.

The second project is a game I was inspired by for this final project. Cooking Mama is a classic game by Office Create originally released for the Nintendo DS in 2006. It simplifies the cooking process for a variety of menus, which users choose to simulate. The game provides users with a platform to cook using interactions between the touch screen and the stylus. One opportunity the game might’ve overlooked however is the potential to become an educational software. If the game had used accurate recipes and a slightly more complex and realistic process and representation, the game could’ve easily been further developed to be used as practical tools for use in the kitchen. However, the game had its own characteristics because of its inaccurate representations and recipes that made the simplified game more appealing to the general public.

I found the two projects similar in that both provide a digital experience in regards to food. While the first project may be more accurate and realistic, Cooking Mama emulates the experience through the stylus interactions, sound effects, and visual depictions of real food. Even though the first project focuses on the dining experience while the second targets the cooking experience, both programs provide users with a virtual experience with food to simulate the actual act of dining/cooking.

I will be working with Sarah Kang for the final project to create an interactive cooking software that makes dumplings. While considering the various types of foods to make, we decided to make dumplings because we found many interactive aspects in the dumpling making process that we hope to incorporate in our project. There are 6 stages to the game with user interactions for each stage besides the final plating. We simplified the process into mixing the ingredients, rolling the dough, cutting the dough, folding the dumpling, frying the dumpling, and the final plating of the finished dumplings.

We will be using imported images we find online with images we code directly on p5js, as well as images we draw on illustrator and import to animate the game. The user will be able to interact with the game using the mouse cursor as well as specific keys such as the space bar.

ycho2-11

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project 11 */

var gifts = [];

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

    //gifts already on conveyor at start
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        gifts[i] = makeGifts(rx);
    }
    frameRate(15);
}

function draw() {
    background(240);

    //draw gifts
    updateGifts();
    addGifts();
    removeGifts();

    //draw conveyor
    drawConveyor();
}

//update gift location
function updateGifts() {
    for (var i = 0; i < gifts.length; i++) {
        gifts[i].move();
        gifts[i].display();
    }
}
 
//remove gifts after conveyor from array
function removeGifts() {
    var giftsToKeep = [];
    for (var i = 0; i < gifts.length; i++) {
        if (gifts[i].x + gifts[i].breadth > 0) {
            giftsToKeep.push(gifts[i]);
        }
    }
    gifts = giftsToKeep;
}

//add new gifts to array
function addGifts() {
    var newGiftLikelihood = 0.04;
    if (random(0,1) < newGiftLikelihood) {
        gifts.push(makeGifts(width));
    }
}

//move gifts per frame
function giftMove() {
    this.x += this.speed;
}

//draw each gift
function giftDisplay() {
    //giftbox
    var py = 150;
    noStroke();
    fill(this.r, this.g, this.b);
    rect(this.x, py, this.breadth, this.h);
    //ribbons
    fill(255);
    rect(this.x + this.breadth / 4, py, this.ribbon, this.h);
    rect(this.x, py + this.h / 2, this.breadth, this.ribbon);
}

//gift Object
function makeGifts(birthLocationX) {
    var gift = {x: birthLocationX, 
                h: -random(10, 40),
                ribbon: random(1, 5),
                r: random(100, 255),
                g: random(100, 255),
                b: random(100, 255),
                breadth: random(20, 80),
                speed: -1.0,
                move: giftMove,
                display: giftDisplay}
    return gift;
}

function drawConveyor() {
    //conveyor
    strokeWeight(0);
    fill(220);
    rect(0, height / 2, width, 30, 25);
    strokeWeight(2);
    stroke(255);
    rect(4, (height / 2) + 4, width - 8, 30 - 8, 25);
    //conveyor gears
    for (var y = 0; y < 18; y++) {
        var ny = 15 + y * 20;
        strokeWeight(2);
        stroke(200);
        noFill();
        ellipse(ny, height / 2 + 15, 18);
        strokeWeight(0);
        fill(255);
        ellipse(ny, height / 2 + 15, 8);
    }
    //ground
    fill(150);
    strokeWeight(0);
    rect(0, height * 4 / 5, width, height / 5);
    //legs
    strokeWeight(0);
    fill(190);
    rect(100, height / 2 + 30, 12, 80);
    rect(88, height / 2 + 110, 35, 15, 2);
    //scanning machine
    rect(350, 145, 200, 130, 8);
    rect(350, 50, 10, 110, 8);
    rect(350, 50, 135, 15, 8);
    fill(255, 0, 0, 50);
    rect(360, 65, 130, 80);
}

For this project, I was interested in the purpose of a conveyor belt and how it is able to move a group of objects at a set rate. I used objects to randomize the size and color of gifts that would pass through the conveyor belt. I kept the background graphics to a grayscale to emphasize the gifts that pass through the screen. I found this assignment to be very helpful in understanding how objects work since we had to create our own objects as opposed to being given an object and just using it in the draw function.

Mesocosm (Times Square) clips (2015) from Marina Zurkow on Vimeo.

Mesocosm is a software-driven animaton that uses three projections to portray the saptiotemporal organization of Hieronymus Bosch’s Garden of Earthly Delights. In short, Zurkow and her team depicts Eden before The Fall, the Present, and Hell in a hybrid animation of Times Square. The project blurs the boundaries in terms of time and ecology by making the animation continuous, as opposed to three distinct projections. I find the uncertainty in when the past ends and when the future begins, and where the landscape separates from civilization to be really interesting. What I admire most about this project is its coherent usage of art and programming. Zurkow and her team not only drew each frame in the animation using a hybrid of images from Google Street View, present-day architecture, but they also created a software to transition each frame in the animated landscapes in response to algorithmic rules. No cycle is repeated and the character interactions and changes in weather are determined by a probability equation. Zurkow’s usage of art/ graphics to depict algorithmic data makes the hybrid nature of this project much more complex and interesting.

Marina Zurkow is an artist who focuses on the intersections of nature and culture. She takes various unique approaches in her work by drawing from her knowledge in life science, animation, and software technologies. She graduated from the School of Visual Arts in 1985 with a major in Fine Arts. After graduation, she traveled all around the world to showcase her numerous exhibitions and projects including New York, Shanghai, San Francisco, Berlin, South Korea, etc. However, she mainly works in New York, and is currently a full time faculty at NYU’s Tisch School of Arts.

Mesocosm (2015), Marina Zurkow

I created a sound to represent the static on the TV. I then used mouseX and mouseY to control the frequency and volume of the sound respectively. To change the TV screen or the “channel”, I uploaded different images and sounds so that when the mouse leaves the TV to the left and right, the channels would change accordingly.

sketch

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-10 */

/* directions:
move vertically = control the volume of the beep
move horizontally = control the frequency of the beep & change TV screens 
    - move to the left or right of the TV to change TV "channels" */

var screenW = 360
var screenH = 300
var rectW = 10
var rectH = 20
var angle = 0
var myImageURL = ["https://i.imgur.com/Q5CjhQu.jpg?2", "https://i.imgur.com/TFlpQiF.png?2"]
var imageA;
var imageB;
//original sound file names 
var mySndURL = ["rickandmorty.wav", "porter.wav"]
var sndA;
var sndB;
var sndAstart;
var sndBstart;

function preload() {
    //loading images and sounds and setting them as variables
    sndA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rickandmorty.wav");
    sndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/porter.wav")
    imageA = loadImage(myImageURL[0]);
    imageB = loadImage(myImageURL[1]);
}

function setup() {
    createCanvas(640, 480);
    useSound();
}

function soundSetup() {
    //creating a beep to represent the screen with static
    osc = new p5.SinOsc();
    osc.freq(880.0);
    osc.amp(0.1);
    osc.start();
}

function draw() {
    //drawing background based on mouse location even beyond canvas size (so there will always be a background)
    background(256, mouseX, mouseY);
    rectMode(CENTER);
    //function to create TV features
    drawTVoptions();
    //function to control TV screens
    drawTVscreen();
}

function drawTVoptions() {
    //constraining TV to appear only if mouse is within canvas limits
    if (mouseX < width & mouseY < height) {

        //antenna
        stroke("pink");
        strokeWeight(5);
        line(320, 95, 370, 10);
        line(320, 95, 250, 5);
        strokeWeight(0);
        fill("white");
        ellipse(320, 95, 100, 50);

        //tv
        fill("pink");
        rect(320, 280, 500, 380, 50);
        fill("white");
        rect(290, 280, 380, 320, 30);

        //tv controls
        ellipse(525, 175, 50, 50);
        ellipse(525, 250, 50, 50);
        fill("pink"); 

        //rotating dials
        push();
        translate(525, 175);
        rotate(radians((angle + 20) + mouseX / 2));
        rect(0, 0, 40, 10);
        pop();
        push();
        translate(525, 250);
        rotate(radians(-angle + mouseX / 2));
        rect(0, 0, 40, 10);
        pop();

        //slider
        fill("white");
        rect(525, 360, 6, 136);
        var slider = map(mouseY, 0, height, 292, 428);
        slider = constrain(slider, 292, 428)
        rect(525, slider, 25, 25);
    }
}

function drawTVscreen() {
    //changing channel to rick and morty if mouse is to the left of the TV
    if (mouseX < width / 10 & mouseY < height) {
        image(imageA, 110, 130);
        if (sndAstart) {
            sndA.play(0, 1, 2)
        }
        sndAstart = false
    } else {
        sndA.stop()
        sndAstart = true
    }

    //static screen and sounds play if mouse is on TV
    if (mouseX > width / 10 & mouseX < 9 * width / 10 && mouseY < height) {
        //tv screen
        fill("black");
        rect(290, 280, screenW, screenH);
        
        //to imitate static
        var color = random(0, 255);
        //to constrain static heights within screen
        
        length = map(mouseY, 0, height, 292, 428);
        var length2 = constrain(length, 0, height);

        var staticH = height - length2;

        //static
        fill(200);
        translate(110, 130);
        fill(color, mouseX, color);
        rect(screenW * 0.02, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.06, screenH / 2, rectW, staticH * .8);   
        rect(screenW * 0.10, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.14, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.18, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.22, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.26, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.30, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.34, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.38, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.42, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.46, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.50, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.54, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.58, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.62, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.66, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.70, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.74, screenH / 2, rectW, staticH * .2);
        rect(screenW * 0.78, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.82, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.86, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.90, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.94, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.98, screenH / 2, rectW, staticH * .4);

        //controlling frequency with mouseX
        var newpitch = map(width - mouseX, 0, width, 800, 50)
        osc.freq(newpitch)

        //controlling volume with mouseY
        var newvolume = map(height - mouseY, 0, height, 0.1, 3)
        osc.amp(newvolume)
    } else {
        //muting beep if mouse goes beyond range
        osc.amp(0);
    }

    //changing channel to porter robinson if mouse is to the left of the TV
    if (mouseX > 9 * width / 10 & mouseX < width && mouseY < height) {
        image(imageB, 110, 130);
        if (sndBstart) {
            sndB.play(0, 1, 2);
        }
        sndBstart = false
    } else {
        sndB.stop()
        sndBstart = true
    }
}

Brian Foo draws from his fascination and interest in brain activity in “Rhapsody in Grey” by translating brainwave data into music. He specifically studied the brainwaves of a female pediatric patient with epilepsy so that listeners can empathize or briefly experience what may be going on during a seizure. I was intrigued by the distinctiveness of this project, as well as his creative approach to a scientific topic such as brainwaves. I admire Foo’s usage of his fluency and skills in programming to portray a personal interest(brain activity) in his own creative way(music). I found this project to be inspiring in the endless possibilities of programming and computational art.

Foo uses different variables from EEG brainwave data to computationally generate the intensity and fluidity of the rhapsody. He used Python to extract an excerpt from the EEG data, which he then calculated the average amplitude, frequency, and synchrony of. He then assigned instrumental and vocal samples in correlation to the calculations. The sounds were synthesized into a rhapsody using a music creating program called ChucK. Lastly, he used Processing, a visual programming language, to generate the visual waves that play with his music in the video above.

You’re able to see Foo’s artistic sensibilities in the final work in the sound samples he chose as well as connections he made to the EEG data. For example, he raised the pitch of string instruments during higher frequencies, while adding louder sounds for higher amplitudes. The connections he makes between his calculated algorithms and sound samples are representative of his interest in the human subject, as well as his artistic priorities and decisions.

“Rhapsody in Grey” by Brian Foo (2015)

ycho2-09

/*Kimberlyn Cho
ycho2@andrew.cmu.edu
Section C
Project 09 */

var underlyingImage;
//array of emoticons to choose from
var words = [";)", ":P", ">_<", "^.^", "<3"];
var expression = ["damnnn", "wow", "omg", "beautiful"]

function preload() {
    var myImageURL = "https://i.imgur.com/mZFEEAK.jpg";
    underlyingImage = loadImage(myImageURL);
};

function setup() {
    createCanvas(360, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
};

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //randomize emoticon choice
	var textchoice = floor(random(0, 5));
	//randomize emoticon size
	var sizechoice = floor(random(10, 20));
	textSize(sizechoice);
	//choosing from array of emoticons 
	text(words[textchoice], px, py);
};

function mousePressed() {
	//generating "damnnn" with mousePressed
	var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    var textchoice = floor(random(0, 4));
	var sizechoice = floor(random(10, 20));
	textSize(sizechoice);
    text(expression[textchoice], mouseX, mouseY);
};

I chose my best friend from home for this assignment because I miss her very much. I used cute emoticons to represent her lovable and adorable character. I randomized the size and emoticon choice to vary the process. Lastly, I generated my first reactions to seeing this photo with the mouse pressed function.

A post I found most interesting while looking through my peers’ looking outwards is Lee Chu’s post for week 04. He focused on Porter Robinson and his visuals for live performances. I found the attached video of Porter’s visuals at one of his live performances to be really exceptional and breath-taking, which is why I chose to look into the process of the animations for my looking outwards. As Lee describes, Porter is a well known EDM artist who is noted for his amazing animations that are coherent to his music. I agree with Lee in that Porter’s musical style and artistic inspiration are well translated into his visuals that are portrayed in beautiful pastel, futuristic landscapes. As I looked into the process behind the animations, it was most interesting to learn that Porter receives a lot of inspiration from anime- especially the exploration of love and adventure in alternative realities by the characters. Hence, the artists behind his animations take Porter’s foundation into heavy consideration in all design choices, and actually personally involve Porter in most of the process. One of the challenges is said to have been trying not to be overwhelmed while creating a coherent piece of art. I found it amusing to hear that they actually struggled with this because it seems like they did an exceptional job at undergoing such a difficult development process.

Meejin Yoon is an architect and designer, currently teaching at MIT as a Professor in the Department of Architecture. She graduated from Cornell University with a Bachelor in Architecture, and then completed her graduate studies at Harvard’s GSD. Her work focuses on the intersection between space, technology, and materiality, and is most often acclaimed for its innovative and engaging characteristics.

I really admire Yoon’s consideration to public engagement in her projects. I think by prioritizing how humans would engage with the spatial qualities of a project, Yoon is able to create very deliberate and intricate experiences that are unparalleled to other public establishments. For example, her project, Shadow Play, creates a unique experience for users by taking advantage of a neglected public space in Phoenix. Yoon creates shade in the desert sun and facilitates air circulation through each cell of her public parasol. The project creates interesting shadows due to the hexagonal formatting of her steel plates, which adds an interesting design element to supplement the project’s strong functional purpose.

Eyeo 2015 – Meejin Yoon from Eyeo Festival on Vimeo.

During her talk at the Eyeo Festival, she focuses on her projects regarding interactive public spaces– especially topics such as responsive and interactive technology, smart materials, and the public engagement process. Her talk was interesting in that by narrowing it down to specific topics, she was able to choose only a few projects that utilize the technology in depth. And by going through the development process, the audience is able to grasp a deeper understanding the iterations as well as inspirations for the projects

Meejin Yoon

ycho2-07

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-07 */

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

function draw() {
	push();
	background(0);
	strokeWeight(2);
	noFill();
	translate(width / 2, height / 2);
	stroke(188, 19, 254);
	drawHypotrochoidCurve();
	stroke(250, 237, 39)
	drawEpitrochoidCurve();
	pop();
};

//Hypotrochoid Curve
function drawHypotrochoidCurve() {
	//http://mathworld.wolfram.com/Hypotrochoid.html

	//equations
	var x;
	var y;

	//parameters to control curve
	var a = map(mouseX, 0, width, 0, 200)
	var b = a / 20
	//curve radius
	var h = map(mouseY, 0, height, 0, 200)

	//drawing curve
	push();
	beginShape();
	for (var i = 0; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI)
		x = (a - b) * cos(t) + h * cos(((a - b) / b) * t)
		y = (a - b) * sin(t) - h * sin(((a - b) / b) * t)
		vertex(x, y)
	};
	endShape();
	pop();
} 

//Epitrochoid Curve
function drawEpitrochoidCurve() {
	//http://mathworld.wolfram.com/Epitrochoid.html

	//equations
	var x;
	var y;

	//parameters to control curve
	var a = map(mouseX, 0, width, 0, 250)
	var b = a / 20
	//curve radius
	var h = map(mouseY, 0, height, 0, 250)

	//drawing curve
	push();
	beginShape();
	for (var i = 0; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI)
		x = (a + b) * cos(t) - h * cos(((a + b) / b) * t)
		y = (a + b) * sin(t) - h * sin(((a + b) / b) * t)
		vertex(x, y)
	};
	endShape();
	pop();
} 

I found the flexibility of this project to be fun in the multitude of possible outcomes it allowed for even with the same kind of curves. The initial exploration of the various equations and curves was interesting– especially in discovering cool, interesting shapes or curves with just math equations. Although the complex equations were intimidating in my first approach to the project, it was pretty amusing to see how the curves reacted to changes in the different parameters. I chose to layer two different types of curves to create an illusion of depth and overlap. Overall, I enjoyed this project and think it was a great introduction to a mathematical approach to design through p5js.