sketch

/*
Katherine Hua, Min Lee
Section A
khua@andrew.cmu.edu, mslee@andrew.cmu.edu
Final Project
*/

var characters = []; // images of the characters are loaded into this array
var mushroom; // image of mushroom that represents # of lives left is loaded into this variable
var cloud; // image of cloud is loaded into this variable
var cloudsX = []; //cloud's randomized x positions will be loaded into this array
var cloudsY = []; //cloud's randomized y positions will be loaded into this array 
var cloudsSpeed = []; // cloud's randomized speed will be loaded into this array

var gameMode = 0; // determines which screen you see; title screen = 0, game = 1, game over = 2, instructions = 3
var lives = 3; // you start out with 3 lives 
var score = 0; // you begin with a score of 0

var characterIndex; //assigns a number value to a character 
var pipeNumber; // //assigns each pipe a number value
var characterX; //keeps track of the character's X values
var characterY = 180; //keeps track of the character's Y values
var characterSpeed = -3; // //keeps track of the character's speed
var pipesOccupied; //the pipe number that's occupied by a character
var newIndex; //new number value assigned to character

function preload() {
    //links of character images 
    var characterImages = [];
    mushroom = loadImage("https://i.imgur.com/V1vjvug.png"); //mushroom that is meant to represent # of lives
    cloud = loadImage("https://i.imgur.com/7PCTEzk.png"); //clouds that will be floating by in the background
    characterImages[0] = "https://i.imgur.com/Bf9U7OE.png"; //mario
    characterImages[1] = "https://i.imgur.com/s7o5h2m.png"; //peach
    characterImages[2] = "https://i.imgur.com/xQqZiZb.png"; //toad
    characterImages[3] = "https://i.imgur.com/0bcsmDZ.png"; //bowser
    characterImages[4] = "https://i.imgur.com/Wv9Dkzj.png"; //wario
    characterImages[5] = "https://i.imgur.com/AkWIiIw.png"; //boo

    //initial cloud positions
    for (var i = 0; i < 4; i++) {
        //setting the clouds to random initial positions
        cloudsX[i] = width + i * 50;
        cloudsY[i] = random(0, 130);
        cloudsSpeed[i] = random(0.25, 1); // moving the clouds at a randomized speed between 0.25 and 1
    };

    //load images of characters into characters array
    //allows for object to change characters
    characters[0] = loadImage(characterImages[0]);
    characters[1] = loadImage(characterImages[1]);
    characters[2] = loadImage(characterImages[2]);
    characters[3] = loadImage(characterImages[3]);
    characters[4] = loadImage(characterImages[4]);
    characters[5] = loadImage(characterImages[5]);

}

function setup() {
    createCanvas(600, 400);
    //random positions of character
    pipeNumber = round(random(0, 5)); //randomly chooses which pipe the character will appear at
    pipesOccupied = pipeNumber; //corresponding pipe number
    characterX = width / 7 * (pipeNumber + 1) + 60; //character's x position that will determine their corresponding pipe
    characterIndex = round(random(0, 5)); //randomly chooses which character will appear
}

function draw() {
    background(21, 30, 99); // setting background to the blue
    //creating the clouds; just loading the image onto the canvas; they do not move here yet
    for (var i = 0; i < 4; i++) {
        image(cloud, cloudsX[i], cloudsY[i]);
    };

    displayHill(); // creating the hill landscape moving in the background

    //part of the Title Screen
    //images of characters spread out across title screen
    if (gameMode === 0) {
        for (var x = 0; x < 6; x++) {
            image(characters[x], (width/7 * (x+1)) - (width / 7 / 2) + 10, 110);
        }
    }

    gameScreen(); // this is the actual game 
    displayChutes(); // creates the green chutes/pipes 
    displayGround(); // creates the criss-crossed red brick ground 
    titleScreen(); // this is the starting, default screen
    drawScoreTally(); // keeps track of the score in gameScreen and gameOverScreen
    instructionsScreen(); // instructions screen
    displayButtons(); // creates the buttons in the actual game part
    gameOverScreen(); // the game over screen after you lose all your lices

    //clouds are made to move here at randomized speeds
    for (var i = 0; i < cloudsX.length; i++) {
        cloudsX[i] -= cloudsSpeed[i];
        if (cloudsX[i] < -60) {
            cloudsX[i] = width;
        };
    };
}


function drawScoreTally() {
    if (gameMode === 1) { // we only want this visual element to appear in the gameScreen 
        push();
        //making the yellow rectangle where the score will be kept
        fill(181, 141, 38);
        strokeWeight(2);
        stroke(255, 229, 163);
        rectMode(CENTER);
        rect(width / 2, 35, 70, 20, 3);
        noStroke();
        //adding the actual text on top of the rectangle 
        fill(255,229, 163);
        textAlign(CENTER);
        text("Score:" + " " + score, width / 2, 40)
        //text saying that if user wishes to restart the game at any point, the user can just press the key 'x' to restart the game
        text("Press 'x' to restart game", width/2, 60);
        pop();
    };
}

//creating the generative hill landscape in the background of the game
function displayHill() {
    var hill = 0.006 
    var hillSec = 0.0007;
    push();
    stroke(25, 83, 19);
    beginShape();
    for (i = 0; i < width; i ++) {
        var h = (millis() * hillSec) + (i * hill);
        var y = map(noise(h), 0, 1, 200, 100);
        line(i, y, i, height);
    }
    endShape();
    pop();
}
// creating the brick ground 
function displayGround() {
    push();
    strokeWeight(2);
    stroke(211, 71, 71);
    fill(181, 38, 38);
    rectMode(CORNER);
    rect(0, 260, 600, 400-260);
    for (var k = 0; k < 60; k ++) {
        line(k * 10, 260, k * 10, 400);
        line(0, 260 + k * 10, 600, 260 + k * 10);
    }
    pop();
}
//creating the green chutes/pipes
function displayChutes() {
    if (gameMode === 0 || gameMode === 1 || gameMode === 3) { //we want the chutes/pipes to appear in all screens except the game over screen
        push();
        //creating 6 chutes/pipes
        for (var j = 1; j < 7; j++) {
            rectMode(CENTER); //drawing rectangles from the center rather than the corner
            fill(43, 130, 58);
            strokeWeight(3);
            stroke(81, 163, 95);
            rect((width/7) * j, 220, 65, 80, 2); //body of the chute
            rect((width/7) * j, 200, 75, 40, 2); //head of the chute
            strokeWeight(7);
            //giving the pipes the highlight on their left side
            line(55 + (width/7 * (j-1)), 186, 55 + (width/7 * (j-1)), 215);
            line(60 + (width/7 * (j-1)), 225, 60 + (width/7 * (j-1)), 255);

        }    
        pop();
    }
}

function titleScreen() {
    push();
    if (gameMode === 0 || gameMode === 3) { // we want the title screen to appear in title screen and instructions screen
        //creating title of the game: "Pipe it Up"
        stroke(155, 115, 0); 
        strokeWeight(8);
        fill(255, 203, 57);
        textAlign(CENTER);
        textSize(70);
        textFont('arial')
        text("PIPE IT UP", width / 2, (height / 3 * 2) + 60);
        push();
        //creating the two yellow buttons on bottom of screen
        fill(155, 115, 0);
        strokeWeight(2);
        stroke(255, 230, 57);
        rect(150, 350, 125, 35, 4); //left button
        rect(325, 350, 125, 35, 4); // right button
        textSize(15);
        //creating the text on top of buttons
        textFont('Arial');
        strokeWeight(1);
        stroke(255, 203, 57);
        fill(255, 203, 57);
        text("START GAME", 213, 373);
        text("INSTRUCTIONS", 388, 373);
        pop();
    }
    pop();

    //changes cursor to hand when hovering over start button and instructions button 
    if (mouseX > 150 & mouseX < 275 && mouseY < 385 && mouseY > 350) {
        cursor(HAND);
        if (mouseIsPressed) {
            gameMode = 1;
        };
    } else if (mouseX > 325 & mouseX < 450 && mouseY > 350 && mouseY < 385) {
        cursor(HAND);
        if (mouseIsPressed) {
            gameMode = 3;
        };
    } else {
        cursor(ARROW);
    }
}

function instructionsScreen() {
    if (gameMode === 3) {  //we only want the instructions screen to occur during instructions Screen time
        push();
        //creating an lowered opacity blanket of black across the title screen
        fill(0, 0, 0, 200); 
        rect(0,0,600,400); 
        //title of the instructions screen: "Instructions"
        textSize(30);
        strokeWeight(1);
        stroke(255, 188, 0);
        fill(255, 188, 0);
        textAlign(CENTER);
        text("INSTRUCTIONS", width/2, 80);
        //purpose of the game
        fill(255);
        strokeWeight(1);
        stroke(255);
        textSize(18);
        text("Keep the Mushroom Kingdom safe!", width/2, 125);
        //instructions of the game
        textSize(15);
        noStroke();
        textAlign(LEFT);
        text("There are 6 pipes leading into the kingdom, each one assigned to a button \n on your keyboard : S, D, F, J, K, L. \n \n It is your job as royal guard to delegate who enters and who does not. \n Unfortunately, some baddies will try to infiltrate the kingdom \n and make you lose your job. But luckily, with the tap of a button, \n you can immediately prevent them from entering. \n But be careful! Reject a civilian and you'll get a demerit. \n Three demerits is a disadulation.", 50, 160);
        textAlign(CENTER);
        strokeWeight(1);
        stroke(255);
        text("Press 'x' to return to Start page", width/2, 350);
        pop();
    }
}

function gameScreen() {
    if (gameMode === 1) {
    //----------------------------- get random character to pop up at different location -------

        //places character down
        image(characters[characterIndex], characterX, characterY);
        //if character reaches peak, move in opposite direction
        if (characterY < 100) {
            characterSpeed = characterSpeed * -1
        //if character reaches bottom of the pipe, changes character randomly and goes to new pipe
        } else if (characterY > 200) {
            characterSpeed = characterSpeed * -1
            characterIndex = round(random(0, 5))
            pipesOccupied = round(random(0, 5))
            characterX = width / 7 * (pipesOccupied) + 60
        };
        characterY += characterSpeed;

    //----------------------------- correct answer / wrong answer ------------------------------
        //draws lives as mushrooms
        for (var i = 0; i < lives; i++) {
            image(mushroom, 60 + (40 * i), 20)
        };
        //once lives reaches 0, game ends
        if (lives === 0) {
            gameMode = 2
        };
    }
}

function displayButtons() {
    //draws each of the buttons 
    var txt = ["S", "D", "F", "J", "K", "L"];
    if (gameMode === 1) {
        push();
        stroke(137, 144, 200);
        strokeWeight(5);
        //changing color of button if respective key is pressed
        //if 's' key is pressed
        if (keyIsPressed) {
            if (key === 's') {
                fill(39, 49, 124);
            } else {
                fill(91, 100, 168);
            }
        } else {
            fill(91, 100, 168);
        }
        ellipse((width/7), height - height/7, 40, 40);
        // if 'd' key is pressed
        if (keyIsPressed) {
            if (key === 'd') {
                fill(39, 49, 124);
            } else {
                fill(91, 100, 168);
            }
        } else {
            fill(91, 100, 168);
        }
        ellipse((width / 7) * 2, height - (height / 7), 40, 40);
        // if 'f' key is pressed
        if (keyIsPressed) {
            if (key === 'f') {
                fill(39, 49, 124);
            } else {
                fill(91, 100, 168);
            }
        } else {
            fill(91, 100, 168);
        }
        ellipse((width / 7) * 3, height - (height / 7), 40, 40);
        // if 'j' key is pressed
        if (keyIsPressed) {
            if (key === 'j') {
                fill(39, 49, 124);
            } else {
                fill(91, 100, 168);
            }
        } else {
            fill(91, 100, 168);
        }
        ellipse((width / 7) * 4, height - (height / 7), 40, 40);
        // if 'k' key is pressed
        if (keyIsPressed) {
            if (key === 'k') {
                fill(39, 49, 124);
            } else {
                fill(91, 100, 168);
            }
        } else {
            fill(91, 100, 168);
        }
        ellipse((width / 7) * 5, height - (height / 7), 40, 40);
        // if 'l' key is pressed
        if (keyIsPressed) {
            if (key === 'l') {
                fill(39, 49, 124);
            } else {
                fill(91, 100, 168);
            }
        } else {
            fill(91, 100, 168);
        }
        ellipse((width / 7) * 6, height - (height / 7), 40, 40);
        // adding the text on top of the button
        pop();
        for (var j = 1; j < 7; j++) {
            push();
            fill(200, 184, 220);
            noStroke();
            textAlign(CENTER);
            textSize(19);
            text(txt[j - 1], (width / 7) * j , height - (height / 7) + 5);
            pop();
        }
    }
}

function gameOverScreen() {
    //press 'r' to restart
    if (gameMode === 2) {
        //title of the gameOverScreen: "game over"
        push();
        fill(11, 16, 90, 200);
        rect(0, 0, 600, 400);
        textSize(50);
        fill(239, 0, 42);
        strokeWeight(5);
        stroke(145, 0, 26);
        textAlign(CENTER);
        text("GAME OVER", width/2, height/2 - 20);
        //displays your score
        textSize(30);
        strokeWeight(2);
        text("Score:" + " " + score, width/2, height/2 + 20);
        //tells you how you can play again and restart the game
        textSize(20);
        strokeWeight(1);
        fill(239, 0, 42);
        text("Press 'r' to restart game", width/2, height/2 + 70);
        pop();
    };
} 

function keyPressed() {
    //if game hasn't started yet, press S to start
    //if game started, press X to go to home screen
    //if game over, press r to restart 
    if (gameMode === 1) {
        if (key === 'x' || key === 'X') {
            gameMode = 0;
            level = 1;
            score = 0;
    // if character is bad guy, add point for pressing; else subtract life 
    //if character is good guy, subtract life for pressing and add point for not pressing
        } else {
            for (var i = 0; i < characters.length; i++) {
                var keys = ["s", "d", "f", "j", "k", "l"]
                if (pipesOccupied === i) {
                    //if good guy, 
                    if (characterIndex === 0 || characterIndex === 1 || characterIndex === 2) {
                        if (key === keys[i]) {
                            lives -= 1
                        }
                    } else if (characterIndex === 3 || characterIndex === 4 || characterIndex === 5 & key === keys[i]) {
                        score += 1
                    } else if (characterIndex === 3 || characterIndex === 4 || characterIndex === 5 && key != keys[i]) {
                        lives -= 1
                    }
                };
            };
        }
    //GAMEOVER - press R to restart the game 
    } else if (gameMode === 2) {
        if (key === 'r' || key === 'R') {
            gameMode = 0;
            level = 1;
            score = 0;
            lives = 3;
        };
    //INSTRUCTIONS - press X to go to title screen
    } else if (gameMode === 3) {
        if (key === 'x' || key === 'X') {
            gameMode = 0;
        };
    };

} 

Instructions:

Keep the Mushroom Kingdom safe! There are 6 pipes leading into the Mushroom Kingdom and each one is assigned to a respective button on your keyboard : S, D, F, J, K, L. It is your job as a royal guard of the kingdom to delegate who is able to enter and who is not. Unfortunately, some villains will try to infiltrate the kingdom and make you lose your job. Luckily, with the tap of a button, you can immediately prevent them from entering. But be careful! Reject a civilian and you’ll lose a demerit (life). “Three demerits is a disadulation” – Jim  Halpert from The Office. haha

Statements:

What we have produced for our final project is a completely different direction than what we had proposed to do in our Proposal. After lots of thought, we decided to change the topic of our final project because we believed this was something that could best reflect our creativity and have a more set goal (and also in celebration of Nintendo’s release of Super Smash Bros Ultimate today).

In regards to the distribution of work, Min and I worked in person together throughout the whole process. In the beginning, we would just sit next to each other, create a visual element, and then come together to merge whatever the two of us came up with. After the visual aspects were basically all done and we had to get to the interactive component of the game, that is when things started to get a little more difficult. We had to communicate a lot and constantly merge our codes to make sure that we are using the same variables, going towards the same direction, and following the same general train of thought. In the end, I focused more on the game design and structure while Min focused more on gameplay and functionality.

In the beginning, we had wanted characters to be coming out of all six chutes randomly, but at all times. But, we couldn’t figure out how to prevent characters from appearing in pipes that another character already occupies. So, we shifted our goals to stick to one pipe. We also could not figure out how to debug our code so that if no key is pressed to capture a “bad” character, a life is lost, or vice versa, if no key is pressed to let a “good character remain free, points are added to the score. However other than those two problems, the rest of the game came out quite successfully.

With my proposed collaborator, Min Lee (mslee) from Section A, we are going to make an interactive visual representation of a song (yet to be decided). We want a song that gives off a peaceful and dreary vibe. The visual part will be of a visual sound spectrum based off the wavelengths of the sound that is set in the middle of the canvas. The spectrum will be made up of small circles of varying colors that are constantly drowned out by the background (to give it a look of lagging behind to further reinforce the dreary and peaceful vibe intended). For the interactive component, we wanted to create layers of sound. We will find the individual instruments that come together to make up the song (flute, percussion, voice, etc.). This representation will start off with just one layer (one instrument). With each click of the mouse, a layer of sound will be added. With each layer of sound, a layer of color will be added to the visual representation as well. So we were thinking of having the circles having lower opacities so that different colored circles could come together to form new colors. Of course this means we need to choose appropriate colors that will make actually pretty colors. Below is a quick sketch of what we expect our project to look like.

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-11-Composition */

//global variables
var ttl1;
var ttl2;
var ttl3;
var ttl4;
var ttl5;

function setup() {
    createCanvas(480, 480);
    background(35);
    //starting positions of turtle
    ttl1 = makeTurtle(267, 302);
    ttl2 = makeTurtle(260, 280);
    ttl3 = makeTurtle(280, 407);
    ttl4 = makeTurtle(267, 277);
    ttl5 = makeTurtle(278, 360);
    strokeCap(PROJECT);
    strokeJoin(MITER);
    frameRate(1);
}

function draw() {
	//turtle 5
	ttl5.setColor('skyblue');
	ttl5.setWeight(1);
	for (var n = 0; n < 10; n ++) {
		ttl5.forward(30);
		ttl5.left(55);
		ttl5.forward(50);
		ttl5.right(15);
		if (n % 9 === 0) {
			ttl5.forward(3);
		}
	}
	//turtle 1
	ttl1.setColor('pink');
	ttl1.setWeight(1);
	for (var i = 0; i < 20; i ++) {
		ttl1.forward(70);
		ttl1.left(120);
		ttl1.forward(100);
		ttl1.right(10);
	}
	//turtle 3
	ttl3.setColor('yellow');
	ttl3.setWeight(1);
	for (var k = 0; k < 10; k ++) {
		ttl3.forward(50);
		ttl3.left(55);
		ttl3.forward(60);
		ttl3.right(15);
		if (k % 9 === 0) {
			ttl3.forward(5);
		}
	}	
	// turtle 4
	ttl4.setColor('orange', 20);
	ttl4.setWeight(1);
	for (var m = 0; m < 10; m ++) {
		ttl4.forward(20);
		ttl4.left(110);
		ttl4.forward(50);
		ttl4.right(15);
		}
	//turtle 2
	ttl2.setColor('skyblue');
	ttl2.setWeight(1);
	for (var j = 0; j < 10; j ++) {
		ttl2.forward(1);
		ttl2.left(55);
		ttl2.forward(10);
		ttl2.right(15);
		if (j % 9 === 0) {
			ttl2.forward(5);
		}
	}

}

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);
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(128),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;}

At first I wanted to create a sunflower through this, but in the end I got carried away and began adding more and more layers to the design.

“NightFall” by Mileece (2003)

Mileece Petre is an English sound artist and environmental designer who makes generative and interactive through plants. Believing that plants are sentient beings, she is able to have plants create music by attaching electrodes to them. The data collected from an electromagnetic currents are sent to amplifiers and the amplifiers sends this data which is translated into codes, and the codes are then input into software that creates musical notes out of them.

I admire this project because even though a single plant creates minimal sound, if she attaches electrodes to all plants in a garden, it sounds like an orchestra’s symphony. Also, the type of music the plants come together to make sound very soft and peaceful, reflecting the organic and subtleness of plants. Furthermore, she is able to create a platform in which people can be more connected to nature, helping her passion for the environment.

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-10-Landscape */

var marioLink = "https://i.imgur.com/gaxoRHw.png"
var chutes = [];

function preload() {
	mario = loadImage(marioLink);
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of chutes
    for (var i = 0; i < 10; i++){
        var cx = random(width);
        chutes[i] = makeChute(cx);
    }
    frameRate(10);
}


function draw() {
    background(108, 130, 238); 
    displayHill();
    displayGround();

    updateAndDisplayChutes();
    removeChutes();
    addNewChutes(); 

    imageMode(CENTER);
    image(mario, 50, 330 + random(0, 30));
}


function updateAndDisplayChutes(){
    // Update the chute's positions, and display them.
    for (var i = 0; i < chutes.length; i++){
        chutes[i].move();
        chutes[i].display();
    }
}


function removeChutes(){
    var chutesToKeep = [];
    for (var i = 0; i < chutes.length; i++){
        if (chutes[i].x + chutes[i].breadth > 0) {
            chutesToKeep.push(chutes[i]);
        }
    }
    chutes = chutesToKeep; // remember the surviving chutes
}


function addNewChutes() {
    // add a new chute to the end based on the probability
    var newChuteLikelihood = 0.03; 
    if (random(0,1) < newChuteLikelihood) {
        chutes.push(makeChute(width));
    }
}


// method to update position of building every frame
function chuteMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function chuteDisplay() {
    var floorHeight = 45;
    var bHeight = floorHeight; 
//making the chutes
    push();
    translate(this.x, height - 40);
    strokeWeight(2);
    fill(147, 198, 63); 
    stroke(46, 104,28);
    rect(0, -bHeight - 61, 40, bHeight); // chute body
    rect(-5, -bHeight - 81, 50, 20); // chute head
//clouds
    fill(255, 70);
    noStroke();
    ellipse(0, -bHeight - 300, 100, 50);
    ellipse(10, -bHeight - 290, 90, 60);
    ellipse(20, -bHeight - 320, 110, 70);
//mystery boxes
    fill(233, 159, 87);
    strokeWeight(2);
    stroke(148, 85, 47);
    textSize(16);
    rect(50, -bHeight - 150, 30, 30);
    text('?', 60, -bHeight - 130);

    pop();
}


function makeChute(birthLocationX) {
    var cht = {x: birthLocationX,
                breadth: 70,
                speed: -6.0,
                nFloors: round(random(3,6)),
                move: chuteMove,
                display: chuteDisplay}
    return cht;
}
//making the green hill in the background
function displayHill() {
	var hill = 0.006
 	var hillSec = 0.0007;
 	stroke(71, 153, 44);
 	beginShape();
 	for (i = 0; i < width; i ++) {
 		var h = (millis() * hillSec) + (i * hill);
 		var y = map(noise(h), 0, 1, 300, 200);
 		line(i, y, i, height);
 	}
 	endShape();
}
//making the brick ground
function displayGround(){
	strokeWeight(2);
    stroke(136, 49, 27);
    fill(196, 83, 53);
    rect(0, 380, 480, 100);
    for (var j = 0; j < 50; j ++) {
    	line(j * 10, 380, j * 10, 480);
    	line(0, 380 + j * 10, 480, 380 + j * 10);
    }
}

I decided to my project based off of Super Mario Bros video game. I had trouble with figuring out how to make the chutes create new ones when the new screen comes by. Eventually I figured out if I increased the probability that a new chute is drawn, more will be drawn in the next screen. I also struggled with controlling the number of the chutes and couldn’t figure out how to make them not overlap each other.

Sophia Kahn is an Australian new media artist currently living in Brooklyn, New York. She earned her BA in Fine Arts and History Goldsmith College, University of London; a Graduate Certificate in Spatial Information Architecture from RMIT University, Melbourne; and an MFA in Art and Technology Studies at the School of the Art Institute of Chicago.

She creates illustrations and videos but the main focus of her work is creating sculptures through 3D printing.She uses a precisely engineered 3D last scanner to design the body of her sculpture. When scanning, the human body is constantly moving, so the scanner receives conflicting spatial coordinates, thereby creating a glitch. This glitch is what gives her sculptures the fragmented, deconstructed appearance. She takes this scan of damaged data and re-envisions it onto a different a canvas: prints, video, hand-painted, or 3D printed sculptures.

I admire her work because her 3D printed sculptures reflects ideas of deconstruction as she blurs the lines between old and new media, digital and physical realms, and interior and exterior spaces. Her work seems to dive into the haunting challenges of time, history, and identity. They seem to resonate the idea that death is inevitable as her pieces are fragmented, giving reminders of decay and aging.

I really liked Min Lee’s looking outwards blog post on this project called Skyline. Skyline is a code-based generative music video that uses Voronoi tessellation. Skyline’s systems have seeds that are categorized into different types of agents that represent a certain behavior or trigger transformations in appearance. The song’s audio spectrum or the animation sequence of the artist acts as the driver of these motions, creating beautiful patterns that come together to make a complex visual conclusion. I agree with how Min that this project is amazing in the way that the artist was able to create a visual representation of musical behavior through patterns of geometric shapes and inkblot-like figures. I’d like to add that I think it’s very interesting that throughout this music video, the shapes come together to form a figure of the vocalist or the face of the vocalist while the visual elements are moving with the sound of the instrumentals.

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-09-Portrait */

var klaire; 
var x;
var y;
var dx;
var dy;
var color;

function preload() {
    var imageLink = "https://i.imgur.com/DijwpWY.jpg"; //link of image
    klaire = loadImage(imageLink); //loading image onto canvas
}

function setup() {
    createCanvas(500, 500);
    background(42, 57, 70);
    klaire.loadPixels(); //loading pixels of image 
    frameRate(500); //making it draw faster
    x = random(width); //randomizing x between constraints of width
    y = random(height); //randomizing y between constraints of height
    dx = random(-1,1); //randomizing direction
    dy = random(-1,1); //randomizing direction
}

function draw() {   
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    color = klaire.get(ix, iy); //getting pixel color according pixel position in comparison to pixel in image
    fill(color); //making color at this pixel position the same color as in the image's pixel position
    textSize(10);
    text("loading", x, y);


    x += dx * 5 ;
    y += dy * 5  ;
    //when the word "loading" hits the edge of the canvas, direction is changed randomly
    if (x > width || x < 0) {
        dx = -dx;
        dy = random(-1, 1);
    }  
    if (y > height || y < 10) {
        dy = -dy;   
        dx = random(-1, 1);     
    } 

    
}

For this project, I chose my portrait to be of my twin sister, Klaire (because I miss her). She goes to school on the west coast in California, so the only times we can see each other now are breaks. I chose to use text to create compute the portrait of her. I like how when all the text builds up, it begins to look like strokes of paint instead of text.

This is what is looks like at the very beginning. The text “loading” is drawn randomly across the canvas. Each time it hits a wall, it will change direction at a random angle and speed.

As more and more build on top of each other, the image starts coming together to create this.

This is the original portrait of Klaire. <3

Manuel Lima is a Portuguese-born designer with a leading voice on network visualization, studying how information can be organized and creates beautiful and complex diagrams. Lima has been recognized as a Fellow of the Royal Society of Arts and is named to be one of the “most creative and influential minds of 2009” by Creativity magazine. He is also the founder of VisualComplexity.com which is a visual exploration on mapping complex networks, a showcase for the intersection of art, design, and science. I admire Lima’s work because his work is explores new ways to visualize information as the world moves on from relying on hierarchical trees into and moves into networks as a platform to illustrate and map the complexities of the world.

My favorite project of his is VisualComplexity  because it is a unified resource space that aims to leverage a critical understanding of different data visualization methods. When presenting his work, he begins with giving background and an understanding of his motivation behind his project before diving into the projects he has accomplished. By doing so, he shows what makes his work important and why his audience should pay attention to it. Manuel  Lima’s website can be found here.