Charmaine Qiu – Project 10 – Sonic Sketch

sketch

// Charmaine Qiu
// charmaiq@andrew.cmu.edu
// section E
//Project - 10 - Sonic Sketch


var angle = 0
var b = 0
var bgmusic;
var heySound;
var beat;

function preload() {
    //preload the audios and loop the background music
    beat = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/beat.wav');
    heySound = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hey.wav');
    bgmusic = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bgmusic.wav');
    bgmusic.loop();
}

function setup() {
    createCanvas(400, 400);
    //createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}

function soundSetup() { // setup for audio generation
    //set the volume for audio and play background music
    bgmusic.setVolume(1);
    bgmusic.play();
    heySound.setVolume(1);
    beat.setVolume(2);
    //setup for oscillation
    osc = new p5.TriOsc();
    osc.freq(500);
    osc.amp(1);
    osc.start();
}

function draw() {
    //set the frequency of oscillation according to placement of mouseX
    osc.freq(mouseX);
    osc.amp();
    //when the mouse is pressed, "hey" plays
    if (mouseIsPressed){
        heySound.play();
    }

   //graphics created from precious project
    fill(b);
    //randomizing the color in greyscale
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    //square that follows the mouse
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    //angle rotates
    angle += 5;

    //rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

   //dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

   //When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
        //squares that rotates around the mouse
        push();
        translate(mouseX - 50, mouseY - 50);
        rotate(radians(angle));
        rectMode(CORNER);
        rect(20, 20, 20, 20);
        pop();
        angle = angle + 0.5;

        push();
        translate(mouseX + 50, mouseY + 50);
        rotate(radians(angle));
        rect(0, 0, 10, 10);
        pop();
        angle = angle - 0.5

        //text appears
        textSize(15);
        text('WooHooo!!!', 20, 90);
        textSize(30);
        text('哦耶!', 280, 180);


      } else { //When the mouse move to the right side of the canvas
        fill(0);
        strokeWeight();
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0, 0, 30, 30);
        pop();
        angle = angle + 5

        //text appears
        textSize(20);
        fill(255);
        text('야호!', 280, 50);
        textSize(25);
        text('ヤッホ〜ー', 70, 350);
       }
}
//when the key "b" is pressed, a beat sound is played
function keyPressed(){
    if(key == "b"){
        beat.play();
    }
}

In this project, I was able to incorporate new knowledge of importing sound and oscillations into my former assignment. I had fun looking for edm music sources online and creating an interactive project that people could play with.