Author: jiheek1@andrew.cmu.edu

jiheek1 – dnoh – SectionD – Final Project

sketch

//Jihee Kim, Daniel Noh
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu, dnoh@andrew.cmu.edu
//Final Project
//Section D

var snowmanX = 200;
var easing = 0.1;
var limit; //constrain the snowman and the carrot
var targetX; //target location of snowman and carrot (mouseX)
var dx;
var carrotFrame = 0; //initialize the carrot image
var heartFrame = 0; //initialize the heart image
var carrots = []; //an array of carrot images
var hearts = []; // an array of heart images
var balls = []; //an array of ellipses falling from the top of canvas
var clouds = []; //an array of clouds


var speedCounter = 0;
var carrotCounter = 0;
var scoreCounter = 0;
var carrotStoptime = 0;
var score = 0;

var yVelocity = 1;
var nBalls = 26; //numbrt of snowballs

function preload() {
    //these URLs preload the loading carrot
    var filenamesC = [];
    filenamesC[0] = "https://i.imgur.com/qepItjw.png";
    filenamesC[1] = "https://i.imgur.com/WrRwOgn.png";
    filenamesC[2] = "https://i.imgur.com/IaGv051.png";
    filenamesC[3] = "https://i.imgur.com/788iMwW.png";
    filenamesC[4] = "https://i.imgur.com/L46EZ7S.png";

    //loads the images into the carrots[] array
    for (var i = 0; i < filenamesC.length; i++) {
        carrots[i]= loadImage(filenamesC[i]); //load each frame...
    }

    //loads the images into the hearts[] array
    var filenamesH = [];
    filenamesH[0] = "https://i.imgur.com/awWteaR.png"
    filenamesH[1] = "https://i.imgur.com/vw1d2oU.png"
    filenamesH[2] = "https://i.imgur.com/aBUC5GV.png"
    filenamesH[3] = "https://i.imgur.com/zBHIG8D.png"

    for (var j = 0; j < filenamesH.length; j++) {
        hearts[j]= loadImage(filenamesH[j]); //load each frame...
    }
}

function setup() {
    createCanvas(480,640);
    //create new balls according to locationBalls function
    for (i = 0; i < nBalls; i++) {
        var newBalls = new locationBalls();
        balls.push(newBalls);
    }
}

function draw() {
    //background gradient
    var a = color(160, 232, 229);
    var b = color(238, 252, 251);
    backGradient(0, width, a, b);


    updateCloud();
    removeCloud();
    addCloud();

    updateBalls();
    levelUp();

    //draw carrot nose
    drawCarrot();

    //draw snowman
    drawSnowman();

    //draw score
    drawScore();

    //menu bar on the left side of canvas
    fill(255);
    stroke(130, 232, 229);
    strokeWeight(4);
    rect(20, 75, 70, 350, 35, 35, 35, 35);

    //draw ice
    drawIce();

    //draw carrot icon
    imageMode(CENTER);
    image(carrots[carrotFrame], 55, 350, 80, 80);
    //every fifteen points, a quarter of the carrot icon is filled
    if (score >= 15 & score < 30) {
        carrotFrame = 1;
    }
    if (score >= 30 & score < 45) {
        carrotFrame = 2;
    }
    if (score >= 45 & score < 60) {
        carrotFrame = 3;
    }
    if (score >= 60) {
        carrotFrame = 4;
    }

    //draw heart icons
    image(hearts[heartFrame], 55, 170, 120, 240);

    //draw score
    drawScore();

    //intro popup
    if (speedCounter < 280) {
        fill(255);
        stroke(130, 232, 229);
        strokeWeight(4);
        rect(20, 75, width-40, 350, 35, 35, 35, 35);
        strokeWeight(2);
        fill(130, 232, 229);
        textSize(40);
        text("HOW TO PLAY", width/2, 170);
        noStroke();
        textSize(20);
        text("move the snowman with your mouse", width/2, 250);
        text("and help it dodge the snowballs!", width/2, 280);
        text("you have three lives", width/2, 330);
        text("GOOD LUCK!", width/2, 380);
    }

    //if hit by snowball, lose a heart
    for (i = 0; i < balls.length; i++) {
        if (speedCounter > 300) {
            if ((balls[i].x > (snowmanX - 10)) & (balls[i].x < (snowmanX + 10))
            && (balls[i].y > (height - 150)) && (balls[i].y < (height - 130))) {
                heartFrame += 1;
                balls[i].y = 0;
            }
        }
    }
    //end game
    if (heartFrame >= 3) {
        gameOver();
    }
}

function keyPressed() { //reset game when pressing R
    if (keyCode == 82 & heartFrame == 3) {
        heartFrame = 0;
        carrotFrame = 0;
        snowmanX = 200;
        easing = 0.1;
        speedCounter = 0;
        carrotCounter = 0;
        scoreCounter = 0;
        carrotStoptime = 0;
        score = 0;
        yVelocity = 1;
    }
}

function gameOver() {
    yVelocity = 0;
    snowmanX = width/2;
    easing = 0;
    //game over popup
    fill(255);
    stroke(130, 232, 229);
    strokeWeight(4);
    rect(20, 75, width-40, 350, 35, 35, 35, 35);

    //game over text
    fill(130, 232, 229);
    textSize(50);
    strokeWeight(2);
    text("GAME OVER", width/2, 170);
    textSize(30);
    noStroke();
    strokeWeight(1);
    fill(130, 232, 229);
    text("your score: " + score, width/2, 220);
    textSize(25);
    text("PRESS R TO RESTART", width/2, 350);
    image(carrots[carrotFrame], width/2, 270, 80, 80);
    noLoop;
}

function levelUp() {
    speedCounter += 1;
    if (speedCounter > 600) {
        yVelocity = 2;
    }
    //level 1 speed
    if (speedCounter > 1200) {
        yVelocity = 4;
    }
    //level 2 speed
    if (speedCounter > 1800) {
        yVelocity = 6;
    }
    //level 3 speed
    if (speedCounter > 2400) {
        yVelocity = 8;
    }
    //level 4 speed
    if (speedCounter > 3000) {
        yVelocity = 10;
    }
    //god level speed -- impossible mode.
    if (speedCounter > 3600) {
        yVelocity = 12;
    }
}

function backGradient(y, x, a, b) { //background gradient color
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

function drawScore() {
    //score keeping system
    scoreCounter += 1;
    if (scoreCounter % 120 == 0 & heartFrame != 3 && speedCounter > 300) {
        score += 1
    }
    fill(130, 232, 229);
    noStroke();
    textAlign(CENTER);
    textSize(25);
    text(score, 55, 290);
}

function drawSnowman() {
    limit = constrain(mouseX, 125, 450); //limits within the canvas
    targetX = limit; //easing the snowman to mouse
    dx = targetX - snowmanX;
    snowmanX += dx * easing;

    fill(255);
    strokeWeight(3);
    stroke(230);
    //body
    ellipse(snowmanX, height-80, 40, 40);
    //head
    ellipse(snowmanX, height-110, 30, 30);
}

function drawCarrot() {
    //limits within the canvas
    limit = constrain(mouseX, 125, 450);
    //easing the carrot to mouse
    targetX = limit;
    dx = targetX - snowmanX;
    snowmanX += dx * easing;

    fill(255, 181, 51);
    strokeWeight(2);
    stroke(255, 110, 51);
    triangle(snowmanX-5, height-125, snowmanX+5, height-125,
             snowmanX, height-145);
}

function drawIce() {
    fill(215, 255, 255);
    strokeWeight(5);
    stroke(175, 250, 250);
    rect(-5, height-55, width+10, 60);
    //the lines on the ice
    for(var i = 0; i < 16; i++) {
        strokeWeight(4);
        line(0 + (i*30), height-55, 20 + (i*30), height-45);
        line(15 + (i*30), height-55, 50 + (i*30), height-35);
    }
}

//updates the clouds so they move and show
function updateCloud() {
    for (var i = 0; i < clouds.length; i++){
      clouds[i].move();
      clouds[i].display();
    }
}

//gets rid of clouds that pass the screen
function removeCloud() {
    var cloudsKeep = [];
    for (var i = 0; i < clouds.length; i++){
      if (clouds[i].x + clouds[i].breadth > 0){
        cloudsKeep.push(clouds[i]);
      }
    }
    clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud() {
    var newCloudPercent = 0.1;
    if (random(0,1) < newCloudPercent){
        var cloudX = width;
        var cloudY = random(height/1.2);
        clouds.push(makeClouds(width));
    }
}

//adds velocity to the clouds, making them move
function cloudMove() {
    this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud() {
    var cloudHeight = 5;
    var cHeight = this.nCloud*cloudHeight;

    noStroke();
    fill(255, this.opaque);
    push();
    translate(this.x, height/1.15);
    ellipse(0, -cHeight, this.breadth, cHeight/1.5);
    pop();
    push();
    translate(this.x, height/1.15+40);
    ellipse(30, -cHeight, this.breadth, cHeight);
    pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
    var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
    return cloud;
}

//updates the balls so they move and show
function updateBalls() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].move();
    }
}

//sets up the movement and display of balls
function locationBalls() {
    this.x = random(125, width);
    this.y = random(0, height);

    this.draw = function() {
        fill(0);
        if (this.y < height + 5) {
            stroke(222, 236, 249);
            strokeWeight(2);
            fill(255);
            ellipse(this.x, this.y, 20, 20);
        } else {
            this.x = random(125, width);
            this.y = -5;
        }
    }

    this.move = function() {
        this.y += yVelocity;
    }
}

For this project, we created a vertical dodging game, inspired by the holiday season. The plot of the game is a snowman who does not want to die and tries to avoid the snow which will gradually kill it.

The player can move the snowman with their mouse to dodge the falling snowballs. As time passes, the snow’s falling speed and the score increases. A carrot icon on the left of the canvas also fills up every 15 points, as well. Whenever the snowballs hit the snowman, the snowman loses a life, which is represented by the three heart icons on the left. Clouds are also in the background to provide a more interesting scenery. At the end of the game, the player is shown their score through points and the carrot icon, and instructed how to restart the game. Below is a zip file and some screenshots of the game. ENJOY and HAPPY HOLIDAYS!

jiheek1_dnoh_finalproject

intro
playing
game over

jiheek1 (Section D)–LookingOutwards-12-Project Priors and Precursors

I imagine combining Victor Doval’s concept of translating data visually (project 1) and the more game-related aspects and graphical elements of Monument Valley (project 2) in my project.

project 1:

Howler Monkey by Meier & Erdmann from Víctor Doval on Vimeo.

This project is a music video for an electronic music “Howler Monkey” by a German duo called Meier & Erdmann. The author of the project is Victor Doval, a visual artist. He created the music video in 2017 with an algorithm that converts frequencies into visual elements like peaks and flowers that ultimately generate a landscape! During the span of the music, the landscape progresses from day to night. Data from the source song is converted to different shapes and textures. I intend to use the concept of creating  dynamic depictions of data in the background of my project(which is a game). I wish for my canvas to respond/react to certain data(such as points) and show that in a visually enticing way.

For more information: an article that covers project  &  official project page

Project 2:

Monument Valley – Behind the Scenes from ustwo on Vimeo.

Monument Valley 2 by ustwo Games (2014) is a game about the exploration of a mother and a daughter through an impossible world from which the players could experience ever-changing landscapes and the relationship between a parent and a child. What I admire about this project and could possibly integrate into my project are aspects such as the ever-changing landscape with an element of surprise (similar to the project above), the use of the game as a storyteller, and the visual graphics. I especially admire the visual graphics of this project and would like to refer to them when creating my project.

captures of the ever-changing landscape of the game

For more information:
official project page

 

Jihee Kim_SectionD_Project-12-Proposal

Project Name — Subject to Change: The Snowman
Project Partner: Daniel Noh (dnoh– section D)

sketch of project

For our project we intend to make a vertical “shooter” game (more emphasis on dodging). The plot of the game is a snowman who does not want to die and tries to avoid the snow which will, obviously, make it bigger and eventually cause him to explode… The snowman can dodge the snow that is coming down to hit him, however, he has a special move where he can throw his nose (a carrot) to hit the snow every 10 (also subject to change) seconds. The game will have a gauge that will show the carrot loading back and a counter at the bottom of the canvas that shows the number of snowballs that have hit the snowman. At the end of each level (every 30 seconds), the snow will fall faster… there will be 10 levels. Also, whenever the snowballs hit the snowman, something ominous in the background will happen (i.e. an avalanche goes off in the mountain in the background). After 10 snowballs hit the snowman, the snowman will explode and a game over screen, the level you have reached, and a sign that tells you how to replay the game will show.

Jihee Kim_SectionD_Project-11-Composition

jiheek1_project11

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project-11-Composition
//section D


var myTurtle;
var step = 10; // each tick (segment) is a multiple of 10
var angle = 60; // the turtle almost always turns 60 degrees on its way

var snow = []; // an array of all snow particles



function setup() {
    createCanvas(462, 400);
    // initialize snow
   for (var s = 0; s < 1500; s++){ // loop through snows
       var snowPositionX = random(width); // the x position of the snow is
                                          // random along the width of canvas
       var snowPositionY = random(0, height);
       snow[s] = makeSnow(snowPositionX, snowPositionY);
   }
}


function draw() {
    //gradient background
    // draw the gradient background for the blue snowy sky
    var top = color(188, 232, 231); // light blue
    var bottom = color(35, 232, 227); // darker sky blue
    Gradient(0, width, top, bottom);

    myTurtle1 = makeTurtle(3, 75 * sqrt(3) + 4); // place the first turtle
    myTurtle2 = makeTurtle(3, 150 * sqrt(3) + 4); // place the second turtle
    myTurtle3 = makeTurtle(3, 225 * sqrt(3) + 4); // place the second turtle
    turtleX = 3; // keep track of turtle's x position
    // while the distance between turtle1 and the end of canvas is greater
    // than 0, keep drawing the pattern
    while (myTurtle1.x < width) {
        turtleX = turtleX + 320; //disposition of each Sierpinski tri. is 320
        myTurtle1.penDown(); // snowt Sierpinski Triangle
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.right(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.forward(step);
        myTurtle1.left(angle);
        myTurtle1.penUp(); // end Sierpinski Triangle
    }
    while (myTurtle2.x < width) {
        turtleX = turtleX + 320;
        myTurtle2.penDown(); // snowt Sierpinski Triangle
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.right(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.forward(step);
        myTurtle2.left(angle);
        myTurtle2.penUp(); // end Sierpinski Triangle
    }
    while (myTurtle3.x < width) {
        turtleX = turtleX + 320;
        myTurtle3.penDown(); // snowt Sierpinski Triangle
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.right(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.forward(step);
        myTurtle3.left(angle);
        myTurtle3.penUp(); // end Sierpinski Triangle
        }
     //SNOW
      animateSnow();
      hideSnow();
      addSnow();
}


//BACKGROUND (SKY GRADIENT)
function Gradient (a, b, top, bottom) {
	  // top to bottom gradient (background)
    for (var i = a; i <= height; i++) {
        var mappedC = map(i, a, a+b, 0, 1);
        var c = lerpColor(top, bottom, mappedC);
        stroke(c);
        strokeWeight(2);
        line(a, i, a+b, i);
	  }
}


//SNOW FLAKES FUNCTIONS
function drawSnow() {
	  noStroke();
	  // make snows seem like they're shining by manipulating transparency
	  var transparency = random(20, 100);
	  fill(255, transparency);
	  ellipse(this.x, this.y, 4, 4);
}


function animateSnow() {
    for (var s = 0; s < snow.length; s++) {
        snow[s].move();
        snow[s].draw();
    }
}


function hideSnow() {
    // make the snow particles that are actually within the canvas to stay
    // if not, hide them
    var snowOnCanvas = [];
    for (var s = 0; s < snow.length; s++){ // go through all snow
        // if the snow is on the canvas
        if (0 < snow[s].x < width) {
            snowOnCanvas.push(snow[s]); // draw the snows that are on the
                                        // canvas
        }
    }
    snow = snowOnCanvas; // update the snows to the ones that are actually
                         // on the canvas
}


function addSnow() {
    var randomValSnow = 0.01; // a really small chance of snows randomly
                              // being added/generated
    if (random(0,1) < randomValSnow) { // because it is not that likely for a
                                      // randomly chosen value to be less than
                                      // 0.0001, this will be a rare occasion
        var snowPositionX = random(0, width);
        var snowPositionY = random(0, height);
        snow.push(makeSnow(snowPositionX, snowPositionY)); // generate new
                                                           // snows along
                                                           // the canvas
    }
}


function snowMove() {
	//move snows by updating x coordinate
	this.x += this.speed;
}


function makeSnow(snowPositionX, snowPositionY) {
	  var snow = {x: snowPositionX,
				       y: snowPositionY,
				       speed: -random(0, .005),
				       move: snowMove,
			         draw: drawSnow}
	  return snow;
}


  function turtleLeft(d) {
      this.angle -= d;
  }


  function turtleRight(d) {
      this.angle += d;
  }


  function turtleForward(p) {
      var rad = radians(this.angle);
      var newx = this.x + cos(rad) * p;
      var newy = this.y + sin(rad) * p;
      this.goto(newx, newy);
  }


  function turtleBack(p) {
      this.forward(-p);
  }


  function turtlePenDown() {
      this.penIsDown = true;
  }


  function turtlePenUp() {
      this.penIsDown = false;
  }


  function turtleGoTo(x, y) {
      if (this.penIsDown) {
        stroke(this.color);
        strokeWeight(this.weight);
        strokeJoin(MITER);
        strokeCap(PROJECT);
        line(this.x, this.y, x, y);
      }
      this.x = x;
      this.y = y;
  }


  function turtleDistTo(x, y) {
      return sqrt(sq(this.x - x) + sq(this.y - y));
  }


  function turtleAngleTo(x, y) {
      var absAngle = degrees(atan2(y - this.y, x - this.x));
      var angle = ((absAngle - this.angle) + 360) % 360.0;
      return angle;
  }


  function turtleTurnToward(x, y, d) {
      var angle = this.angleTo(x, y);
      if (angle < 180) {
          this.angle += d;
      } else {
          this.angle -= d;
      }
  }


  function turtleSetColor(c) {
      this.color = c;
  }


  function turtleSetWeight(w) {
      this.weight = w;
  }


  function turtleFace(angle) {
      this.angle = angle;
  }


  function makeTurtle(tx, ty) {
      var turtle = {x: tx, y: ty,
                    angle: 0.0,
                    penIsDown: true,
                    color: color(255),
                    weight: 1,
                    left: turtleLeft, right: turtleRight,
                    forward: turtleForward, back: turtleBack,
                    penDown: turtlePenDown, penUp: turtlePenUp,
                    goto: turtleGoTo, angleto: turtleAngleTo,
                    turnToward: turtleTurnToward,
                    distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                    setColor: turtleSetColor, setWeight: turtleSetWeight,
                    face: turtleFace};
      return turtle;
  }

  function turtleLeft(d) {
      this.angle -= d;
  }


  function turtleRight(d) {
      this.angle += d;
  }


  function turtleForward(p) {
      var rad = radians(this.angle);
      var newx = this.x + cos(rad) * p;
      var newy = this.y + sin(rad) * p;
      this.goto(newx, newy);
  }


  function turtleBack(p) {
      this.forward(-p);
  }


  function turtlePenDown() {
      this.penIsDown = true;
  }


  function turtlePenUp() {
      this.penIsDown = false;
  }


  function turtleGoTo(x, y) {
      if (this.penIsDown) {
        stroke(this.color);
        strokeWeight(this.weight);
        strokeJoin(MITER);
        strokeCap(PROJECT);
        line(this.x, this.y, x, y);
      }
      this.x = x;
      this.y = y;
  }


  function turtleDistTo(x, y) {
      return sqrt(sq(this.x - x) + sq(this.y - y));
  }


  function turtleAngleTo(x, y) {
      var absAngle = degrees(atan2(y - this.y, x - this.x));
      var angle = ((absAngle - this.angle) + 360) % 360.0;
      return angle;
  }


  function turtleTurnToward(x, y, d) {
      var angle = this.angleTo(x, y);
      if (angle < 180) {
          this.angle += d;
      } else {
          this.angle -= d;
      }
  }


  function turtleSetColor(c) {
      this.color = c;
  }


  function turtleSetWeight(w) {
      this.weight = w;
  }


  function turtleFace(angle) {
      this.angle = angle;
  }


  function makeTurtle(tx, ty) {
      var turtle = {x: tx, y: ty,
                    angle: 0.0,
                    penIsDown: true,
                    color: color(120, 180, random(180, 255)),
                    weight: 3,
                    left: turtleLeft, right: turtleRight,
                    forward: turtleForward, back: turtleBack,
                    penDown: turtlePenDown, penUp: turtlePenUp,
                    goto: turtleGoTo, angleto: turtleAngleTo,
                    turnToward: turtleTurnToward,
                    distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                    setColor: turtleSetColor, setWeight: turtleSetWeight,
                    face: turtleFace};
      return turtle;
  }

For this project, I used a turtle to draw a different form. I used three different turtles that generate lines of Sierpinski triangles. These geometries formed by turtles come together to suggest at a crystal, snowflake-like form. By adding dynamic elements to the colors of the background and the stroke of turtles, as well as adding sparking snowflakes, I was able to create an interesting winter themed pattern. I used this opportunity to apply mathematics to generate natural forms and to create a wallpaper inspired by the movie Frozen, expanding on the project that we had before.

screenshot of project
each component
concept sketch

Jiheek1 (Section D)– LookingOutwards-11

Eunoia from Lisa Park on Vimeo.

Eunoia by artist Lisa Park is a performative piece that produces music through data. During the performance, the artist herself wears a NeuroSky EEG headset that measures her brain activities and convert the data into sound waves that vibrate dishes of water set on top of speakers.

the artist herself and the performative elements of the project

Data collected here includes frequencies, Alpha, Beta, Delta, Gamma and Theta and the emotion/mental states, “Attention” and “Meditation”. The sound waves, depending on their wavelength and amplitude, would create different sounds and visuals (the water particles glistening as the dishes are bouncing up and down due to the vibrations of the speaker beneath).

data that is translated into sound

I especially find this project interesting because of the way Park translates her emotion and mental state both visually and audibly. The result is a beautiful, serene piece of computational music that in a sense allows you to connect with the artist. I also admire the randomness that derives from the “instruments.” The way in which the water droplets are going to move in reaction to the brainwaves and even the data collected here (brain activities) are rather unpredictable.

from brainwaves to sound waves to speakers to water plate

Park’s concentration on people and their activities along with her interest in quantifying, visualizing such data are successfully manifested in this particular project. The project after its creation in 2013 was followed by a sequel, “Euronia II” in 2014.

More information on the project can be found on the Project Page

Jihee Kim_SectionD_Project-10-Landscape

jiheek1_project10_sketch

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project 10 Landscape
//section D


var stars = []; // an array of all stars
var clouds = []; // an array of all clouds


function setup() {
    createCanvas(480, 380);
    // initialize stars
    for (var s = 0; s < 750; s++){ // loop through stars
        var starPositionX = random(width); // the x position of the cloud is
                                           // random along the width of canvas
                                           // the randomness is later set
                                           // in the replaceClouds() function
        var starPositionY = random(0, height-120);
        stars[s] = makeStars(starPositionX, starPositionY);
    }
    // initialize clouds
    for (var i = 0; i < 5; i++){ // loop through clouds
        var cloudPositionX = random(width); // the x position of the cloud is
                                            // random along the width of canvas
                                            // the randomness is later set
                                            // in the replaceClouds() function
        var cloudPositionY = random(height/3, height*2/3);
        clouds[i] = makeCloud(cloudPositionX, cloudPositionY);
    }
}


function draw() {
    //WATER
    fill(11, 19, 71);
    rect(0, height-100, width, 100); // set the very bottom of the canvas as
                                     // water
    //gradient background
    // draw the gradient background for the pink, night sky
    var top = color(198, 96, 113); // pink
	  var bottom = color(11, 19, 71); // deep blue
    Gradient(0, width, top, bottom);
    //STARS
    animateStars();
    hideStars();
    addStars();
    //MOON
    drawMoon();
    //CLOUDS (draw the clouds using functions: animate, hide, and add)
    animateClouds();
    hideClouds();
    addClouds();

}


//BACKGROUND
function Gradient (a, b, top, bottom) {
	  // top to bottom gradient (background)
    for (var i = a; i <= height-100; i++) {
        var mappedC = map(i, a, a+b, 0, 1);
        var c = lerpColor(top, bottom, mappedC);
        stroke(c);
        strokeWeight(2);
        line(a, i, a+b, i);
	  }
}


//STARS
function drawStars() {
	  noStroke();
	  // make stars seem like they're shining by manipulating transparency
	  var transparency = random(30, 100);
	  fill(255, transparency);
	  ellipse(this.x, this.y, 1.2, 1.2);
}


function animateStars() {
    for (var s = 0; s < stars.length; s++) {
        stars[s].move();
        stars[s].draw();
    }
}


function hideStars() {
    // make the clouds that are actually within the canvas to stay
    // if not, hide them
    var starsOnCanvas = [];
    for (var s = 0; s < stars.length; s++){ // go through all clouds
        // if the star is on the canvas
        if (0 < stars[s].x < width) {
            starsOnCanvas.push(stars[s]); // draw the stars that are on the
                                          // canvas
        }
    }
    stars = starsOnCanvas; // update the stars to the ones that are actually
                           // on the canvas
}


function addStars() {
    var randomValStar = 0.01; // a really small chance of stars randomly
                                // being added/generated
    if (random(0,1) < randomValStar) { // because it is not that likely for a
                                      // randomly chosen value to be less than
                                      // 0.0001, this will be a rare occasion
        var starPositionX = random(0, width);
        var starPositionY = random(0, height-120);
        stars.push(makeStars(starPositionX, starPositionY)); // generate new
                                                             // stars along
                                                             // the canvas
    }
}


function starMove() {
	//move stars by updating x coordinate
	this.x += this.speed;
}


function makeStars(starPositionX, starPositionY) {
	  var star = {x: starPositionX,
				       y: starPositionY,
				       speed: -random(0, .005),
				       move: starMove,
			         draw: drawStars}
	  return star;
}


//MOON
function drawMoon() {
    ellipseMode(CENTER);
    noStroke();
    fill(252, 202, 202, 80);
    ellipse(width/2+100, 150, 80); // overlay another ellipse for slight volume
    fill(234, 139, 139, 80);
    ellipse(width/2+100, 150, 75); // draw moon
}

// CLOUDS
function animateClouds() {
    for (var i = 0; i < clouds.length; i++){ // loop through all clouds
        clouds[i].move(); // update the clouds' positions on canvas
        clouds[i].display(); // display the clouds
    }
}


function hideClouds(){
    // make the clouds that are actually within the canvas to stay
    // if not, hide them
    var cloudsOnCanvas = [];
    for (var i = 0; i < clouds.length; i++){ // go through all clouds
        if ((clouds[i].x > 0) + (clouds[i].breadth > 0)) { // if the cloud is
                                                      // on the canvas
            cloudsOnCanvas.push(clouds[i]); // draw the clouds that are on the
                                            // canvas
        }
    }
    clouds = cloudsOnCanvas; // update the clouds to the ones that are actually
                           // on the canvas
}


function addClouds() {
    var randomVal = 0.005; // a really small chance of clouds randomly
                           // being added/generated
    if (random(0,1) < randomVal) { // because it is not that likely for a
                                   // randomly chosen value to be less than
                                   // 0.005, this will be a rare occasion
        var cloudPositionX = random(0, width);
        var cloudPositionY = random(height/3, height-50);
        clouds.push(makeCloud(cloudPositionX, cloudPositionY)); // generate new
                                                                // clouds along
                                                                // on canvas
    }
}


function cloudMove() { // update position of cloud each frame
    this.x += this.cloudSpeed;
}


function cloudDisplay() { // draw clouds
    var cloudHeightFactor = 7; // factor that determines cloud height
    var cloudHeight = this.nFloors * cloudHeightFactor;
    ellipseMode(CENTER);
    fill(242, 209, 214, this.transparency);
    noStroke();

    // higher line of clouds (further down on canvas)
    push();
    translate(this.x, height/2-130);
    ellipse(30, -cloudHeight+120, this.breadth, cloudHeight);
    pop();
    // middle line of clouds (middle on canvas)
    push();
    translate(this.x, height/2-70);
    ellipse(150, -cloudHeight+120, this.breadth, cloudHeight/1.5);
    pop();
    // lower line of clouds (further down on canvas)
    push();
    translate(this.x, height/2);
    ellipse(110, -cloudHeight+120, this.breadth, cloudHeight);
    pop();
}

function makeCloud(cloudPositionX, cloudPositionY) {
    var cloud = {x: cloudPositionX, // x position of clouds
                y: cloudPositionY, // y position of clouds
                transparency: random(10, 80),
                breadth: random(120, 250), // width of clouds
                cloudSpeed: random(0.07, 0.3), // speed at which clouds move
                nFloors: round(random(2,10)),
                move: cloudMove,
                display: cloudDisplay}
    return cloud;
}

For my ever-changing “landscape” I decided to draw a starry night. In order to make the image dynamic, I used components such as the stars and clouds that actually move and generate on it’s own based on a logic that incorporates randomness. I used a color gradient for a more engaging background as well.
I wanted to convey tranquility and I believe that I was able to achieve that goal through employing movements that speak to that.

Concept Sketch

Jihee Kim (Section D)– LookingOutwards-10

Filtered Transparencies – LISBON 2015 from Filipa Valente on Vimeo.

Filtered Transparencies is an dynamic, interactive installation that manipulates the users’ experience within a space through different sensual elements. The installation uses multiple layers of light streams and sound to surround the user inside the project and allow for a unique experience. What is interesting about this project is how the artist creates an intangible but clearly-present space. There is nothing concrete or structural in the project (even the screens that light is projected are light and transparent), yet the user feels as though there are some sort of massive elements that are surrounding them because of the illusions created by the “filters” of sensual elements. The installation is also interactive in that people could manipulate themselves the kind of environment that they are in.

user immersed in created space
tangible space
layered screens and experience

The artist, Filipa Velante is an architect and environmental designer based in the US. She did her studies in Architecture both at the undergraduate and graduate level at the Bartlett School of Architecture in London. Additionally, she completed her Masters in Media Art and Architecture Mediascapes at SciArc, LA. Based on the projects that are curated on her website, one can clearly notice her concentration on experiential design, whether in the form of architectural projects or media installations like Filtered Transparencies. Many of her projects are those that engage the public through the incorporation of environment and senses, as is manifested in this particular project, as well.

Velante originally designed the installation for the Paseo Festival in Taos, New Mexico in September 2014. Later on, a further developed version was commissioned for the WEDO User Group 2015 conference in Lisbon, Portugal.

More information on the project can be found on the Project Page

Jihee Kim_SectionD_Project-09-Portrait

jiheek1_project9

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project 9 Portrait
//section D

var baseImage;
var fillR = 97; // Red value of rectangles
var fillG; // Green value of rectangles (subject to change later)
var fillB = 226; // Blue value of rectangles


//load image
function preload() {
    var portraitUrl = "https://i.imgur.com/HgOmFTq.jpg";
    baseImage = loadImage(portraitUrl);
}

function setup() {
    createCanvas(320, 480);
    background(0);
    baseImage.loadPixels(); // turn the base image into a collection of pixels
    frameRate(2000);
    // grid on canvas
    // draw verticle lines that fall down from top to bottom
    // in between the gaps of rectangles
    for (var y = 0; y < height; y ++) {
        for (var x = 9; x < width; x += 10) {
            stroke(175 - y/2, 100, 145); // apply a color gradient to the lines
                                         // color changes from red to blue
                                         // from top to bottom of canvas
            strokeWeight(1);
            line(x, y, x, height); // draw line
        }
    }
}

function draw() {
    // x and y position of pixels that are to be picked
    var pixelX = floor(random(0, width)) * 10; // get rid of horizontal overlaps
                                               // by spacing the pixels by the
                                               // maximum width of rectangles
                                               // that are to be drawn
    var pixelY = floor(random(0, height));

    // extract the color of each randomly chosen pixel
    var iX = constrain(pixelX, 0, width - 1); // make x coordinates
                                                     // integers (no decimals)
    var iY = constrain(pixelY, 0, height - 1); // make Y coordinates
                                                     // integers (no decimals)
    var cp = baseImage.get(iX, iY); // get the color at the pixel

    // the width, length, outline and fill of the rectangles are to be mapped
    // to the brightness of the color of each pixel
    var rectWidth = map(brightness(cp), 0, 100, 1, 10); // brighter the color
                                                        // wider the width
    var rectLength = map(brightness(cp), 0, 100, 6, 50); // brighter the color
                                                         // longer the length
    var strokeC = map(brightness(cp), 0, 100, 0, 100); // brighter the color
                                                       // lighter the outline
                                                       // in greyscale
    var fillG = map(brightness(cp), 0, 100, 50, 255); // manipulate the G value
                                                      // of the fill in respect
                                                      // to the brightness

    stroke(strokeC);
    strokeWeight(1);
    fill(fillR, fillG, fillB);
    rect(iX, iY, rectWidth, rectLength); // draw rectangle representing
                                         // each chosen pixel
}

comparison of project and original image

For this project, I created a computational self-portrait. While researching about data analysts in the past looking outwards assignment, I came across an image by dylan mason. Although this image was generated by compiling a lot of selfies throughout a long time, I wanted to mimic some of the qualities shown in this picture: horizontal bars and the balance between blurriness and clarity of the object.

inspiration from dylan mason’s composite of selfies

Another inspiration for this project was the eye tracker assignment in which we used the brightness function. I implemented a hierarchical system, using that brightness function to make the width, length, outline and fill of the rectangles relative to the brightness of the color of each randomly chosen pixel on the canvas.

The brighter the color, the wider the width, the longer the length, the lighter the outline of the rectangles. The fill of rectangles are also related to the brightness. The brighter parts of the image are covered with light blue rectangles, while the darker parts of the image are covered with deep blue, almost purple rectangles. The rectangles on the darker parts of the canvas are smaller because I wanted a more detailed feel on the face area. On the other hand, the rectangles on the lighter parts of the canvas are bigger because I wanted to quantify and communicate the vast amount of light that is coming from behind the person (me). Bottom line, I wanted the attention to be drawn to the human figure more than the background and I believe I achieved that goal through elements, including but not limited to size and color.

phase 1: a lot of overlaps

In the first phase of designing, the there were a lot of overlaps among the rectangles that are derived from randomly chosen pixels. I wasn’t sure if I liked the aesthetics of it. In order to lessen the traffic, I spaced out the distance between the chosen pixels along the x-axis. Spacing out both in the x and y axes would have made the computational portrait a little too ambiguous.

phase 2: reduced traffic, increased contrast

To continue the language of horizontality, I drew a grid that consists of vertical lines that span from the top to the bottom of the canvas. Moreover, the change in color of these vertical lines (from red to blue from top to bottom) adds to the dynamics.

grid with gradation
FINAL

Jihee Kim (Section D)– LookingOutwards-09


LifeObject: Israeli Pavilion Biennale Venezia 2016.

LifeObject was an installation inside the Israel Pavilion in Italy as part of the La Biennale di Venezia of 2016. The project was curated by the architect Ben Bauer. One of the other architects who contributed to the project, Arielle Blonder discusses this installation in press interviews and emphasizes its correlation to nature and society.

bird nest structure visible from outside
inside the installation

LifeObject, in a way represents a more secure society that is comprised of adaptable, flexible components, as does a bird’s nest. I find this installation interesting because of its attempt to integrate biology to architecture. Architecture ultimately is about living and the inhabitants, including but not limited to people and animals. The fact that the scientists and architects came together and mimicked a bird’s nest to build for people is intriguing and points to many more opportunities in the field.

I agree with Yugyeong that the project opens up more opportunities pertaining to biological designs and materials. To add, I would say that this project provides grounds to explore with 3D printing and computational design because there is a basic algorithm that we can extract from natural behaviors. I would also say that this project not only adds to the architectural field, but to the science field as well. LifeObject basically breaks the boundaries between the two disciplines.

For Designboom’s coverage of the project, visit:

israeli pavilion showcases woven bird’s nest structure at venice architecture biennale

For original looking outwards post:looking-outwards-03-yugyeong-lee

Jihee Kim (Section D)– LookingOutwards-08

Eyeo 2015 – Jake Barton from Eyeo Festival // INSTINT on Vimeo.

Jake Barton is an American designer and the principal and founder of Local Projects, which is a design firm that is based in New York. The firm specializes on creating public spaces with the focus on designing different experiences. At Northwestern University, he studied performance studies and afterwards started his career in public space design with first getting involved in set designing for Broadway productions. Continuing his interest in human interaction and communication, he went to graduate school for interactive telecommunications at NYU. In an interview with Designboom, Barton said that he was always interested in how crowds of people could be better storytellers than curators, regardless of the subject matter. He always had the desire to incorporate technology in a way that will allow him to gather the public’s voice and make it visible.


A Tour Of The 9/11 Museum With The Man Who Designed It.

What is fascinating about Barton’s workflow is the amount of attention that he gives to the way people’s memory system works, which is evident in his design process for the 9/11 memorial museum. The 9/11 memorial museum has an interesting curatorial system due to Barton’s effort to better memory systems. He believes that having a physical object in front of you to interact with allows you to think faster, learn, engage and build connections with the information given to you. All over the museum are full-sized wall screens that have displays of words collected with algorithms, recordings and writings of people’s stories on the 9/11 incident. Some of these information is projected on physical objects/structures/sculptures that represent 9/11, such as objects that look like debris. As someone studying architecture, I admire these aspects of the museum because of its close attention to the ways to augment people’s experience within a public space and to most effectively deliver data and engage the people through making the public opinion more tangible.

In his presentation in Eyeo 2015, he demonstrates the effects of the relationship between the way people think and the availability of physical objects that aid in their thought/memory process. He discusses projects other than the 9/11 memorial museum, including an app that demonstrates physics equations through playground activities and display screens that make city tour guides more interactive, relatable and enticing. He presented his projects in a coherent, captivating manner, balancing narratives and visuals. Visual elements such as pictures and video clips were coherent and relevant as they were of actual users of his designs. The clarity and conciseness of external materials significantly contributed to his successful delivery of information, which I believe I could incorporate in both my architectural work and work for this course.

If I had to point out one thing that I took away from this 50-minute video, it would be the importance of consideration of the human experience and interaction in designing public spaces. It is interesting how thoughtfully placed activities can amplify the effects of storytelling/conveyance of information. Barton certainly inspires us to take a step further in designing people’s memories so that the information would settle more personally and live longer within their minds.

For his interview with Designboom, visit:

interview with jake barton, founder of local projects

For more information on his firm: Local Projects