Final Project – Taisei Manheim, Carly Sacco, Jai Sawkar

For our project, we decided to create an iPhone and allow for interactions with some of the apps typical users like to spend time on. Carly created the Snapchat app and added in a few filters that can be changed by hovering over the different circles.Tai recreated a music app where the user can choose different songs to listen to. Jai created the Instagram and Clock apps and also some of the initial images for the home screen. For instagram, the page mimics a person’s profile picture (his own), and for the clock app, each of the locations in different time zones represent their current live time. Putting together the code was difficult, but Carly went over the commenting and formatting, while Tai helped with debugging and combining all of the code.

Although this project was very fun to complete, we had a lot of glitches we weren’t expecting. Having multiple apps that all ran but did not interfere with each other was a bit of a struggle. Coding between three people made the code lengthy and since we had separately used the same functions, when we consolidated our codes, the functions were overriding each other. Also, for the music app, we originally had an entire album to play from, but by the end of the project our code was so long and took a while to load, that we had to cut out a lot of songs and shorten the length of the songs, so there are only 2 short sound clips that play if you click the “1” or “2” key.

sketch

// Jai Sawkar, Tai Manheim, Carly Sacco
// jsawkar@andrew.cmu.edu, tmanheim@andrew.cmu.edu, csacco@andrew.cmu.edu
// Section C
// Final Project

//states that will determine is each app is running
//home screen starts on
menuOn = true;
//all other apps are off at the beginning of the code
musicOn = false;
snapchatOn = false;
instagramOn = false;
clockOn = false;

//var playerIMG;
var song1;
var song2;

function preload() {
    
    //images for the app icons on home screenh
    var snapURL = "https://i.imgur.com/UfJfDg1.png?"
    snapPic = loadImage(snapURL); 
    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);
    
    //Instagram Pictures
    var instaPic1URL = "https://i.imgur.com/FVXjmZU.jpg?2"
        instaPic1 = loadImage(instaPic1URL);
    var instaPic2URL = "https://i.imgur.com/RIkwcRD.jpg?2"
        instaPic2 = loadImage(instaPic2URL);
    var instaPic3URL = "https://i.imgur.com/eBPLHVa.jpg?2"
        instaPic3 = loadImage(instaPic3URL);
    var instaPic4URL = "https://i.imgur.com/aKhmsST.jpg?2"
        instaPic4 = loadImage(instaPic4URL);
        
    var instaPic5URL = "https://i.imgur.com/Pf6NRRh.png"
        instaPic5 = loadImage(instaPic5URL); 
        

    //music cover album photo
    var albumImage = "https://i.imgur.com/ajcDQxJ.jpg"
    albumCover = loadImage(albumImage);

    //load tracks
    song1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/382698__iwawiwi__small-fragment-of-one-man-rumba-music-recording-from-wikimedia-common.wav");
    song2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/213096__soundsexciting__gong-with-music.wav"); 
}


function soundSetup(){
    //volume for tracks
    song1.setVolume(2);
    song2.setVolume(2);
}


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

    //background of phone
    push();
    rectMode(CENTER);
    fill(100)
    rect(width/2, height/2, 159, 323, 15);
    pop();

    //loads in the cameras for snapchat
    //starting camera: no filter
    normalCamera = createCapture(VIDEO);
    normalCamera.size(158, 318); //camera size to fit in phone
    normalCamera.hide();

    //filter1: threshold
    filter1 = createCapture(VIDEO);
    filter1.size(158, 318); //camera size to fit in phone
    filter1.hide();

    //filter2: invert
    filter2 = createCapture(VIDEO);
    filter2.size(158, 318); //camera size to fit in phone
    filter2.hide();

    //filter3: posterize
    filter3 = createCapture(VIDEO);
    filter3.size(158, 318); //camera size to fit in phone
    filter3.hide();

    //filter4: grayscale
    filter4 = createCapture(VIDEO);
    filter4.size(158, 318); //camera size to fit in phone
    filter4.hide();
}

function draw() {
    
    //when the m key is pressed it sets the music screen to true
    if (keyIsDown(77)) {
        musicOn = true;
        menuOn = false;
    }
    //when the s key is pressed it sets the snapchat screen to true
    if (keyIsDown(83)) {
        snapchatOn = true;
        menuOn = false;
    }
    //when the i key is pressed it sets the instagram screen to true
    if (keyIsDown(73)) {
        instagramOn = true;
        menuOn = false;
    }
    //when the c key is pressed it sets the clock screen to true
    if (keyIsDown(67)) {
        clockOn = true;
        menuOn = false;
    }
    //when the h key is pressed it sets the menu to true
    if (keyIsDown(72)) {
        menuOn = true;
        snapchatOn = false;
        musicOn = false;
        instagramOn = false;
        clockOn = false;
    }
    //when menuOn is true it calls the function to make the phone
    if (menuOn == true) {
        makePhone();
    }
    //when musicOn is true it calls the function for the music app
    if (musicOn == true){
       makeMusicApp();
    }
    //when snapchatOn is true it calls the function for the snapchat app
    if (snapchatOn == true){
       makeSnapchatApp();
    }
    //when instagramOn is true, it calls the funtion for the instagram app
    if (instagramOn == true){
       makeInstagramApp();
    }
    //when clockOn is true it calls the function for the clock app
    if (clockOn == true){
       makeClockApp();
    }

    //a function for the the outline of the phone 
    //so that it stays consistent through the apps
    makeBorder();

    //directions on the canvas
    push();
    noStroke();
    textFont('Helvetica');
    fill(189, 160, 0)
    text("type s for snapchat", 20, height / 2 - 40);
    text("hover over buttons to change filter", 30, height / 2 - 25);
    fill(169, 68, 194)
    text("type m for music", 20, height / 2 - 5);
    text("press the song number you want", 30, height / 2 + 10 ) 
    text("press the space bar to play & pause", 30, height  / 2 + 20);
    fill(219, 37, 113);
    text("type i for instagram", 20, height / 2 + 40)
    fill(103, 168, 156);
    text("type c for clock", 20, height / 2 + 60);

    fill(89, 92, 91);
    textSize(20)
    text("type h to return home", 20, height / 2 - 70);
    pop(); 
} 

function makeMusicApp() {
    //phone screen
    push()
    rectMode(CENTER);
    fill(50);
    rect(width / 2, height / 2, 148, 308, 15); 

    //album cover image
    image(albumCover, width / 2 - 30, height / 2 - 140);

    //pause button
    fill(50, 235, 50);
    noStroke();
    rect(width / 2, height / 2 - 42.5, 50, 20, 10);

    //lines seperating songs
    push();
    strokeWeight(2);
    stroke(255);
    line(width / 2 - 74, height / 2 - 25, width / 2 + 74, height / 2 - 25);
    line(width / 2 - 74, height / 2 - 5, width / 2 + 74, height / 2 - 5);
    line(width / 2 - 74, height / 2 + 15, width / 2 + 74, height / 2 + 15);
    line(width / 2 - 74, height / 2 + 35, width / 2 + 74, height / 2 + 35);
    line(width / 2 - 74, height / 2 + 55, width / 2 + 74, height / 2 + 55);
    line(width / 2 - 74, height / 2 + 75, width / 2 + 74, height / 2 + 75);
    line(width / 2 - 74, height / 2 + 95, width / 2 + 74, height / 2 + 95);
    line(width / 2 - 74, height / 2 + 115, width / 2 + 74, height / 2 + 115);
    line(width / 2 - 74, height / 2 + 135, width / 2 + 74, height / 2 + 135);
    pop();

    //album title
    noStroke();
    fill(255);
    textAlign(CENTER);
    textSize(12);
    text("Nostalgia Ultra", width / 2, height / 2 - 67.5);

    //pause button writing
    textSize(10);
    text("Pause", width / 2, height / 2 - 40);

    //song titles
    text("1. strawberry swing", width / 2, height / 2 - 12.5);
    text("2. novacane", width / 2, height / 2 + 7.5);
    text("3. we all try", width / 2, height / 2 + 27.5);
    text("4. songs for women", width / 2, height / 2 + 47.5);
    text("5. there will be tears", width / 2, height / 2 + 67.5);
    text("6. swim good", width / 2, height / 2 + 87.5);
    text("7. dust", width / 2, height / 2 + 107.5);
    text("8. american wedding", width / 2, height / 2 + 127.5);
    text("9. nature feels", width / 2, height / 2 + 147.5);
    pop(); 
}

function keyPressed() {
    //corresponds the number key pressed to the song
    //key 1 plays song 1
    if (keyCode === 49) {
        //play song 1
        song1.play();
        //pause others
        song2.pause();
    }
    
    //key 2 plays song 2
    if (keyCode === 50) {
        //play song 2
        song2.play();
        //pause others
        song1.pause();
    }

    //spacebar pauses any song
    if (keyCode === 32) {
        //pause all songs
        song1.pause();
        song2.pause();
    }
} 

function normalCamera() {
   push();
   //loads the pixels from the camera
   normalCamera.loadPixels(); 
   //displays the camera
   image(normalCamera, 242, 41);  
   pop();
}

function filterThreshold() {
    push();
    //loads the pixels from the camera
    filter1.loadPixels(); 
    //displays the camera
    image(filter1, 242, 41);  
    //applies the filter
    filter(THRESHOLD);
    pop();
    //buttons options on the screen
    buttons();

}

function filterInvert() {
    push();
     //loads the pixels from the camera
    filter2.loadPixels(); 
    //displays the camera
    image(filter2, 242, 41);  
    //applies the filter
    filter(INVERT);
    pop();
    //buttons options on the screen
    buttons();

}

function filterPosterize() {
    push();
    //loads the pixels from the camera
    filter3.loadPixels(); 
    //displays the camera
    image(filter3, 242, 41); 
    //applies the camera 
    filter(POSTERIZE, 3);
    pop();
    //buttons options on the screen
    buttons();

}

function filterGray() {
    push();
        //loads the pixels from the camera 
    filter4.loadPixels();
    //displays the camera
    image(filter4, 242, 41);  
    //applies the filter
    filter(GRAY);
    pop();
    //buttons options on the screen
    buttons();

}

function buttons() {
    //function that creates the buttons that appear in the snapchat app
    //biggest normal middle circle
    noFill();
    stroke(255);
    strokeWeight(2);
    ellipse(width/2, height / 2 + 135, 25, 25);

    //first button: threshold
    noFill();
    stroke(255);
    strokeWeight(2);
    ellipse(width/2 - 60, height / 2 + 135, 20, 20);

    //second button: invert
    noFill();
    stroke(255);
    strokeWeight(2);
    ellipse(width/2 - 30, height / 2 + 135, 20, 20);

    //third button: posterize
    noFill();
    stroke(255);
    strokeWeight(2);
    ellipse(width/2 + 30, height / 2 + 135, 20, 20);

    //fourth button: blur
    noFill();
    stroke(255);
    strokeWeight(2);
    ellipse(width/2 + 60, height / 2 + 135, 20, 20);

}

function makeSnapchatApp(){
   //begins with the normal camera &
   //uses the normal camera as default when no 
   //filter is running
   push();
   normalCamera.loadPixels(); 
   image(normalCamera, 242, 41);
   pop();

   buttons();

   //if the mouse is hovering over a button, then the associated 
   //filter will appear

   //threshold filter
    if  (mouseX > 250 & mouseX < 275  && mouseY > 320) {
        filterThreshold();
    }
    //invert filter
    if  (mouseX > 270 & mouseX < 295  && mouseY > 320) {
        filterInvert();
    }
    //posterize filter
    if  (mouseX > 335 & mouseX < 360  && mouseY > 320) {
        filterPosterize();
    }
    //gray filter
    if  (mouseX > 365 & mouseX < 400  && mouseY > 320) {
        filterGray();
    }

}

function makeInstagramApp(){
        //Instagram Background
            push();
            rectMode(CENTER);
            fill(245);
            noStroke();
            rect(width/2, height/2, 159, 323, 15);

        //Instagram Heading
            textSize(32);
            fill(42, 57, 107);
            textAlign(CENTER);
            textFont('Satisfy');
            text('Instagram', width/2 + 1, 80);

        //Line Below Instagram
            stroke(42, 57, 107); 
            strokeWeight(.5);
            line(width/2 - 73.5, 95, width/2 + 73.5, 95);

        //Profile Pic
            fill(240);
            strokeWeight(1.5);
            push();
            scale(1.2)
            image(instaPic5, width/2 - 113.5, 84);
            pop();
            noFill();

        //Profile Info
            noStroke();
            fill(42, 57, 107);
            textAlign(LEFT);
            textFont('Helvetica');
            textSize(10);
            text("Jai Sawkar", width/2 - 68, 165);
            fill(60)
            textSize(9);
            text("@jsawkar", width/2 - 68, 175);

        //Followers & Following
            rectMode(CORNER)
            fill(60, 60, 60, 20)
            rect(width/2 - 7, 102.5, 75, 30);
            stroke(60);
            strokeWeight(.2);
            line((width/2-7 + width/2 + 68)/2, 102.5, (width/2-7 + width/2 + 68)/2, 132.5)
         
            fill(60)
            textSize(7);
            noStroke();
            text("Followers", width/2 - 3, 110);
            text("Following", width/2 + 35, 110);

            textSize(8);
            fill(0);
            textAlign(LEFT);
            text("1,027", width/2 + 2, 122)
            text("971", width/2 + 43, 122);

        //Profile Bio
            textSize(9);
            textAlign(RIGHT);
            text("sammamish, wa", width/2 + 65, 165);
            text("carnegie mellon '22", width/2 + 65, 175);
        
        //Line Below Instagram Bio
            stroke(42, 57, 107); 
            strokeWeight(.5);
            line(width/2 - 73.5, 190, width/2 + 73.5, 190);
            pop();

        //Loading Instagram Pictures
            push();
            scale(0.6)
            image(instaPic1, width/2 + 105, 330); 
            image(instaPic2, width/2 + 220, 330);
            image(instaPic3, width/2 + 105, 445);
            image(instaPic4, width/2 + 220, 445);
            pop();
}

function makeClockApp(){
    push();
    //Black Background
        rectMode(CENTER);
        fill(20);
        noStroke();
        rect(width/2, height/2, 159, 323, 15);

    //CLOCK Heading
     
        textSize(32);
        fill('WHITE');
        textFont('Helvetica');
        text('Clock', width/2 - 70, 80);


    //Line below Clock
        stroke(255); 
        strokeWeight(.5);
        line(width/2 - 73.5, 90, width/2 + 73.5, 90);

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

        var hPos = width/2 + 10; //variable for hour time position
        var mPos = width/2 + 40; //variable for minute time position

        var singleHPos = width/2 + 20; //variable for hour time position if it is a single digit
        var singleMPos = width/2 + 51;//variable for minute time position if it is a single digit

        //Pittsburgh Variables
            var pittsburghH = h; //Current hour
            var pittsburghM = m; //Current minute

            var pittsburghHPos = hPos; //Hour position for Pittsburgh
            var pittsburghMPos = mPos; //Minute position for Pittsburgh

            //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (pittsburghH < 10){ 
                    pittsburghHPos = singleHPos;
                }

            //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (pittsburghM < 10){
                    pittsburghMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 115);
                }

        //Cupertino Variables
        var cupertinoH = h - 3; //Current local hour
        var cupertinoM = m; //Current local minute

        var cupertinoHPos = hPos; //Hour position for Cupertino
        var cupertinoMPos = mPos; //Minute position for Cupertino

        //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (cupertinoH < 10){ 
                    cupertinoHPos = singleHPos;
                }
        //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (cupertinoM < 10){
                    cupertinoMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 147);
                }

        //Beijing Variables
        var beijingH = (h + 13) % 12; //Current local hour
        var beijingM = m; //Current local minute

        var beijingHPos = hPos; //Hour position for Beijing
        var beijingMPos = mPos; //Minute position for Beijing

        //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (beijingH < 10){ 
                    beijingHPos = singleHPos;
                }
        //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (beijingM < 10){
                    beijingMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 181);
                }

        //Chennai Variables
        var chennaiH = (h + 10) % 12; //Current local hour
        var chennaiM = (m + 30) % 60; //Current local minute

        var chennaiHPos = hPos; //Hour position for Chennai
        var chennaiMPos = mPos; //Minute position for Chennai

        //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (chennaiH < 10){ 
                    chennaiHPos = singleHPos;
                }
        //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (chennaiM < 10){
                    chennaiMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 215);
                }

        //Chicago Variables
        var chicagoH = h-1; //Current local hour
        var chicagoM = (m) % 60; //Current local minute

        var chicagoHPos = hPos; //Hour position for Chicago
        var chicagoMPos = mPos; //Minute position for Chicago

        //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (chicagoH < 10){ 
                    chicagoHPos = singleHPos;
                }
        //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (chicagoM < 10){
                    chicagoMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 249);
                }

        //Abu Dhabi Variables
        var adH = (h + 9) % 12; //Current local hour
        var adM = (m) % 60; //Current local minute

        var adHPos = hPos; //Hour position for Abu Dhabi
        var adMPos = mPos; //Minute position for Abu Dhabi

        //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (adH < 10){ 
                    adHPos = singleHPos;
                }
        //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (adM < 10){
                    adMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 283);
                }

        //Adelaide Variables
        var adelaideH = (h + 6) % 12; //Current local hour
        var adelaideM = (m + 30) % 60; //Current local minute

        var adelaideHPos = hPos; //Hour position for Abu Dhabi
        var adelaideMPos = mPos; //Minute position for Abu Dhabi

        //If Hour is a Single Digit, Move Hour Time To Be Closer to ":"
                if (adelaideH < 10){ 
                    adelaideHPos = singleHPos;
                }
        //If Minute is a Single Digit, Move Minute Time To Be Closer to ":" & add a "0"
                if (adelaideM < 10){
                    adelaideMPos = singleMPos;
                    textSize(20);
                    fill(255);
                    text("0", mPos, 318);
                }


        //Displaying Pittsburgh Time
            //Local Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('LOCAL TIME', width/2 - 70, 100);
            //Pittsburgh Label
                textSize(15);
                fill(255);
                text('Pittsburgh', width/2 - 70, 115);
            //Pittsburgh Time
                textSize(20);
                text(pittsburghH, pittsburghHPos, 115);
                text(pittsburghM, pittsburghMPos, 115);
                text(":", width/2 + 32, 114);
            //Line below Pittsburgh
                stroke(255); 
                strokeWeight(.5);
                line(width/2 - 74, 122, width / 2 + 73, 122);

        //Displaying Cupertino Time
            //- 3 Hrs Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('-3HRS', width / 2 - 70, 132);
            //Cupertino Label
                textSize(15);
                fill(255);
                text('Cupertino', width / 2 - 70, 147);
            //Cupertino Time
                textSize(20);
                text(cupertinoH, cupertinoHPos, 147);
                text(cupertinoM, cupertinoMPos, 147);
                text(":", width/2 + 32, 146);
            //Line below Cupertino
                stroke(255); 
                strokeWeight(.5)
                line(width/2 - 74, 156, width / 2 + 73, 156);

        //Displaying Beijing Time
            // + 13 Hrs Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('+13HRS', width / 2 - 70, 166);
            //Beijing Label
                textSize(15);
                fill(255);
                text('Beijing', width / 2 - 70, 181);
            //Beijing Time
                textSize(20);
                text(beijingH, beijingHPos, 181);
                text(beijingM, beijingMPos, 181);
                text(":", width / 2 + 32, 180);
            //Line below Beijing
                stroke(255); 
                strokeWeight(.5);
                line(width / 2 - 74, 190, width / 2 + 73, 190);

        //Displaying Chennai Time
            // + 10:30 Hrs Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('+10:30HRS', width/2 - 70, 200);
            //Chennai Label
                textSize(15);
                fill(255);
                text('Chennai', width/2 - 70, 215);
            //Chennai Time
                textSize(20);
                text(chennaiH, chennaiHPos, 215);
                text(chennaiM, chennaiMPos, 215);
                text(":", width / 2 + 32, 214);
            //Line below Chennai
                stroke(255); 
                strokeWeight(.5);
                line(width / 2 - 74, 224, width/2 + 73, 224);


        //Displaying Chicago Time
            // - 1Hrs Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('-1HRS', width/2 - 70, 234);
            //Chennai Label
                textSize(15);
                fill(255);
                text('Chicago', width/2 - 70, 249);
            //Chennai Time
                textSize(20);
                text(chicagoH, chicagoHPos, 249);
                text(chicagoM, chicagoMPos, 249);
                text(":", width / 2 + 32, 248);
            //Line below Chicago
                stroke(255); 
                strokeWeight(.5);
                line(width / 2 - 74, 258, width/2 + 73, 258);

        //Displaying Abu Dhabi Time
            // +9Hrs Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('+9Hrs', width / 2 - 70, 268);
            //Abu Dhabi Label
                textSize(15);
                fill(255);
                text('Abu Dhabi', width / 2 - 70, 283);
            //Abu Dhabi Time
                textSize(20);
                text(adH, adHPos, 283);
                text(adM, adMPos, 283);
                text(":", width / 2 + 32, 282);
            //Line below Abu Dhabi
                stroke(255); 
                strokeWeight(.5);
                line(width / 2 - 74, 293, width / 2 + 73, 293);

        //Displaying Adelaide Time
            // +9Hrs Time Label
                textSize(8);
                fill(150);
                noStroke();
                text('+15:30Hrs', width / 2 - 70, 303);
            //Abu Dhabi Label
                textSize(15);
                fill(255);
                text('Adelaide', width / 2 - 70, 318);
            //Abu Dhabi Time
                textSize(20);
                text(adelaideH, adelaideHPos, 318);
                text(adelaideM, adelaideMPos, 318);
                text(":", width / 2 + 32, 317);
                pop();
}


function makeBorder(){
    //phone outline
    noFill();
    stroke(60, 59, 59);
    strokeWeight(6);
    rect(width/2, height/2, 159, 323, 15)

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

    //fill(61, 60, 60);
    //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)
   
    //Notch Hardware (Left to Right)
    fill(88, 89, 91);
    ellipseMode(CENTER);
    ellipse(289, 48, 5);
    ellipse(301, 48, 5);
    ellipse(340, 48, 5);
}

function makePhone(){
    //phone background
    push();
    rectMode(CENTER);
    fill(100)
    rect(width/2, height/2, 159, 323, 15);
    pop();
    //calls the app images on the home screen
    push()
    rectMode(CENTER);
    makeSnapchat();
    makeMusic();
    makeInsta();
    makeClock();
    pop();
}


function makeSnapchat(){
    //loads the snapchat app for the homescreen
    push();
    translate(width/2 - 60, 85)
    scale(0.25);
    image(snapPic, 0, 0)
    pop();
}

function makeMusic(){
    //loads the music app for the homescreen
    push();
    
    translate(width/2 + 6, 85)
    scale(0.25);
    image(musicPic, 0, 0)

    pop();
}

function makeInsta(){
    //loads the insta app for the homescreen
    push();
    
    translate(width/2 - 60, 160)
    scale(0.25);
    image(instaPic, 0, 0)

    pop();
}

function makeClock(){
    //loads the clock app for the homescreen
    push();
    
    translate(width/2 + 6, 160)
    scale(0.25);
    image(clockBG, 0, 0)
    pop();

    push()
    translate(width/2 + 1.5, 155);
    scale(0.15);
    //function that makes the clock work
    clockMove();
}


function clockMove(){
    //controls the clock on the homescreen to work
    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()
}

Carly Sacco – Looking Outwards-12

Scott Snibbe is a designer in interactive art, augmented reality, gesture – based interfaces, and digital video. His work has been acquired by multiple known companies like Facebook and New York MoMA. Snibbe started his career as an early developer for After Effects which was also acquired by Adobe. Two of his projects that I believe relate to my final project are two of his app designs; these are: Eyegroove and Bjork: Biophilia.

Example of what Eyegroove looks like to the user.

Eyegroove is an app that allows fans to create music videos and share them as a social network (very similar to tik tok). You could choose songs and create videos to the songs and then share them. Bjork, on the other hand, is considered the first “app album”. This app explores the relationships between music and natural configurations. Both of these apps let people interact via music as well as change the music or what the app is doing. I like that both of these projects change how people can respond to music, but I think they would be interesting if the user could also make their own music.

Bjork: Biophilia app example.

Carly Sacco- Project 12- Proposal

This project will be done by Taisei Manheim, Jai Sawkar, and I.  Our project proposal is a smart phone 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 spotify 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 will probably add two more apps to the phone so that each of us codes two apps each.

Sketch of what our project will look like.

Carly Sacco-Project 11-Generative Landscape

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 11: Generative Landscape

//creates the components on the water
var waterSpeed = 0.00008;
var waterDetail = 0.0005;

//creates the components for the icebergs
var iceSpeed = 0.0005;
var iceDetail = .05;

//snow array
var snow = [];

function setup() {
    createCanvas(480, 280);
	
	//initial collection of snow
	for (var i = 0; i < 100; i += 1) {
		var flake = random(width);
		snow[i] = drawSnow(flake);
	}
	frameRate(10);

	}


function draw() {
	//sky
    background(176, 203, 245);
	
	//icebergs
	noFill();
	beginShape();
	stroke(255);
    for (var x = 0; x < width; x += 1) {
        var t = (x * iceDetail) + (millis() * iceSpeed);
        var y = map(noise(t), 0,1, height/7, height);
        vertex(0, 900)
		vertex(width, 800)
		vertex(x, y);
    }
	endShape();
	
	//calls the function to make water
	makeWater();
	
	//penguin body
	fill('black');
	noStroke();
	ellipse(280, 220, 35, 40);
	ellipse(280, 195, 25, 25);
	
	//penguin stomach
	fill('white');
	ellipse(280, 225, 25, 45);
	ellipse(280, 195, 15, 15);
	
	//penguin eyes
	fill('black');
	ellipse(276, 191, 3, 3);
	ellipse(284, 191, 3, 3);
	
	//penguin body
	fill('orange');
	triangle(276, 195, 284, 195, 280, 200);
	
	//boat
	push();
	noStroke();
	translate(60, 30);
	fill('red')
	quad(40, 200, 250, 200, 230, 260, 60, 260);
	fill('white');
	rect(100, 150, 80, 50);
	
	fill('black')
	ellipse(110, 165, 15, 15);
	ellipse(140, 165, 15, 15);
	ellipse(170, 165, 15, 15);
	pop();
	
	//calling the functions to make the snow
	snowFall();
	drawSnow();	
	addSnow();
	
}
//makes the water
function makeWater() {
	noFill();
    beginShape();
	stroke(66, 114, 189);
    for (var x = 0; x < width; x++) {
        var t = (x * waterDetail) + (millis() * waterSpeed);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(0, 800)
		vertex(width, 800)
		vertex(x, y);
    }
    endShape();
}

//continues to add snow that appears
function addSnow() {
	var moreSnow = 5;
	if(1 < moreSnow) {
		snow.push(drawSnow(height));
	}
}

//calls for the snow to appear and move
function snowFall() {
	for (i = 0; i < snow.length; i +=1) {
		snow[i].displaySnow();
		snow[i].moveSnow();
	}
}

//actually drawing what the snow looks like
function drawSnow(width) {
	var sno = {
		x: random(0, 480),
		y: 0,
		radius: random(5, 10),
		speed: 1,
		moveSnow: function() {
			this.y += this.speed;
		},
		displaySnow: function() {
			noStroke();
			fill(255);
			ellipse(this.x, this.y, this.radius, this.radius);
		},
	}
	return sno;
}

For my project I had decided I wanted to do a winter themed one since it has started to get very cold here. Therefore, instead of mountains I chose to do icebergs and did that by making the sharp edges seem to be floating by the boat. After I added the snow for my objects and boat to fit the theme I thought it would be cute to add the penguin.

Carly Sacco-Looking Outwards- 11

~using one grace day~

Tina Frank is a designer, artist,  and professor at the University of Art and Design Linz. She is the head of the Department of Visual Communication at the Institute for Media. Tina Frank lives is Austrian, but does audio – visual performances and installations all over the world.

In one of her recent pieces of work, What If, Frank and Alexandra Murray-Leslie worked together to question political considerations. They looked at environments people inhabit, patriarchal structures, and feminism.

“What If “, an immersive audio-visual installation.

Carly Sacco-Project 10- Sonic Sketch

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 10: Interactive Sonic Sketch

var x, y, dx, dy;

function preload() {
	bubble = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bubble-3.wav");
	boatHorn = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/boat.wav");
	bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bird.wav");
	water = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-2.wav");
}
	
function setup() {
    createCanvas(640, 480);
    x = 200;
    y = 40;
    dx = 0;
    dy = 0;
	
	useSound();
}

function soundSetup() {
    osc = new p5.TriOsc();
    osc.freq(880.0); //pitch
    osc.amp(0.1); //volume
} 

function draw() {
	background(140, 216, 237);
	//ocean
	noStroke();
	fill(26, 141, 173);
	rect(0, height / 2, width, height);
	
	//fish head
	fill(50, 162, 168);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(200, -100, 100, 100, 20);
	pop();
	
	fill(184, 213, 214);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(215, -85, 70, 70, 10);
	pop();
	
	//fish eyes
	fill('white');
	ellipse(520, 355, 15, 25);
	ellipse(545, 355, 15, 25);
	
	fill('black');
	ellipse(520, 360, 10, 10);
	ellipse(545, 360, 10, 10);
	
	//fish mouth
	fill(227, 64, 151);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(240, -60, 40, 40, 10);
	pop();
	
	fill(120, 40, 82);
	ellipse(533, 395, 30, 30);	
	
	//fins
	fill(209, 197, 67);
	quad(565, 365, 590, 325, 590, 430, 565, 400);
	quad(500, 365, 500, 400, 475, 430, 475, 325);
	
	//bubbles
	var bub = random(10, 40);
	fill(237, 240, 255);
	ellipse(575, 315, bub, bub);
	ellipse(550, 275, bub, bub);
	ellipse(580, 365, bub, bub);
	x += dx;
	y += dy;

	//boat
	fill('red')
	quad(40, 200, 250, 200, 230, 260, 60, 260);
	fill('white');
	rect(100, 150, 80, 50);
	
	fill('black')
	ellipse(110, 165, 15, 15);
	ellipse(140, 165, 15, 15);
	ellipse(170, 165, 15, 15);
	
	
	//birds
	noFill();
	stroke(141, 160, 166);
	strokeWeight(5);
	arc(475, 75, 75, 60, PI * 5 / 4, 2 * PI);
	arc(550, 75, 75, 60, PI, 2 * PI - PI / 5);
	
	arc(550, 100, 50, 35, PI * 5 / 4, 2 * PI);
	arc(600, 100, 50, 35, PI, 2 * PI - PI / 5);
	
	arc(430, 125, 50, 35, PI * 5 / 4, 2 * PI);
	arc(480, 125, 50, 35, PI, 2 * PI - PI / 5);
	
	//waterlines
	stroke(89, 197, 227);
	bezier(300, 400, 250, 300, 200, 500, 50, 400);
	bezier(50, 350, 75, 500, 250, 200, 300, 375);
}

function mousePressed() {
	//plays sound if clicked near boat
	if (mouseX < width / 2 & mouseY < height / 2) {
		boatHorn.play();
	}
	//plays bubbles if clicked near fish
	if (mouseX > width / 2 & mouseY > height / 2) {
		bubble.play();
	}
	//plays birds if clicked near birds
	if (mouseX > width / 2 & mouseY < height / 2) {
		bird.play();
	}
	//plays water if clicked near water
	if (mouseX < width / 2 & mouseY > height / 2) {
		water.play();
	}
}
	

For my project this week, I began by starting with my project 3, which was the fish and bubbles. I wanted to add more options than a bubble sound so I decided to add a boat, birds, and a water noise. I kept it simple, so that whenever you click in the area closest to each icon, the associated sound plays.

Carly Sacco – Looking Outwards – 10

LINES by Anders Lind.

LINES is an interactive sound art exhibit by Anders Lind that allows users to make music by moving their hands and feet over lines. The lines are paired with sensors and electronics to create the sounds of three different instruments. It works by distance sensors that are connected to an arduino board on a mac mini. The signals from users hands are then translated from distance to sound. Lind created LINES to allow people to experience a new form of musical interactions and experiences. 

I admire that this project has a direct correlation between human interaction and the sound produced. People can work together, or participate alone and the results will always be different based on how the people move their hands. I thought it was very interesting how Lind even incorporated the lines on the floor too to create more possibilities of interaction.

Carly Sacco – Project – 09 – Portrait

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 09: Computational Portrait

var myPic; //variable to reference my photo

function preload() {
	var origPic = "https://i.imgur.com/B5emP43.jpg"
	myPic = loadImage(origPic); //loading the image to the variable
}

function setup() {
	createCanvas(360, 480);
	myPic.loadPixels();
	frameRate(150); //how quickly the arc will be added
}

function draw() {
	//these variables link the pixels with the image
	var px = random(width);
	var py = random(height);
	var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
	//pixel color from the picture
	var pcolor = myPic.get(ix, iy);
	
	noStroke();
	fill(pcolor);
	//the two separate arcs used added together would be a complete circle
	arc(px, py, random(-15, 15), random(-15, 15), HALF_PI, PI); 
	arc(px, py, random(-15, 15), random(-15, 15), PI, HALF_PI);

	//the mouse can be used for more detailed filling in of the image
	var mouseColor = myPic.get(mouseX, mouseY);
	fill(mouseColor);
	ellipse(mouseX, mouseY, 8, 8);
}
	

After I chose this photo I thought to match the texture of the greenery in the background it would be fun to fill in the image with slightly jagged, but also rounded pieces. I used arc to do this and had two so that added together it would be a complete circle, but since they’re not there was more variation. I did, however make the mouse fill in with circles to get a more accurate filling in for details for the photo.

Carly Sacco – LookingOutwards – 09

The project I found that I thought was interesting, was Jai Sawkar’s first Looking Outwards on Sensacell’s New Interactive Floor in Valenciana, Spain. The floor has LED lights and sensors that light up as someone walks across it, with the lights fading as the user gets farther from the location. I think this project seems very fun to interact with and is a unique way to change up sidewalks, since they are now often something people never look at or think about now. 

I agree with Jai’s thoughts about this project where I also think this was a great way to intertwine computing with design and the product is something pleasant for people to interact with. This project does a good job at allowing new social interactions to come out of the creativity within the design.

Carly Sacco – Looking Outwards 08 – Creative Practice

Santiago Ortiz at the Eyeo Festival in 2014.

Santiago Ortiz is a mathematician, data scientist, and information visualization researcher and developer who is currently the head at Moebio Labs. Ortiz went to school at the  Universidad de los Andes, Bogotá,
Colombia, where he received a degree in mathematics with a concentration in chaos and complexity. Then, from 2000 – 2013, he was doing research and heading Moebio Labs which studied on a plethora of subjects – mostly focusing on creative coding, knowledge visualization, education, and innovation.  Moebio Labs uses data to solve and answer real world problems with new strategies.

Something I admire about Ortiz’s work is the inter-activeness of some of his projects. Some of their work like on the Ross Spiral Curriculum  , and History Words Flow, are a fun way to represent data that I think would intrigue people to learn and play with. I think because of this, a unique thing he does when presenting is live – playing with his interactive visuals. Not only is it the best way to present his work, but I think it adds to the important of the data being user friendly.