Category: Final Project

determination

glamour

highA

highAsharp

highB

highC

highCsharp

highD

highDsharp

highE

highF

highFsharp

highG

highGsharp

lowA

lowAsharp

lowB

lowC

lowCsharp

lowD

lowDsharp

lowE

lowF

lowFsharp

lowG

lowGsharp

papyrusTalk

sansTalk

My project is an interactive piano keyboard that will play when the user presses the mouse over the individual keys. Keep in mind that because of the way the code is written, the white keys are only playable in the area below the black keys.

For a simple melody from the indie game Undertale to play, the user needs to type in a certain password that will display as the user types. That certain is… “determination.”

Screenshots to prove functionality of project:

Running a local server is required for the code template. I didn’t know how to display the project for this reason, and so I have attached my code and embedded all 28 of the .wav sound files used in the code. (If the .wav files are inaccessible somehow even when looking at the text, please let me know!) All the image URLs are direct links to the images themselves. Directions for running a local server are here.

Credits:
All copyright and materials, including the depicted characters, sound effects, quotes, and songs, of Undertale belong to its creator, Toby Fox.

The performance of the “determination” melody belongs to Kyle Landry, whose video can be found here for a direct link or embedded below.

All manual piano key notes were recorded by myself using the sound editor Audacity and the piano in Mudge residence hall in Carnegie Mellon University.

P.S., if you’ve played Undertale, try typing in the word that would please a certain fabulous robot the most when he presents his essay question… or you could just look at the code for the little treat I put in. 🙂

My good friend Kate was the inspiration for my twitter bot. No, she’s not a goth queen, but she did a hilarious text generation program that used a computer manual and a Shakespeare play to make computerized sonnets.

https://twitter.com/666sadshawty666 <—- This is the account!!!! It tweets every half hour as long as I keep the program running.

http://imgur.com/gallery/PJLdR <—- These are some of the funniest returns I got from the program. I highly recommend looking through this if you have time but the twitter feed itself should give you a good idea of what the bot has to say.

http://pastebin.com/EufB7Vcz <—- this is a pastebin link that contains
the input text (emobot_words.txt) employed by my program. I collected
these texts from various places:

•  Twitter itself: I scoured through several tags like “#gothlife”, “#gothproblems”, “#gothculture” and so on and found some amazing content to include in my file.
• Tumblr: Looking through similar tags on tumblr yielded the same spectacular results.
• Facebook Groups: Lots of angst-ridden people particularly enjoy airing their grievances on social media it seems.
• Several Goth Blogs: gothicsubculture.com, www.thebelfry.rip, whatisgoth.com, and many other sites had loads of information about
  the gothic subculture, the stereotypes, history, and the backlash from mainstream society. They were actually pretty educational but all boiled down to the same message. Goths are drawn to darkness and macabre, but are generally happy people.
• Song Lyrics: All from the popular early 2000s band called Evanescence. Tracks include “My Immortal” and “Wake Me Up”.
• My Own “Creativity”: It’d be inappropriate, in my opinion at least, to use so many other sources for text generation so I absolutely had to include some of my own angsty poetry and thoughts from years past. I only hope it adds to the authenticity of this bot.

***I appreciate being able to locate and use all this content and this work isn’t intended to be offensive but to merely poke fun at the multi-faceted subculture. I was interested in gothic culture throughout middle school and high school and I’d like to consider this as an homage to my former self.***

There was an issue with creating the Twitter bot with .js file, so I had to switch to Processing entirely. There were some differences in syntax, but
it was relatively easy to adjust the code properly. I had learned some new
functions, too. And what a boolean is. That was very cool. Boolean is good.

ANYWAYS, down to the important stuff: RiTa library. The RiTa library contains about 40K words that are classified and grouped appropriately.
Self-described as a “software-toolkit for computational literature”, RiTa library is very simple to use but has incredibly intricate and complex results. I don’t want to go on forever about it, so I’ll link you to the RiTa
homepage: https://rednoise.org/rita/index.php

To create the text generator, I had to use the Markov chain function. The Markov chain is frequently used in natural text generation through programming. Essentially, the Markov chain takes input text and analyzes the words and which other words follow them and so on. Through this analysis, the Markov chain function allows the program to randomly generate grammatically correct sentences from the input text (in this case, the emobot_words.txt file). This is achieved by calling a function known as markov.generateSentences(); .

RiTa’s reference page provided me with the accurate syntax/template codes to complete this program.

As for actually creating the bot, Temboo was my go-to source for the implementation. It provided me with many outlets to create a bot with, but Twitter was my final choice. I had to go through some hoops (well, not really… I just needed to apply for the OAuth keys and tokens and connect them with the account) to get it up and running but it works and I’m quite happy about that!

In the end, sometimes the bot really has a hard time making sense. They may not always be syntactically correct or have and contextual information but they’re humorous, relatable (1 out of every 5 times I suppose), and poetic. It’s as if the person who would be behind this is too overwhelmed with their thoughts to make coherent sentences sometimes. We’ve all been there.

Stay spooky, my dark, damaged friends!

-Rhea

It is a windy day. Let’s plant some things! Add water and fertilizer to make the plant grow. Fertilizer makes the plant grow faster!

Harvest when you are finished growing. 

finalproject

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Final Project 

var tree = [];
var woodlength;
var branchStemX = 340;
//x pos of plant branch stem
var branchStemY = 600;
//y pos of plant branch stem
var fruitAmount = 1;
var fruitSize = 19;
var harvested = 0;
var harvestButton;
var picking = false;
var waterButton;
var watering = false;
var fertilizeButton;
var fertilizing = false;
var wateringCan;
var hand;
var plum;
var leaf;
var compost;
var seedling; 
//image names
var count;
//keep track of times a button is clicked
var branchDirection = 1;
//the direction of the recursion tree
var matureness = 9;
//levels of recursion tree

function preload(){
    wateringCan = loadImage("http://i.imgur.com/JNvlZzy.png");
    hand = loadImage("http://i.imgur.com/7r9pIdV.png");
    plum = loadImage("http://i.imgur.com/JEh9AIh.png");
    leaf = loadImage("http://i.imgur.com/MDoduCh.png");
    compost = loadImage("http://i.imgur.com/Rut3lp4.png");
    seedling = loadImage("http://i.imgur.com/BG0X2wj.png");
    //preload self drawn images
}

function setup() {
    createCanvas(680, 680);
    frameRate(7);

    harvestButton = createButton('harvest');
    harvestButton.position(65, 65);
    harvestButton.mousePressed(pick);
    //create a button that allows you to harvest fruit

    waterButton = createButton('water');
    waterButton.position(65, 85);
    waterButton.mousePressed(water);
    //create a button that allows you to water the plant

    fertilizeButton = createButton('fertilize');
    fertilizeButton.position(65, 105);
    fertilizeButton.mousePressed(fertilize);
    //create a button that allows you to fertilize the plant

    background(240);
}

function draw() {

    noStroke();
    fill("SkyBlue");
    rect(0,0,680,600);
    //render sky
    dirt();
    //render soil
    fill(247,197,51);
    ellipse(width - 90, 90, 160,160);
    //render sun
    push();
        translate(width / 4, height - 80);
        recursionBranch(matureness, 60, 9);
    pop();
    push();
        translate(width * 3 / 4, height - 80);
        recursionBranch(matureness, 60, 9);
    pop();
    //render background recursion trees
    var outcome = "The number of fruit harvested is " + harvested + ".";
    textAlign(CENTER);
    fill(255);
    textSize(16);
    text(outcome,width * 4 / 5 , height - 15);
    //display the number of fruit harvested 
    for(var i = 0; i < tree.length; i ++){
        tree[i].draw();
        stroke(42,27,21);
        strokeWeight(6);
        line(340, 600, 340,tree[i].branchY);

    }
    //render whole plant
    image(seedling, 265, 550, seedling.width * 0.15, seedling.height * 0.15);
    if(picking){
    //if the harvest button is pressed change cursor to hand
        noCursor();
        image(hand, mouseX - 71, mouseY - 15, hand.width * 0.2, hand.height * 0.2);
        //shift the new cursor a bit so the finger tip and arrow can align
        }
    else if(watering){
    //if the harvest button is pressed change cursor to watering can
        noCursor();
        image(wateringCan, mouseX - 50, mouseY - 90, wateringCan.width * 0.3, wateringCan.height * 0.3);
    }
    else if(fertilizing){
    //if the harvest button is pressed change cursor to manure
        noCursor();
        image(compost, mouseX , mouseY , compost.width * 0.3, compost.height * 0.3);
    }
    else{
        cursor();
    }
}
function drawBranch(){
    stroke(42,27,21);
    strokeWeight(4);
    var tipX = this.branchX + this.brachDirection * this.branchLength * cos(this.angle);
    var tipY = this.branchY - this.branchLength * sin(this.angle);
    line(this.branchX,this.branchY,tipX,tipY);
    if(this.fruit){
        //if there is fruit, render fruit
        ellipseMode(RADIUS);
        ellipseMode(CENTER);
        fill(124,23,22);
        noStroke();
        image(plum, this.fruitX - plum.height / 6, this.fruitY - plum.height / 12, plum.width / 3,plum.height / 3);
    }
    for(var n = 0; n < this.leafNumber; n ++){
        push();
            translate(this.leaves[n][0],this.leaves[n][1]);
            rotate(this.leaves[n][2]);
            noStroke();
            fill(92,190,66);
            image(leaf, 0, 0, leaf.width / 2,leaf.height / 2);
        pop();
    }
    //render leaves
}
function makeBranch(length,x,y){
    if ((y / 30) % 2 === 0){
        var direction = - 1;
    } 
    else{
        direction = 1;
    }
    //alternate branch directions
    var branchAngle = random(0, PI / 3);
    //randomize the angle of branch
    var leafNumber = Math.floor(random(2, 6));
    //randomize the number of leaves on each branch
    var leaves = [];
    for(var m = 0; m < leafNumber; m ++){
        var leafPosition = random(0,length);
        leafX = x + direction * leafPosition * cos(branchAngle);
        leafY = y - leafPosition * sin(branchAngle);
        leafRotation = direction * random(-TWO_PI, TWO_PI);
        leaves[m] = [leafX, leafY, leafRotation];
    }
    //store leaf information in an array
    var branches = [];
    var s = {
        brachDirection: direction,
        branchX: x,
        branchY: y,
        angle: branchAngle,
        branchLength: length,
        fruit: true,
        fruitX: x + direction * length * cos(branchAngle),
        fruitY: y - length * sin(branchAngle),
        leafNumber: leafNumber,
        leaves: leaves,
        branches: branches,
        draw: drawBranch
    }
    return s;
}

function mousePressed() {
    // fruitAmount = floor(random(0,3));
    count += 1;
    if(branchStemY > 100){
        if(watering & (count > 1)){
            branchStemY -= 30;
            //grow by 30
            woodlength = random(70,130);
            //randomize length of branch 
            tree.push(makeBranch(woodlength,branchStemX,branchStemY));
            //push branches on to the array tree
        }
        if(fertilizing & (count > 1)){
            branchStemY -= 30;
            woodlength = random(100,150);
            //randomize length of branch (fertilizer causes more length)
            tree.push(makeBranch(woodlength,branchStemX,branchStemY));
            //push branches on to the array tree
        }
    }
    if(picking){
        for(var j = 0; j < tree.length; j++){
            if(tree[j].fruit){
                if(dist(mouseX,mouseY,tree[j].fruitX,tree[j].fruitY) <= fruitSize){
                    tree[j].fruit = false;
                    //do not display picked fruit
                    harvested += 1;
                    //update the amount of fruit harvested
                }
            }
        }
    }
}
function recursionBranch(depth, len, thickness) {
//creates recursive tree with complexity of depth, size of len and boldness of thickness
    strokeWeight(thickness);
    stroke(50,45,39);
    line(0, 0, 0, -len);
    //render trunk
    push();
        translate(0, -len);
        if (depth > 0) {
            if (depth > 5 ) {
            //when complexity is low, thickness decreases faster
                rotate(radians(-25));
                recursionBranch(depth - 1, len * random ((6 / 7), (8 / 9)),thickness * (3/ 4));
                rotate(radians(50));
                recursionBranch(depth - 1, len * random ((6 / 7), (8 / 9)),thickness * (3/ 4));
            }
            else {
            //when complexity is low, thickness decreases slower
                if(random(1) < 0.75){
                //most of the time create one branch
                    if(branchDirection === -1){
                        rotate(radians(random(-10,-20)));
                        recursionBranch(depth - 1, len * random ((6 / 7), (3 / 4)),thickness * (6 / 7));
                        branchDirection *= -1;
                        //alternate branch direction
                    }
                    else{
                        rotate(radians(random(10,20)));
                        recursionBranch(depth - 1, len * random ((6 / 7), (3 / 4)),thickness * (6 / 7));
                        branchDirection *= -1;
                        //alternate branch direction
                    }
                }
        else{
        //occasionally create two branches
            rotate(radians(-14));
            recursionBranch(depth - 1, len * random ((6 / 7), (3 / 4)),thickness * (6/ 7));
            rotate(radians(28));
            recursionBranch(depth - 1, len * random ((6 / 7), (3 / 4)),thickness * (6/ 7));
            }
        }
    }
    pop();
}
function dirt(){
    //render dirt
    noStroke();
    fill(90,80,60);
    rect(0,600,680,80);
    image(seedling, 290, 570, seedling.width * 0.1, seedling.height * 0.1);
}
function pick(){
//set to picking mode
    picking = true;
    watering = false;
    fertilizing = false;
}

function water(){
//set to watering mode
    watering = true;
    picking = false;
    fertilizing = false;
    count = 0;
    
}

function fertilize(){
//set to fertilizing mode
    fertilizing = true;
    watering = false;
    picking = false;
    count = 0;
}

For the final project, I wanted to make an interactive plant. I have always loved gardening games because of the joy of harvesting decided to make one myself. The number and distribution of leaves and fruit are generated randomly . The extent to which the plant grows will depend on how many times it is watered and fertilized . After you have decided to stop watering, it is harvesting season. The player clicks on a button called “Harvest” and  can harvest the fruit by clicking on the fruit and the number of fruit harvested will be displayed on the screen. I also incorporated hand drawn elements in the project to make it more visually pleasing. I scanned the images and uploaded them to imgur to use them in my project.

For my final project I wanted to incorporate my writing. I took a short story that I wrote and then broke it down into 15 different scenes. I looked at each scene and then decided on a strong image on each one like a picture book. From there I coded each scene as a separate function with helper functions to create each individual aspect. In some of the scenes I decided that I wanted there to be an interactive aspect so I coded other functions that were dependent on the mouse position. I thought that by making the writing more visual and because often times you have to read the story to know what’s animated in the scene the writing itself would become more enjoyable to non-readers.

Credit for the images and the song, none of which are my own:

I wanted to code the photo of the man in the door, but creating an accurate image that captured the emotion in the actor’s face was too difficult. Here is the link.

The next image is the high chair in the kitchen. Here is the link to the original image.

The third image is another that I wanted to code but found that using an image conveyed the emotion better. Here is the link.

The final image link.

The song is Styx’s Sail Away.

Screenshots from the project: