The basic idea of the framework is to provide some conventions for making compositional code modular and reusable. There are some other features that I am interested in developing further as well such as a MVC-like interaction between raw “aesthetic data” and the instruments/performers in a musical piece.

For more info, check out the KnacK project page².

It is a collaborative web-based application for creating music with others in an intuitive way.

I would love to enhance this application in the future by making the sound and interactions much more interesting and applicable to a touchscreen interface.

You can read more about it, and see a short video of it in action on the tulpasynth page².

For the past 4 years I have studied Computer Science, web development, and a bit of the intersection of these fields with music/audio technology. What I am interested in currently is the emerging potential that I see for web-based collaborative audio and music applications. I hope to make a contribution that will strengthen or expand this intersection and that is currently what I am working towards.

For some interesting readings in this area, see Mozilla’s proposed Audio Data API, and the W3C Audio Group‘s Web Audio API.

Thank you to everyone who has helped me along my way.

The application I’ve developed is published at bingo-board.org. It allows for anyone to set up a bingo board and to use a web browser to “call” the numbers, while other web browsers are watching the board.

We used this at my family’s party this past New Year’s and it worked out quite well. I connected a computer to the television in the living room and set up a laptop in the dining room which both displayed the board of numbers in the browser window. My father, who enjoys calling the bingo numbers, used a small laptop to click on the numbers as he called them.

The software is running on Google’s App Engine, which allows for immediate scalability should the Bingo Association of Great Britain start using it or something. It is written using Django, in particular, django-nonrel which allows for the Django application to be run on GAE. On top of Django is django-tastypie, which creates a REST interface for the application. On the frontend, I am using Backbone.js (my new love), and CSS3. You can read more about the CSS3 techniques that I experimented with for this application here.

There are some issues with the software that I hope to resolve before next year, if you are interested in the project it is hosted on GitHub: https://github.com/colinsullivan/bingo-board.

You can read more about the application itself here and here.

Here is a video of the effects as they currently stand. You can see that when a number is called, it animates and then continues to animate until another is called.

What is happening is pretty awesome. Each “bingo marker” has a .disabled class initially:

.bingo_marker.disabled {
    opacity: 0.4;
    background: #BAB49D;
    border: none;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
}

If a marker has been called, it will have an .enabled class on it:

.bingo_marker.enabled {
    -webkit-animation-name: bounceEnable;
    -webkit-animation-duration: .25s;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3D4C42), color-stop(0.3, #3D4C42), to(black));
    border: 1px solid white;
    opacity: 1;
}

@-webkit-keyframes 'bounceEnable' {
    from {
        -webkit-transform: scale(1);
        -webkit-animation-timing-function: ease-in-out;
    }
    33% {
        -webkit-transform: scale(1.5);
        -webkit-animation-timing-function: ease-in-out;

    }
    66% {
        -webkit-transform: scale(.75);
        -webkit-animation-timing-function: ease-in-out;
    }
    75% {
        -webkit-transform: scale(1.10);
        -webkit-animation-timing-function: ease-in-out;
    }
    to {
        -webkit-transform: scale(1);
        -webkit-animation-timing-function: ease-in-out;
    }
}

The animation here is the quick initial bounce when a number is activated (most visible above when a marker turns from red to black). This is achieved by a simple keyframe animation on the scale attribute of the element. Before I discovered scale, I tried animating all of the attributes including font-size a while back which didn’t work out so well.

The last animation that is visible in the video is the long, repeating bounce for whichever marker is the last enabled. For this, like all of the above animations, I just add a class, lastEnabled:

.bingo_marker.lastEnabled {
    background: -webkit-gradient(
        linear, 0% 100%, 0% 0%,
        from(#FF0000),
        color-stop(0.4, #FF0000),
        to(#FF7D7F));
    -webkit-animation-name: lastEnabled;
    -webkit-animation-duration: 2.25s;
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    z-index: 102;
}

@-webkit-keyframes 'lastEnabled' {
    from {
        -webkit-transform: scale(1);
    }
    10% {
        -webkit-transform: scale(1.5);

    }
    20% {
        -webkit-transform: scale(.75);
    }
    30% {
        -webkit-transform: scale(1.30);
    }
    to {
        -webkit-transform: scale(1);
    }
}

As you can see, this class merely changes the color of the marker and begins a repeating animation, once again on the scale attribute.

Another animation that I experimented with, but ended up removing, was the following:

This effect was quite fun to figure out how to achieve, although it may not look all that pleasing. I wanted to figure out how to move that “caution tape” looking background without using any images. In order to create the “caution tape” look, I wrote a little SVG that generates these diagonal stripes:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <g style="fill-opacity:1;fill: #FFFF00;" transform="rotate(-45 50 50)">
    <rect x="-50%" y="-20%" height="5%" width="150%" />
    <rect x="-50%" y="-10%" height="5%" width="150%"/>
    <rect x="-50%" y="0" height="5%" width="150%"/>
    <rect x="-50%" y="10%" height="5%" width="150%"/>
    <rect x="-50%" y="20%" height="5%" width="150%"/>
    <rect x="-50%" y="30%" height="5%" width="150%"/>
    <rect x="-50%" y="40%" height="5%" width="150%"/>
    <rect x="-50%" y="50%" height="5%" width="150%"/>
    <rect x="-50%" y="60%" height="5%" width="150%"/>
    <rect x="-50%" y="70%" height="5%" width="150%"/>
    <rect x="-50%" y="80%" height="5%" width="150%"/>
    <rect x="-50%" y="90%" height="5%" width="150%"/>
    <rect x="-50%" y="100%" height="5%" width="150%"/>
    <rect x="-50%" y="110%" height="5%" width="150%"/>
    <rect x="-50%" y="120%" height="5%" width="150%"/>
    <rect x="-50%" y="130%" height="5%" width="150%"/>
    <rect x="-50%" y="140%" height="5%" width="150%"/>
    <rect x="-50%" y="150%" height="5%" width="150%"/>
    <rect x="-50%" y="160%" height="5%" width="150%"/>
    <rect x="-50%" y="170%" height="5%" width="150%"/>
    <rect x="-50%" y="180%" height="5%" width="150%"/>
  </g>
</svg>

These stripes are then loaded into that “background” element as the background-image:

#last_enabled_background {
    background: black;
    background-image: url(../svg/stripes.svg);
    background-repeat: repeat;
    ...
}

Since the bars are already at a diagonal, all I need to do now is move them continuously:

#last_enabled_background {
    -webkit-animation-name: moveBorder;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
@-webkit-keyframes 'moveBorder' {
    from {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
    to {
        background-position: 0% 0%;
    }
}

Which worked great

If anyone feels strongly about the development of the interface for bingo-board.org, please feel free to contact me on GitHub: https://github.com/colinsullivan/bingo-board.

Here is my recent work on this piece, I hope you enjoy listening to it and reading about my process. There are many aspects that I would like to explore in the future but these are my findings thus far.

An Exploration of Algorithmic Composition via the Fibonacci Sequence (.pdf)
A brief exploration of the history and theory behind algorithmic music composition and a discussion of the details of my own composition where I utilized the Fibonacci sequence.

An Exploration of Algorithmic Composition: Technical Details (.pdf)
In this short paper I discuss the various technologies I have used in the development of this piece and how each of these tools helped with the development of the composition.

When I write my final paper for this project, i’ll be sure to include all of the nitty-gritty. For now, try some of these jams with your peanut butter:

An algorithmically generated riff based on the Fibonacci numbers. Mapped to the pitch set with missing semitones that are multiples of 21.

Sort of atonal jam
Listen:

An algorithmically generated riff based on the Fibonacci numbers. Then mapped to the blues scale pitch set.

Blues Jam
Listen:

This semester, I am working with Prof. Curtis Bahn in a much greater capacity, and will be hopefully be developing this idea into the composition that I have always wanted it to be.

I am taking an Independent Study with Bahn in “Algorithmic Music Composition Theory”, as well as one of his classes, “Advanced Computer Music”. I will be working on the same project for both courses, but in much different capacities. My project proposal is below, and can be found here in pdf format.

Objective

To build a more complex composition based upon my previous “Fibbass” sketch by looking at many aspects in greater detail.

Goals

• Study the history/theory of computer-aided music and algorithmic compositions (Independent Study)
  • Study the work done in the intersection of musical composition and mathematical structures
  • Using myself as a case study, utilize this knowledge to build upon my compositional ideas
  • Develop theories and a plan for a more complex composition based my previous “Fibbass” sketch
• Actually implement this composition on the computer (Advanced Computer Music)
  • Utilize the computer to generate various alternatives to rapidly build the composition
  • Develop/utilize more complex timbres and sound effects
• Document all work in a comprehensive paper

Details

Listed above there are two major categories, each of which I hope to spend equal time on throughout the course of the semester. The first focuses on the history and theory behind the composition, while the second focuses more on the composition itself and the implementation of the piece.

The Extreme Blue program is IBM’s way of capturing interns before they are attracted to startups and showing them that working for IBM could be just as cool as a dot-com. Their basic process is to bring together a bunch of what they call “top talent” and allow them to innovate on an end-to-end solution over the summer.

The innovation part, for me at least, came in the lack of technical requirements. I was allowed to utilize whatever technologies I saw fit, and so I did. The mentors also understood very much that this was our chance to develop an innovative solution, and they provided an excellent venue to do just that. We were given guidance if we started to drift off track, but otherwise they were mainly available for questions and constructive criticisms.

One of my favorite things about the mentors during Extreme Blue was that they maintained an attitude of “anything is possible”. Whenever the intern team would make a suggestion, the mentors would help us realize how it could be implemented. They would never doubt that something could be done, it was just a matter of what we had time for, and where our priorities lied.

Additionally, a more well known aspect of Extreme Blue is the opportunities to present to and speak with well-known executives within IBM. We got the chance to pitch our project to many executives from the Austin campus as well as from other US locations, including CEO Sam Palmisano.

I would recommend Extreme Blue to anyone who has the opportunity to take part. It has certainly changed my view of IBM for the better, and gave me the opportunity to learn how to succeed at IBM, principles that I’m sure will translate elsewhere in my life.

Here is a more detailed description of the technical details of my work for Extreme Blue.