Monday, 27 August 2012

Modelling Twitr_janus face puppet mask from clay

This is the model for the face of Twitr_janus' puppet head. It will be cast in some sort of modelling material, then recreated as a latex skin. The face will need to be extended into a larger overall skin for the whole of Twitr_janus' head. Most of the rest of the head will be built up later manually over positive moulding (formers).  The face is the main focus of people's attention and needs to be moulded to ensure the design is recreated accurately. For the other parts of the head, like the throat and cranium the latex can be rough, as no-one really pays any real scrutiny to these areas

  Twitr_janus face mask
I have been thinking how people might react to different types of head. I had originally wanted to make the head from oak, for an automaton/ creepy old toy look. I had also been looking up various heads for ideas. (see below). 

When drawing possible ideas, I found I kept coming back to heads that would look "real". They might look odd, but they all kept coming out as looking like flesh and skin (although they all seemed to have slightly strange heads. I then decided to make the head from latex.

Twitr_janus modelling sketchTwitr_janus head designs

Of my designs, the one I liked the most (top right in the sketch above) was roughed out again in simple lines to get the feel for creating it in 3d (the sketch on the right).

To get a feel for the dimensions, I also made an initial 3d tiny model, in plasticine (below, about 3-4cm tall)
Twitr_janus model

A lump of clay was slapped onto a convenient turntable. This is an old cake-decorating turntable. (The clear acrylic thing on the right with modelling tools on it.)
Twitr_janus clays and tools

Twitr_janus face mask

Twitr_janus face mask

Twitr_janus face mask

Twitr_janus face mask

Monday, 20 August 2012

Twitr_janus head designs

I can't decide quite what the vibe should be for Twitr_janus.  It should be slightly unsettling or distrubing, but not too evil. More like just a tiny bit weird, than downright scary...
Twitr_janus head designs

Twitr_janus head designs
Twitr_janus head designs

Twitr_janus head designs

Friday, 17 August 2012

Pimping a Google spreadsheet form, to create a bespoke control form with sliders

Link here to download complete Processing sketch on Github

This expands on the previous post, which explained how to use the RSS feed from a published spreadsheet to extract remote control data from that feed and use it in a Processing sketch.

Here this idea is extended to use a Google form, instead of typing into the sheet. This has the advantage that all the values to be sent can be prepared at once, then the form submitted.  It is still a bit clunky, but it does imporve it slightly. A mthod of controlling the inputs to submit data between fixed upper and lower values for both horizontal and vertical position variables is described below.

The Google spreadsheet showing form data and control data based on the last form entry

Twitr_janus Google spreadsheet

The values in the fields F2, G2 and H2 are the data that will be used remotely by the sketch.  The data in these fields are being constructed from the control character ¬ in E2, and the last instance of a form return from columns B (representing up/down eyeball data), C (representing left/right eyeball data) and D (speech text) for the Twitr_janus puppet.

The Google expression in cell F2 to return the last NUMERIC value of column B is...

=trim(E2&(FILTER( B2:B ; ROW(B2:B)=MAX(FILTER( ROW(B2:B) ; ISNUMBER(B2:B))))))

The Google expression in cell G2 to return the last NUMERIC value of column C is
=trim(E2&FILTER( C2:C ; ROW(C2:C)=MAX(FILTER( ROW(C2:C) ; ISNUMBER(C2:C)))))

and the Google expression in cell H2 that returns the last TEXT value of column D is
=trim(E2&FILTER( D2:D ; ROW(D2:D)=MAX(FILTER( ROW(D2:D) ; ISTEXT(D2:D)))))

The puppet is not yet built, so a surrogate virtual face is being used to react to the data. It is rather basic...

Twitr_janus' virtual face
The standard form for the spreadsheet was set up as usual and has text boxes. This is  slightly better than direct typing into the sheet, in that the 3 values can be sent in one go. However, it requires the user to have to know the values needed to make the eyeballs move and allows any value to be submitted, which will cause problems.

To get round this, the source code of the form needed to be adjusted. It looked like this:

Source code for standard Google form

The post method used here will only work if you are logged in as an editor of the sheet, but if you are logged in the form code can be used on any webpage. This means you can copy it and hack it, then embed on your page.

Source code for the pimped Google form

Original dull ole' Google form
Beautiful pimped form with
range limited sliders - nice!
The main thing to note here was the adjustments to the input controls for the two eyeball data fields.
The original input has the attribute type="text". This is shown on the left astext boxes.

The pimped version on the right (from an iPad screen) uses the attribute type ="range".

Range is an HTML5 feature that displays a slider.

It also allows for min and max attributes to be set, which limit the data entry to between those two values. Just what was needed!


Wednesday, 15 August 2012

Remote-control eyeballs: Using remote data from a published Google spreadsheet to position eyes with Processing

Twitr_janus virtual eyes

Above is shown a simple keyboard controlled Processing sketch in action. The arrow keys are used to position the way the eyes look. Each arrow key increases the value of a position variable for the irises and separately for the pupils of the eyes.

To remote control Twitr_janus' eyeballs, this was extended to send position data in 2 directions based on the values in a published google spreadsheet. The RSS feed is read and parsed by Processing to extract the data, which is used to compare the current horizontal and vertical positions with the target positions received. Processing runs a detection function that detects any difference, and reduces the difference by incrementally adjusting the current position and redrawing the eyes, until it can't detect a difference. A classic cybernetic negative feedback system!
Twitr_janus eyes controlled by Google spreadsheet data Twitr_janus eyes controlled by Google spreadsheet data

Left published Google spreadsheet. Right, same with eyes.

Twitr_janus virtual eyes Twitr_janus virtual eyes

Initially, so attempts at this went a bit haywire, due to over thinking the script to work out boundaries to stop the irises  and pupils doing strange things (left) or leaving the edge of the eyes (right).

This java applet demonstrates the direct keyboard sketch in action. This is freely available to download and copy at

It requires Java, so won't work on some devices, but if you have a Java plug-in, you can make the eyeballs move with the keyboard arrow keys...

Thursday, 9 August 2012

Twitr_janus is now speaking data sent from published google spreadsheet (via RSS feed to Processing)

Twitr_janus' brain can detect more data

I have finally managed to work out how to get Processing to respond to data live from a Google spreadsheet. The effect of this is that I can send separate multiple packets of data to Twitr_janus from a single source, to control multiple functions.

This is a significant development, as data can now be sent for different functions such as text to be spoken or positioning information for eyes, or other body movements.

I have made a successful test of sending 3 packets at once to the latest version of the Processing sketch (Twitr_janus' brain), which it can decode. These were:
  • A number that could be sent by Processing to the Arduino, to tell it how to position a control servo for an up/down eyeball movement 
  • A similar number that could be sent by Processing to the Arduino, to tell it how to position a control servo for an left/right eyeball movement 
  • A text string that was successfully received and converted to speech. 
Here is Twitr_janus's current voice, speaking data sent from a Google spreadsheet

download: mp3
"This is Twitr_janus speaking thoughts from a google spreadsheet"

download: mp3
This method of getting data from my master means I can speak much longer lines, and not worry about stop characters

download: mp3
"Oh yes! and the sending of other data from the same google spreadsheet works. This means my eyeballs could be made to move."

How Processing gets the data from a remote Google spreadsheet via RSS

Setting up the spreadsheet

A Google spreadsheet was set up to hold the test data. This had three data fields for ENTERING data:

  • eyeballUpDown (the field name says it all really) - data in A2 in the spreadsheet
  • eyeballLeftRight - data in B2 in the spreadsheet
  • text (this is the piece of text used to make Twitr_janus talk -  data in  C2 in the spreadsheet
It also had three corresponding for SENDING the data:
  • eyeballUpDown_stop (the same field name with _stop appended) -  data in E2 in the spreadsheet
  • eyeballLeftRight_stop -  data in  F2 in the spreadsheet
  • text _stop (this is the piece of text used to make Twitr_janus talk -  data in G2 in the spreadsheet
The difference between them the data in the entry cells A2-C2 and that in the sending cells E2-G2 by prefixing a control character to the contents of each field. The character is the same for each, and is based on the contents of field D2.

This character was there to be used by Processing to know where to parse the data in the RSS feed. The character can be any SINGLE character, but it must be something that is not going to to be present in the RSS feed output or in normal speech.
In this case the following character has been used: ¬ 

Making the spreadsheet publish to the web automatically and obtaining the RSS url

From the file menu, choose the "Publish to the Web" option. This make the data public as read only. You can still edit the original sheet and control share rights for edit, but the data is now available to use.
The checkbox must be checked for "Automatically republish when changes are made". This will force the RSS feed to refresh when you type in new data.

You then need to get the url for the RSS feed. Select RSS from the "Get a link to the published data" option, and copy the url.

What the RSS data looks like

The output of the RSS feed will be read as a string that looks like this:

How Processing extracts the data from the RSS feed

(You can download the entire Processing sketch for this particular version Twitr_janus  on Github:

The Processing sketch uses a function called getGssData (). Here it is, with some notes about the data extraction using parsing. I have not explained the rest of the function, nor the variable initialisations.

void getGssData ()
  // uses Google SpreadSheets API to get public tweets from twitr_janus_eyeballs published spreadsheet
gssTextCheck = gssText;

  println ("@@@");
  println ("[Start Inside printGSS]");
  println ();

  String [] texty = loadStrings(gssApiString);
The line above is using the Processing function 'loadStrings'. 'gssApiString' has been initialised earlier with the RSS feed URL (
and loading the raw XML output as a string into an array (texty[])

  String [] texty2 = split (texty[0], '¬'); //  pulling out data with stop character
The line above is using the Processing function 'split' to break down the feed text based upon the special stop character '¬'. It is creating an array (texty2[]) which will have 5 values in it, because the feed has four of these characters in it, which are splitting the feed string into 5 sections.

The values are:
  • texty2[0] = contents of everything before the '¬' in cell D2
  • texty2[1] = contents of everything after that and before the '¬' in cell E2
  • texty2[2] = contents of everything after that and before the '¬' in cell  F2
  • texty2[3] =  contents of everything after that and before the '¬' in cell  G2
  • texty2[4] =  contents of everything after the '¬' in cell G2

  String [] texty3 = split (texty2[4], '<'); // get rid of trailing text after <
The line above finally gets  texty2[4] (= the contents of everything after the '¬' in cell G2) and splits it based on the '<' tag in XML, which is the character that follow the contents of G2. This leaves the text from cell G2 which is set as the variable gssText in the line below:
  gssText = texty3[0];

  gssTextLength= gssText.length();

The lines below do a similar thing to extract the contents out of E2
  // @@@@@@@@@@@@@@@@
  String [] texty4 = split (texty2[2], ',');
  gssEyeballUpDown = int (texty4 [0]);
  print ("gssEyeballUpDown = ");
  println (gssEyeballUpDown);
  println ();
Finally the lines below do a similar thing to extract the contents out of F2
  // @@@@@@@@@@@@@@@@
  String [] texty5 = split (texty2[3],',');
  gssEyeballLeftRight = int (texty5 [0]);
  print ("gssEyeballLeftRight = ");
  println (gssEyeballLeftRight);
  println ();
  // @@@@@@@@@@@@@@@@
  //print ("texty= ");
  //println (texty);
  println ();
  //print ("texty2[2]= ");
  //println (texty2[2]);
  println ();
  //print ("texty2[3]= ");
  //println (texty2[3]);
  println ();
  print ("gssText = ");
  println (gssText);
  println ();
  println ();
   // following lines return the contents of tweet check (last new tweet)

  println ("[End Inside getGSS]");
  println ("@@@");
  println ();

  if (gssText.equals(gssTextCheck)==false)
    println ("inside GSS checking IF");
    print (gssText);
    println ("");
    print (gssTextCheck);
    println ("@");

Advantages of using Google spreadsheets to send data

Although this is a similar method as having Twitr_janus listen for tweets, using a spreadsheet has advantages, mainly because there is much more control over the RSS feed format than there is the Twitter API. This means:
  • Several fields of data can be changed in a spreadsheet simultaneously, by using multi-cell cut and paste. So if the left/right and up/down position of eyeballs needed to be changed simultaneously, this could be done in one paste action.
  • By prefixing the data in control fields with an unusual stop character, the Processing command that is parsing the text, will not get confused by common punctuation used in tweets. Notably commas and "quote marks", are used by the Twitter API as field delimiters, and these cause parsing issues truncating the message unexpectedly. The Google method eliminates this.
  • The maximum number of calls in a set time to Google spreadsheet RSS feeds appears to be much higher than Twitter's API. This allows Twitr_janus's brain to check much more frequently (an improvement from about every 28 seconds maximum with Twitter API, to every 5 seconds or faster with the Google feed) 
  • It is probably possible to write a javascript gadget that will write to Google spreadsheet cells in a more interactive way (such as an onscreen slider that writes values to the cells)
This took a lot of coffee and about 7 hours of brainache...

Download this version of Twitr_janus Processing sketch on Github:

Monday, 6 August 2012

Turning a Twitter profile picture into a real-life 3d custom figure

Over on Instructables, I have posted the complete how to for making a Twitter avatar image into a 3d figure, using modelling, moulding, casting and hand painting.

Been embargoed for a while, because it was a present for someone leaving work.

I have finally written it up.

The full Instructable shows the steps in detail, including:

Modelling in plasticine...

Moulding in silicon latex using simple domestic waste as mould containments...

How to cut out mould sections directly into latex without the need for mould section separators...

Using good old hot-glue as a moulding material...
And finally applying layered finishing with emulsion paint, PVA, marker pen and artists' felt tip pens.

Sunday, 5 August 2012

A self-contained relay circuit unit

Schematic and circuit unit

Having got the relay circuit to work on the testbed breadboard, it was time to build it into a unit...

Here's the schematic and the finished board together.
Relay circuit

The relay circuit is very simple. This relay uses a 5V voltage to trigger the switchover. The transistor has no current flowing as default, which means the output power voltage is sent to one connector (middle right block).
Applying a signal voltage HIGH to the input, causes a current to flow in the transistor and therefore through the relay switching coil. This changes the power voltage to the alternate relay output pin.


There are two separate circuits in a relay. There is a high current power switched circuit, which here is 12V. There is also a coil circuit that switches this power voltage from one output to another. Here the switch circuit is driven at 5V.

The earth of the two relay circuits should be connected or natural differences in voltage levels can cause unexpected problems.

Relay circuit Relay circuit

Completed circuit unit

Relay circuit Relay circuit
The left hand image shows the circuit in it's final form on the board with connectors. The red indicates power voltages with black as earth.

The left hand connectors are the coil circuit power in, the coil earth and an earth connector for the power circuit linked to the coil earth.
The right hand connectors are for the power supply voltage (top, all red), the power voltage with signal switched on (also all red), and power voltage with signal off (black and red), respectively.

The right hand image shows the underside with connectors and mounting screws.

The top, black connector block is for the signal in.

This unit is now ready to be deployed as required.