On Monday and Tuesday last week I was one of a team of six who travelled to Cardiff for a ReacTickles/openFrameworks lab at the Touch Trust. I joined Joel Gethin Lewis, Memo Atken, Marek Bereza, Will Pearson and Ben Jones and together we produced a series of audio and visual interactions that were projected on the wall of the at the centre for the children to interact with. These were used as an extra level of playfulness and expression, developed to fit in with their existing activity routine.

The Touch Trust is a centre that offers creative, touch-based art, movement and dance programmes for individuals affected by Autism Spectrum Conditions (ASC) and Profound Learning Difficulties (PLD). I was introduced to ReacTickles at an openFrameworks lab at the V&A museum in February since then I’ve been keen to develop more interactive pieces for the project, to hopefully engage and help people affected by ASC or PLD as well as their family and carers.

Utilizing an inspire-play-create-appropriate methodology, the aim of the lab was to generate ideas for experiential interfaces that compliment the therapeutic activities offered at the Touch Trust. Central to ideation has been the inclusion of end users and those who care for them in a rapid process of playful co-creation in authentic, real world settings.

You can see a selection of photographs that document the positive results of the interactions we produced on the ReacTickles’ flickr page here.

While I was developing a recent project I needed to figure out how to use a multiply blend mode in openFrameworks. After a little research I discovered that it’s as simple
as setting the blend function in OpenGL. As openFrameworks uses OpenGL as a core graphics library it’s very easy to use OpenGL functions to create visual affects that go beyond the absolute basics.

All I needed to do to create a multiply effect was add the following two lines of code to the setup function. This enabled me to use OpenGL and calling the depth test allows OpenGL to configure itself to avoid any weird effects (although I’m basing that on what I’ve read as I haven’t excluded this code to test the effects yet).

glEnable(GL_DEPTH_TEST); // enable depth testing to avoid problems
glDepthFunc(GL_LEQUAL); // set the type of depth testing

Then in the draw function I enable OpenGL and call the glBlendFunc function and pass in two parameters to tell OpenGL how I want to treat the existing graphics and the new graphics. I then looped through my points and draw an ellipse for each one, using one of three colours which I set when the application first starts, these were hexadecimal equivalents of cyan, magenta and yellow which can blend together to create black/keyline (the K in CMYK). Finally I call the glDisable function to stop OpenGL from applying the blend mode to anything else I might want to draw.

glEnable(GL_BLEND); // enable blending
glBlendFunc(GL_DST_COLOR, GL_ZERO); // set the type of blend mode

for (int i = 0; i < NUM_BOIDS; i++) {
	ofSetColor(boids[i].colour);
	ofEllipse(boids[i].position.x, boids[i].position.y,
        minDistance, minDistance);
}

glDisable(GL_BLEND); // disable the blending

I suddenly found that no matter how I tried to hack the HTML to get the bold face to work it simply would not show. After a few emails with another developer chum I found that even the example file that he sent over which used embedded Arial in a dynamic TextField would display with bold and italic straight from Flash CS3 but would only show the regular font from Flash CS4.

In previous situations I’ve set the TextField’s HTML property to true in the IDE and embedded some text using the regular font and another line of text using the bold font. However Flash CS4 only seems to be happy with that providing that the typeface you are using will allow faux bold and faux italic. Faux bold is when you are using the regular font and you click on the b or i buttons in the properties inspector to change the typeface. Flash is still using the regular font but it fakes bold by expanding the paths for the characters and fakes italic by rotating the paths for the characters. This is definitely not the prefered way to produce these fonts, especially for designers that have a keen typographic eye like the guys that I am often fortunate enough to work with.

After some frustrating trial and error, I came across a solution that seems to work well and that I will probably continue to use on future projects. To embed each font in to the library of the Flash file and export them for ActionScript. Then use CSS to set the font-family property for specific tags within a chunk of HTML text. This means I can use the actual italic cut of a particular typeface instead of faux italic in my projects and gives me much more control over the way the text is rendered. It also means that if you found your typeface was particularly thin and the difference between regular and bold was barely noticeable on screen, you might be able to swap out the bold for medium or ultra-bold depending on the typeface and get the visual hierarchy back in your text.

// Create a stylesheet to set the 'strong' tag to use the bold typeface
// you cannot use 'b' because it's a tag that is recognised by Flash
// already, so use a findReplace function to turn all 'bold' tag pairs
// in to 'strong' tags. Or do this when the text is created.
var myStyleSheet:StyleSheet = new StyleSheet();
 
// Use inline display to avoid an extra line return
myStyleSheet.setStyle("strong", {fontFamily:"Bryant-Bold", display:"inline"});
 
// Assign the stylesheet
myTextField.styleSheet = myStyleSheet;
myTextField.autoSize = "left";
myTextField.htmlText = myHTMLText;

We developed a series of very simple interactions that explored the five main forms of energy that make up the guiding design principles for the project; elasticity, velocity, gravity, inertia and momentum. These applications are then taken to various schools and centres around the globe and are used to help develop communication and social interaction within young children with Autistic Spectrum Conditions through playful interactions and exploration.

It’s a very interesting, thoughtful and beneficial use of technology and Interactive design and I am very keen to commit more time to help develop the project further.

So that I can remember – and to help anyone else interested in doing the same – I’m recording the settings and processes that I’m going through to record these videos. If I ever find a better way of doing this, I will update this post with the relevant details.

Recording the video
The first thing I need to do is record my project on to my computer. For this I am using iShowU HD from Shinywhitebox. I’m capturing and outputting the video at 1280 x 720 px – standard HD size and a perfect for capturing any websites – using the Apple Animation video codec at 25 fps with quality set to Lossless and the audio is using the AAC codec at a rate of 44100 Khz in stereo. The only negative is that while the quality is extremely high, the file size is also huge with approximately 40 Mb per second of video recording which can mean at least a couple of gigabytes per video recording. To make things more manageable I’ve started filming some of my projects in sections of around 20 seconds, you need to make sure you keep your mouse in the same position between clips though.

To help me show the project I’ve created a desktop background that is white except for a grey 1280 x 720 pixels rectangle at the bottom left. I then position my browser window so that the window chrome sits outside of the 1280 x 720 area and the website takes up the fill width and height of the capture area. I’m going to start using Firefox to record any websites, as Safari and Chrome both place the annoying resize icon at the bottom right on top of my projects. Firefox has a full bar at the bottom which – with a bit of trial and error – you can position off the bottom of the screen.

Editing the recording
Once I’ve captured a successful video or group of videos, I take them in to Adobe Premiere to cut and edit them in to a suitable length. I also use this opportunity to cut out any long pauses while waiting for content to load such as buffering video or large images. This makes the examples feel more responsive and doesn’t waste valuable seconds of video time. I also use After Effects to clean up any parts that I’m not happy with and amend any text or images that have been added to the project has been launched.

Export the final video
Once I’ve edited the video and I’m happy with the final results I can now export the video to an number of final formats to be used on my online portfolio, offline portfolio, Vimeo account or any other place I might need to show it. Because they are all filmed in HD I can scale them down to any size and know that the quality will never decrease from the original.

For Vimeo I followed their compression guidelines which – in a nutshell – were the H.264/mp4 Codec at 25 fps with a video data rate of 5000 Kbps and an audio data rate of 320 Kbps and sample rate at 44100 Khz.

Working as a freelance Interactive Designer/Flash Developer has put me in a really fortunate position where I have a constant – if not sometimes exhausting – demand for work which keeps me extremely busy, very challenged and motivated to keep pushing myself forwards. It also gives me the opportunity to take time off when I feel I can and spend some time developing new skills and exploring new challenges to constantly push myself forwards. I’ve never been one to settle, I need to try new things and to constantly put myself in new and sometimes difficult situations and freelancing is the only way for me to continually do this. So my new challenge and also my (why didn’t I do this earlier) is to start taking time out to research and experiment various topics including physical computing, interaction design, data visualisation and mathematics, and to read, read, read.

As Massimo Banzi quotes in Getting started with Arduino ‘Interaction design is the design of any interactive experience.’ I am already familiar with and have been creating interactive online experiences since I started as an interactive designer 3 years ago, but what I intend to do is start exploring tangible experiences. I want to be able to create a physical environment that someone can use to interact with a digital environment. I want to create objects that you can touch and feel and play with instead of using the more traditional keyboard, mouse and monitor.

I have been researching and following the development of several MA Interaction Design courses at institutes around the world. However there are always pros and cons for making the decision to enroll on an MA course and so far I haven’t found a course that combines all the areas I want to work in and wont cost me £30,000+ for the fees (not to mention living costs for a 2 year course). The cons simply outweight the pros. So I’ve been speaking with a handful of interaction designers and asking them about their background and experience and how they came to work in this field. These discussions have opened up a whole range of alternative ways to gain experience in Interaction Design.

This blog will become my primary place to document my research and experiments in Interaction Design. I’ve already booked tickets at several design events across the globe such as the Ars Electronica festival, which I’ve unfortunately had to miss this year. I will storing any relevant research on this blog as well as the working and failed experiments I create.