Category: SectionC

In this final project, I am going to collaborate with Steven Fei. The name of our project is called, Interstellar Pianist. Our objective is to use an interaction keyboard to simulate the idea of traveling in space. The pianist will play different notes and all the different notes will trigger different actions correspondently. The background will present a view of the galaxy and viewport of the galaxy can be manipulated by changing the position of the mouse. For example, when the “A” key which is representing C on the keyboard is pressed, a planet of red color will be generated and it will keep revolving and moving slowly towards a random direction. “S” key which is representing B,  another different looking planet of different color will be generated. There is going to be a limited amount of planets that you can generate. Once the maximum amount of planets is generated, the one that has been created at the very beginning will be shifted. Depending on the music you are playing, a different scenery of the universe will be created and you can move the mouse to examine and explore this universe. 

For my final project, I am interested in creating a memorization game that involves the user remembering a pattern of tiles and then recreating that pattern. The game will start with a 3×3 grid, in which a set amount of tiles will randomly be highlighted for a couple of seconds, and then rendered blank again. The user will have to remember which tiles were highlighted, and then reselect them to move on to the next level. Every five levels the grid will increase by one, e.g. level five is a 4×4 grid, and the number of tiles highlighted will also be increased, to make the levels more difficult. I definitely want to figure out how to render the interface of the game in a creative way.

For my final project, I want to build an homage to Frogger. I’d like to try programming a game that involves a character trying to reach the end of the stage by making it through a series of moving obstacles and objects. This is an idea that really appeals to me, because

1. I haven’t had the chance to try coding a game in this class and I think it’d be a really fun challenge to take on, and
2. I’m excited to play around with the graphics, design, and gameplay in this project!

I’ve come up with a few ideas for gameplay and graphics which mainly involve animal characters moving across a terrain filled with natural obstacles. For instance, a penguin waddling across snow while dodging moving snowballs to try to make it to an igloo is something I’d love to build.

From a functional standpoint, my ultimate goals for this project are to build a smooth, well-oiled game with a soundtrack and irresistible charm. I want the arrow keys to direct the character’s motion and for the movement of the obstacles to feel natural, not mechanistic.

In terms of art-style/design, I really admire video games that incorporate cel-shading and minimalism. I hope to utilize color palettes and shapes to establish a calming, consistent feel with my game, as I think it would add to the desired natural ambience.

I can’t wait to get started!

For the final project, I plan to collaborate with Lee Chu to make a series of interactive camera scenes that use the webcam as a background, similar to the concept of snapchat and instagram filters. Our idea is that in each state of the canvas, our program will be able to identify the person’s body or head, and therefore start to draw and animate objects that move relative to the person’s body with some level of randomness. We imagine for one scene, the person can repel an object that moves around the screen with their hand. Another could just be simply drawing objects on top of certain parts of the picture using color analysis. The idea is that the user will be able to cycle through different scenes. Through this exploration, we hope to create a fun and interesting program that users can interact with for a while without getting bored.

I plan to collaborate with Ammar Hassonjee on the final project. We are thinking about creating a webcam overlay that could detect faces and project a filter over it, much like snapchat or instagram filters. Ideally, by detecting the colors in the frame of the webcam, we can identify and track a face. While tracking the face, sounds may be triggered by a specific action, and the entire filter could be dynamic depending on the user’s movements and actions. We will most definitely need to look into how face tracking generally works, as well.

For my final project, I’d like to do an interactive audiovisual animation. The cursor would be followed by flowing graphic lines that change color based on what nodes have been activated and what sounds are playing. The intention is to create an animation that users can interact with to relax. The nodes are created by clicking anywhere on the canvas. I envision the node to be “invisible” (maybe a white circle on a white background) with the same flowing colorful lines circling around it, to create a more stylistic approach. When there are multiple nodes activated, the nodes become connected, with the lines starting to weave around all of them instead of just one node. The music that is playing would be various soothing sounds, ranging from white noise, to rain, to fire crackling.

For my final project, I am interested in making a sound visualization. In order to transfer the invisible sound into something visible. I intend to incorporate the project with a series of designed visual elements. By creating a scene based on artist Kanye West’s album cover <808s & Heartbreaks>, the project recomposes the visual features of the album art and display it based on different sound frequency and amplitude. (e.g: the heart shatters as the song goes)

• 

• 

This project will be done by Taisei Manheim, Carly Sacco, and myself.  Our project proposal is a smartphone and on the screen, there would be different apps.  You could click on the apps and they would each do different things. One of the apps would resemble snapchat and allow users to put a few filters on a picture of themselves (using the computer camera).  Another app would resemble a music app and allow user to choose different songs to play. There would also be an app that would resemble Instagram and allow users to scroll through images and like certain photos.  The last app would be the clock app which would allow users to see the time. We are thinking of working on the Snapchat app together, and then each of us working on one of the three remaining apps.

Sketch

// Jai Sawkar
// jsawkar@andrew.cmu.edu
// Section C
// Mock Up


function preload() {
    var snapURL = "https:i.imgur.com/Mc39iWj.png?" //picture of 4 people
    snapPic = loadImage(snapURL); //sets fam pic as the variable
    var musicURL = "https://i.imgur.com/m6NxUGy.png?"
    musicPic = loadImage(musicURL);
    var instaURL = "https://i.imgur.com/qTYtnyQ.png?"
    instaPic = loadImage(instaURL);
    var clockURL = "https://i.imgur.com/eX2G9P3.png?"
    clockBG = loadImage(clockURL);

}

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

function draw() {
    background(200);

    //PHONE

    push()
    rectMode(CENTER);

    fill(60, 59, 59);
    noStroke();
    rect(width/2, height/2, 159, 323, 15)

    fill(173, 177, 218);
    rect(width/2, height/2, 148, 308, 15);

    fill(60, 59, 59);
    rect(width/2, 48, 81, 11, 10);//notch

    fill(61, 60, 60);
    //fill('WHITE')
    //ringer
    rect(239.5, 94, 1.6, 11.9);
    //Volume Up
    rect(239.5, 123, 1.6, 23.75);
    //Volume Down
    rect(239.5, 149, 1.6, 23.75);

    //Lock
    rect(400.5, 137, 1.6, 38)

    fill(88, 89, 91); //Notch Hardware (Left to Right)

    ellipseMode(CENTER);
    ellipse(289, 48, 5);
    ellipse(301, 48, 5);

    rect(width/2, 48, 19, 3.56, 40);

    ellipse(340, 48, 5);

    pop();

    makeSnapchat();

    makeMusic();

    makeInsta();

    makeClock();


} 

function makeSnapchat(){
    push();
    
    translate(width/2 - 60, 85)
    scale(0.25);
    image(snapPic, 0, 0)

    pop();
}

function makeMusic(){
    push();
    
    translate(width/2 + 6, 85)
    scale(0.25);
    image(musicPic, 0, 0)

    pop();
}

function makeInsta(){
    push();
    
    translate(width/2 - 60, 160)
    scale(0.25);
    image(instaPic, 0, 0)

    pop();
}

function makeClock(){
    push();
    
    translate(width/2 + 6, 160)
    scale(0.25);
    image(clockBG, 0, 0)
    pop();

    push()
    translate(width/2 + 1.5, 155);
    scale(0.15);

    clockMove();





}

function clockMove(){
    angleMode(DEGREES);

    var h = hour();
    var m = minute();
    var s = second();

    push()
    noFill();


    translate(200, 200);
    rotate(-90);

    
    
    
    strokeWeight(5);
    var hStart = map(h % 12, 0, 12, -90, 360);
    arc(0, 0, 220, 220, 0, hStart)

    strokeWeight(4);
    var mStart = map(m, 0, 60, 0, 360);
    arc(0, 0, 240, 240, 0, mStart)

    stroke(0);
    strokeWeight(2);
    var sStart = map(s, 0, 60, 0, 360);
    arc(0, 0, 260, 260, 0, sStart)

    pop()
}