/* Cathy Dong
yinhuid
section D
project-10-Interactive Sonic Sketch
*/
var myOsc; //piano sound
var mySnd; //wave sound
var keyNum1 = 7; //lower key num
var keyNum2 = 5; //upper key num
var keyY = 0; //key y start from 0
var size = 20; //ball size
function preload() {
// load wave sound
mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sea.wav");
mySnd.setVolumn(0.1);
}
function setup() {
createCanvas(480, 360);
//call to use sound
useSound();
}
// piano sound
function soundSetup() { // setup for audio generation
myOsc = new p5.Oscillator();
// piano sound setting
myOsc.amp(5);
myOsc.freq(0);
myOsc.start();
}
function draw() {
background(0);
//draw piano
pianoDraw();
//draw yellow dot
pressDraw();
// play piano when pressed on
if (mouseIsPressed) {
mySnd.play();
// upper keys
if (mouseY < height / 3 * 2) {
var keyWidth = width / keyNum1 / 2;
var keyGap = width / keyNum1 / 4 * 3;
// upper 1
if (mouseX > keyGap & mouseX < keyGap + keyWidth) {
myOsc.freq(277.18);
}
//upper 2
else if (mouseX > keyGap * 2 + keyWidth / 2 & mouseX < keyGap * 2 + keyWidth * 1.5) {
myOsc.freq(311.13);
}
//upper 3
else if (mouseX > keyGap * 3 + keyWidth * 3 & mouseX < keyGap * 3 + keyWidth * 4) {
myOsc.freq(369.99);
}
//upper 4
else if (mouseX > keyGap * 4 + keyWidth * 3.5 & mouseX < keyGap * 4 + keyWidth * 4.5) {
myOsc.freq(415.3);
}
//upper 5
else if (mouseX > keyGap * 4 + keyWidth * 5.5 & mouseX < keyGap * 4 + keyWidth * 6.5) {
myOsc.freq(466.16);
}
}
// lower keys
else if (mouseY > height / 3 * 2) {
var keyWidth = width / keyNum1;
// lower 1
if (mouseX > 0 & mouseX < keyWidth) {
myOsc.freq(261.63);
}
// lower 2
else if (mouseX > keyWidth & mouseX < keyWidth * 2) {
myOsc.freq(293.66);
}
//lower 3
else if (mouseX > keyWidth * 2 & mouseX < keyWidth * 3) {
myOsc.freq(329.63);
}
//lower 4
else if (mouseX > keyWidth * 3 & mouseX < keyWidth * 4) {
myOsc.freq(349.23);
}
//lower 5
else if (mouseX > keyWidth * 4 & mouseX < keyWidth * 5) {
myOsc.freq(392.00);
}
//lower 6
else if (mouseX > keyWidth * 5 & mouseX < keyWidth * 6) {
myOsc.freq(440.00);
}
//lower 7
else if (mouseX > keyWidth * 6 & mouseX < width) {
myOsc.freq(493.88);
}
}
}
}
//draw mouse location as a yellow dot
function pressDraw() {
noStroke();
fill('yellow');
ellipse(mouseX, mouseY, size, size);
}
//draw piano keyboards
function pianoDraw(){
//lower keys
stroke(0);
strokeWeight(1);
fill(255);
for (var i = 0; i < keyNum1; i++) {
var keyWidth = width / keyNum1;
var keyX = i * keyWidth;
var keyHeight = height;
rect(keyX, keyY, keyWidth, keyHeight);
}
//upper keys
fill(0);
for (var j = 0; j < keyNum2; j++) {
var keyWidth = width / keyNum1 / 2;
var keyGap = width / keyNum1 / 4 * 3;
var keyX = keyGap * (j + 1) + keyWidth * j / 2;
var keyHeight = height / 3 * 2;
//left two
if (j < 2) {
rect(keyX, keyY, keyWidth, keyHeight);
}
//right three
else {
var newX = keyX + keyWidth * 2;
rect(newX, keyY, keyWidth, keyHeight);
}
}
}
This project creates keyboard with different pitches as a piano. A beach setting sound with waves and laughter is added as background.