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

Why SOPA will have Zero effect on Piracy

SOPA Blacklisted domains will be blocked by denying DNS requests. DNS (Domain Name System) is essentially a phone-book relating easy to remember words, to static Internet addresses. Just like in a phone-book, if you deny access to a record the web site’s IP address (phone number) will still work. The IP address will still continue to work without a DNS record. If users just use a different phone book, or write the address down somewhere else; they could still access the blocked websites like nothing has happened.

As a user you can write your own “phonebook” that is SOPA safe by editing your operating system’s hosts file. It’s essentially the same as writing a name and phone number down on a sticky note.
In windows this is in C:\windows\system32\drivers\etc\hosts
In Linux & Mac OSX it’s in /etc/hosts

Knowing this

  1. SOPA only affects DNS systems that the US Government can control.
  2. DNS is not required to access other machines across the Internet.
    – DNS is used as a human friendly way to get the address to a server’s location, and to choose a particular service on that server.
  3. While DNS names are required to access many web services using shared IP addresses, it doesn’t matter where you get an IP address for a DNS name just as long as that IP address is correct.
    – For SOPA blocked sites, a user can edit their hosts file to include the domain name and correct IP address.
  4. The users of the site could switch to an alternate DNS provider outside of SOPA’s control.
    – This is an easy 3 minute process that can be done to any OS or common household router. Here’s a guide from google, it can be adopted for any DNS provider.
  5. P2P Software systems used for piracy do not directly rely on DNS.
    – While DNS names may be used to connect to trackers, it’s not a requirement. Nearly all systems just use IP address to interconnect users, completely bypassing DNS.

While initially this will thwart some forms of piracy,  these pirates will very quickly move to alternative pre-existing SOPA safe methods that do not rely on DNS. Some of these include offshore USENET, IRC + DCC, Bittorrent, WASTE, and Freenet

The only people who will be hurt by this legislation are those who are not actually involved with piracy.

Filed under: How To,Random

How to load more content whilst scrolling: like bing image search

This is great for any page that could contain potentially an large to infinite amount of data. When a user scrolls to the bottom of the page, in the background a javascript-server connection will feed more data to the page.

User facing page

<!DOCTYPE html>
<title>Scroll Forever</title>
border: 1px solid black;
padding: 10px;
border: 1px solid black;
padding: 10px;
background-color: green;
marquee-style: slide;
<script type="text/javascript" src=""></script>
<script type="text/javascript">
index = 0; //The current position of the index
perPage = 40 - 1; //The count per page, we minus one because arrays start at zero.
contentSelector = "#content"; //The CSS selector for the content block
postSelector = ".bump"; //The CSS selector for each post
loadingSelector = ".loading"; //The CSS selector for the loading block
handle = "handle.php"; //The php file to get the JSON data from

function loadData(i,p,clear){
$(loadingSelector).show(); //Show the loading screen
a = typeof(clear) != 'undefined' ? clear : false; //Set to clear the page as false as the default.
$.getJSON(handle, //jQuery function to get JSON data.
"index": i, //The index
"max": p, //The maximum posts per load
function(data){ //Take the JSON data
var html = "";
var postId = 0;
while(postId < data.length){
html += "<div class='bump'>" + data[postId] + "</div>"; //Do something with it
if(clear == true){
html += "<div class='loading'>Loading...</div>";
index = index + perPage; //Advance the index to match the new data.
} else {
index = index + perPage; //Advance the index to match the new data.


loadData(index,perPage); //Initially load the data

var w = $(window); //Saving the context to a shorthand variable.
w.scroll(function(){ //When we scroll
if(w.scrollTop() + w.height() == $(document).height()){ //Check if the position is the bottom of the page
loadData(index,perPage); // If so, then we will load more data.
<body>The idea of this demo is to be able to continuously scroll through data.

For the demo, the javascript will grab new JSON data from a php file that just gives a larger and larger number.

<div id="content">

Back end (save as handle.php)

Handle.php - Part of the Continueous Scroll demo.
Spits a continueously larger and larger number in an array.

if(isset($_REQUEST['index']) && isset($_REQUEST['max'])){
$start = $_REQUEST['index'];
$max = $_REQUEST['max'];
$i = 0;
$data = array();
while( $i <= $max ){
$data[$i] = $i + $start; //Heres a random note. I found that if you don't know how much you're expecting to get, it's eaiser to just start the array at zero. You can put a unique ID within a sub level array.
} else {
$data = array(
"Error" => "Please post with the index and max argument",
echo json_encode($data);

One idea for a modification, is to begin loading when the user is scrolled halfway through the newly loaded content. This way even newer content is loaded before the user even sees the end.

Click here to see it in action

Filed under: How To,Web Development

Removing or Modifying svn client passwords

For how common this task is, it’s incredibly hard to find on Google. You’ll need to remember this for anytime you want to change your user account, password, or just delete your account from your subversion client. This works in Netbeans, RabbitVCS, and a majority of other subversion clients that just connect with the svn package.

  1. Open a terminal (This can be done in a file manager’s search tool, but I’ll show you how in a terminal so you get a better idea of how it works)
  2. enter the command
    grep -r "<HOSTNAME>" ~/.subversion/auth/

    (Replace <HOSTNAME> with the SVN’s hostname, so for instance would be Grep searches inside files for whatever you put in the ” “. The -r makes it recursive, so it will look through all the files in all folders deeper than where it was directed to at the end of the line.

  3. You will get a line that looks something like this
    /home/vincent/.subversion/auth/svn.simple/888c928072e9643a13b38ea43532896d:<> My Projects

    You want the path before the “:”

  4. Now just enter
    rm /home/vincent/.subversion/auth/svn.simple/888c928072e9643a13b38ea43532896d

    to remove the file, and have subversion forget your account credentials.

  5. Next time you run your subversion, you will be asked for your username and password again.

Filed under: How To,Linux
Tags: , , , ,