Realtime Shared Musical Keyboard

Speed Of Arts is a Real Time Shared musical keyboard. It’s powered by a web socket server, and some nifty Midi JavaScript libraries. The idea is to give the user an instrument that allows them broad artistic freedom, and gives them the ability to interact with anyone around the world musically, without getting in the way. I also want it to be visually interesting.

In it’s current form, when you connect to the website you will be provided with two options. One to join the public room, or to start your own private room. If you join the public room, you ‘ll be greeted with a familiar musical keyboard, a list of available sounds, and a graphical display. If you’re on your phone you can tap the keyboard. If you’re a musician, you can plug in a midi instrument and begin playing. If you’re at your desktop, your keyboard is transformed into an instrument. Pressing + and – will allow you to adjust your octave, while the home row and the row above allows you to play notes.

I believe that Speed Of Arts provides a valuable service to musicians and students of music. Speed Of Arts connects people effortlessly in a way that’s anonymous but musically inclined. You don’t have a picture, or a name of whoever is at the other end. But you know they’re there, and they see you as well.

I hope to expand Speed Of Arts to provide more services and meaningful interactions between players. To try Speed Of Arts yourself, go to

Twitchy the Robot

Play with Twitchy View the Source on GitHub

Twitchy the Robot is a two part project consisting of a live stream, and a GitHub code project. Viewers of the live stream are able to control the robot (Twitchy) by typing commands into chat.

The Live Stream

Twitch the Robot is a live stream that gives viewers a unique ability to interact with what they are seeing. Twitchy is a fun robot, and I provide twitchy with an interesting environment for viewers to interact with. As the robot is a simple grabber, it leaves me with a broad number of options to provide my viewers with an interesting experience. And it works, the second day I received 71 followers which is great for a new streamer on Twitch.

The Robotic Arm

Twitchy’s arm is a OWI Robotic Arm, with a USB Interface Kit. Together these components can be purchased for about $100. The arm has no feedback mechanism, however the gearboxes contain torque limiters to prevent gear damage. When the torque limiters activate, they sound an audible click. A concern of mine with providing remote access to the robot arm to strangers on the internet, was the damage they could do to the motors and gearboxes if they chose to drive continuously in one direction. Even with the limiter, they could wear out the mechanism. To limit wear, I attached a microphone to the arm and set a trigger in the python script that activates when the Root-Mean-Square of the microphone data hits a set threshold.

The USB Interface Kit does not support Linux out of the box, however maxinbjohn on GitHub made a Linux driver with some sample code which made interfacing with the arm super easy. Starting with his sample code, I expanded it to include safety limits. There is an audio listener that activates the above mentioned trigger, it runs on a separate thread. A second thread watches active motors, and disables them when they have run their allotted time.

Twitch Connectivity

Connecting the arm to Twitch was the easy part, thanks to work done by LynnAU on GitHub. They created a basic twitch bot that connects to’s IRC server with Socks and listens for commands, meanwhile keeping with twitch’s PING requirements. All I needed to do was to expand the code to trigger arm functions when commands come through the channel.


Play with Twitchy

I keep twitchy online when I’m home, you can come in and play with him. If he’s not online, watch past broadcasts and swing by later.

Play with Twitchy

Filed under: Projects
Tags: , , ,

Beware of the Swarm

Oh no! There is an alien swarm attacking earth! We need skilled pilots to stop this attack!

Beware of the Swarm is an Indy developed game by Vincent Prime for Man on the Moon Studio. It’s developed in Unity 3D for SteamVR. Requires that you have motion controllers.

Play the old HTML5 Demo!

If you’re interested in supporting the development of the game financially or by sharing your skills, please contact me.

HTML5 Controls

  • Pitch: Mouse Up & Down
  • Roll: Mouse Right & Left
  • Strafe: A & D or Left and Right
  • Thrust: W & S or Forward and Back
  • Fire: Primary Mouse
  • Menu: Escape

In Development

  • Upgradeable Weapons
    • Homing Missiles
    • Laser
    • Explosives
  • High Score List
  • Other Enemy Types
    • Motherships
    • Battleships
  • Other Locations

Release Notes

Alpha Release

  • Basic Flight Controls
  • Swarming Enemy AI
  • Kinetic Weapon

Displaying your Photospheres on your website

View the example page View the Source on Github Download the Library

To simplify adding a photosphere to your website, I created the “Photosphere” library found in the above github repository.
Start by linking the required libraries in the following order

<script type="text/javascript" src="lib/three.min.js"></script>
<script type="text/javascript" src="lib/Detector.js"></script>
<script type="text/javascript" src="lib/OrbitControls.js"></script>
<script type="text/javascript" src="lib/Photosphere.js"></script>

Next you’ll need to style the element containing the photosphere, it will have the ID #canvas-photosphere.

<style type="text/css">
#canvas-photosphere {
  position: fixed;
  top: 0;
  left: 0;

Setup the detector to alert users with incompatable browsers.

<script type="text/javascript">
if (!Detector.webgl) {

After the close of the if statement, you’ll add the photosphere initalizer.

<script type="text/javascript">
if (!Detector.webgl) {

A quick tip to improve your results, rescale the photosphere into a square where the width and height are a power of two using Photoshop. I recommend 4096×4096. This isn’t required at all, as the software will automatically rescale, but it will improve loading speed and gives you have control over the rescaling method.

Backpack Laser Rifle

It all started from a toy “Xploderz” watergun, and a glass vase I found at the dollar store. The watergun wasn’t any good, but I thought the design looked pretty cool. I thought it would look cooler if the tube was actually glass and included a red Cold Cathode Florescent Lamp (CCFL) used for computer modding.

To mount the CCFL into the tube, I 3D printed a part that’ll snap onto the open end of the vase. It took a few generations to find that right “fit” that allowed the cap to snap on the glass lip, and around the CCFL.

Next step was to molest the watergun with a dremel, and remove any plastic I didn’t want. The CCFL and the Water gun was a little longer than one glass vase, plus I dropped & cracked the first vase that I found. So I had to go back to the dollar store and buy more, I got a few extras just in case. Found that two together were enough to have the tube hang out the back long enough for a stock to hold on the back end.  To support the glass tube, I fitted a copper pipe into the assembly which adds a nice steampunk flair.

The electronics in pieced together are fairly simple, I used lamp wire to connect a 12v SLA battery to the CCFL transformer. I have a momentary push switch that I fit in place of a trigger. I also have a 12v-5v step down circut ripped out of an old USB car charger to power a laser diode. There’s a better way, but this was still a prototyping stage, and I wanted to go modular for now.

Glued a cone to the tip, it hid the large hole in the front and focuses the beam and provides a place to mount the laser diode. Used krylon plastic primer on the water gun shell, taped off the handles, then used a metallic spray on the rest of the gun.

Now to start fitting the parts back together. To bring the power to the gun, I fed the wires through a metal cable sheath. A simple hose clamp kept the sheath from pulling through the hole. I had a couple problems, need to cover the butt in a way that supports the glass tube and the copper pipe. I used a small section of ABS pipe, and dremeled out a hole for the copper pipe. I also needed to support the front of the glass tube as it would sag down and looked funny. I found that a spray painted square of cardboard worked. I took the gun like this, with the battery in a leather pouch to Phoenix Comic Con Fan Fest 2015.

A good powerful laser generates a lot of heat, so you need a way to cool it down. There’s no room on the rifle itself for cooling, it would be too bulky and heavy to add a pump and radiator on the gun itself. So I set on building a backpack to hold the radiator, fan, and battery. I found some nice looking boards at my local hardware shop, planed and sanded them down to a nice and smooth finish, then fitted them around the components that I wanted inside the backpack. I also wanted a little more room above the battery for extra wires and circuitry. The radiator is an automotive heater core, chose it for it’s size and all metal construction. If I were to do this again, I would specifically choose a different type of wood what I picked up was too soft and was designed as fence board. Next time: plywood, or hardwood boards.

Used plywood for the back and front of the backpack, cut a hole on the front for the fan and radiator tubes. I finished it all up with Danish Oil to give a nice dark wood. I then cut holes in the side to allow air to pass in from behind the radiator, and to feed the wires. Added a hole, and routed around the back to mount a power switch to the face of the backpack. I also braized on a small copper pipe into the larger inlet of the radiator, this allows me to use the same size water hose for the in and out.

Added cabinet hinges and latches to secure the door, also added a copper knob to polish it off. Added a few LED’s into the battery compartment to add a “green” glow.

To finish the laser rifle off, I used water hose to connect the radiator to the side of the laser rifle. I textured the water hose with plastidip, then wrapped the hose in canvas. I stapled a sheet of canvas on the inside of the 3 openings in front of the battery compartment, so you can see a green glow but not directly look at the power source. I replaced the ABS butt with a block of wood that I hand shaped and fitted around the copper pipe and glass vase. I then made leather straps to support the glass tube, and cover the 3D printed parts suspending the CCFL lamp. Because my modifications removed some of the plastic supporting the top section of the gun, I used metal straps to secure the gun together. I also added a leather belt to the back of the backpack, and a leather strap around the laser so I can sling it around my shoulder. I wore the gun like this to Wild Wild West con 2016. The backpack was way too heavy, and the leather straps were too thin and weren’t supporting the weight well. The screws I used to secure the belt on were also getting loose, though a drop of boltlocker fixed that.

To improve the comfort of the gun, I created a much broader leather strap that crosses in front, and added a loop to the side of the backpack to clip the rifle too. Now I don’t need to have the strap, though that option is still there. Wore it this way to Phoenix Comic Con 2016.

The cone fell off at the convention, and I never did finish mounting the LED diode on the front of the gun. I decided I like the look without the cone, it’s more menacing so I just refinished the front of the gun. I’m considering the project done at this point, but there are a few changes I would like to incorporate if I find the time. I want to move the power switch to the blaster handle, so I don’t need to reach behind myself. I would also replace the SLA battery with a smaller lithium cell.

Filed under: Projects,Steampunk

Steampunk Gun

In this video series, I’m building a steampunk prop out of an old Ford F-100 fuel pump. Second video coming soon.

Filed under: Projects,Steampunk

Constructing an JavaScript/HTML5 Isometric Game Engine

I’ve been taking on the task of creating an isometric game engine displayed in HTML 5’s Canvas and ran primarily on JavaScript. So far the venture’s been pretty sucessful. The hardest part is remembering the simple algebraic formulas that goes behind scaling and transforming objects across the screen. When I’m finished I’ll likely release something that’s open source, though that’s when I’m finished and I’m no where near that yet.

Click here to play

Current Features

  • All JavaScript, CSS, and HTML. None of this requires flash or any special plugin
  • Runs on Android, should run in iOS.
  • Screen scales with your browser window.
  • Basic alert window
  • Basic win condition
  • Infinite layers over the map
  • Movement authenticated over the server
  • Map data received by the server
  • Pre-loader and Loading screen
  • Basic UI elements
  • Being built from the ground up to work for multi-player games.
  • The game’s tile set and tile image sizes can be changed by editing a single array.

Coming Soon

  • Change movement and positioning, so the character can move around freely and isn’t locked to a grid.
  • Allow for the user to hold down a button to move. Currently you have to tap the direction to move each block.
  • Reduse bandwidth and lag by adjusting how movement is handled in client-server communication.
  • Reduce bandwidth and lag by using WebSockets to poll.
  • Replace the tileset with a cool custom tileset.
  • Map to map teleportation.
  • Multi-player functionality.
  • Quest System
  • Character registration and creation.
  • AI systems for guided movement
  • AI systems for combat

Click here to play

My First WebGL application

About a week ago I begun to dig through a few WebGL frameworks. I tried GLGE, CopperLicht, and SceneJS. I went through a few tutorials in each, and then I decided to do something with SceneJS.

I wrote a PHP class that was a recursive backtracer maze generator (will post regarding this later), so what I did was create a second class that transforms the map data from the recursive backtracer and translate it into a 3D Scene.

So far it’s fairly simple, I have a premade set of prims for each wall, ceiling, and floor. Then I just run through the map cell by cell, cloaning the prims and then just adding the row number and column number to the X and Z positions.

The camera view is first person, but you can still walk through walls I haven’t learned how to keep that from happening yet.
I marked the end of the maze with a gold goblet.

Visit the application (Requires a WebGL browser)