Margot Gersing – Project 10

sketch

//Margot Gersing - Project 10 - mgersing@andrew.cmu.edu - Section E


var oneX = 50; //for mouse press
var oneY = 50;
var act1 = false; //peach shape 'activation'

var twoX = 200; //for mouse press
var twoY = 350;
var act2 = false; //rusty orange shape 'activation'

var threeX = 400; //for mouse press
var threeY = 100;
var act3 = false; //pink shape 'activation'

var fourX = 500; //for mouse press
var fourY = 500;
var act4 = false; //gray shape 'activation'

var nPoints = 100;

var blop;
var plop;
var vpop;
var ting;

function preload(){
    blop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Blop.wav");
    plop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/plop.wav");
    vpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/pop.wav");
    ting = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Ting.wav");
}

function setup() {
    createCanvas(600,600);
    frameRate(10);

}

function draw(){
    background(29, 19, 46);
    noStroke();
    one();
    four();
    two();
    three();

    //filler shapes (static)
    fill(192, 80, 49);
    ellipse(50, 600, 400, 150);
    fill(219, 160, 65);
    ellipse(600, 125, 100, 150);
    fill(114, 48, 35);
    ellipse(150, 150, 25, 25);
    ellipse(175, 175, 20, 20);
    ellipse(135, 180, 25, 25);
    ellipse(185, 135, 25, 25);
    ellipse(155, 115, 20, 20);
    ellipse(500, 500, 20, 20);
    ellipse(490, 535, 25, 25);
    ellipse(600, 275, 25, 25);
    ellipse(575, 250, 25, 25);
    ellipse(560, 285, 20, 20);
    ellipse(60, 480, 25, 25);   

}

function one(){
    //peach shape
    var w1 = 200;
    var h1 = 200;

    //click to activate otherwise static
    if(act1){
        w1 = mouseX * .75;
        h1 = mouseY * .75;
    } else{
        w1 = 200;
        h1 = 200;
    }

    fill(117, 182, 129);
    ellipse(50, 50, w1, h1);
}

function two(){
    //epitrochoid
    var x;
    var y; 
    var a = 80.0;
    var b = a / 2.0;
    var h2 = constrain(100 / 8.0, 0, b);
    var ph2 = 100 / 50.0;

    //click to activate otherwise static
    if(act2){
        h2 = constrain(mouseX / 8.0, 0, b);;
        ph2 = mouseX / 50.0;
    } else{
        h2 = constrain(100 / 8.0, 0, b);
        h1 = 100 / 50.0;
    }
    fill(235, 231, 201);
    beginShape(); //drawing shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h2 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph2 + t * (a + b) / b);
        vertex(x + 200, y + 350);
    }
    endShape(CLOSE);
}

function three(){
    //cranioid
    var x;
    var y;
    var r;
    var a = 40.0;
    var b = 10.0;
    var c = 100.0;
    var p = constrain((width/2), 0.0, 1.0);
    var q = constrain((height/2), 0.0, 1.0);

    //click to activate otherwise static
    if(act3){
        var p = constrain((mouseX / width), 0.0, 1.0);
        var q = constrain((mouseY / height), 0.0, 1.0);
    } else{
        var p = constrain((width/2), 0.0, 1.0);
        var q = constrain((height/2), 0.0, 1.0);
    } 
    fill(235, 231, 201);
    beginShape(); //drawing shape 
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r =
            a * sin(t) +
            b * sqrt(1.0 - p * sq(cos(t))) +
            c * sqrt(1.0 - q * sq(cos(t)));
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x + 400, y + 100);
    }
    endShape(CLOSE);
}

function four(){
    //gray shape
    var w4 = 200;
    var h4 = 300;

    //click to activate otherwise static
    if(act4){
        w4 = mouseX;
        h4 = mouseY;
    } else{
        w4 = 200;
        h4 = 300;
    }

    fill(41, 89, 50);
    ellipse(475, 475, w4, h4);
}


function mousePressed(){

    //if clicked within in defined distance then activation state is... 
       //changed from true to false so the mouseX and mouseY will now take over
    var d = dist(oneX, oneY, mouseX, mouseY);
    if(d < 200){
        act1 = !act1;
        blop.play(0, 1, 2);
    }

    var d2 = dist(twoX, twoY, mouseX, mouseY);
    if(d2 < 100){
        act2 = !act2;
        vpop.play(0, 1, 2);
    }

    var d3 = dist(threeX, threeY, mouseX, mouseY);
    if(d3 < 100){
        act3 = !act3;
        plop.play(0, 1, 2);
    }

    var d4 = dist(fourX, fourY, mouseX, mouseY);
    if(d4 < 100){
        act4 = !act4;
        ting.play(0, 1, 2);
    }

}

For this project I decided to add sound to my previous project from week seven. The way I set up that project worked really well with how I was already planning on utilizing sound. I think this turned out pretty cute, the original project was meant to be playful and I think the sounds just added to it. Lastly, I changed up the colors just for fun.