Month: November 2019

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()
}