User:1sfoerster/enes100/fall2013/p2music

Individual Pages
Connor's Wikiversity Page

Rachel's Wikiversity Page

Olivia's Wikiversity Page

Problem Statement (Finish description)

 * 1) Figured out how to select tones/beats in a synth
 * 2) Designed and calculated board layout
 * 3) Designed prototype box to house monitor/electronics
 * 4) Found a starting point for writing visualization code in processing

Conceive
To have a usable musical instrument for the National Electrons Museum in the Spring

To develop skills at HCC

These skills include developing a wiring harness, learning about alternate input mechanisms, working MIDI interface and using sound as output (instead of LED's or motors), and working with plexiglass

To involve others

Build HCC engineering lab tools/materials/techniques in making plexiglass cases.

MIDI

 * MIDI Tutorial
 * Hex Dec Converter
 * General MIDI sound set
 * MIDI Messages
 * Essentials of the MIDI protocol
 * Guide to MIDI software specs
 * Sample MIDI Code

Fritzing

 * fritzing.org - Fritzing part format
 * fritzing.org - Fritzing graphing standards
 * fritzing.org - Fritzing fonts and templates download
 * fritzing.org - Fritzing sketch file format
 * Pashless - Editding an SVG image for a fritzing part using inksape
 * Fritzing blog - New parts editor
 * wonderhowto.com - Fritzing circut boards
 * Bertrand Le Roy - Buidling a fritzing component
 * YouTube - Parts editor

Google SketchUp

 * SketchUp Tutorial
 * Creating a MakerBot 3D Model in SketchUp Walk Through
 * SketchUp Skills - Dimension Tool

Fritzing
For this project, one of the goals is to have an accurate diagram of the beat bearing system and that will only be possible if the correct parts are in the diagram. The Fritzing program does not have the Papilio Platform Papilio One or the Papilio Platform LogicStart Metawing V1.2 in their database.

FPGA stands for Field Programmable Gate Array. FPGA is a circuit designed to be programmed by a customer or designer after it has been manufactured. A papilio uses FPGA in order to become a digital circuit.

According to fritzing, a file is made up of a metadata file, and up to four SVG files. There are also multiple image files since there are multiple ways to view an image in fritzing (breadboard, schematic, and pcb). Fritzing uses specific font and templates for their parts which are available for download here. In addition, since there are so many files associated with making one part, many of the websites gave instructions on how to name/organize files to make it easier to find them.

Once all of your files are ready, they are uploaded into fritzing and there you can determine where the pins and connections should be placed.

As the project moved forward, we decided to put the Fritzing aspect of the project on hold. However, the research we have done is a good starting point which can be used in the future.

Block Diagram
We decided that having a computer connect to the flat-screen monitor would be easier than having a meta-wing and VGA output. Additionaly, we removed unessecary arrows from the diagram and added arrows depicting the flow of information through the stystem.

Board design
The design of the board was broken up into calculating the accurate measurements so that it sat well on top of the flat screen monitor and was spaced correctly. These calculations then needed to be used for designing the template for the washer systems in SketchUp. The calculations and design of the board then came together and we achieved a blueprint of the board which is seen below.

SketchUp
Unfamiliarity with Google SketchUp required learning about the software to then be able to draw the template that would be printed and used as a guide for the washer systems when the board is constructed.

These videos were helpful when learning about converting SketchUp files to STL files that could then be transported to Makerware software and then printed. Also just for learning how to use SketchUp and the functions of all the tools.


 * Creating a MakerBot 3D Model in SketchUp Walk Through
 * SketchUp Skills - Dimension Tool

Important tools to utilize while drawing in SketchUp:

 File:Push Pull tool.JPG|This tool will allow you to create depth in the shapes drawn. The same tool can then be used to push through a 3D figure and create holes in the object. File:Eraser tool.JPG|It is important to click on the lines of an object when trying to erase, otherwise SketchUp does not recognize the function. File:Orbit tool.JPG|The orbit tool is essential when using SketchUp, for it is the key to viewing any side of your drawing. For example, if you wanted to push a hole into the opposite side of the cube drawn, you have to use the orbit tool to rotate the drawing and have my view on the side I want to work with. File:Pan Tool.JPG|This tool is convenient when your drawing is large, or if you plan to have multiple drawings. 

SketchUp will be an integral part of pushing this project forward when constructing the board and specifically the four rows of washer systems.

MakerBot Template Design
First identifying the screen and its dimensions was done, and figuring out the space available for the four washer system sections was done before drawing in SketchUp was worked on.

 File:Monitor screen.JPG|These were are the dimensions of the screen we will be using for our project. File:Height Measurement of Washer.JPG|The washer height will determine the thickness of the template for the washer systems. File:Screen dimensions spacing.JPG|The equal dimensions that the four rows including the washer systems and plexiglass runners will occupy. File:Diagram of screen with runners.JPG|Tis is a drawing of the board with the plexiglass runners. 

Next the calculations were done to figure what numbers to use when drawing in SketchUp to use throughout the template design. This included knowing the dimensions for the plexiglass runners, rectangular prism of template, and the washer system spacing.

 File:Washer spacing picture.JPG|This is a drawing of the length vertically that the washer systems will be, influencing the space in between the plexiglass runners they will be able to occupy. The total space is 11/8" (9/8 + 1/8 + 1/8). File:Final dimensions of plexiglass board.JPG|This is a drawing of the final the dimensions of the plexiglass board we calculated. The plexiglass runners will be 1 1/32" and the space for the washer systems will be 1 3/8". File:Correct and final drawing of washer system spacing.JPG|This is the drawing of the correct spacing of the washer systems (there will be eight in a row) after doing the correct calculation. The space between each washer system will be 6/32". File:Overhead drawing of my design in sketchUp.JPG|This is the drawing of how we planned to draw the washer halves in SketchUp. A straight line on the top and bottom of the top face of the rectangular prism, to use as a guide of where to have the top and bottom washer half touch. 

Using the designs that were created, the template could be drawn in SketchUp. These pictures show the first stage of the drawings, which have all the correct dimensions inputed, but the not the holes pushed through were the washer halves will sit.

 File:Birds Eye View of SketchUp drawing.png|Top view of the drawing of the template in SketchUp with the right side washer halves attempted to be pushed through to create holes. File:Side View Drawing Revised SketchUp.png|Side view of the drawing. File:Top View of Drawing.png|Top view of drawing done in SketchUp. The dimensions of all lines and figures are accurate. 

These pictures show the current point in the SketchUp drawing process, and where we are stand at the end of Project 2. The holes have been pushed through the rectangular prism template, in the correct spots, and the dimensions are accurate.

 File:Finished Sketch-Up Design Top.png|After figuring out how to properly push the washer halves through the drawing we successfully made the holes into the prism, with the correct dimensions. This is a top view of the drawing in SketchUp. File:Finished Sketch-Up Design Bottom.png|This is a bottom view of the finished drawing with the correct dimensions and the holes pushed through in the washer half slots. The next step is to convert the drawing to Makerware software as an STL file. 

The next step is to adjust the drawing to fit on the 6 inch MakerBot platform, seeing as the current design in SketchUp is 13 3/8 long. The idea is to cut the drawing in half, and then split the template work on the screen in two parts, still yielding the same results the template is supposed to give us when constructing the board and glueing down the washer systems. This will be the first thing we do as we start Project 3, still working on the Music project.

Inches to Millimeters Conversion Table
This table has all of the conversions from inches to millimeters to obtain a more accurate drawing in SketchUp. The calculations were all done in inches, so it was important to get values in millimeters that we could input into SketchUp during the drawing process of the template.

The Keyboard
Since we had not been successful in programming the arduino and MIDI shield to play the keyboard, we decided to attached a smaller keyboard with a MIDI cable to the keyboard we were using to see if they would communicate with each other. The MIDI "in" side of the cable went into the MIDI in port of the main keyboard and the MIDI "out" cable went into the MIDI out port of the little keyboard. When they were both turned on and the volume of the little keyboard was turned down, it could be played and heard through the main keyboard's speakers. This meant that the main keyboard as well as the MIDI cable were functioning properly; thus the problem with programming was with the arduino or MIDI shield.

We switched the tone on the main keyboard to tone 10 (electronic organ 1)which resulted in a changed tone. It also worked if we changed the tone on the smaller keyboard.

Ultimately, we discovered the problem was with MIDI Shield. Apparently the solder was bridging multiple pins, therefore causing it to not work correctly. We were given a new MIDI shield which worked properly. This MIDI shield does not have the push buttons or potentiometers, but it still functions the same exact way.

The moral of the story: make sure that everything is soldered correctly!

Binary, Decimal, and Hexidecimal
In order for us to write the code for the arduino, we first had to learn about the code works. We discovered that binary numbers play a major role in programming MIDI. In the Mary Had A Little Lamb Code (see here) most of the code is comprised of a set of numbers. Below is an example of a portion of the code. These numbers are referring hex (0x) numbers.

Binary, decimal, and hex (short for hexadecimal) are all ways to write the same thing. We learned from this site that the "0x" indicates that the number is a hexadecimal number. The 90 which follows the 0x refers to the decimal; thus, 0x90 equals 10010000, or 8 bits of information.

Arudino Code
A table of common commands and their meanings

MIDI Code
We learned from a MIDI tutorial that there are 16 MIDI channels, meaning up to 16 instruments can be played at once.

The velocity value determines how loud the note is played.

In order to play two notes at once, simply have two "noteOn" lines in a row (see below).

The middle column of numbers in the code (0x4B, 0x50) correlate with a note on the keyboard. Their binary numbers are 01001011 and 01010000 respectively. Using different combinations of numbers are used to play different notes. Note values range from 0-127 (middle C = 60, C# = 61, D = 62, etc.).

According to the MIDI tutorial, the sounds use a "program change" message to indicate that a different instrument is being played. A program change contains one status byte and one data byte. A status byte is 1100 CCCC and one data byte is 0XXX XXXX. The MIDI channel (0-15) is XXXXXXX. It is important to note that once you determine the note you want to be played, you must convert it to a hex number. We used this site to convert to hex.

We used a General MIDI Level 1 Patch Map in order to determine what tone is used (piano, violin, space pad, etc.). For example, if we wanted to use xylophone tone we would look at the chart, determine the number (in this case, 14), and then convert it to hex (0E). We could then insert it into the code.

Programming the Keyboard
We uploaded the Mary Had A Little Lamb code onto the arduino and then attached the MIDI shield as well as the MIDI and USB cables. The song played (see video). We then uploaded the sample code which also played.

We wanted to start out programming something relativley simple so we chose Sail by AWOLNATION. We used the "synth strings" tone (number 51 on the patch map). The song is in E flat minor which means an E flat and A flat are needed for the opening chord. E flat is 75 on the keyboard and its hex number is 4B. A flat is 80, its hex number is 50. Note: The song is an octave higher than middle C.

Sail Code 1
The song played, but it was really soft and scratchy. The tempo was also faster than what we wanted. See video here. We split each second into two (each "t =" only had 4 noteOn's instead of 8) and re-uploaded. It still sounded very faint. We tried switching to tone map G (we were previously on tone map N) and it started playing normally. See here.

We then raised the note velocity to 60 so it would be louder. We tried going higher than 60 but the notes would just go silent. We then added the bass note (E flat).The bass E flat is number 39 with a hex number of 27. The code is below. It represents 8 measures of the song.

Sail Code 2
Video is here.

We also played the song in the normal piano tone. This created a much louder noise, even when the volume was down. Video is here.

Drum Code 1
To see the video, click here.

Serial Library
We also started learning about serial library which allows the arduino to send information back to the computer.

This is a tutorial on serial libraries.

Arrays
In addition to serial libraries, we also started researching on how to add an array to the code. We learned from a YouTube tutorial that an array is a list in which each item in the list has a number. The video's example of an array was a stack of papers and each paper has a number. If you want to select one paper, you would select the number it is assigned in the array. More information on arrays can be found here Below is a sample code taken from an tutorial which explains how an array works.

Code Two had an array to play a scale. Below is the section of the code with the array.

Idea 1
This idea was the initial idea. All of the electronics were underneath the board and monitor.

Idea 2
This idea improved on Idea 1 by reducing the amount of space underneath (once it was discovered that the electronics could fit in a smaller space) and adding a compartment on the side to store ball bearings.

Idea 3
The third idea eliminated the space underneath completely and moved all electronics to a compartment on the side of the board and monitor. This allowed access to the controls on the MIDI shield.

After the most recent wiring harness block diagram was created, the monitor no longer connects to the FPGA, but instead the MIDI Shield.

Monitor code
Two example sketches from Processing can be used to create a code for how the monitor will behave. A vertical line will travel from the left side to the right side of the monitor, triggering a circular flash of color underneath a washer if a ball bearing is sitting in it. Once the line reaches the right side, it will immediately start over at the left side.

This code, called SetupDraw, can represent the line that moves across the monitor.

Below is a screenshot of what the code looks like. The horizontal line moves from the bottom to the top at a steady rate. When it reaches the top, it starts over again at the bottom.

This code, called CreateGraphics, can be picked apart for the fading circles. In this code, the mouse creates the circles, but in the final code, the ball bearings will enable the circles and the moving line will create them.

Below is what the original CreateGraphics code looks like. White circles appeared where the mouse pointer was and slowly faded into the background.

Below is the first attempt at a combined code, formed by naming the setup and draw functions to unique names specific to the sketch they are part of, and then redefining the functions at the beginning.

This ran successfully without errors. The white circle follows the mouse, but leaves no fading circles in its trail. The moving line from SetupDraw is also not visible.

Next Steps

 * Write Arduino code specific to project
 * Construct board
 * Construct wiring harness
 * Write working monitor code