Category: Project-12-Proposal

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

For this final project, I will be collaborating with Kimberlyn Cho to create an interactive dumpling making game. We were inspired by the game, cooking mama, and wanted to recreate something similar in the form of an interactive storyboard going through the steps of making dumplings. So far, we have tentatively six boards planned out with interactive actions involving keys, mouse press and mouse drag and some ideas for how we’d want to illustrate the scenes, either with imported images or some coded graphics. We also plan to add more interaction through speed, drag, and meter gauges to engage the user and make a fun experience.

I will be working with Sarah Kang for the final project to create an interactive cooking software that makes dumplings. While considering the various types of foods to make, we decided to make dumplings because we found many interactive aspects in the dumpling making process that we hope to incorporate in our project. There are 6 stages to the game with user interactions for each stage besides the final plating. We simplified the process into mixing the ingredients, rolling the dough, cutting the dough, folding the dumpling, frying the dumpling, and the final plating of the finished dumplings.

We will be using imported images we find online with images we code directly on p5js, as well as images we draw on illustrator and import to animate the game. The user will be able to interact with the game using the mouse cursor as well as specific keys such as the space bar.

I will be collaborating with Chelsea Fan for Project 12. We plan to create a fun game relating to climate change. The objective of the game is to catch little polar bears that are falling. To do this, the user will slide a block of ice back and forth at the bottom of the screen. If the polar bear is caught with the block of ice, a positive tone will ring. If the user is unable to catch the polar bear, it will fall into water and a negative tone will ring.

We will also keep a number tally of all the polar bears that are caught and that drown. Every time a polar bear isn’t caught an drowns, the water level a small amount. The game is over when the water level reaches the top of the screen.

To make the game more challenging, we will also have two sizes of polar bears. Small baby polar bears will fall at a faster speed than the larger polar bears.