Use the number keys in order to progress in the story!

sketch

var playerChoices = [];
var currentScene = 0;
var sceneList = [];

var leggyFish = [];
var leggyFishLoad = [];

var cat = [];
var catLoad = [];

var catFamily = [];
var catFamilyLoad = [];

var possums = [];
var possumsLoad = [];

var backgrounds = [];
var backgroundsLoad = [];

var endingImages = [];
var endingImagesLoad = [];

var items = [];
var itemsLoad = [];

function preload(){
    //preloads images for background, characters, items, etc.
    //imgur file link https://imgur.com/a/I9BTC

    //backgrounds
    //home
    backgrounds[0] = "https://i.imgur.com/fdhG0uX.png";
    //store
    backgrounds[1] = "https://i.imgur.com/XLXhiQ1.png";
    //street
    backgrounds[2] = "https://i.imgur.com/C9gVejq.png";
    //possum ending
    backgrounds[3] = "https://i.imgur.com/hoVazkD.png";
    //lose ending
    backgrounds[4] = "https://i.imgur.com/Dyp8s1Z.png";

    //characters
    //cat neutral
    cat[0] = "https://i.imgur.com/3edcYR9.png";
    //cat sad
    cat[1] = "https://i.imgur.com/u1bIhz2.png";
    //cat happy
    cat[2] = "https://i.imgur.com/YFuQ8tH.png";

    //cat family neutral
    catFamily[0] = "https://i.imgur.com/iWE061b.png";
    //cat family angry
    catFamily[1] = "https://i.imgur.com/dwXS352.png";
    //cat family happy
    catFamily[2] = "https://i.imgur.com/gJDwiOw.png";
    //cat full family
    catFamily[3] = "https://i.imgur.com/qJ2XmCm.png";

    //leggy fish neutral
    leggyFish[0] = "https://i.imgur.com/afO8XhG.png";
    //leggy fish sad
    leggyFish[1] = "https://i.imgur.com/h90qSVH.png";
    //leggy fish happy
    leggyFish[2] = "https://i.imgur.com/kSy0YDp.png";

    //possums neutral
    possums[0] = "https://i.imgur.com/BV6DYd7.png";
    //possums mad
    possums[1] = "https://i.imgur.com/2EGHdrk.png";

    //water ending
    endingImages[0] = "https://i.imgur.com/QwObsf3.png";
    //milk ending
    endingImages[1] = "https://i.imgur.com/NO4hAnK.png";
    //bad possum ending
    endingImages[2] = "https://i.imgur.com/smECEKi.png";
    //good possum ending
    endingImages[3] = "https://i.imgur.com/EX8XQjv.png";
    //bad cat ending
    endingImages[4] = "https://i.imgur.com/mjmR2QE.png";
    //good cat ending
    endingImages[5] = "https://i.imgur.com/Xj8lU3S.png";
    //leggy fish ending
    endingImages[6] = "https://i.imgur.com/ni1ZpWr.png";

    //knock off oreos image
    items[0] = "https://i.imgur.com/0RvrPHJ.png";
    //fish
    items[1] = "https://i.imgur.com/cIw1WkF.png";
    //grocery store PANTS
    items[2] = "https://i.imgur.com/bRV6gGk.png";
    //milk
    items[3] = "https://i.imgur.com/Psx2phG.png";

    // load all images and add to appropriate arrays
    for(var b = 0; b < backgrounds.length; b++){
        backgroundsLoad[b] = loadImage(backgrounds[b]);
    }
    for(var c = 0; c < cat.length; c++){
        catLoad[c] = loadImage(cat[c]);
    }
    for(var cF = 0; cF < catFamily.length; cF++){
        catFamilyLoad[cF] = loadImage(catFamily[cF]);
    }
    for(var l = 0; l < leggyFish.length; l++){
        leggyFishLoad[l] = loadImage(leggyFish[l]);
    }

    for(var p = 0; p < possums.length; p++){
        possumsLoad[p] = loadImage(possums[p]);
    }

    for(var e = 0; e < endingImages.length; e++){
        endingImagesLoad[e] = loadImage(endingImages[e]);
    }

    for(var i = 0; i < items.length; i++){
        itemsLoad[i] = loadImage(items[i]);
    }
}

function createScenes() {
    // create all scenes & choices and add them to an array
    // format: main dialogue, choice 1 text, choice 1 next scene #,
    //         choice 2 text, choice 2 next scene #,
    //         choice 3 text (or "none"), choice 3 next scene,
    //         background image, character image
    // should set up a spreadsheet to keep track of scene nums

    //scenes at home
    sceneList.push(makeScene("you wake up", "time for cereal", 1,
    "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
    sceneList.push(makeScene("oh no! you're out of milk", "go to store", 4,
    "water's basically the same thing", 2, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));

    //ENDING 1
    sceneList.push(makeScene("this cereal is reacting strangely to water...","BOOM!!!",3,"none",0,"none",0,backgroundsLoad[0], backgroundsLoad[0]));
    sceneList.push(makeScene("your cereal spontaneously combusted", "none", 0, "none", 0, "none", 0, backgroundsLoad[0],backgroundsLoad[0]));

    //store scenes
    sceneList.push(makeScene("the sun is shining as you walk down the street", "head to the store", 5, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]))
    sceneList.push(makeScene("you're here for milk, but you're tempted to pick something else up", "resist the temptation", 6,
    "wander the aisles", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("you're on a mission", "take your milk home", 7, "actually, wait...", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));

    //ENDING 2
    sceneList.push(makeScene("you eat your cereal", "wow, you're so boring", 8, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
    sceneList.push(makeScene("technically you win, but you are a loser", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));

    sceneList.push(makeScene("you head to the...", "junk food aisle", 10, "seafood section", 11, "dairy section", 6, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("you do love your sweets", "let's get some roreos", 13, "aren't you on a diet", 9, "wait what's that", 12, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("the fish are so fresh", "why not?", 25, "you don't even like seafood", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("are those........ pants", "grocery store pants oh heck yeah", 42, "you don't trust no grocery store pants", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("you have just enough money", "time to go home", 14, "none", 0, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));

    //possum scenes
    sceneList.push(makeScene("you stroll down the street", "what's that?", 15, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
    sceneList.push(makeScene("something emerges from a trah can", "say hi to the... possums?", 16, "none", 0, "none", 0, backgroundsLoad[2], possumsLoad[0]));
    sceneList.push(makeScene("the possums eye your purchase", "excuse YOU, these are mine", 17, "offer a cookie", 20, "none", 0, backgroundsLoad[2], possumsLoad[0]));
    sceneList.push(makeScene("the possums watch disapprovingly as you walk down the street", "whatever, time for cookies", 18, "none", 0, "none", 0, backgroundsLoad[2], possumsLoad[1]));

    //ENDING 3
    sceneList.push(makeScene("every bite of cookie tastes like regret", "the possums have cursed you", 19, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
    sceneList.push(makeScene("death is coming for you", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));

    sceneList.push(makeScene("the possum grabs the entire package out of your hands and vanishes", "oh well", 21, "none", 0, "none", 0, backgroundsLoad[2], possumsLoad[0]));
    sceneList.push(makeScene("you unlock the door with no cookies or milk", "you hear strange rustling sounds", 22, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
    sceneList.push(makeScene("there's an army of possums in your house", "welcome your new family", 23, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[3]));

    //ENDING 4
    sceneList.push(makeScene("they push forward a gallon of milk", "you did the right thing", 24, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[3]));
    sceneList.push(makeScene("the possums are in the house", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[3]));

    //cat scenes
    sceneList.push(makeScene("you have just enough money", "time to go home", 26, "none", 0, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("you stroll down the street", "something scurries by", 27, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
    sceneList.push(makeScene("a scrawny cat begs for help", "you coldly walk on", 28, "aw, he looks hungry", 34, "none", 0, backgroundsLoad[2], catLoad[1]));
    sceneList.push(makeScene("you are heartless, but not fishless", "continue on your way", 29, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
    sceneList.push(makeScene("as you round the corner, you hear more meows", "it's a family of cats", 30, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
    sceneList.push(makeScene("you stare at each other", "suddenly, one speaks", 31, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
    sceneList.push(makeScene("where's father? he was supposed to bring us food", "uh oh...", 32, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));

    //ENDING 5
    sceneList.push(makeScene("you remember the cat from before", "should have given him the fish", 33, "prepare to be eaten", 33, "none", 0, backgroundsLoad[2], catFamilyLoad[1]));
    sceneList.push(makeScene("you become cat food", "none", 0, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[1]));

    sceneList.push(makeScene("the cat politely takes the fish", "farewell sir", 35, "none", 0, "none", 0, backgroundsLoad[2], catLoad[0]));
    sceneList.push(makeScene("as you round the corner, you hear more meows", "it's a family of cats", 36, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
    sceneList.push(makeScene("you smile at them", "the cat from before appears!", 37, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[3]));
    sceneList.push(makeScene("he gives the fish to his family", "you swear you hear them say ''thanks'' to you", 38, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[3]));
    sceneList.push(makeScene("that was nice", "time to go home, finally", 39, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
    sceneList.push(makeScene("when you get home, there's a package at your door", "there's a paw print on it", 40, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));

    //ENDING 6
    sceneList.push(makeScene("it's... a gallon of milk", "you tearfully thank the cats", 41, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
    sceneList.push(makeScene("you have been blessed by cats", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));

    //leggy fish
    sceneList.push(makeScene("you have just enough money", "time to go home", 43, "none", 0, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
    sceneList.push(makeScene("you stroll down the street", "there's something odd over there", 44, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
    sceneList.push(makeScene("a fish head peaks at you from behind a bush", "why does this fish has legs", 45, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[0]));
    sceneList.push(makeScene("you should really get to know your neighbors", "...some other time", 46, "he looks sad and cold", 47, "none", 0, backgroundsLoad[2], leggyFishLoad[1]));
    sceneList.push(makeScene("what are you, heartless", "those pants won't fit you anyways", 47, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[1]));
    sceneList.push(makeScene("you look at your grocery store pants", "give the fish pants", 48, "give the fish pants", 48, "GIVE THE FISH PANTS", 48, backgroundsLoad[2], leggyFishLoad[1]));
    sceneList.push(makeScene("the fish hurriedly puts them on", "leggy fish looks quite dapper in those pants", 49, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[2]));
    sceneList.push(makeScene("you wave good bye", "leggy fish signals you to wait", 50, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[2]));
    sceneList.push(makeScene("the fish pulls a box from behind the bush", "thank you?", 51, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[2]));
    sceneList.push(makeScene("you head home with the box", "let's see what's inside", 52, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));

    //ENDING 7
    sceneList.push(makeScene("it's a gallon of milk", "wow, you have such nice neighbors", 53, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
    sceneList.push(makeScene("this is the true ending", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
}

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

function draw() {
    // render the current scene
    sceneList[currentScene].draw();
}

function keyPressed() {
    var sceneToChange;
    // check which key is pressed
    // & switch to the correct scene depending on the current scene
    if(key == 1) {
        sceneToChange = sceneList[currentScene].next1;
        currentScene = sceneToChange;
    } else if(key == 2 & sceneList[currentScene].opt2 != "none") {
        sceneToChange = sceneList[currentScene].next2;
        currentScene = sceneToChange;
    }
    // make sure this is a 3rd option
    else if(key == 3 & sceneList[currentScene].opt3 != "none") {
        sceneToChange = sceneList[currentScene].next3;
        currentScene = sceneToChange;
    }
}

function drawScene() {
    // draw background image
    image(this.bg,0,0,480,360);

    // draw character or item
    image(this.character,0,0,480,360);

    // text underlay
    fill(250, 250, 250, 200);
    noStroke();
    rect(0, (2/3)*height, width,(1/3)*height);

    // draw ending text
    if(currentScene == 3 || currentScene == 8 || currentScene == 19 || currentScene == 24 || currentScene == 33 || currentScene == 41 || currentScene == 53){
        textAlign(CENTER);
        image(backgroundsLoad[4],0,0);
        fill(255);
        text("press '1' to play again ", width/2, 290);
    }
    else{
        fill(0);
    }

    //adds items
    if(currentScene == 12){
        image(itemsLoad[2],0,0);
    }
    if(currentScene == 10){
        image(itemsLoad[0],0,0);
    }
    if(currentScene == 11){
        image(itemsLoad[1], 0, 0);
    }
    if(currentScene == 6 || currentScene == 40 || currentScene == 52 || currentScene == 23){
        image(itemsLoad[3],0,0);
    }

    //adds ending images
    if(currentScene == 3){
        image(endingImagesLoad[0],0,0);
    }
    if(currentScene == 8){
        image(endingImagesLoad[1],0,0);
    }
    if(currentScene == 19){
        image(endingImagesLoad[2],0,0);
    }
    if(currentScene == 24){
        image(endingImagesLoad[3],0,0);
    }
    if(currentScene == 33){
        image(endingImagesLoad[4],0,0)
    }
    if(currentScene == 41){
        image(endingImagesLoad[5],0,0);
    }
    if(currentScene == 53){
        image(endingImagesLoad[6],0,0);
    }
    // draw main dialogue
    textAlign(CENTER);
    textStyle(NORMAL);
    textFont("Courier", 12);
    text(this.dialogue, width/2, 260);

    // draw options
    textAlign(LEFT);
    textStyle(ITALIC);
    // check if each option exists before drawing it
    if(this.opt1 != "none"){
        text("1. " + this.opt1, width/2-150, 290);
    }
    if(this.opt2 != "none") {
        text("2. " + this.opt2, width/2-150, 310);
    }
    if(this.opt3 != "none") {
        text("3. " + this.opt3, width/2-150, 330);
    }
}

// create a scene object
function makeScene(words, one, n1, two, n2, three, n3, b, c) {
    var scene = {dialogue: words,
        opt1: one,
        next1: n1,
        opt2: two,
        next2: n2,
        opt3: three,
        next3: n3,
        bg: b,
        character: c,
        draw: drawScene}
        return scene;
    }

For this project, I collaborated with Allissa Chan in order to create a choice-based game revolving around a trip to the grocery store. We used objects in order to implement all of the scenes, and created our graphics using Adobe Photoshop. There are seven different routes/endings within the game (including our definition of a “true” ending).

For my final project, I am hoping to collaborate with Allissa Chan in order to create a choices-based video game in which a user is faced with different opportunities (or not) depending on how they interact with characters in the game. With this in mind, I decided to research choice based video games and how they worked.

trailer for night in the woods game

The first game that I looked into was Night in the Woods, a game available on Steam created by “a teamup of Alec Holowka (Aquaria), Scott Benson (Late Night Work Club), and Bethany Hockenberry”. Published January 10, 2017, the game follows a cat who returns home after dropping out of college. Available for PC, Mac, and PS4, the game operates by changing dialogue and scenes based on which characters the user interacts with more. Even though the consequences of user choices within the game are subtle, they have a significant effect on the relationships that the user creates with each of the characters, providing an extremely different and personalized experience.

The choices in Life is Strange make for more dire consequences within the game.

trailer for life is strange game

Released on January 29, 2015 and developed by Don’tNod entertainment, Life is Strange follows the story of a girl with the ability to go back in time.  The choices that the user makes directly affects the choices available from then on, as well as the relationships that the user has with the other in-game characters. What I find inspiring is the amount of detail of the game and the amount of choices and consequences that seamlessly connect together.

Both of these games can be considered relevant to our final project work in that it shows how a series of events can be triggered based on user choices.

For this project, I am planning on collaborating with Allissa Chan (section E) in order to create a story-based game in which the choices a user makes affects the rest of the story. The story/ game will be presented as a series of images with text. Players will be able to choose options/ text prompts by pressing corresponding keys.

The story will revolve around the player’s trip to a grocery store, in which the player can choose to buy items that will help them progress. Each part of the story will have a different character that will respond to different objects that the user decides to purchase.

We will also implement randomness in order to make it so that each user’s experience is a little different. We will randomize the order in which characters may appear in the story as well as different events that may help the player later on.

sketch

//sets up an empty arrays for turtles
var turtleArray = [];
var turtleArray2 = [];
var turtleArray3 = [];
var turtleMouse = [];
var turtleX;
var turtleY;
var x;
var y;

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

function draw() {
    turtles();
    turtles2();
    turtles3();
}

//when mouse is pressed, new turtles are pushed into array
//(with same x and y values)
function mousePressed() {
    turtleX = 0;
    //allows for stair cases to be at every part of canvas
    turtleY = random(-height, height);
    turtleArray.push(makeTurtle(turtleX, turtleY));
    turtleArray2.push(makeTurtle(turtleX, turtleY));
    turtleArray3.push(makeTurtle(turtleX, turtleY));
}

function turtles() {
    //for every turtle in array, sets new color
    for (var i = 0; i < turtleArray.length; i++) {
        turtleArray[i].penDown();
        turtleArray[i].setColor(random(0, 255));
        turtleArray[i].setWeight(2);

        //will fill up canvas by creating staircase
        for (var j = 0; j <= 12; j++) {
            turtleArray[i].forward(width / 12);
            turtleArray[i].right(90);
            turtleArray[i].forward(width / 12);
            turtleArray[i].left(90);
        }

        turtleArray[i].penUp();
    }
}

function turtles2() {
    for (var i = 0; i < turtleArray.length; i++) {
        turtleArray2[i].penDown();
        turtleArray2[i].setColor(random(0, 255));
        turtleArray2[i].setWeight(2);

        for (var j = 0; j <= 24; j++) {
            turtleArray2[i].forward(width / 24);
            turtleArray2[i].right(90);
            turtleArray2[i].forward(width / 24);
            turtleArray2[i].left(90);
        }

        turtleArray[i].penUp();
    }
}

function turtles3() {
    for (var i = 0; i < turtleArray.length; i++) {
        turtleArray3[i].penDown();
        turtleArray3[i].setColor(random(0, 255));
        turtleArray3[i].setWeight(2);

        for (var j = 0; j <= 36; j++) {
            turtleArray3[i].forward(width / 36);
            turtleArray3[i].right(90);
            turtleArray3[i].forward(width / 36);
            turtleArray3[i].left(90);
        }

        turtleArray[i].penUp();
    }
}

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;
}

For this assignment, I decided that I wanted to try and make an interesting pattern with my turtles. At first, I started with a basic staircase which generated at a random y value in between -480 and 480. Once I was able to figure out the code for that, I started to make new turtle arrays that ended up resembling a snowy mountain peak based on the color and the way that each of the lines intersected.

Every time a user clicks inside of the canvas, three turtles will generate with different color values.

sketch process

examples of turtle compositions

Taurus in the style of Vivaldi by David Cope

For this week, I decided to look into the work of David Cope. As a music professor at the University of California, Santa Cruz, Cope writes algorithms and programs that take in music and outputs new compositions in the style of the original input.

The example above uses his experiments in musical intelligence in order to recreate the style of Antonio Vivaldi. His program relied on processes such as deconstruction, analyzing signatures, and finding compatibility in works in order to create new compositions. In the case of this example, the music video accompanying this piece was also algorithmically created.

I think that the concept of using new technologies in order to recreate styles of old composers is incredibly interesting, yet works surprisingly well. However, I think that one flaw to this sort of technique is that algorithms can only analyze how each of the notes are treated, but do not take into account the emotions that any given composer has as they create.

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-10

var clouds = [];
var birdStrings = [];
var birdImgs = [];
var birds = [];
var birdTalk = ["hello", "hey", "hi", "howdy", "help me", "i love bread", "thank you", "good bye", "hm"];

//preloads all illustrator bird files locally
function preload() {
    birdStrings[0] = "https://i.imgur.com/LMwUiTl.png";
    birdStrings[1] = "https://i.imgur.com/2DClEHo.png";
    birdStrings[2] = "https://i.imgur.com/LoaUSI2.png";
    birdStrings[3] = "https://i.imgur.com/yMJKBYw.png";
    birdStrings[4] = "https://i.imgur.com/jF6usAy.png";
    birdStrings[5] = "https://i.imgur.com/GPZ41QC.png";
    birdStrings[6] = "https://i.imgur.com/15jvGyQ.png";
    birdStrings[7] = "https://i.imgur.com/XcxgSGA.png";

    for (var b = 0; b < 8; b++) {
        birdImgs[b] = loadImage(birdStrings[b]);
    }
}

//creates canvas initialized with birds, clouds
function setup() {
    createCanvas(480, 360);

    //initializes three birds at set x location
    birds[0] = birdPicture(50);
    birds[1] = birdPicture(200);
    birds[2] = birdPicture(400);
    
    clouds[0] = cloudPicture(60);
    clouds[1] = cloudPicture(290);
}

function draw() {
    //sets background to be dark blue of bird
    background(81,81,122);

    //calls function that draws mountains
    mountains();
  
    //draws clouds behind first mountain    
    updateClouds();
    addNewClouds();
    
    mountains2();
    
    //draws horizon line
    noStroke();
    fill(250, 240, 240);
    rect(0, 290, width, height);
    
    //draws birds
    updateBirds();
    addNewBirds();
}

function updateClouds(){
    //change the x location of each cloud
    for(var i = 0; i < clouds.length; i++){
        clouds[i].cmove();
        clouds[i].cdraw();
    }
}

function addNewClouds(){
    //adds new clouds with same probability of a number drawn between 0 and 1.2 being less than 0.003
    var probability = 0.003;
    if(random(0,1.2) < probability) {
        clouds.push(cloudPicture(width));
    }
}

function cloudPicture(cloudX){
    var cloudPicture = {
        cx: cloudX,
        cy: random(40,140),
        velo: 0.4,
        cmove: cloudMove,
        cdraw: drawCloud,
        cwidth: random(60,130),
        cheight: random(20,30)
    }
    return cloudPicture;
}

function cloudMove() {
    this.cx -= this.velo;
}

function drawCloud(){
    noStroke();
    fill(255);
    rect(this.cx, this.cy, this.cwidth, this.cheight,30);
    rect(this.cx + this.cwidth-(this.cwidth/1.2), this.cy-this.cheight+(this.cheight/2), this.cwidth/2, this.cheight,30);
}

function updateBirds() {
    //change the x location of each of the birds
    for (var i = 0; i < birds.length; i++) {
        birds[i].bmove();
        birds[i].bdraw();
    }
}

function addNewBirds() {
    //adds new birds with same probability of a number drawn between 0 and 1.2 being less than 0.004
    var probability = 0.004;
    if (random(0, 1.2) < probability) {
        birds.push(birdPicture(width));
    }
}

function birdPicture(startX) {
    var birdPicture = {
        x: startX,
        vel: 1,
        type: floor(random(0, 7)),
        bmove: birdMove,
        bdraw: drawBird,
        speak: bTalk(),
        talkProbability: tP()
    }
    return birdPicture;
}

//coin toss equivalent
function tP() {
    var talkProb = false;
    if (random(0, 1) > 0.8) {
        return true;
    }
    return talkProb;
}

//adds velocity to x to make birds scroll horizontally
function birdMove() {
    this.x -= this.vel;
}

function drawBird() {
    //if bird is shorter, draw lower on page
    if (this.type == 0 || this.type == 1 || this.type == 4 || this.type == 5) {
        image(birdImgs[this.type], this.x, 213);

        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x + 20, 193)
        }


    }
    
    //if bird is taller, draw higher on page
    else {
        image(birdImgs[this.type], this.x - 30, 180);
        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x, 160);

        }

    }

}

//returns strings in birdTalk array
function bTalk() {
    return birdTalk[int(random(birdTalk.length))];
}

function mountains() {
    var terrainSpeed = 0.0002;
    var terrainDetail = 0.005;
    push();
    beginShape();
    noStroke();
    fill(190, 160, 180);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y - 90);

    }
    vertex(width, height);
    endShape();
    pop();

}

function mountains2() {
    var terrainSpeed = 0.0004;
    var terrainDetail = 0.003;
    push();
    beginShape();
    noStroke();
    fill(140,120,150);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y-40);

    }
    vertex(width, height);
    endShape();
    pop();

}

For this project, I decided to do a landscape with birds, as I had done a lot of projects with birds previously.

Rather than create the birds through coding, I decided to use illustrator in order to create vectors that I could implement in the code. In order to do this, I ran a preload function that populated an array with my images uploaded to imgur.

I created two objects–birds and clouds–and populated arrays with them in order to have them appear in my environment.

For this week, I decided to explore the projects of Angela Washko and her work with activism in the form of video games. Graduating with a degree in Painting, Drawing, and Sculpture, Washko uses her works as an artist in order to express her views in relation to feminism and activism. Washko is employed as a fellow at Frank-Ratchye STUDIO for Creative Inquiry and acts as a Assistant Professor at Carnegie Mellon.

Specifically, I chose to research The Game: The Game, a choice-based story in which the player acts as a female protagonist in a dating simulator visualizing the practices of several prominent pick up artists (their books pictured below).

I thought it was incredibly interesting how Washko played off of the idea of visual novels/dating simulators in order to depict negative interactions and experiences that females face on a daily basis. I think that the way the graphics are depicted along with the text allows for the user to immediately feel uncomfortable yet a part of the world that Washko creates.

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-09

var underlyingImage;

function preload() {
    //loads picture of friend in trash can
    var trashCan = "https://i.imgur.com/tAUXO6y.jpg";
    underlyingImage = loadImage(trashCan);
}

function setup() {
    createCanvas(480,480);
    background(0);
    underlyingImage.loadPixels();
    //frameRate(10);
    fill(255);
    
    //tells user what to do
    text("drag mouse to start",180,height/2);
    noLoop();
}

function mouseDragged(){
    //will start drawng pixel rectangles at 0
    var rX = 0;
    //will start drawing pixel rectangles in row at mouseY
    var rY = mouseY;
    var imageX = constrain(floor(rX), 0, width-1);
    var imageY = constrain(floor(rY), 0, height-1);
    
    //take color of image at mouseX, mouseY
    var imageColor = underlyingImage.get(imageX, imageY);
    var incriment = 10;

    if (mouseDragged){
        incriment += 10;
    }
    
    //draws pixels at random width and height from 1-10
    var rWidth = random(1,10);
    var rHeight = random(1,10);
    noStroke();
    
    //for loop allows for pixels to be drawn through entire width
    //rectangles are updated with new color depending on imageX and imageY
    for(var i = imageX; i < width; i++){
        imageColor = underlyingImage.get(imageX, imageY);
        fill(imageColor);
        rect(imageX,imageY,rWidth,rHeight);
        imageX+=10;
    }
    
}

For this project, I decided to use an image of my friend sitting in a trash can.

I started with a similar approach as the sample code, using rectangles at random widths and heights of the color of the background image. I decided that I wanted to display the image using the mouseDragged function, but was concerned with the issue that it would take too long for the image to appear if I had it load rectangle by rectangle. In order to combat this, I decided to load the image in the form of rows. I had issues at first with my rectangle rows all being the same color as the pixel loaded at mouseX, mouseY, but I was able to resolve this by updating the color as mouseX and mouseY updated.

Proteus

For this looking outwards, I decided to look into Allissa’s Looking Outwards post on the game Proteus. Ed Key released the game in 2013, allowing users to explore this generated world.

I really liked Allissa’s mentioning of the change in soundtrack depending on the user’s location as well as the time of day. While I did not actually purchase the game myself to play it, I liked the way Allissa described the features in the game in regards to randomly generated topography, flora, fauna, and structures.

While I do agree that the gameplay is slightly limited in the sense that what you can do involves walking around the world and listening to music, I think that is what makes the game so satisfactory. The calm and elegant simplicity of the design paired with the limited gameplay gave it its own aesthetic and atmosphere.

INSTINT 2014-Jen Lewin

I decided to look into the works of Jen Lewin based on the information she delivered during her Eyeo Festival talk in 2014. Based in New York, Lewin works as a light and interactive sculptor, making works that allow the public to create their own art. What I found inspirational was Lewin’s focus on the “experience” of her art. Traditionally, art is almost always defined by its final product. However, with Lewin’s publicly available art, that is not the case. Lewin’s ability to allow her art to be ever-changing as a deviation to the norm makes it even more admirable.

The way that Lewin presented her work made me appreciate her work even more. Rather than just displaying each of the projects she accomplished or listing out the things that she had done, she went into her process and reasoning behind her decisions. The way in which she was able to express her thinking to her audience was incredibly effective in a way that positively promoted her work.

Magical Harp Sculpture

After watching the video, I delved in to her Magical Harp sculpture, located in Palo Alto, California in 2015. Deemed, playful, yet sophisticated, the piece was included in the Magical Bridge Playground, an unconventional sort of playground allowing those of different cognitive and physical abilities to enjoy. The consideration of those with different capabilities as well as the overall construction and design of the piece was incredibly inspiring to watch.