15-104: Introduction to Computing for Creative Practice

Deliverable 10 - Fall 2023

Due Saturday, November 11, 2023 by 11:59PM

PREPARING YOUR HANDIN FOLDER...

FIRST: Create a folder or subdirectory in your 15-104 working area on your computer or in your Andrew private folder for handin-10. You will put all of your work inside this folder and then compress or zip it to create handin-10.zip to submit to Autolab.

Conceptual Questions

In this part of the deliverable, you will download this Word file that contains 4 questions about concepts taught in class. You may download it anywhere on your computer. You should fill in your answers in the spaces provided, and include your name, andrewID and section letter at the top of page 1.

Once you are finished with this part of the deliverable, print/save it as a PDF and store this PDF in your handin-10 folder with the name andrewID-10-concepts.pdf. For example, if your andrewID is acarnegie, then you would save the PDF under the name acarnegie-10-concepts.pdf.

Technical Assignment 10: Music Player (3 points)

In this assignment, you will create a Player Piano on the canvas that can play a tune stored in a pair of arrays to create an automated music player.

Start with the special template template2023-p5all.zip that includes additional code for using sound files. Rename the folder andrewID-10-assignment. Move it to inside of the handin-10 folder. DO NOT EDIT THE ZIP FILE DIRECTLY--- UNCOMPRESS IT FIRST!

Use the following code from class to start your sketch.js file:

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

function soundSetup() { 
    osc = new p5.Oscillator();
    osc.amp(0.25);
    osc.setType('square');  // pick which waveform you'd like to use
    osc.start();
}

// Frequencies in Hz for each of the white and black keys, left to right
var white_freqs = [261.625, 293.665, 329.63, 349.23, 392, 440, 493.88, 523.25];
var black_freqs = [277, 311, 0, 370, 415, 466];   // index 2 not used

function draw() {
    // draw a simple piano
    background(200);
    //black keys
    fill(0);
    stroke(255);
    rect(25, 0, 50, 100);
    rect(75, 0, 50, 100);
    rect(175, 0, 50, 100);
    rect(225, 0, 50, 100);
    rect(275, 0, 50, 100);
    //white keys
    fill(255);
    stroke(0);
    for (var i = 0; i < 8; i++) {
        rect(i*50, 100, 50, 100);
    }
    //stop key
    fill(255, 0, 0);
    stroke(255, 0, 0);
    rect(325, 0, 50, 100);
}

function mousePressed() {
    // 1. when a user clicks on a white key, the oscillator
    // is set to the corresponding frequency in white_freqs
    // 2. when a user clicks on a black key, the oscillator
    // is set to the corresponding frequency in black_freqs
    // 3. when a user clicks on the red key, the oscillator
    // is turned off

    if (mouseY >= 100 && mouseY <= 200 &&
        mouseX >= 0 && mouseX < 400) {
        // pressed a white key
        osc.start();
        keynum = floor(mouseX / 50);
        osc.freq(white_freqs[keynum]);
    }
    else if (mouseY >= 0 && mouseY < 100 && 
       mouseX >= 25 && mouseX < 375) {
        // pressed a black or red key
        keynum = floor((mouseX-25) / 50);
        if (keynum == 6) {
            osc.stop();
        }
        else if (keynum != 2) {
            osc.start();
            osc.freq(black_freqs[keynum]);
        }
    }
}

function mouseReleased() {
    osc.stop();
}

The code above draws the piano keys on the canvas as rectangles and plays notes as you click on the "keys".

Modify this sketch so that it plays a tune stored in two arrays, one for the pitches of the notes and one for the duration of the notes. The tunes are given below, with pitches shown as MIDI values and durations shown in beats. A value of 0 for a pitch means a rest (i.e. silence). As each note is played, you should highlight that key in yellow while it is playing.

Canvas image for a Player Piano

Here is a sample pair of arrays to use to test the program:

Pitch array:

[ 60, 60, 62, 60, 65, 64,  0, 60, 60, 62, 60, 67, 65, 0,
  60, 60, 72, 69, 65, 64, 62, 70, 70, 69, 65, 67, 65 ]

Duration array:

[ 3, 1, 4, 4, 4, 4, 4, 3, 1, 4, 4, 4, 4, 4,
  3, 1, 4, 4, 4, 4, 4, 3, 1, 4, 4, 4, 12 ]

One beat is equal to one frame for this program, so a note that lasts 8 beats will play for 8 frames before you move on to the next note. You should call the freq function only on the frame when a note starts. Do not call it on every single frame!

Here is the general idea:

For this version of the program you do not need interaction with the mouse, so remove the mousePressed and mouseReleased functions from this version of the program.
You will need two arrays obviously, one for pitches and one for durations. You can assume the arrays will be of the same length. You can set them with the given values directly, as shown above. You will not need the arrays for the frequencies of the white and black keys since you will use the MIDI values to get these frequencies.
You will need a variable that keeps track of the index of which note you are playing from the arrays, starting at 0.
You will need a counter that keeps track of how many frames a note has been playing. You will increment this by 1 for each frame that is drawn. (Remember that the draw function repeats itself, and each repetition is a frame.)
Once the counter reaches the duration of the current note, you should reset the counter and change the frequency of the oscillator to the pitch of the next note. (For a musical rest, you can turn off the oscillator.)
Once the entire tune is played, set the canvas to all black and stop the draw function from repeating itself.
Your draw function should not use loops. Each repetition of the draw function is meant to represent one beat of the tune. As draw repeats itself, you will progress through the tune.

Open-ended Project 10: Sonic Story

In this Project, you are asked to create a very short story with sound. We are expecting 15-30 seconds. You should have at least four simple “characters” in your story (e.g. a cloud, a bird, a train, etc.). The characters can be abstract and basic, no need for fine detail. The characters should move around the canvas and make their distinctive sound(s) when appropriate. You may include captions on the canvas to help tell the story but be sure they’re visible long enough to be readable (e.g. “The bird flew away as the train left the station.”). You can set the frame rate very low (e.g. 1) so that each frame is essentially one picture of the story.

Start with the special template template2023-p5all.zip that includes additional code for using sound files. Rename the folder andrewID-10-project. Move it to inside of the handin-10 folder. DO NOT EDIT THE ZIP FILE DIRECTLY--- UNCOMPRESS IT FIRST!

Use the system variable frameCount to trigger parts of your story. For example:

  if (frameCount >= 20 && frameCount < 25) { trainLeavesStation(); }

Suggestions

You can find lots of free sounds at freesound.org. You can also search for “sound effects” and find many sources. “Sound effects” can be interpreted broadly. The sounds can be spoken words, musical tones, animal sounds, natural sound, etc. No profanity, please.

Once you get a collection of sounds, you may wish to edit them or select the parts you want. We suggest using Audacity unless you already have a favorite audio editor. In Audacity, you can easily select the part of a sound that you want, and then use “File:Export Selected Audio…” to write the selection as a .wav file. You can use monophonic or stereo sounds. Audacity gives you many other options, e.g. you can adjust the volume (amplitude) of a sound.

As with images, load all sounds in preload() so that the sounds are actually available to play when you try to play them.

Remember: If you use sound files, you will need to run a local server to make the sounds accessible to the browser running your sketch. Put the sound files in the same directory/folder as index.html and sketch.js. See APPENDIX below for more details.

Requirements

Write a comment in your program that explains the general story line. Hand in the program on Autolab with the sound files you are using. Keep the sound files very short. They should be generally 1-3 seconds at most per sound.

Handing in your work

Your handin folder handin-10 should have the folders described above.

You will zip up the handin-10 folder and submit this to Autolab. Your overall folder organization should look something like this (indentation indicates subfolders):

  handin-10
    andrewID-10-assignment
      index.html
      sketch.js
    andrewID-10-concepts.pdf
    andrewID-10-project
      index.html
      sketch.js
      additional sound files here

Once you are ready to submit, zip (compress) the handin-10 folder (which will likely be named handin-10.zip) and hand in the ZIP FILE into the Deliverable 10 submission area on Autolab. Once you handin, check your handin history and click on the magnifying glass to look at what you submitted to make sure it looks right. IF YOU SUBMIT THE WRONG ZIP FILE, YOU RISK GETTTING A 0 ON THIS DELIVERABLE!

You may submit as many times as you’d like (in case you find inspiration and want to improve your work) up until the deadline. If you submit up to one day late, even if you submitted on time, you will be marked late. We only grade the final submission you upload to us via Autolab.

APPENDIX: Setting up a local web server

As demonstrated in class, you have the ability to load a sound file into your program just as you load an image. However, unlike images, there is no functional equivalent to imgur.com that allow you to reference your images online without your browser blocking their content in your sketches. So instead, you will need to run a local web server that doesn’t block audio content for your sketches.

The following webpage has information about a number of ways you can set up a local webserver:

https://github.com/processing/p5.js/wiki/Local-server

In class, we demonstrated using PHP to run a local web server on my Mac. If you have a Mac, you can see if this will work for you. If you have Windows, you can download PHP for Windows (get the thread-safe zip file for x64 or x86 depending on your processor. Once you unzip the file, you will need to go to your environment settings to update the PATH variable to include the location of your PHP folder so that you can run php from any directory.

Or you might try the Web Server for Chrome extension which is the fastest way to set up a local web server, if it works for you.

Here are the steps we followed for the PHP web server.

Go to the folder (directory) where your index.html, sketch.js, and audio file(s) are. On a Mac, you can open a Terminal window and navigate there using the cd command (cd = change directory). For example, if your project is in 15104 folder on your Desktop, in a subfolder named project-10, which has a subfolder named andrewID-10-project, then you’d open the Terminal application and then type:
cd Desktop/15104/project-10/andrewID-10-project
Then you start the web server as follows:
php -S localhost:8000
You should see something like this:
PHP 7.1.33 Development Server started at
Listening on http://localhost:8000
Document root is /Users/YourID/Desktop/15104/project-10/andrewID-10-project
Press Ctrl-C to quit.
The web server remains running until you hit Control and C together.
Now open a browser and enter the URL:
http://localhost:8000/
This will cause the web server to load the index.html file which will run your sketch that resides in the same directory as where you launched the web server. REMEMBER: in this situation, you don’t double-click index.html to run your program.