Jisoo Geum – Final Project Proposal


For my final project, I want to incorporate music’s ability to manipulate emotions and create a program that directs users to the music of their ‘current mood’. Although there are many apps that have similar features, I wanted to make my own version that increases the interaction between music, color, and emotions. Also, I will be adding animations in my program.

*The structure may change depending on how much storage the program can take*

*I will be attempting to link Spotify play button into the pages to avoid storing large music files in my zip. If it doesn’t work, I will follow the description below https://developer.spotify.com/documentation/widgets/guides/adding-a-widget/*

The program will have 7 different directory pages, each containing up to 5 (or more if the program can take more) songs. To minimize the storage size, I will be cutting the length of each song.

The main page will contain two semi-transparent blobs intersecting with each other. Clicking the blue blob (sadness) will direct the user to a new page with three other blob buttons. Each blob buttons are assorted with a different purpose. For example, one of the blobs is a button that directs the user to the final page that plays music with a simple animation that sympathizes with his/her sadness. Pressing the S button will shuffle the music in the array of songs.

Clicking the other blobs on the main page will also do similar things.

*Since the blobs are very specific to certain feelings and lack at the variety, I will try to map the intensity of emotions in gradient colors. However, this is only workable if I can link the songs to Spotify.*

 

Carley Johnson Looking Outward 12

Currently, the idea for my project is a platform-based game. To create a comparison, it would be something like the IOS game Doodle Jump. There are things this game MUST have and things that, if time permits me, I’d LIKE it to have. For me the game must have randomly generating platforms, a vertically scrolling screen, keypad controls for an icon, good bounce physics for the icon, and the ability to detect when the player falls off the screen to restart the game. What I might like to add to the game eventually is some sort of extra obstacle- an enemy to avoid that flies in the air, or an object that can be collected. I might I also like to add a “you lose” type screen that displays the number of platforms jumped on, and the ability to start a new game when the keyboard is pressed. The second drawing (the “or”) is the possibility, if I find this too difficult, to instead do a vertical scrolling game wherein you must roll an icon down the screen and avoid being squished. A goal of mine for this project is also for the game to just be aesthetically pleasing. I’m not a designer, but I want this game to LOOK very sweet because I think design is really important when it comes to art, or specifically interactive art. Obviously, a prior project to look at is the original game Doodle Jump, as well as many, many knock off games (fast follows). There is another indie point-and-click story based game, however, whose aesthetic is more that of the game I want to create. Night in the Woods is quirky and beautiful, with great, great color palettes, and also very nice physics when it comes to characters running and jumping. This is the look I’m going for.

Robert Oh- Project 11- Composition

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-11-Composition

var turtle;
var fx = 240;
var fy = 240;
var diffX = 100;
var diffY = 100;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    noStroke();
}
 
function draw() {
    background(130, 255, 246);
    fishDisplay(fx, fy);

    diffX = mouseX - fx;
    diffY = mouseY - fy;

    if (diffX > 1 || diffX < -1){
        fx = fx + (diffX)/30;
    }
    
    if (diffY > 1 || diffY < -1){
        fy = fy + (diffY)/30
    }
}

// drawing each fish
function fishDisplay(x, y) {
    turtle = makeTurtle(x, y);
    turtle.penDown();
    turtle.face(270);
    turtle.setColor(100);
    turtle.setWeight(3);

    //body
    for (var i = 0; i < 360; i ++){
    turtle.forward(.7);
    turtle.right(1);
    }

    turtle.face(0);
    turtle.penUp();
    turtle.forward(80);

    //tail
    turtle.penDown();
    turtle.face(30);
    turtle.forward(40);
    turtle.face(270);
    turtle.forward(40);
    turtle.face(150);
    turtle.forward(40);

    turtle.penUp()
    turtle.face(180);
    turtle.forward(60);
    turtle.face(270);
    turtle.forward(25);

    //eye
    turtle.penDown();
    turtle.face(0);
    for (var i = 0; i < 180; i ++){
        turtle.forward(.2);
        turtle.right(2);
    }
}

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 project, I went back to data exam 1 once again and borrowed the fish design we had drawn. I wanted to revisit the data exam and had the fish follow the mouse cursor. Overall, I had a lot of fun recreating the fish (but with turtle-style drawing).

 

Project 11 – Turtle Freestyle – John Legelis

sketch

// John Legelis
// Section D


var t // turtle
var yF = 273// Winning Y value
var w // State of play (Play, Win, or Lose)
var s // osilator incriment

//load background image
function preload() {
    maze = loadImage("https://i.imgur.com/OPGsUjg.png")
}

function setup() {
    createCanvas(400, 300);
    background(0);
    image(maze,0,0)
    
    fill(0,255,0)
    noStroke()
    rectMode(CORNER)
    rect(361, yF, 33,10)

    // initialize t
    t = makeTurtle(20,0)
    t.setWeight(4)
    mouseX = 20
    mouseY = 1 
    s = 0
    w = 0
    yF = 263
}

function draw() {
    //Oscilate between colors at winning and loosing screens
    s = s + 1
    if (s % 3 == 1){
        var lcol = [255,255,255]
        var wcol = [0,255,0]
    }
    else {
        var lcol = [255,0,0]
        var wcol = [255,255,255]
    }

    // retrive brightness at turtle location
    var p = maze.get(t.x, t.y)
    var Tbright = brightness(p)
    // If in "play" mode, move turtle towards the mouse
    if (w == 0) {
        theta = t.angleTo(mouseX, mouseY)
        t.right(theta)
        t.forward(1)
    }


    //if hit wall, lost
    if (Tbright < 100){
        w = -1
    }
    // if below "win line", won
    if (t.y > yF) {
        w = 1
    }
   
    // if lost...
    if (w == -1){
        background(lcol)
        stroke(255)
        textSize(50)
        text("G A M E O V E R", 10, 150)
        textSize(25)
        text("mouse in box to restart", 40, 30)
        noStroke()
        fill(0)
        rectMode(CENTER)
        rect(25,25, 10,10)
    }
    //if won...
    if (w == 1){
        background(wcol)
        stroke(255)
        textSize(50)
        text("! Y O U W O N !", 10, 150)
        stroke(255)
        textSize(25)
        text("mouse in box to restart", 40, 30)
        noStroke()
        fill(0)
        rectMode(CENTER)
        rect(25,25, 10,10)
    }

    //If lost or won and mouse is in box initialize and go back to "play" mode
    if (((w==-1) || w==1) & (mouseX > 25 - 10) && (mouseX < 25 + 10) && 
    (mouseY > 25 - 10) && (mouseY < 25 + 10)) {
        w = 0
        setup()
    }

    if (mouseIsPressed){
        w = 1
    }
}


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

When approaching this project I had an idea instantly to use the turtle to make some sort of maze game. Given our recent experience in using brightness and get image I was able to analyze a maze image and detect the walls very efficiently. I polished the game with a win and lose screen and a quick restart function based on mouse position.

Alessandra Fleck – Looking Outwards – 11

Created by a song done for German duo Meier & Erdmann, this example of computer generated music not only involves the use of algorithms to create music, but also how those patterns in the music can then be translated into a 3D digital landscape. Visual artist from Spain, Victor Doval utilizes the different frequency bands in the music to translate into a visual representation of the band. Inspired by the inherent “journey” music takes its audience on, the music is broken down into data that is then sorted and identified with different lights, shapes, and textures to overlay on the 3D shape and create that “journey” visually to the audience. Note in the background the change in the daylight and sun position as the song progresses. The background is a simple digital representation of the music timeline, where the sun rises in the beginning and sets at the end of the piece.

What I find most interesting about Doval’s work is the idea of visually representing the unseen and utilizing the patterns that can be heard and translating them into something that can be seen.

The above image is a screenshot from the visual landscape Doval creates from the music

Find more information at :

https://www.theverge.com/tldr/2017/4/12/15270026/music-video-algorithm-victor-doval-howler-monkey

 

Looking Outwards 11 – Sara Frankel


Caption: Each tree resembles a different city and visualizes the beautiful, unique music each produces.

For my looking outwards, I decided to explore what my peers have discussed. Arden Wolfe discusses The Sonumbra de Vincy. This light visualization, in my opinion illuminates the music of the city each “tree” represents. Each tree takes the sounds of bustling cities around the world and interprets them visually. While yes, you can argue there is no physical or computational sound, if you look deeper at the interpreted lines, you will hear the music and harmonies of each respective city. In music, a lot of times the most meaningful moments are the spaces between the notes. In this case, it is the drawing of the lines and the shapes of the trees that sing the music of each city. This is what I love about this project, is the artist’s ability to take music so abstract of a bustling city, and algorithmically display them for others to see what he sees and feels “between the notes”.

Sonumbra de Vincy


Here is a link to the project’s website.

Miranda-Luong-Looking-Outwards-11

Adventures of the Solitary Bee, Composed, written, performed and directed by Miya Masaoka. Special thanks to Scot Duration: 8:32 from Miya Masaoka on Vimeo.

The artist that I will be looked into was Miya Masaoka, a composer, sound artist, and musician based in New York City. Her work operates at the intersection of spatialized sound, recording inside physical objects or inside a plant or the human body, within architecturally resonant spaces or outdoor resonant canyons. A specific project that I found resonating was Adventures of the Solitary Bee (1999), where she uses natural sounds in addition to some musical notes made via instruments to create an almost electronic white-noise. The visual imagery and audio used in the video create a strong tie between the natural and man-made, two areas of study the artist has delved into before, but at separate times. Not much is written about the algorithms used to create this sound, but from what I can gather a basic audio editing program that allows overlays probably worked with as it is her raw material that is vital to the project.

Miranda-Luong-Project 11

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-11-Composition
*/

var myTurtle

function setup() {
    createCanvas(480, 480);
    background(0);
    myTurtle = makeTurtle(width/2,height/2); //places starting turtle at center
    myTurtle.setColor('black');
    myTurtle.setWeight(6);
}

// When the user clicks the mouse
function mousePressed() {
    //turtle moves to mouse
    myTurtle.goto(mouseX,mouseY);
    //if mouse is south of canvas' horizontal center, pen is red
    if (mouseY > height/2){
      myTurtle.setColor('red');
    }
    //if mouse is north of canvas' horizontal center, pen is blue
    if (mouseY < height/2){
      myTurtle.setColor('blue');
    }
    //size of circle is random from range between 5 and 20
    var size = random(5,20);
    //draw circle
    for (var i = 0; i < 360; i+=size){
        myTurtle.penDown();
        myTurtle.right(size);
        myTurtle.forward(10);
        myTurtle.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;
}

I went for a pretty simple drawing. When a visitor clicks on the canvas, a circle is drawn. The colors of these circles change according to where they clicked.

Jaclyn Saik-Project 11

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-00-A
*/

var peter; //my variables for my turler started out with some names 
var steven; 
var greg;
var robin;
var carol;
var SPACE = 400/6 //spacing for the lazers
var Swish = 1; //variable for switching states
var spoke; 

function setup() {
    createCanvas(400, 400);

    peter = makeTurtle(SPACE, 20);
    steven = makeTurtle(SPACE*2, 20);
    greg = makeTurtle(SPACE*3, 20);
    robin = makeTurtle(SPACE*4, 20);
    carol = makeTurtle(SPACE*5, 20);
}
function draw() {
    background("black");
    if(Swish == 1){
        pDrop();
        peter.setWeight(random(5, 14));
        peter.setColor(color(200, 160, random(30, 255)));
        steven.setColor(color(180, 200, random(30, 255)));
        steven.setWeight(random(5, 14));
        greg.setColor(color(190, 240, random(30, 255)));
        greg.setWeight(random(5, 14));
        robin.setColor(color(200, 200, random(30, 255)));
        robin.setWeight(random(5, 14));
        carol.setColor(color(160, 230, random(30, 255)));
        carol.setWeight(random(5, 14));
    }
    if(Swish == 2) {
        slow();
    }

}



function pDrop() { //all the lazers
        //first lazer
        background("black");
        fill("green")
        text("a great nightclub", 150, 30);

        peter.penDown();
        peter.face(90);
        peter.forward(30);
        peter.forward(frameCount/10);

        if (peter.distanceTo(SPACE, 20) > 500) {
            peter.goto(SPACE, 20);
        }

        //second lazer
        steven.penDown();
        steven.face(90);
        steven.forward(30);
        steven.forward(frameCount/10);

        if (steven.distanceTo(SPACE*2, 20) >500) {
            steven.goto(SPACE*2, 20);
        }

        //third lazer
        greg.penDown();
        greg.face(90);
        greg.forward(30);
        greg.forward(frameCount/10);

        if (greg.distanceTo(SPACE*3, 20) >500) {
            greg.goto(SPACE*3, 20);
        }

        //fourth lazer
        robin.penDown();
        robin.face(90);
        robin.forward(30);
        robin.forward(frameCount/10);

        if (robin.distanceTo(SPACE*4, 20) >500) {
            robin.goto(SPACE*4, 20);
        }

         //fifth lazer
        carol.penDown();
        carol.face(90);
        carol.forward(30);
        carol.forward(frameCount/10);

        if (carol.distanceTo(SPACE*5, 20) >500) {
            carol.goto(SPACE*5, 20);
        }

}

function slow(){
    background("Darkslategray");
    fill("red");
    text("a quieter, but still fun nightclub", 130, 30);
    spoke = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    spoke.penDown();
    spoke.setColor("red");
    spoke.goto(mouseX, mouseY);


}

function mousePressed() { 
    Swish++;   
    if (Swish > 2) {
        Swish = 1;
    }
}


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 project, I was inspired by this really interesting room I got to experience at an art museum that would change states based on crowd movement. I like that I could use the turtles to relate their position to frame rate, so I played around with that.

Curran Zhang- Project-11- Composition

sketch

/*Curran Zhang
curranz
Project 11
Section A
*/

var ttl = [];


function setup(){
  createCanvas(480,480);
  background(10);
  frameRate(20);
}

function draw(){
  var x = random(5,15);
  var xx = random(10,20);
  background(0,10);
  for (var i = 0; i <ttl.length; i++) {
    ttl[i].setColor(random(150,200));
    ttl[i].setWeight(10);
    ttl[i].penDown();
    ttl[i].right (x);
    ttl[i].forward(xx);
  }
}

function mouseDragged(){
  ttl.push(makeTurtle(mouseX,mouseY));
}

///////////////////
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 project, I wanted to use the simplicity of turtle graphics to create an animation that is chaotic. Beginning with a circle, I began to create and animate its motion along the mouse.