Back to Top
Jambourine Presentation

➜ Jambourine Final

Regular tambourine and customizable tambourine all working. Sequencer basics are working and in place. Recording may be implemented in the future.

PhoneGap Messages and Information Logging

This week I attempted to view the log information being written to the console, but either I am looking in the wrong place or I am doing something incorrectly. To start, here is my code:

When I run my application in the emulator, the alert message pops up just fine, so at least I know there are no errors that cause my program to stop running, which is good.

In Firebug, when I try to view the console information, it seems I am getting an error of a missing semicolon within the phonegap API itself! I think I must be using the Firebug console incorrectly or something. I don’t see any blaringly obvious missing semicolons in my code, and I doubt the phonegap API would have such an error.

As for getting the console to log when my functions are being called, I did a really simple example of that with my init() function. 

When I run the page, you can see the message in the console.

I implemented this logging at the beginning of all my functions, and am a little confused as to why I don’t see the console logging anything for the onDeviceReady function… perhaps this has to do with the error I mentioned above.

Jambourine Update: Main Screen and Sound

The source code for my project can be downloaded here.

As far as design and experimenting with the PhoneGap API goes, so far so good. I am pretty displeased with the speed that my MP3 is played back (for now, tapping the screen triggers playback)… there seems to be a significant lag between the time a button is pushed and the time when it executes the button’s function. Perhaps once I figure out the accelerometer, I can anticipate moves somewhat, and also account for the lag. 

Jambourine basic wireframes.

➜ Wireframing and Mobile Templates (Android)
➜ Wireframing and Mobile Templates (iPhone)
Tambourine Machine Project Planning

We are entering week 3 of class right now, so that leaves 4 weeks for production of my fabulous tambourine machine. 

Week Four

Technical requirements: sample tambourine sounds, create audio files, create images necessary for interface (can interface be practically image free and rather done in CSS for faster loading?), style sheet completion, learn PhoneGap API for accelerometer, figure out how to trigger sound (possibile investigation of MIDI generation and playback through JavaScript… will something like this work with PhoneGap?)

Week Five

Technical requirements: detect different gestures from the accelerometer, allow user to program sounds for different gestures, detect screen taps (??).

Week Six

Technical requirements: PhoneGap API for media recording and saving, testing for speed and smooth functionality, trouble shooting.

Week Seven

Technical requirements: program sequence recording, multiple tracks, test limits of audio and delays, find solutions accordingly. (Is this possible with recorded sounds from phone? What about sampled sounds? What about MIDI only?)

I changed the coloring and wording of the basic PhoneGap example with Firebug to see what it would look like with a little more holiday cheer!

Conclusion: too much holiday cheer is hard on the eyes.

Jamming on the Tambourine!

For this class I would like to make a tambourine app that allows you not only to jam on the tambourine and a few other musical instruments when you shake or tap your phone, but you’ll also be able to record your own sounds and noises to play as well.

There are several tambourine and drum kind of apps out there (Tambourine!, Tambourine, Cowbell Plus, etc.) but I think what would make this app unique is if you were able to record your own sounds to play. This would be rather whimsical and entertaining! Using the accelerometer in the phone, perhaps different gestures could be programmed to make different sounds, allowing the user to make multiple sounds just by changing their movement. This would make you more of a one man band than a backup percussionist!

Taking it one step further (time permitting!), it would be really awesome if you could record 8 beats of gestures, assign them to an instrument, and have that track repeat. Then, you could record 8 more beats of gestures, assign them a different instrument, and have that track play over the first… in effect, creating a simple drum machine/sequencer.

In order to make this happen, I’d need to use the accelerometer and audio capture/playback, both of which are on the syllabus. Investigating the possibility of using MIDI would be something extra, I think, but it certainly would be worth looking into. I’d also need to keep track of programmed sequences. I think it would be OK if these were not saved over multiple sessions (this is supposed to be a casual app, not for serious music making), so perhaps that will ease this issue.  

Finally, I want to make this app because I love drum machines and music. I also enjoy a good laugh, and I am hoping this app would encourage users to be a little goofy while jamming away on their customized tambourine.

➜ First PhoneGap Application

A first attempt at a PhoneGap application. When you click the button, it switches my picture back and forth. 

Need to Know

This thesis project will be presented as a dynamic, interactive web site. My plan is to use MySQL/PHP on the backend (familiarity) and JavaScript/HTML5/CSS3 on the front end. Since I am only vaguely familiar with HTML5 and modern web technologies, learning these is a must.

I am hoping to get into a class where I can learn those things, but if not, I will learn it on my own (through tons of online resources, books and experimentation).

As far as the content goes, I am going to try and focus on creating completely two project-based curriculums. I intend to have some of the basics overlap, so I can work on developing the core curriculum and demonstrating how one basic tutorial can be expanded upon in multiple ways. 

As of right now, I am thinking those subjects will be music and art. I will need to contact people in those fields for their regular input and assessment of concepts and ease of understanding. I also would love to be in touch with the Math department because programming uses a lot of math and I would love to know more about the math curriculum and how concepts are taught.

Additional people that I would like to be in touch with about this project:

Books to read:

In the photos I’ve posted here I have made a very quick, rough sketch of what the web interface might look like. You would have two different views based on what kind of user you are. If you are a teacher, you would have information and logs of your own tutorials and curriculums, your classes, your students and also access to core and project-based curriculums for you to use or adapt. 

As a student, you will log in and be able to see your syllabus and classwork, keep track of where you left off last, and keep relevant notes (either to yourself or relating to the topic or class discussions) to refer to at a later date.

This week I would really like to talk to members of my department about what they think might additionally be useful, both to teachers and to students. Several people in my department use tutorials online already, and I’m wondering if this kind of resource would appeal to them and what they might add/take away based on their own experiences. I’d also ask the people in my department who don’t use tutorials if a tool like this would appeal to them at all, and if not, what kinds of additions/functionality would inspire them to start using it in their classrooms?

Below are a few ideas for courses that are meant to be semester-long high school courses. They are heavily influenced by my coursework here at ITP, and where appropriate I have noted the classes where the ideas were introduced to me. As you can see, each class focuses on one project to be built, and then there is a core curriculum that gives students the knowledge to tools to create the final project. I need to think more about how these core curriculums can overlap, and possibly come up with some new projects that can make better use of overlapping knowledge. Because these are semester long classes, it might be nice to pair them together, so that if students started one course, they could choose to complete a second that would build on the skills they have already acquired.

Build a Sequencer (inspired by Pattern in the Noise Class)

Students create a musical sequencer, and the class could culminate in a casual performance using their instruments. 

The programming for a sequencer is fairly simple. High school students can understand the math it requires, and when given an example could probably build upon it. The physical components are simple as well. You can do a lot with switches, which are the simplest electrical components ever! There is also a lot of room to be creative with switches, which could be made out of magnets, conductive fabric, or any metal/conductive objects. Their simplicity in concept but open-ended possibilities in execution make the technology quickly accessible for beginners. 

Students would learn about the following technologies:

Build a Blog

In this class, students would create a customized Tumblr interface tailor-made for their own creative purposes. If a student is interested in creative writing, they could create a blog that would showcase their stories. If a student loves Photography, the could create a portfolio site that would showcase their photos. The class could culminate in a working blog with, say, 10 posts to kick off your new platform for showcasing your work, interests, or hobbies.

Students would learn the following technologies:

Interactive Artwork

In this class students would create interactive artwork that changes dynamically based on user presence and interaction. This dynamic changing would be detected and controlled with simple arduino sensors. Students would create a piece of artwork (either programmed or collaged from analog/digital sources), and use Processing or some other visual programming language (perhaps open frameworks?) to read camera data and have it affect their artwork in a variety of ways. This class would culminate in a gallery show of all the student artwork. 

Students would learn the following:

Non-linear Storytelling (Inspired by GSTS)

Students will work on a project that tells a story in a non-linear way (think choose your own adventure). Students will develop stories and shoot footage/prepare materials for said story throughout the semester. Visual programming languages such as Max or PureData will be used to launch video clips and control storytelling based on user input and interaction. Another possibility is HTML5 for interactive video and elements online. This class will culminate with an informal film screening/exhibit where students can share their films/stories with an audience who will direct the outcome of the story. 

Students will learn the following in this class:

Networked Gaming (Inspired by Understanding Networks)

In this class students will work together to either build a computer-based online game or a multi-player game with physical controls. When working to create the physical game, students will create custom controllers that connect to the network and control their part of the multi-player game. When working on the computer game, students will use new web technologies to create real time interactions within their game over the internet. This course could culminate in a game festival, where students could come and play each other’s games. Previous programming experience required, or the willingness to actively explore programming concepts outside of class in order to quickly come up to speed. (I think that since some students will have some experience, it is not unreasonable to list a prerequisite for one or two of the courses. I also think that if students without the prerequisite are interested in the course that should be fine, but they should be aware that they will need to be particularly motivated to learn outside of the classroom, of course with their teacher’s support.)

Students will learn the following:

ITP-PD: How to pull data from the projects database using the serving pages

All of the scripts we used to create our automatic portfolio generator and our projects gallery are available for you to use, too!

When you load one of the serving scripts in a browser, it will display information from the database in JSON format. You can read in and parse this information for use in your own projects. 

All the serving scripts are currently located here:

Some pages do not require any arguments in order to serve you data from the projects database. These “standalone” serving scripts are as follows:

get_all_keywords.php This script returns all the keywords in the database, and the number of times each keyword appears in the database. The list is ordered alphabetically.

get_projects.php This script returns every project in the entire database. It provides all the basic information: project id, title, description, main image. This script can be given arguments to customize your search and limit the results (see below).

get_recent_class_titles.php returns the 100 most recent titles of classes entered into the database. Repeats account for multiple sections of a given class.

get_venues_list.php returns all the venues that projects may have been associated, in order from most recent to oldest venue.

The rest of the serving scripts require arguments to execute.

get_basic_portfolio.php?netid=abc123 will return basic project information for all projects by the specified user (specify a user by entering their netid).

get_name.php?projectid=1111 will return all student’s names associated with a given a project id.

get_project_classes.php?projectid=1111 will return all the classes a project is associated with when given a project id.

get_project_detail.php?projectid=1111 will return details of a project when given a project id.

get_project_media.php?projectid=1111 will return all the media files associated with a project when given a project id. Note that the media files live in and this url will need to be tacked on to the media name in order for you to link to it or display it in a web browser.

get_project_venues.php?projectid=1111 returns all venues associated with a project when given a project id.

get_projects.php?numdisplay=5&pagenumber=1 returns a subset of projects where numdisplay is the number of projects you want the script to return and pagenumber is how many pages into the results you want to go (1 if you want the first n number of pages, 2 if you want the second group, etc.).

get_projects.php?numdisplay=5&pagenumber=1&keyword=soul returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and keyword is the word you want the projects to be tagged with.

get_projects.php?numdisplay=5&pagenumber=1&title=loop returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and title is the word you want the project’s title to contain.

get_projects.php?numdisplay=5&pagenumber=1&name=greg returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and name is the name of the person who is associated with the project.

get_projects.php?keyword=soul returns all the projects that have been tagged with the given keyword.

get_projects.php?title=loop returns all the projects that have the given word in their title.

get_projects.php?name=greg returns all the projects that are associated with a person with the given name.