![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
// 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.
