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