Category: SectionC

sketch

Clicking on the red balloon will expand it, until it pops and returns back to its original size. Clicking on the top or bottom half will play different types of background music.

I had fun playing around with the whimsical visualizations and sounds, as well as the interactive visual and audio elements.

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project 10 Sonic Sketch

var s = 50;
// balloon coordinates
var balloonY = 200;
var balloonX = 200;
// balloon width & height
var bw;
var bh;

function preload() {
    p = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/pop-1.wav");
    p.setVolume(0.5);

    air = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/air.wav");
    air.setVolume(0.5);

    // top bgm
    bgm = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/background.wav");
    bgm.setVolume(0.5);
    // bottom bgm
    bgm2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bgm2.wav");
    bgm2.setVolume(0.5);

}


function setup() {
    createCanvas(400, 400);
    background(200);
    useSound();
}


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

    bgm.amp(0);
    bgm2.amp(0);
    bgm.play();
    bgm2.play();
}


function draw() {
    background("#FFDC73");
    fill("#FFBF00");
    rect(0, 200, 400, 200);


    // balloon
    strokeWeight(5);
    stroke("white");
    line(balloonX, height, balloonX, balloonY);


    bw = s + 25;
    bh = s + 50;
    noStroke();
    fill("#eb3713");
    ellipse(balloonX, balloonY, bw, bh);
    // triangle(100, 135, 110, 150, 90, 150);

}

function mousePressed() {
    // balloon grows when clicked
    var xdist = bw / 2;
    var ydist = bh / 2;
    if (mouseX > (balloonX - xdist) & mouseX < (balloonX + xdist)) {
        if (mouseY > (balloonY - ydist) && mouseY < (balloonY + ydist)) {
            if (s >= 50 && s < 100) {
                air.play();
                s += 10;
            } else if (s >= 100) {
                // balloon pops and resets
                p.play();
                s = 50;
            }
        }
    }

    // play different bgm based on top or bottom half click
    if (mouseY < 200) {
        bgm.amp(1);
        bgm2.amp(0);
        
    } else if (mouseY > 200) {
        bgm.amp(0);
        bgm2.amp(1);
    } 
}

I created a sound to represent the static on the TV. I then used mouseX and mouseY to control the frequency and volume of the sound respectively. To change the TV screen or the “channel”, I uploaded different images and sounds so that when the mouse leaves the TV to the left and right, the channels would change accordingly.

sketch

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-10 */

/* directions:
move vertically = control the volume of the beep
move horizontally = control the frequency of the beep & change TV screens 
    - move to the left or right of the TV to change TV "channels" */

var screenW = 360
var screenH = 300
var rectW = 10
var rectH = 20
var angle = 0
var myImageURL = ["https://i.imgur.com/Q5CjhQu.jpg?2", "https://i.imgur.com/TFlpQiF.png?2"]
var imageA;
var imageB;
//original sound file names 
var mySndURL = ["rickandmorty.wav", "porter.wav"]
var sndA;
var sndB;
var sndAstart;
var sndBstart;

function preload() {
    //loading images and sounds and setting them as variables
    sndA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rickandmorty.wav");
    sndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/porter.wav")
    imageA = loadImage(myImageURL[0]);
    imageB = loadImage(myImageURL[1]);
}

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

function soundSetup() {
    //creating a beep to represent the screen with static
    osc = new p5.SinOsc();
    osc.freq(880.0);
    osc.amp(0.1);
    osc.start();
}

function draw() {
    //drawing background based on mouse location even beyond canvas size (so there will always be a background)
    background(256, mouseX, mouseY);
    rectMode(CENTER);
    //function to create TV features
    drawTVoptions();
    //function to control TV screens
    drawTVscreen();
}

function drawTVoptions() {
    //constraining TV to appear only if mouse is within canvas limits
    if (mouseX < width & mouseY < height) {

        //antenna
        stroke("pink");
        strokeWeight(5);
        line(320, 95, 370, 10);
        line(320, 95, 250, 5);
        strokeWeight(0);
        fill("white");
        ellipse(320, 95, 100, 50);

        //tv
        fill("pink");
        rect(320, 280, 500, 380, 50);
        fill("white");
        rect(290, 280, 380, 320, 30);

        //tv controls
        ellipse(525, 175, 50, 50);
        ellipse(525, 250, 50, 50);
        fill("pink"); 

        //rotating dials
        push();
        translate(525, 175);
        rotate(radians((angle + 20) + mouseX / 2));
        rect(0, 0, 40, 10);
        pop();
        push();
        translate(525, 250);
        rotate(radians(-angle + mouseX / 2));
        rect(0, 0, 40, 10);
        pop();

        //slider
        fill("white");
        rect(525, 360, 6, 136);
        var slider = map(mouseY, 0, height, 292, 428);
        slider = constrain(slider, 292, 428)
        rect(525, slider, 25, 25);
    }
}

function drawTVscreen() {
    //changing channel to rick and morty if mouse is to the left of the TV
    if (mouseX < width / 10 & mouseY < height) {
        image(imageA, 110, 130);
        if (sndAstart) {
            sndA.play(0, 1, 2)
        }
        sndAstart = false
    } else {
        sndA.stop()
        sndAstart = true
    }

    //static screen and sounds play if mouse is on TV
    if (mouseX > width / 10 & mouseX < 9 * width / 10 && mouseY < height) {
        //tv screen
        fill("black");
        rect(290, 280, screenW, screenH);
        
        //to imitate static
        var color = random(0, 255);
        //to constrain static heights within screen
        
        length = map(mouseY, 0, height, 292, 428);
        var length2 = constrain(length, 0, height);

        var staticH = height - length2;

        //static
        fill(200);
        translate(110, 130);
        fill(color, mouseX, color);
        rect(screenW * 0.02, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.06, screenH / 2, rectW, staticH * .8);   
        rect(screenW * 0.10, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.14, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.18, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.22, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.26, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.30, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.34, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.38, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.42, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.46, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.50, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.54, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.58, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.62, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.66, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.70, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.74, screenH / 2, rectW, staticH * .2);
        rect(screenW * 0.78, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.82, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.86, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.90, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.94, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.98, screenH / 2, rectW, staticH * .4);

        //controlling frequency with mouseX
        var newpitch = map(width - mouseX, 0, width, 800, 50)
        osc.freq(newpitch)

        //controlling volume with mouseY
        var newvolume = map(height - mouseY, 0, height, 0.1, 3)
        osc.amp(newvolume)
    } else {
        //muting beep if mouse goes beyond range
        osc.amp(0);
    }

    //changing channel to porter robinson if mouse is to the left of the TV
    if (mouseX > 9 * width / 10 & mouseX < width && mouseY < height) {
        image(imageB, 110, 130);
        if (sndBstart) {
            sndB.play(0, 1, 2);
        }
        sndBstart = false
    } else {
        sndB.stop()
        sndBstart = true
    }
}

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 10


var ampTog;
var freqTog;
var recordSpinL;
var recordSpinR;
var prevR;
var play;

var playToggle;

var scratch;
var scratch2;
var buildup;
var drop;
var volume;

var visualImage;

var px = [];
var py = [];
var dx = [];
var dy = [];

function preload() {
	// load sounds
	scratch = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/scratch.wav');
	scratch.setVolume(0.08);
	scratch2 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/scratch2.wav');
	scratch2.setVolume(0.2);
	buildup = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/buildup.wav');
	buildup.setVolume(0.5);
	drop = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/wheredyago.wav');
	drop.setVolume(0.3);

    // load visuals
    visualImage = loadImage('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/visual.jpg');
}

function setup() {
    createCanvas(500, 500);
    recordSpinL = 0; recordSpinR = 0;
    volume = 0.2;
    playFill = 'red';
    playToggle = 0;

    visualImage.resize(width, height);
    visualImage.loadPixels();

    // visuals setup
    for (var i = 0; i < 150; i ++) {
    	px.push(random(width));
    	py.push(random(height));
    	dx.push(1);
    	dy.push(1);
    }
}

function draw() {
	if (drop.isPlaying() == false) {
		background(255, 255, 220);
	}
	else {
		for (var i = 0; i < px.length; i ++) {
	    	var ix = constrain(floor(px[i]), 0, width-1);
	        var iy = constrain(floor(py[i]), 0, height-1);
	        var theColorAtLocationXY = visualImage.get(ix, iy);

	        noStroke();
	        fill(theColorAtLocationXY);
	        rectMode(CENTER);
	        rect(px[i], py[i], 30, 30);

	        // random movement
	        px[i] += dx[i] * random(-2, 10);
	        py[i] += dy[i] * random(-2, 10);

	        // keeping painters on the canvas
	        if (px[i] > width) {
	            px[i] = 0;
	        }
	        else if (px[i] < 0) {
	            px[i] = width;
	        }
	        if (py[i] > height) {
	            py[i] = 0;
	        }  
	        else if (py[i] < 0) {
	            py[i] = height;
        	}
    	}
	}
    
	// sound board
	soundBoard();
	dial(width / 2 - 30, 2 * height / 3 - 5);
	dial(width / 2 + 30, 2 * height / 3 - 5);

    // play button
	fill(45);
	rect(width / 2 + 4, 3 * height / 4 + 4, 30, 20);
	fill(playFill);
	stroke('white');
	strokeWeight(0.5);
	rect(width / 2, 3 * height / 4, 30, 20);
	fill('white');
	triangle(width / 2 - 5, 3 * height / 4 - 4, width / 2 - 5, 3 * height / 4 + 4,
		width / 2 + 5, 3 * height / 4);

	// basssss
	fill(45);
	strokeWeight(0);
	ellipse(width / 2 + 4, 3 * height / 4 + 60 + 4, 40);
	strokeWeight(0.5);
	fill(100);
	if (buildup.isPlaying()) {
		fill('red');
	}
	ellipse(width / 2, 3 * height / 4 + 60, 40);
	strokeWeight(2);
	text('DROP', width / 2 - 17, 3 * height / 4 + 65);
	strokeWeight(0);

	// record
	disc(width / 4, 3 * width / 4 + 10, recordSpinL);
	disc(3 * width / 4, 3 * width / 4 + 10, recordSpinR);
	if (play == 1) {
		recordSpinL += PI / 100;
		recordSpinR += PI / 100;
	}
}

function disc(x, y, r) {
    // shadow
    push();
    translate(x + 5, y + 5);
    fill(25);
    ellipse(0, 0, 155);
    pop();

	// record
	push();
	translate(x, y);
	rotate(r);
	fill(25);
	stroke(120);
	strokeWeight(3);
	ellipse(0, 0, 155);
	fill(30, 40, 185);
	strokeWeight(1);
	ellipse(0, 0, 40);
	fill(100);
	strokeWeight(0);
	ellipse(0, 0, 6);

	// scratches
	noFill();
	strokeWeight(0.3);
	arc(0, 0, 140, 140, 0, PI / 4);
	arc(0, 0, 120, 120, PI / 2, 5 * PI / 4);
    strokeWeight(0.25);
    arc(0, 0, 75, 75, 0, PI / 2);
    arc(0, 0, 85, 85, PI, 7 * PI / 4);

    // more scratches
    strokeWeight(0.75);
    line(0, 30, 0, 66);
    line(-30, 0, -70, 0);
    strokeWeight(0.35);
    line(20, -20, 45, -45);
    line(22, 22, 48, 48);
	pop();
}
	

function dial(x, y, r) {
	// shadow
	push();
	translate(x + 5, y + 5);
	fill(50);
	strokeWeight(0);
	ellipse(0, 0, 35);
	pop();

	// knob
	push();
	translate(x, y);
	rotate(0);
	fill(100);
	stroke(180);
	strokeWeight(0.75);
	ellipse(0, 0, 35);

	// pointer
	stroke('white');
	strokeWeight(1);
	line(0, 0, 0, -35 / 2);
	pop();
}

function soundBoard() {
	rectMode(CENTER);
	strokeWeight(0);
	// shadow
	fill(75);
	rect(width / 2 + 10, 4 * height / 5 - 20 + 10, 7 * width / 8, height / 2.5, 20);
	// red
	fill(175, 50, 50);
	rect(width / 2, 4 * height / 5 - 20, 7 * width / 8, height / 2.5, 20);
}

function mousePressed() {
	// toggles spinning records
	play = 1;
	// left scratch sound
	if (dist(mouseX, mouseY, width / 4, 3 * width / 4 + 10) < 77.5) {
		recordSpinL -= PI / 4;
		if (scratch.isPlaying()) {
			scratch.stop();
		}
		scratch.play();
	}
	// right scratch sound
	if (dist(mouseX, mouseY, 3 * width / 4, 3 * width / 4 + 10) < 77.5) {
		recordSpinR-= PI / 4;
		if (scratch2.isPlaying()) {
			scratch2.stop();
		}
		scratch2.play();
	}
	// play button
	if (dist(mouseX, mouseY, width / 2, 3 * height / 4) < 20) {
		playFill = 'green';
		if (buildup.isPlaying()) {
			buildup.stop();
		}
		buildup.play();
	}
	// bass button
	if (dist(mouseX, mouseY, width / 2, 3 * height / 4 + 60) < 20 & buildup.isPlaying()) {
		if (buildup.isPlaying()) {
			buildup.stop();
		}
		if (drop.isPlaying()) {
			drop.stop();
		}
		drop.play();
	}
}

In this primitive virtual audio mixer, I included two dj scratch sounds on each disc, a play button to activate the build up, and a button which drops the bass c:

Click on a drum to hear its sound!

tcliu-openended-10

// Timothy Liu
// 15-104, Section C
// tcliu@andrew.cmu.edu
// OpenEnded-10

// bass drum variables
var bassDrumW = 200;
var bassDrumX;
var bassDrumY;
var rimWidth = 20;
var bassRadius = bassDrumW / 2;

// high tom tom variables
var tomTomW = 100;
var tomTomH = 40;
var tomTomBaseW = 100;
var tomTomBaseH = 50;
var tomTomX1 = 220;
var tomTomY1 = 200;
var tomTomX2 = 380;
var tomTomY2 = 200;
var baseOffset = tomTomW / 2;
var tomTomRodW = 5;
var tomTomRodH = 250;
var httRodOffset = tomTomRodW / 2;
var hTTDRadius = 50;

// floor tom tom variables
var fTomTomW = 150;
var fTomTomH = 60;
var fTomTomBaseW = 150;
var fTomTomBaseH = 100;
var fTomTomX = 135;
var fTomTomY = 300;
var fBaseOffsetX = fTomTomW / 2;
var fBaseOffsetY = 100;
var fTomTomRodW = 8;
var fTomTomRodH = 100;
var fRodOffset = fTomTomRodW / 2;
var fTTDRadius = 95;

// snare drum
var snareW = 120;
var snareH = 40;
var snareBaseW = 120;
var snareBaseH = 30;
var snareX = 450;
var snareY = 275;
var snareOffsetX = snareW / 2;
var snareOffsetY = snareBaseH;
var snareRodW = 8;
var snareRodH = 200;
var snareRodOffset = snareRodW / 2;
var snareRadius = 50;

// cymbals
var cymbalX1 = [100, 130];
var cymbalY1 = [30, 150];
var cymbalZ1 = [170, 150];
var cymbalX2 = [500, 130];
var cymbalY2 = [570, 150];
var cymbalZ2 = [430, 150];
var cymbalRodH = 350;
var cymbalRodW = 4;
var cymbalOffset = cymbalRodW / 2;
var cymbalH = 20;

// variables for sounds
var hTTDSound;
var FTTDSound;
var bassDSound;
var cymbalSound;
var snareDSound;

// preload all the different drum sounds: snare, bass, high tom tom, floor tom tom, and cymbal
function preload() {
    snareDSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snare.wav");
    snareDSound.setVolume(0.5);

    bassDSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bass.wav");
    bassDSound.setVolume(0.9);

    hTTDSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/HTTD.wav");
    hTTDSound.setVolume(0.5);

    fTTDSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/FTTD.wav");
    fTTDSound.setVolume(0.5);

    cymbalSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cymbal.wav");
    cymbalSound.setVolume(0.5);

}

function setup() {
    createCanvas(600, 600);
}

function draw() {

    background(200, 200, 255); // blue background

    noStroke();

    highTomTomDrum(tomTomX1, tomTomY1); // calls the high Tom Tom Drum drawing function and places it at the first x, y
    highTomTomDrum(tomTomX2, tomTomY2); // calls the high Tom Tom Drum drawing function again and places it at the other x, y
    cymbals(cymbalX1, cymbalY1, cymbalZ1); // calls the cymbal drawing function and places it at the first x, y
    cymbals(cymbalX2, cymbalY2, cymbalZ2); // calls the cymbal drawing function again and places it at the other x, y
    floorTomTomDrum(fTomTomX, fTomTomY); // calls the floor Tom Tom Drum drawing function and places it at the given x, y
    snareDrum(snareX, snareY); // calls the snare drum drawing function and places it at the given x, y
    bassDrum(); // calls the bass drum drawing function

}

function mousePressed() {
    // play the high tom tom drum sound when the mouse is pressed on the left high tom tom drum
    if (insideHTTDrumLeft() === true) {
        hTTDSound.play();
    }

    // play the high tom tom drum sound when the mouse is pressed on the right high tom tom drum
    if (insideHTTDrumRight() === true) {
        hTTDSound.play();
    }

    // play the floor tom tom drum sound when the mouse is pressed on the floor tom tom drum
    if (insideFTTDrum() === true) {
        fTTDSound.play();
    }
    
    // play the bass drum sound when the mouse is pressed on the bass drum
    if (insideBassDrum() === true) {
        bassDSound.play();
    }

    // play the bass drum sound when the mouse is pressed on the snare drum
    if (insideSnare() === true) {
        snareDSound.play();
    }

    // play the bass drum sound when the mouse is pressed on the left cymbal
    if (insideCymbalLeft() === true) {
        cymbalSound.play();
    }

    // play the bass drum sound when the mouse is pressed on the right cymbal
    if (insideCymbalRight() === true) {
        cymbalSound.play();
    }
}

function insideHTTDrumLeft() {
    var dHTTDrumLeft = dist(mouseX, mouseY, tomTomX1, tomTomY1 + 30); // dist from mouse to center of left HTT Drum
    if (dHTTDrumLeft <= hTTDRadius) { // checks if the distance from mouse to the center is less than the radius of the HTT drum (which would mean it's inside the drum)
        return true;
    }
}

function insideHTTDrumRight() {
    var dHTTDrumRight = dist(mouseX, mouseY, tomTomX2, tomTomY2 + 30); // dist from mouse to center of right HTT Drum
    if (dHTTDrumRight <= hTTDRadius) { // checks if the distance from mouse to the center is less than the radius of the HTT drum (which would mean it's inside the drum)
        return true;
    }
}

function insideFTTDrum() {
    var dFTTDrum = dist(mouseX, mouseY, fTomTomX, fTomTomY + 75); // dist from mouse to center of FTT Drum
    if (dFTTDrum <= fTTDRadius) { // checks if the distance from mouse to the center is less than the radius of the FTT drum (which would mean it's inside the drum)
        return true;
    }
}

function insideBassDrum() {
    var dBass = dist(mouseX, mouseY, bassDrumX, bassDrumY); // dist from mouse to center of bass drum
    if (dBass <= bassRadius) { // checks if the distance from mouse to the center is less than the radius of the bass drum (which would mean it's inside the drum)
        return true;
    }
}

function insideSnare() {
    var dSnare = dist(mouseX, mouseY, snareX, snareY + 25); // dist from mouse to center of snare drum
    if (dSnare <= snareRadius) { // checks if the distance from mouse to the center is less than the radius of the snare drum (which would mean it's inside the drum)
        return true;
    }
}

function insideCymbalLeft() { // is the mouse inside the left cymbal?
    if (mouseX >= 30 & mouseX <= 170 && mouseY >= 130 && mouseY <= 150) { // checks if the mouse is inside the edges of the cymbal
        return true; 
    }
}

function insideCymbalRight() { // is the mouse inside the right cymbal?
    if (mouseX >= 430 & mouseX <= 570 && mouseY >= 130 && mouseY <= 150) { // checks if the mouse is inside the edges of the cymbal
        return true;
    }
}

function highTomTomDrum(x, y) { // function that draws the high tom tom drums (the 2 small middle ones)

    fill(64, 40, 15);
    rect(x - httRodOffset, y + baseOffset, tomTomRodW, tomTomRodH);

    fill(163, 47, 29);
    ellipse(x, y + baseOffset, tomTomW, tomTomH);
    rect(x - baseOffset, y, tomTomBaseW, tomTomBaseH);

    fill(255, 245, 212);
    ellipse(x, y, tomTomW, tomTomH);

}

function floorTomTomDrum(x, y) { // function that draws the floor tom tom drum (the bigger left one)

    fill(64, 40, 15);
    rect(x - fRodOffset, y + fBaseOffsetY, fTomTomRodW, fTomTomRodH);

    fill(163, 47, 29);
    ellipse(x, y + fBaseOffsetY, fTomTomW, fTomTomH);
    rect(x - fBaseOffsetX, y, fTomTomBaseW, fTomTomBaseH);

    fill(255, 245, 212);
    ellipse(x, y, fTomTomW, fTomTomH);
}

function bassDrum() { // function that draws the bass drum (the big round middle one)

    bassDrumX = width / 2;
    bassDrumY = 2 * height / 3;
    
    fill(163, 47, 29);
    ellipse(bassDrumX, bassDrumY, bassDrumW + rimWidth, bassDrumW + rimWidth)
    
    fill(255, 245, 212);
    ellipse(bassDrumX, bassDrumY, bassDrumW, bassDrumW);

}

function snareDrum(x, y) { // function that draws the snare drum (flatter one on right)

    fill(64, 40, 15);
    rect(x - snareRodOffset, y + snareOffsetY, snareRodW, snareRodH);

    fill(163, 47, 29);
    ellipse(x, y + snareOffsetY, snareW, snareH);
    rect(x - snareOffsetX, y, snareBaseW, snareBaseH);

    fill(255, 245, 212);
    ellipse(x, y, snareW, snareH);

}

function cymbals(x, y, z) { // function that draws the cymbals

    fill(64, 40, 15);
    rect(cymbalX1[0] - cymbalOffset, cymbalX1[1] + cymbalH, cymbalRodW, cymbalRodH);
    rect(cymbalX2[0] - cymbalOffset, cymbalX2[1] + cymbalH, cymbalRodW, cymbalRodH);
    fill(255, 227, 46);
    triangle(x[0], x[1], y[0], y[1], z[0], z[1]);

}

For my sonic sketch, I decided to build an interactive drum set. My drum set is comprised of a bass drum, 2 high tom-tom drums, a snare drum, a floor tom-tom drum, and 2 cymbals (as labeled in the diagram).

The drum set took a while to create, as I wanted to create separate functions for each drum in order to simplify my draw function. After drawing the drums, I went to freesound.org and found audio files to match each of the drums. I then implemented the logic within mousePressed() to make sure that the sound played when the mouse clicked on the corresponding drum. I really enjoyed this project because it felt very systematic to program and it encouraged me to utilize various functions as well as ample amounts of logic. In addition, getting to learn how to preload sounds was beneficial for my development as a programmer!

sketch

/*  Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project 10
*/
//I decided to take some old code from a lab that I bugged out on accident
// and use it as a visually interesting way to generate random y VALS
// PLEASE CLICK ON CANVAS AND DRAG mouseX

var balls = [200]
var ball = {
  x: balls,
  y: 0,
  speed: 0,
  display: function() {
  fill(255); ellipse(this.x, this.y, 20, 20);
},
  move: function() {
    this.y = this.y + this.speed;
    this.speed = this.speed + gravity;
},
  bounce: function() {
    if (this.y > height - 11) {
      this.speed = this.speed * -1;
    }
  }
};

var xarray = []
var yarray = []
var size = 0;


var gravity = 0.1;



function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 700);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    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);
    osc.amp(.1);
    osc.start();

    osc1 = new p5.TriOsc();
    osc1.freq(200);
    osc1.amp(.1);
    osc1.start();

    frameRate(10)
}


function draw() {
    // you can replace any of this with your own code:
    background(200);
    fill("yellow");
    size = 1

    //draw circle
    for (var i = 0; i < xarray.length; i += 1) {
        ellipse(xarray[i], yarray[i], size, size)
        size += 1
        if (size > 20) {
          size = 1
        }
        yarray.push(random(10, height - 10));
        osc1.freq(yarray[i])


    }

    if (xarray.length > 5 || yarray.length > 5) {
        xarray.shift();
        yarray.shift();
    }
    //draw line
    stroke("orange");
    strokeWeight(4);
    for (var i = 0; i <= xarray.length; i += 1) {
        //for (var n = 0; n <= yarray.length; n += 1){}     ADD THIS IN FOR A COOL EFFECT (DONT FORGET TO CHANGE Y VALS)
            line (xarray[i], yarray[i], xarray[i+1], yarray[i+1]);

        }

    ball.display();
    ball.move();
    ball.bounce();

    osc.freq(-ball.y);
    osc.amp();


}




function mouseDragged() {
    xarray.push(mouseX);
    yarray.push(mouseY);

}

function mousePressed() {
    xarray = []
    yarray = []


}

I lowered the frame rate to give the randomness less of an oppressive sound. I kept the gradual rise and fall of the sphere in the center as a constant element amidst the randomness.