Mihika Bansal – Project 10 – Sonic Sketch

sketch

// Mihika Bansal 
// Section E 
// mbansal@andrew.cmu.edu
// Project 10

var h1 = 35; // varying heights
var h2 = 80;  
var h3 = 50; 

var w1 = 10; //varying widths 
var w2 = 15; 
var w3 = 20; 


function preload() {
    // call loadImage() and loadSound() for all media files here
    //mySnd = loadSound("waves.wav"); 
   // mySnd.setVolume(0.5);
}


function setup() {
    // you can change the next 2 lines:
    rectMode(CENTER); 
    createCanvas(480, 400);
   
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    s1 = new p5.Oscillator(); //the 4 tones I will be manipulating
    s1.setType('sine');

    s2 = new p5.Oscillator();
    s2.setType("sine"); 

    s3 = new p5.Oscillator();
    s3.setType("sine"); 
    
    s4 = new p5.Oscillator();
    s4.setType("sine"); 

    //starting all the audio files, so all sounds are playing at the same time
    s1.start();
    s2.start(); 
    s3.start();
    s4.start();

}


function draw() {

    //creating visual elements 
    background(15); 
    noStroke(); 

    h1 = map(mouseY, 0, height, 50, 80); 
    h2 = map(mouseX, 0, height, 100, 200);
    h3 = map(mouseY, 0, height, 80, 120); 

    w1 = map(mouseX, 0, width, 10, 30);
    w2 = map(mouseY, 0, width, 20, 40);
    w3 = map(mouseX, 0, width, 15, 35); 

    fill("#355C7D"); 
    rect(26, 200, w1, h1); 
    rect(185, 200, w1, h1);
    rect(344, 200, w1, h1);


    fill("#F67280"); 
    rect(79, 200, w2, h2);
    rect(238, 200, w2, h2);
    rect(397, 200, w2, h2);

    fill("#C06C84"); 
    rect(132, 200, w3, h3);
    rect(291, 200, w3, h3);
    rect(450, 200, w3, h3);

    if(mouseX > 0 & mouseX < 120){ //determing sound based on the mouse, moving the mouse changes the sound
        freq1 = map(mouseX, 0, width, 0, 200); //lowest frequency is to the left of the screen
        //amp1 = map(mouseY, 0, height, 0, 0.3); 
        s1.freq(freq1); 
        s1.amp(0.5); //when in that section of the screen the audio is louder
        //s1.start(); 
    }
    else{
        s1.amp(0); //when outside of that section of the screen, the audio is softer 
    }
    if(mouseX > 120 & mouseX < 240){
        freq2 = map(mouseX, 0, width, 200, 400); // increeasing frequency
        s2.freq(freq2);
        s2.amp(0.5); // louder sounds
        //s2.start(); 
    }
    else{
        s2.amp(0); //softer sounds 
    }
    if(mouseX > 240 & mouseX < 360){
        freq3 = map(mouseX, 0, width, 400, 600); // increasing the frequency 
        s3.freq(freq3);
        s3.amp(0.5); //louder sound
        //s3.start(); 
    }
    else{
        s3.amp(0); //softer sound  
    }
    if(mouseX > 360 & mouseX < 480){
        freq4 = map(mouseX, 0, width, 600, 800); //final increase in the frequency
        s4.freq(freq4);
        s4.amp(0.5);
        //s4.start(); 
    }
    else{
        s4.amp(0);  
    }

}

With this project, I created a sound piece that depends on the location of the mouse on the page. When the mouse is off of the screen the sound stops, but as long as it is on the page, a frequency will be emitted. The visuals correspond with the sound that is being emitted because I used the map function for both. Move the mouse completely to the left to stop emitting the sound on wordpress.