Ammar Hassonjee – Project 10 – Sonic Sketch

Sonic Sketch

// USE BROWSER OTHER THAN CHROME TO PLAY
// I didn't have to set up a terminal to run my code but you might
//    need to set up one in order to run the index
// My audio files for the cackle and bat dance were longer, but I had to trim
//    them down in order to make my folder size smaller.

/* Ammar Hassonjee
    ahassonj@andrew.cmu.edu
    15104 Section C:
    Project 10 - Sonic sketch
    */

// Global variables declared for the pong game
var ballx = 0;
var bally = 250;
var dir1 = 1;
var dir2 = 1;
var speedx = 5;
var speedy = 3;
// variables for changing the background
var bluetone = 0;
var increment = 1;
var framecount = 0;


function preload() {
    // call loadImage() and loadSound() for all media files here
    // witch cackle sound loaded for ending the game
    cackle = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cackleTrimmed.wav");
    cackle.setVolume(0.5);

    // first type of bounce noise loaded
    bounce = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bounce.wav");
    bounce.setVolume(0.5);

    // background game music loaded
    backMusic = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bat-danceTrimmed.wav");
    backMusic.setVolume(0.5);

    // second type of bounce noise loaded
    bounce2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/shootingStar.wav");
    bounce2.setVolume(0.5);
}


function setup() {
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
    // beginning to play the background music
    backMusic.play()
}


function soundSetup() { // setup for audio generation
    // I've included an empty soundSetup function because
    // the code doesn't run without it for some reason
}


function draw() {
    // changing the game background to a gradient
    bluetone += increment;
    if (bluetone === 255) {
        increment = -1;
    }
    if (bluetone === 0) {
        increment = 1;
    }
    background(0, 0, bluetone);
    ellipse(ballx, bally, 60, 60);
    ballx += dir1 * speedx;
    bally += dir2 * speedy;

    // Making ball bounce off the right
    if (ballx >= (width - 30)) {
      dir1 = -dir1;
      // Playing the first bounce noise once the ball hits the wall
      bounce.play();
    }

   // Making the ball bounce off the top and bottom
   if (bally >= (height - 30) || bally < 30) {
      dir2 = -dir2;
        // Playing the first bounce noise once the ball hits the wall
      bounce.play();
    }

    // Making the ball bounce using the mouse
    if (ballx < width / 2 & dir1 === -1) {
        if (dist(mouseX, mouseY, ballx, bally) < 30) {
            speedY = random(-10, 10);
            dir1 = -dir1;
              // Playing the second bounce noise once the ball hits the mouse
            bounce2.play();
          }
        }

    // Getting the background music to loop continuously
    framecount++;
    if (framecount % 300 === 0) {
        backMusic.play();
      }

    if (ballx < 0) {
      // Playing the sinsister cackle to indicate you lost the game
        cackle.play();
        backMusic.stop();
        textSize(20);
        textAlign(CENTER);
        fill(255);
        text("Uh-oh. Better luck next time.", width / 2, height / 2);
        noLoop();
    }


}

For this project, I was inspired by the pong game we had made earlier, and I wanted to add sound to make it a more interesting like game. I added background music that loops continuously, a bounce sound effect for when the ball bounces off the walls and a different noise when the user touches the ball. Then I also added a cackle to indicate the game is over when the ball touches the left side.