openFrameworks
Screen-saver
iPhone
OpenGL / 1 / 2/ 3
3D anagyph

Flash
AR markers
3D anaglyph example (Mr Doob)
Customising FlarManager
Create animated GIF
Webcam stop-motion

Maths
Delaunay triangulation
Delaunay tutorial
Voroni tessellation
Contour line
Universal gravitation
3D anaglyph

Design
Aligning elements
Baseline grid
Grids for Flash
Grid systems
Computing a grid
Gridmaker
Designing for the iPad

Fabrica
Paulo Barcelos
Jono Brandel

I discovered monome a couple of years ago and have been desperate to one day either buy one of the limited edition devices that they produce or buy one of their kits and solder and build my very own Monome.

Getting started.
There are a few options for getting your hands on your very own monome device. Firstly you can buy a pre-built momone from monome.org however these can often be quite expensive and have a very limited number that only become available every now and again. Another option which many people decide to take is to buy the basic electronic components which are the logic chip, driver and keypad from monome.org then buy a soldering iron, some LEDs and a case to hold your own monome and to solder and build the entire device from scratch. There is a stack of information and step-by-step instructions on the monome website as well as other blogs to help you build a monome from scratch.

Once you’ve soldered all the electronic components and fastened the case together you are ready to plug the monome device in to a computer via a usb cable and run a max5 patch to setup, test and configure the monome initially (there are also comprehensive instructions on downloading and installing Max on the monome website).

Playing.
Once you’ve built your monome and run the setup patch you are ready to upload existing patches written in Max and ChucK and start exploring your monome.

http://www.youtube.com/watch?v=cJwxbTKwONc

Extending.
The most exciting point about a monome device is that it is not restricted to any default applications and they are simple there as a hello world set of examples. You are able and encouraged to develop your own Max patches , to upload and test them on your monome and then to upload and write about them on the monome website so that you can share you findings and experiments with the community.

There is a fantastic tutorial on the monome website which explains how to create a simple Max patch and upload it to your monome to test (http://docs.monome.org/doku.php?id=dev:max:mlr-tutorial).

You can also communicate with the monome device using the OSC protocol and there is an article on that here (http://docs.monome.org/doku.php?id=tech:protocol:osc). This means that you can control a monome and receive button presses from a monome using software like Processing, openFrameworks, VVVV, PureData and even in Flash using a proxy server like flosc. This opens up fantastic opportunities to use the monome as a tactile input device for a piece of custom software or installation.

1. … is innovative.
2. … makes a product useful.
3. … is aesthetic.
4. … makes a product understandable.
5. … is unobtrusive.
6. … is honest.
7. … is long-lasting.
8. … is thorough, down to the last detail.
9. … is environmentally-friendly.
10. … is as little design as possible.

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

For a project I’m currently working on I wanted to explore flocking behaviours and track relationships between points within a real-time simulation. The final piece has been completed now (but more on that another time) and in the meantime I’ve created a video of the prototype I was using to test the simulation and aesthetics.

I created a simple flocking simulation and then tracked the relationship between each point in the flock and it’s neighbouring points. As the simulation runs the points effect one another’s position and direction, rather than tracking each point I track the relationship each point has on it’s neighbours. The relationships between the points are then represented using an anaglyph image that creates a stereoscopic 3D effect. The two rules that influence the distance between points can be changed in real-time and can cause significant effects with the slightest of changes.

As a freelancer I am already in a lucky position where I can go in to a studio and work closely with a team, anywhere from a couple of days to several months. I’ve always found this experience rewarding as I meet new people and make new friends and work contacts and I also take away from the studio all the positive ways of working that I’ve seen whilst I’ve been with them. Eventually my goal is to apply all the things I have seen over the past few years – that I feel work successfully – to my own studio and hopefully create something that produces great work and is exciting to be a part of.

Studio Culture provides a unique glimpse into the inner workings of 28 leading graphic design studios. In a series of penetrating interviews, the mechanics of building and maintaining a vibrant studio culture are laid bare with disarming frankness.

I’ve spent a little more time exploring the relationship between each Boid in my flocking simulation. I still need to add some more features to the simulation and then I will be able to start exploring the design and aesthetics in more detail.

For an upcoming project I’m going to be using a simple flocking simulation to produce a series of generative artworks based on time. These pieces are being produces in openFrameworks so it’s another great opportunity to experiment more with this fun tool. I’ve been struggling to find the time to work on this up until very recently, so hopefully over the next few weeks I can start to produce something very interesting.

I’m planning on assigning some more of the core flocking functionality to gui sliders so that I can start to make adjustments to the simulation in real-time (I’m using Memo Atkens ofxSimpleGuiToo addon for this). Once I’ve got a behaviour that I’m happy with I can start to explore ways of recording and mapping the relationships within the simulation to hopefully achieve something interesting.

There’s some really interest work already out there and a quick search on YouTube of vimeo will give you some very interesting results. I’m showing some other peoples work that interests me below, some use a great set of parameters to create a really nice effect between each Boid other show really nice ways of visualising the different types of Boid and groups of boids.

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.

I’ve justed uploaded the processing source file for this experiment, you can download it here TouchOSC experiment. You will also need to download the TouchOSC iPhone app and follow the instructions on their website.

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.

Some of the projects I have been working on recently – or have in the pipeline – involve using the webcam in Flash. I’m getting quite excited about the fun possibilities that the webcam can open up.

This was a tiny 20 minute experiment where I am using the mouse to paint the video from my webcam directly on to the stage. The pixel colour is taken from the webcam.

After reading Tomek’s blog post on the same bug and his fix , I’ve managed to discover what the problem is and the slightly modified (improved… cough, cough) on Tomek’s solution.

Tomek’s solution worked perfectly, which was to insert the text, store the height, set the autoSize property to NONE and then manually increase the height of the TextField. This means that the text fits within the resizes TextField fully and does not need to scroll.

The thing I didn’t like is that I was just adding 10 pixels to the height. What if I was using a large font size and that solution didn’t work? After some experimenting I found that the value you need to increase the height of the TextField by is it’s leading. So if your leading is 0 the bug will not appear, if you leading is much greater like 24, then you will need to add 24 pixels to the height of your dynamic TextField. It seems that when Flash resizes the TextField as you flow the copy in, it doesn’t take in to account the affect the leading will have on the overall height.

My solution is:

1. Set the autoSize property to TextFieldAutoSize.LEFT.
2. Insert the new text.
3. Store the new height.
4. Set the autoSize property to TextFieldAutoSize.NONE.
5. Set the height to the stored height value and the leading value from the TextFields TextFormat object.

myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.text = "lorem ipsum";
var h:Number = myTextField.height;
myTextField.autoSize = TextFieldAutoSize.NONE;
myTextField.height = h + myTextField.getTextFormat().leading;

I still need to find the previous example source files that I created and once I do I will upload them to this page for archiving.

You can view the example here Flocking Example.

You can view the experiment here Bouncing Balls experiment.