Christine Chen-Project-03-Dynamic Drawing

Christine Chen-Project-03-Dynamic Drawing

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

var angle = 0; //angle for square rotation

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

function draw() {
    scale(0.95); //scaling it down so graphics won't be cut by WordPress
    //left side is for sadness
    //right side is for happiness

    //LEFT OF CANVAS IS BLUE
    if (mouseX < 320){
        background(129, 164, 235);
    }

    //RIGHT OF CANVAS IS ORANGE
    if (mouseX > 320){
        background(257, 141, 47);
    }

    //LINE OF SCALE
    fill(255);
    rect(100, 240, 440, 5); //long horizontal line for scale
    rect(320, 233, 5, 20); //line for midpoint

    //ROTATING SQUARE
    var x = mouseX
    push();
    if (x < 320){ //square turns red when on left
        fill(255, 0, 0);
    } else {
        fill(0, 255, 36);//square turns green when on right
    }

    if (x <= 100){ //restricts movement of x to be on the line of scale
        x = 100;
    } else if (x >= 540) { 
        x = 540;
    }

    translate(x, 240); //square would move horizontally according to x
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0, 0, 15, 15);
    pop();


    var squareSpeed = 0; 
    if (x < 320){ //square speeds up towards left
        squareSpeed = (320 - x + 320)/90;
    } else if (x > 320) { //square speeds up towards right
        squareSpeed = x/90;
    }

    angle = angle + squareSpeed;

    //----------EMOJI CODES----------
    var blue = color(180, 244, 255);
    var yellow = color(255, 228, 0);
    var size = 100;

    //FACE
    if (x < 320){ //emoji turns sad and increases size towards left
        noStroke();
        fill(blue); 
        var control = (320 - x + 320)/500; 
    } else { //emoji turns happy and increases size towards right
        noStroke();
        fill(yellow); 
        var control = x/500; 
    }

    ellipse(x, 170, size * control, size * control);

    //EYES
    fill(0);
    ellipse(x + 10, 155, 5, 5); //right eye
    ellipse(x - 10, 155, 5, 5); //left eye

    //MOUTH
    if (x > 320){ //happy mouth
        fill(228, 103, 126); //pink
        arc(x, 165, 35, 35, 0, PI); //arc with top opening
    } else { //sad mouth
        fill(79, 111, 203); //blue
        arc(x, 185, -35, -35, PI, TWO_PI); //arc with bottom opening
    }

    //NEGATIVE SIGN 
    let negativeColor = color(208); //resting color is gray
    if (x < 320){ //negative sign turns red 
        negativeColor = color(255, 0, 0);
    }
    fill(negativeColor);
    rect(40, 240, 20, 5);


    //POSITIVE SIGN
    let positiveColor = color(208); //resting color is gray
    if (x > 320){ //positive sign turns green
        positiveColor = color(0, 255, 36);
    }
    fill(positiveColor);
    rect(580, 240, 20, 5); //horizontal line
    rect(587.5, 233, 5, 20); //vertical line

}

I found this project quite challenging to start with as there are so many ways to address this project. In the end, I decided to create my own version of the emoji slider. I have always thought that the emoji slider on Instagram is not dramatic enough, so I took this project as a chance to create my own ideal version of the emoji slider with exaggerated features. Instead of having only one type of emotion, I used one end of the scale for sadness and the other one for happiness. I spent a lot of time figuring out how to make the face increase in size and the rotation square increase in speed on they approach the two ends of the scale. I finally figured out the equations after quite a while and it was definitely a fruitful gain for me! 🙂