Author: Katrina Hu

Katrina Hu – Looking Outwards – 12

Project Priors and Precursors

A sample of Greg Borenstein’s game “Sneak

The first artist I researched was Greg Borenstein. Greg Borenstein is a game designer, technologist, and teacher. His work explores game design, computer vision, drawing, machine learning, and generative storytelling as media for play and design. His game “Sneak” is a hybrid digital-physical tabletop game that began as his thesis in the MIT Media Lab Playful Systems group. It attempts to combine the social richness of a boardgame with the systemic complexity of a video game. This is relevant to my final project because I also would like to make an interactive game.

A demonstration of the GROW screencast

The second work I looked at was Moritz Stefaner’s “GROW Soil Moisture Maps.” The GROW Observatory is a European-wide project engaging thousands of growers, scientists and others passionate about the land. They developed the Dynamic Soil Moisture Map as a demonstration of an information service which could be used by farmers, scientists and policy makers for applications in agriculture and climate forecasting. These maps use GROW sensor data combined with satellite data to generate a continuous estimation of water content over a terrain. I admire how they look at real world data. This relates to my final project because it is also about the environment and the wellbeing of the earth.

Katrina Hu – Project 12 – Proposal

I will be collaborating with Chelsea Fan for Project 12. We plan to create a fun game relating to climate change. The objective of the game is to catch little polar bears that are falling. To do this, the user will slide a block of ice back and forth at the bottom of the screen. If the polar bear is caught with the block of ice, a positive tone will ring. If the user is unable to catch the polar bear, it will fall into water and a negative tone will ring.

We will also keep a number tally of all the polar bears that are caught and that drown. Every time a polar bear isn’t caught an drowns, the water level a small amount. The game is over when the water level reaches the top of the screen.

To make the game more challenging, we will also have two sizes of polar bears. Small baby polar bears will fall at a faster speed than the larger polar bears.

Simple drawing of our game



Katrina Hu – Project 11 – Generative Landscape

sketch_project11

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-11*/

var x1 = 100;
var x2 = 400;
var x3 = 30;
var luggage = [];

function setup() {
    createCanvas(480, 480);
    frameRate(60);
    background(191, 233, 255);

    //set an initial group of luggage
    for (var i = 0; i < 5; i++) {
    	var rx = random(width);
    	luggage[i] = makeLuggage(rx)
    }
}

function draw() {
	//drawing sun
	noStroke();
	fill(255, 252, 227);
	ellipse(80, 40, 80, 80);
	fill(255, 246, 179);
	ellipse(80, 40, 70, 70);
	fill(255, 238, 112);
	ellipse(80, 40, 50, 50);

	//drawing clouds
	drawCloud(x1);
	drawCloud(x2);
	drawCloud(x3);

	//drawing floor & window
	fill(100);
	rect(97, 0, 10, height);
	rect(377, 0, 10, height);
	rect(0, 67, width, 10);
	rect(0, 294, width, 180);
	fill(184);
	rect(0, 300, width, 180);
	rect(100, 0, 10, height);
	rect(380, 0, 10, height);
	rect(0, 70, width, 10);

	//drawing conveyor belt
	fill(50);
	rect(0, 372, width, 10);
	fill(110);
	rect(0, 380, width, 50)
	fill(200);
	rect(0, 390, width, 30)
	for(var dots = 0; dots < 9; dots ++) {
		fill(110);
		ellipse(dots * 70 + 20, 408, 10, 10);
		fill(250);
		ellipse(dots * 70 + 20, 403, 10, 10);
	}

	//drawing luggage
    updateLuggage();
    removeLuggageFromView();
    addLuggage();
}

function drawCloud(x) {
    push();
    noStroke();
    fill(240);
    ellipse(x, height / 5, 100, 100);
    ellipse(x + 10, height / 5 + 5, 100, 100);
    ellipse(x + 80, height / 5, 80, 70);
    ellipse(x + 10, height / 5 - 10, 80, 80);
    ellipse(x + 70, height / 4 - 55, 60, 50);
    pop();
}


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

function removeLuggageFromView() {
    //remove luggage from array if it's out of sight
    var luggageToKeep = [];
    for (var i = 0; i < luggage.length; i++) {
        if (luggage[i].x + luggage[i].breadth > 0) {
            luggageToKeep.push(luggage[i]);
        }
    }
    luggage = luggageToKeep; //remember the surviving luggage
}

function addLuggage() {
    //with a very small probability, add a new luggage to the end
    var newLuggageProb = 0.005; 
    if (random(0,1) < newLuggageProb) {
        luggage.push(makeLuggage(width));
    }
}

function luggageDisplay() {
	var top = 375 + this.height;
	//draw luggage
	stroke(0);
    fill(this.r, this.g, this.b);
    rect(this.x, 380, this.breadth, this.height);
    //draw handle
    fill(50);
    rect(this.x + 20, top, this.breadth - 45, 4);
    rect(this.x + 20, top, 4, 10);
    rect(this.x + this.breadth - 25, top, 4, 10);



}

function luggageMove(){
    this.x += this.speed; 
}

function makeLuggage(startX){
    var myLuggage = {x: startX,
                speed: -1.0,        
                breadth: random(80, 120),
                height: -random(50, 80),
                r: random(100, 255),
                g: random(100, 255),
                b: random(100, 255),
                move: luggageMove,
                display: luggageDisplay}
    return myLuggage;
}

My project is of a luggage conveyor belt in an airport. I decided to choose this landscape because of the picture that was posted within the instructions, which showed luggage moving around the belt. Luggage size and color is randomly picked and drawn onto the conveyor belt. This was a very fun project to do, and it was a great opportunity for me to practice using objects. The part I struggled with the most was figuring out how to draw the luggage handles on top of the suitcases. But overall, I learned a lot and am very happy with how the project turned out.

My original sketch of the project

Katrina Hu – Looking Outwards – 11

beauty, 2018-

One of the paintings in the collection

In the “beauty, 2018-” exhibit by Addie Wagenknecht, a Roomba is reconfigured to spread a lush mixture of cosmetic pigments, pharmaceuticals, perfumes, and skin care across canvas by way of a programmed algorithm. The result is a reinterpretation of beauty and a contemporary portrait of a modern woman.

The purpose of this work is to reclaim visibility with devices typically used to conceal. Wagenknecht has worked with substances that manipulate appearances in the past. She often works with cosmetics and technology to create pieces that resemble a female presence. Many of her works are on display in the artist’s solo exhibition in New York City.

I really admire that this piece is an abstract representation of femininity. It is interesting how the artist often uses Roombas in her work. Now, new models of the Roomba are striving towards memory capabilities and AI edge detection. Wagenknecht takes advantage of this feature in her work constantly.

Katrina Hu – Project 10 – Sonic Sketch

sketch_project10

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project10_SonicSketch*/

var eyeSize1 = 10;
var mouthWidth1 = 30;
var eyeSize2 = 10;
var mouthWidth2 = 30;
var eyeSize3 = 10;
var mouthWidth3 = 30;
var eyeSize4 = 10;
var mouthWidth4 = 30;

var evilLaugh;
var womanLaugh;
var maniacalLaugh;
var childLaugh;

function preload() {
    evilLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/evillaugh.wav");
    evilLaugh.setVolume(0.5);

    womanLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/womanlaugh.wav");
    womanLaugh.setVolume(0.5);

    maniacalLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/maniacallaugh.wav");
    maniacalLaugh.setVolume(0.5);

    childLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/childlaugh.wav");
    childLaugh.setVolume(0.5);
}


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


function soundSetup() { 

}


function draw() {
    noStroke();
    //blue background
    fill(204, 224, 255);
    rect(0, 0, 120, 120);
    fill(74, 143, 255);
    ellipse(60, 60, 100, 100);
    fill(0);
    ellipse(40, 40, eyeSize1);
    ellipse(80, 40, eyeSize1);
    fill(255, 255, 255);
    ellipse(40, 38, eyeSize1 / 3);
    ellipse(80, 38, eyeSize1 / 3);
    fill(189, 100, 87);
    arc(60, 60, mouthWidth1, 30, 0, PI, CHORD);
    //yellow background
    fill(255, 252, 204);
    rect(120, 0, 120, 120);
    fill(255, 246, 82);
    ellipse(180, 60, 100, 100);
    fill(0);
    ellipse(160, 40, eyeSize2);
    ellipse(200, 40, eyeSize2);
    fill(255, 255, 255);
    ellipse(160, 38, eyeSize2 / 3);
    ellipse(200, 38, eyeSize2 / 3);
    fill(189, 100, 87);
    arc(180, 60, mouthWidth2, 30, 0, PI, CHORD);
    //pink background
    fill(255, 204, 204);
    rect(240, 0, 120, 120);
    fill(255, 90, 82);
    ellipse(300, 60, 100, 100);
    fill(0);
    ellipse(280, 40, eyeSize3);
    ellipse(320, 40, eyeSize3);
    fill(255, 255, 255);
    ellipse(280, 38, eyeSize3 / 3);
    ellipse(320, 38, eyeSize3 / 3);
    fill(189, 100, 87);
    arc(300, 60, mouthWidth3, 30, 0, PI, CHORD);
    //green background
    fill(222, 255, 214);
    rect(360, 0, 120, 120);
    fill(138, 255, 138);
    ellipse(420, 60, 100, 100);
    fill(0);
    ellipse(400, 40, eyeSize4);
    ellipse(440, 40, eyeSize4);
    fill(255, 255, 255);
    ellipse(400, 38, eyeSize4 / 3);
    ellipse(440, 38, eyeSize4 / 3);
    fill(189, 100, 87);
    arc(420, 60, mouthWidth4, 30, 0, PI, CHORD);
}

function mousePressed() {
    //play sound if pressed in blue box
    if(mouseX <= 120) {
        eyeSize1 = random(8, 15);
        mouthWidth1 = random(40, 55);
        evilLaugh.play();
    }
    //play sound if pressed in yellow box
    if(mouseX > 120 & mouseX <= 240) {
        eyeSize2 = random(8, 15);
        mouthWidth2 = random(40, 55);
        womanLaugh.play();
    }
    //play sound if pressed in pink box
    if(mouseX > 240 & mouseX <= 360) {
        eyeSize3 = random(8, 15);
        mouthWidth3 = random(40, 55);
        maniacalLaugh.play();
    }
    //play sound if pressed in green box
    if(mouseX > 360 & mouseX <= 480) {
        eyeSize4 = random(8, 15);
        mouthWidth4 = random(40, 55);
        childLaugh.play();
    }

}

The sounds play when you click on the various 4 faces. Each face has a different laugh, and the facial features change as you click on them as well.

Katrina Hu – Looking Outwards – 10

The Computer Orchestra

A demonstration of the Computer Orchestra

The Computer Orchestra is an interactive installation consisting of multiple computers. It was created by Laura Perrenoud, Simon De Diesbach, and Jonas LaCôte in 2013. Its setup closely resembles that of a classical orchestra. This orchestra allows the user to conduct using the movements of their hands. Movements are recognized with a Kinect motion controller connected to a central computer. This then gives instructions to a multitude of screens. The screens then send both sounds and visual representations of the sounds back. Now, there are entire music sets created with this Computer Orchestra.

I admire how this project keeps many of the similarities of a classical orchestra. The “conductor’s” movements are like that of a real conductor, and the way the screens are set up resemble that of a real orchestra. There is not much information about the algorithms that generated the work, but the software used includes SimpleOpenNi and Ableton Live.

Katrina Hu – Project 09 – Computational Portrait

sketch_project09

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-09*/

var originalImage;

function preload() {
    var myImageURL = "https://i.imgur.com/g3iK76T.jpg";
    originalImage = loadImage(myImageURL);
}
function setup() {
    createCanvas(480, 480);
    background(0);
    originalImage.loadPixels();
    frameRate(500);
}

function draw() {
    //defining the variables
    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 = originalImage.get(ix, iy);

    //drawing the random dashes
    strokeWeight(4);
    stroke(theColorAtLocationXY);
    line(px + random(-10, 10), py + random(-10, 10), px + random(-10, 10), py + random(-10, 10));

    //drawing the random ellipses
    fill(theColorAtLocationXY);
    ellipse(px, py, random(1, 8), random(1, 8));
}

I chose to make a portrait of my friend Chelsea. It was fun to experiment with the random sizes and positions of my ellipses and lines.

The finished portrait(after about 5 minutes)
The original photograph

Katrina Hu – Looking Outwards – 09

Claire Lee’s Post: Prelude in ACGT

Pierry Jacquillard’s Prelude in ACGT

I chose to review Claire Lee’s Looking Outwards 04 Post. Her post looks at Pierry Jacquillard’s Prélude in ACGT. This piece takes the A-C-G-T (adenine, cytosine, guanine, thymine) order of Jacquillard’s own DNA and turns it into a musical composition. He uses a Javascript-based program to do this, creating a piece that is correlated to the order of his own DNA. The project uses a midi library that generates signals to be converted into electronic sounds.

I also think the cited project is really interesting, as it combines the topics of art, technology, and biology. I agree with Claire’s assessment that this work is very simple, but that the concept in itself is very creative. It is also fascinating how the entire project’s sheet music is an entire book long, yet only contains 0.2% of Jacquillard’s entire DNA. I think the idea itself is very different from other works, as it combines many fields of study.

Katrina Hu – Looking Outwards – 08

Meejin Yoon – Eyeo 2015

Meejin Yoon at Eyeo 2015

Meejin Yoon is a Korean-American architect and designer. She graduated from Cornell University with a degree in Architecture and then from Harvard University’s Graduate School of Design. In 2014, she was appointed as Massachusetts Institute of Technology’s first female head of the Department of Architecture. Currently, she works as the dean of the College of Architecture, Art, and Planning at Cornell University.

Most of her work focuses on interaction in public space. She seeks to bridge technology and play within the public sphere. One of her projects focuses on an urban, public, and interactive space that responds to people that move through the field. The lights in the field would correlate with people’s movements in the field. I admire that she seeks to bring people together in these public spaces. For example, in the lecture, she mentions how people would actually invent games to play while in the space. I also admire how many of her projects focus on smart materials and renewable energy. Her projects seem to always involve the environment and the natural world.

Yoon presents her work effectively by always providing images and graphics that show her development process, as well as photos of people actually interacting with her designs.

Katrina Hu – Project 07 – Curves

sketch_project07

/*Katrina Hu
15104-C
kfh@andrew.emu.edu
Project-07*/

var nPoints = 100;

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

function draw() {
    push();
    translate(width/2, height/2);
    drawHypotrochoid();
    drawAstroid();
    pop();

}

function drawHypotrochoid() {
    var x;
    var y;
    //mouse used to change color
    var r = constrain(mouseX, 0, 255);
    var g = constrain(mouseY, 0, 255);
    var b = constrain(mouseY, 200, 255);
    //stroke appearance
    stroke(r, g, b);
    strokeWeight(1);
    noFill();
    //hypotrochoid equation
    var a = map(mouseX, 0, 600, 0, 300);
    var b = 10
    var h = map(mouseY, 0, 600, 2, 105);
    beginShape();
    for (var i = 0; i < nPoints; i++ ) {
        var angle1 = map(i, 0, nPoints, 0, TWO_PI);
        //equation of hypotrochoid
        x = (a - b) * cos(angle1) + h * cos((a - b) * (angle1 / b));
        y = (a - b) * sin(angle1) - h * sin((a - b) * (angle1 / b));
        vertex(x, y);
    }

  endShape();
}

function drawAstroid() {
    //mouse used to change color
    var r = constrain(mouseX, 200, 255);
    var g = constrain(255, mouseY/4, 50);
    var b = constrain(mouseY, 200, 255);
    //stroke appearance
    stroke(r, g, b);
    strokeWeight(2);
    noFill();
    //asteroid equation
    var a = int(map(mouseX, 0, width, 4, 10));
    var b = int(map(mouseX, 0, width, 0, 100));
    beginShape();
    for (var i = 0; i < nPoints; i++){
        angle1 = map(i, 0, nPoints, 0, TWO_PI);
        //equation of Astroid
        x = (b / a) * ((a - 1) * cos(angle1) + cos((a - 1) * angle1));
        y = (b / a) * ((a - 1) * sin(angle1) - sin((a - 1) * angle1));
        vertex(x,y);
    }
    endShape();

}

In my project I used a Hypotrochoid and an Asteroid. I decided to use my mouse to play around with the RGB values, which change depending on mouseX and mouseY. The project has a large Hypotrochoid on the outside with the Asteroid on the inside.

I decided to let it draw over itself, as it adds more curves when you move the mouse. I thought it added a cool layering effect where you could see all the colors on top of one another.

Overall, the project was fun to do as I learned a lot about experimenting with the different curves and parametric equations.

The starting Hypotrochoid curve
The curve layered over itself