Creators: Drumtown!

Today in Creators we played a bit more with sound and built a type of musical instrument using Javascript.  The project was called “Drum Town” because it was based on the idea of a music mad building and when you wake up one of the resident’s by clicking their window, they would play a particular sound every time some traffic cruised past.  Each floor consists of people with the same instrument.  What else would they do?

Play the finished Project by clicking here! – Make sure to TURN UP THE SOUND!!

drumtown

How did we build it?

The awesome thing at this stage is that the group has become so competent at javascript that as soon as we had the idea, some people put their heads down and started building without a whole lot of direction!!  I won’t go into the ins and outs here, but the code is up on our repository and you can go through it!

Interesting bits!

Some of the interesting bits of the project are:

  1. Classes:
    As usual we needed a few classes – this time we used classes for the Car and the Window.  The basic idea was to have a car moving at a constant speed left to right and to have windows that play a sound whenever the car goes past.
  2. Unicode Sprite Characters!
    We learned that now text is getting more and more graphical – we can see it on our phones with emoticons.  There are a large amount of emoticons in standard fonts and if you enable the windows keyboard (right-click taskbar and choose “Show Keyboard” you get on onscreen keyboard that can type all sorts of characters – we used these for our cars:  and could write crazy looking code like:  this.carList= [🚗, 🚚, 🚛, 🚕, 🚜]; .  This will make it REALLY easy for us to write games with nice looking costumes without messing with images.
  3. Sounds:
    I handed out some sounds for us but you can put whatever sounds you like in your own version.  I got my sounds from this website here which has TONS of free instrument sounds!  We named the sounds 0-6.wav to make it easier to use loops to reference them.

That’s it!  Take a read through the code, I finished it off a little before pushing (mainly added a title).  It would be great to make your own version with a different them and a different set of sounds perhaps.  Also – maybe this can give you ideas for other types of musical instrument that you can create, perhaps with a completely different model. Have fun with the emoticons too 📯🎷🎺🎸🎻!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s