Taisei Manheim – Project 10 – Interactive Sonic Sketch

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-10

function preload() {
    // call loadImage() and loadSound() for all media files here
    ding = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ding.wav");
    ding.setVolume(1.0);
    dream = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dream.wav");
    dream.setVolume(1.0);
    mail = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mail.wav");
    mail.setVolume(1.0);
    blare = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/blare.wav");
    blare.setVolume(1.0);
}

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

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.TriOsc();
    osc.freq(500.0);
    osc.amp(0.1);
    osc.start();
}

function draw() {
    //background color determined by mouse
    background(mouseX, mouseY, mouseX - mouseY);
    noFill();

    //ellipse
    stroke(255);
    ellipse(width / 2, height / 2, 600, 600);
    ellipse(width / 2, height / 2, 450, 450);
    ellipse(width / 2, height / 2, 300, 300);
    ellipse(width / 2, height / 2, 150, 150);

    stroke(0);
    drawHypotrochoidCurve()
    drawRanunculoidCurve()

    //background pitch based on mouseX and mouseY values
    osc.freq(mouseX + mouseY / 1.5);
}

function mousePressed() {
    //if click within first circle play ding sound
    var a = dist(mouseX, mouseY, width / 2, height / 2);
    if (a < 75) {
        ding.play();
    }

    //if click within second circle play dream sound
    var b = dist(mouseX, mouseY, width / 2, height / 2);
    if (b > 75 & b < 150) {
        dream.play();
    }

    //if click within third circle play mail sound
    var c = dist(mouseX, mouseY, width / 2, height / 2);
    if (c > 150 & c < 225) {
        mail.play();
    }

    //if click within fourth circle play blare sound
    var d = dist(mouseX, mouseY, width / 2, height / 2);
    if (d > 225 & c < 300) {
        blare.play();
    }
}

function drawHypotrochoidCurve() {
    //http://mathworld.wolfram.com/Hypotrochoid.html

    //mouse only affects image while on canvas
    var x = constrain(mouseX, 0, width); 
    var y = constrain(mouseY, 0, height);

    //changes speed in which it changes so that as you move away from center image changes
    var a = map(x, 0, width, 0, width / 64); 
    var b = map(y, 0, height, 0, height / 64);
    var h = width / 2;

    push();
    translate(width / 2, height / 2); // starts in the center of the canvas
    noFill();
    beginShape();
    for(var i = 0; i < 360; i += 1) {
        var x = (a - b) * cos(i) + h * cos((a - b) * i);
        var y = (a - b) * sin(i) - h * sin((a - b) * i);
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawRanunculoidCurve() {
    //http://mathworld.wolfram.com/Ranunculoid.html
    
    //mouse only affects image while on canvas
    var x = constrain(mouseX, 0, width); 
    var y = constrain(mouseY, 0, height);

    //changes speed in which it changes
    var a = map(x, 0, width, 0, width / 8); 
    var b = map(y, 0, height, 0, height / 8);

    push();
    translate(width / 2, height / 2); // starts in the center of the canvas
    rotate(mouseX/ mouseY);
    noFill();
    beginShape();
    for(var i = 0; i < 360; i += 1) {
        var x = a * (6 * cos(i) - cos(6 * i));
        var y = a * (6 * sin(i) - sin(6 * i));
        vertex(x, y);
    }
    endShape();
    pop();
}

For this project I started with my project 7 because it was one of my favorite projects that I have created.  In that project the geometries change as the mouse is moved so I added a pitch that changes as the mouse is moved.  I then added 4 differently sized circles that are centered on the canvas and when you click on each of them they produce a different sound.  The smallest sound, the ding is heard when the smallest circle is clicked, then the dream sound for the second circle, mail sound for the third circle, and the loudest sound, the blare for the outermost circle.  The sounds were taken from freesound.org.