7th Annual Moog Circuit Bending Challenge 2018
 |  | ||
 | |||
|
This year I decided to finish the circuit bend that I was going to do last year. Unfortunately my keytar idea was being over engineered and taking to much time, so I switch to making the "Phoney Werkstatt". This year after looking at toys in Walmart that I might want to bend, I decided to re-visit the keytar idea. | |||
 | |||
|
The Bill of materials has two columns. The Min column assumes you already have a device that you can use. The Max column assumes that you need to by a device. I bought a no contract smart phone from Walmart to replace my old phone. I used the old phone in this build. Not listed above is a bit of hot glue and a piece of an old broken jewel CD case. The quantity of materials purchased would allow you to build a couple of keytars for the $70 limit if you have several old devices. | |||
 |
 |
 |
 |
|
The MDF 'shelf' material is dense enough to give the body of the keytar enough weight. I used my electric guitar as a template and cut a rough outline. The main feature of the outline that needs to be correct is the guitar strap hook locations. Originally I was going to use two "large headed" wood screws, but in the end I used cup hooks to secure the strap. The 1 inch wide wooden dowel was cut to around 24 inches in length (roughly in two). The left over piece of the MDF board was cut in half providing two 12 inch long pieces. Using the dowel as a spacer the two piece are glued to the 'body'. | |||
 |
 |
 |
 |
|
The poitions of the keyboard and phone are marked on the dowel. Using the spacers that are glued to the body, mark the height of the spacers on the dowel so that a flat area can be cut at each end of the dowel where the wooden platforms that hold the phone and keyboard can be glued. The guitar body can be used he dowel whilst it is being cut. |
|||
 |
 |
 |
 |
|
On the thin sheet of MDF, trace around the camera and keyboard. Cut the shapes out. Look at the back of the camera and mark and cutout holes needed for speaker etc. Check the back of the keyboard and mark and cutout holes for switch and battery if needed. |
|||
 |
 |
 |
 |
|
Mark the half way point of the 1 inch dowel. The pack of dowels have various sizes. Pich one of the larger diameter ones and find a drill bit that is the same size. Drill a hole through the 1 inch dowel. Position the 1 inch dowel on the guitar body and mark and drill a hole through the body. Cut a length of the smaller dowel that will be used as the peg to hold the 'wand'. It needs to be about about 3 inches long. Glue the peg into the guitar body. |
|||
 |
 |
 |
 |
|
From the pack of dowels, select a dowel and cut off two pieces about an inch in length. Drill holes either side of the wand peg and glue the pieces in so that about half an inch of dowel is poking out each side. These are the rubber band posts. Take a rubber band and loop itself through itself so that it is attached to one of the posts. |
|||
 |
 |
 |
 |
|
Take a cup hook and screw it into the body and the end of the channel that holds the wand. Place the wand on the peg and drill into the end of the wand using the hook as a guide so that you can glue in another piece of dowel at each end of the wand. Use the rubber band and the cuphook to hold the wand in place. |
|||
The web page that is loaded into the phone browser is keytar.htm. The web page is an HTML document that mostly contains Javascript. The software is basically two parts, the User interface and the sound engine. Use the following links to see what the code looks like.
- User Interface
- What you see on the screen is a canvas object. A canvas is an html object that supports drawing functions. User input is handled by the mouse, touch and keyboard interfaces. See below. The main controls that you see are the xycontrol and the gridcontrol.
- Guitar mode
- What you see on the screen in guitar mode is defined by an array of controls. The guitar uses two xycontrols a gridcontrol and a fingerboard control. The fingerboard control processes the keyboard input when inguitar mode.
- Keytar mode
- What you see on the screen in keytar mode is defined by an array of controls. Keytar mode uses two xycontrols and a keyboardcontrol. The keyboardcontrol processes the keyboard input when in keytar mode (Not guitar mode).
- Sound Engine
- The main sound engine component is a "synth". A synth is a software object that contains an oscillator (VCO), a filter (VCF) a low frequency oscillator (LFO). These components are connected in a classic subtractive synthesizer format. There are several Gain objects (VCA) that implement the vca functionality and modulation control.
- Mouse control
- Mouse down, mouse up and mouse move events are processed. The events as converted to start(), end() and move() calls. The 'stroke' function keeps track of start-move-end sequences.
- Touch control
- Touch start, touch changed events are converted into start(), end() and move() calls to the stroke function. The stroke function keeps track of when a finger touches the screen then moves and finally lifts off. The touch interface can support multiple fingers being used at the same time.
- Keyboard control
- Keydown and keyup events are used to control the sound engine.
- Canvas - what you see.
- The keytar program draws an html canvas object that fills the screen. What you see is drawn on the canvas by one of the 'controls' See above.
- Synth input
- Each synth object has a doinput function. The midi data is decoded and if the synth accepts the data it will return true. As an example if this is a note On and the synth is currently playing a different note it will return false. This allows the note On to be sent to another synth.
- Send to all synths
- ProcessMidi takes midi data and locates a synth object to process it. In the keytar page there are six synth objects created by calling Basicsynth()
The installation of the software is done by using the browser to go to the page http://moddersandrockers.com/moogfest2018. On most browsers, the page will be cached. This means that when the phone has no network connection the page will be displayed from the cache.
If you want to make your own changes to the keytar source, there are a number of ways to do this.
- Run the software on your computer. Load the page from the link and use the browsers "Save page as" to make a copy on your computer. You can start the web page by just launching it from explorer. The web page does not access the internet when it is running.
- When running on a phone or tablet, it is not normally possible to save and edit web pages. If your phone has an SD card, you can download the page using your computer and the by using USB put it on the SD card in the phone. Browsers such as Chrome allow you to use file:///sdcard/bending/keytar.htm to load the page assuming you saved it in a folder called "bending".
- You can install your own web server on your computer. Download the page source onto your web site and then use the phone to get it from your site. You can make changes to your copy and see how they work on your phone. The Xampp package makes installing your own web server relatively easy.
 |
Xampp is an easy to install package that includes the Apache Web server. |
 |
One of the Web Audio resources I use is at Web Audio Api |