Fugio Tutorial 4 – Networking and Open Sound Control (OSC)

Happy ‪#‎FugioFriday‬! Bit late today because I was up late watching the UK EU referendum results come in. Personally I’m very disappointed with the result but regardless of the outcome, we have to continue to work together across the planet and create many wonderful, inspiring things!

In the spirit of sharing and cooperation, I have TWO new plugins for you today! There’s a network one, for sending data between computers, and an Open Sound Control (OSC) one so you can start linking Fugio up with other software and hardware.

If you’ve already installed Fugio, choose “Check for updates…” in the help menu, else download the latest version from http://www.bigfug.com/software/fugio

In this tutorial video I show you how to connect the mobile app TouchOSC (Android and iOS) to Fugio so you can add a very cool touch screen interface to your patches.

Please like and share the video!

I’m off to Vienna on Sunday for a few days work but will catch up with you next week.

Have a good weekend…

Fugio Video Tutorial #2 – Audio Output

In this tutorial we’ll start to explore audio output using a simple signal generator.

We cover controlling different types of pins, and using number range mapping to scale the value of numerical pins.

Also, check out the Patreon page I made for Fugio if you’d like to help support the project.

Fugio Alpha Release

It’s time to begin the process of getting Fugio out into the world.

If you’ve not been following its progress so far, Fugio is a visual programming system primarily designed for rapid development of digital art projects, with a view to being a highly flexible and educational platform that builds transferrable knowledge while not forcing anyone to write a single line of code (unless they want to!)

Fugio is completely free for anyone to use (and will be fully open source soon).  It has taken me two years of hard work, time, and money to get it to this stage, and I’m very excited to finally share everything that I’ve been making.

As a lone developer, I haven’t had the luxury of a QA department testing all the code, so there’s definitely going to be some rough edges to begin with, hence this alpha release, which is aiming to catch as many common issues as possible before its full launch.

This first release is an extremely cut down version that only includes 42 basic nodes (the full version has around 200 nodes), but there is enough that we will be able to run through a short tutorial (below).

Please let me know if it does or doesn’t work.  Also, all feedback (good and bad) is really important at this stage, so do please tell me!


Click here to download Fugio

Installation for Windows

Double-click on the Fugio-1.x.x-WIN.zip to open the archive, which contains FugioInstaller.exe – run this to install.

Follow each stage of the installer.  At this point you should just be able to accept the defaults.

Once the installer has finished, you can run Fugio by clicking on your Windows start button, going to the new Fugio entry, and clicking on the program icon to start the application.

If the application doesn’t start, try installing the Microsoft runtime that is included in the zip archive called vcredist_msvc2013_x86.exe

Installation for OSX

Double-click on the Fugio-1.x.x-OSX.dmg to open the archive, which contains FugioInstaller – run this to install.

Follow each stage of the installer.  At this point you should just be able to accept the defaults.

Once the installer has finished, you can run Fugio by going to your Applications folder in Finder, going to the new Fugio directory, and clicking on the program icon to start the application.

If OSX complains that the application hasn’t been signed (it hasn’t) then either right-click on the application icon (or Ctrl+Left Click) and select Open from the menu.  You’ll then see the same warning but this time with the option to run the application anyway.

Our First Patch

When you start Fugio you will see a welcome window.  Click the OK button to continue.

You’ll be presented with the main editor window:


To start a new patch, go to the File Menu and click on New (or press Ctrl+N on Windows, or Command+N on OSX)

The new patch will open a window, where we can now add nodes.

There are several ways to do this but for now we’ll just double-click in the middle of the patch window.  A new “Insert Node” window will appear.  The first time you do this it will be completely blank.  Start typing “Audio Output” (without the quotes) and you’ll see the names of nodes that match what you’re typing.  Once you see “Audio Output (PortAudio)” at the top of the list, you can press return to add the node to the patch.


The node will appear in the middle of the patch.  A node is a self-contained piece of code that has inputs and outputs.  The one we have just added is for sending audio to your speakers or headphones.


It has two inputs (the little blocks on the left hand side, which we call pins), one for audio data, and one to set the overall volume of the audio being played.  There is also a dropdown control to select which audio device on your computer to send the audio data to.  This will almost certainly be different from the one in the picture above.  You should be able to leave it as the default but feel free to change it if you need to.

You can move nodes around by dragging them around by their white title bars.

Add another node by double-clicking on the white space in the patch window.  Make sure you don’t double-click on the node you’ve already added as this won’t work.


We’re going to add a slider to control the output volume.  Start typing “Slider” into the window until “Slider (GUI)” appears at the top of the list.  GUI stands for Graphical User Interface and means that it contains some type of thing you can visually control.


The slider has a single output pin (inputs are always on the left, outputs are always on the right), which is a number between 0 (zero) and 1.  Hold the mouse cursor over the gray pin (not its name) and you should see a little popup that tells you some information about the pin, and in the case of numbers, it’s value, which is currently zero (as the slider control is all the way to the left).

Move the slider control to the middle, and hold the mouse cursor over the Number pin again, you’ll see the value has changed.

We’re now going to connect the output pin of the slider to the volume control of the audio output node.

Press the mouse cursor onto the slider’s Number gray pin and, while you keep your button pressed, drag the mouse away from the pin.  If you have done this correctly, you’ll see a new link following the mouse cursor:


Drag the mouse to the Volume input pin of the Audio Output node.  When you’re in the right place the link will turn gray (rather than red) to show that you can make this link.  Release the mouse cursor.


If you’ve done this correctly, you’ll see the new link turn yellow (showing it’s now selected).  Make sure it’s connected to the Volume pin (as above) and not the Audio pin.

As it’s currently selected, if you had made a mistake, you can press the Delete key (or Backspace on OSX) to delete the link.

Slide the slider all the way to the left (as above) to make sure the volume is set to zero (for now).

Double-click in the patch window to create a new node:


We’re going to add an audio signal generator.  Double-click on the “Signal (Audio)” node in the list.  If you add the “Signal (Number)” node by mistake, just press Delete/Backspace to delete it.


The new Signal node is going to generate an audio signal that we will be able to hear via the Audio Output node.  Connect the Signal’s Audio pin to the Audio Output’s input pin, so it looks like this:


If everything is working, you should now be able to slowly move the Slider towards the right, and you should hear a tone playing.  If you don’t, make sure your speakers/headphones are turned on and their volume isn’t set to zero.  Alternatively try a different audio output device using the drop-down in the Audio Output node.

The Signal node can generate several kinds of audio signals.  Let’s experiment with them.  Add a new node (double-click on the path window) and add a “Choice” node:


Connect the Choice pin to the Signal Type pin:


The Choice node now lists the different kinds of signals that you can generate.  Try selecting the different options.  Put it back to Sine when you’re ready to move onto the next step.

We’re now going to play with the Frequency of the generated signal.  Unlike the volume slider, the frequency value doesn’t go between zero and one.  In fact, average human hearing lies between 20Hz and 20,000Hz (20kHz).  Hertz (Hz) is the unit we use to count ‘cycles per second’.

We need to take the output of the slider and map its range to the frequency range we want to cover.  We’ll use a “Number Range Map” node to achieve this.


Here we’re going to use a slightly lower range (20-8,000 Hz), but feel free to experiment.


Number Range Map takes an “Input Value” (which will be our slider value) that it expects to be within the range between “Input Min” and “Input Max”.  By default these are set to zero and one respectively, which perfectly match the range of our slider, so we don’t need to change these values.  What we do need to do is change the output range.

Move the mouse cursor over the input pin called “Output Min” and you’ll see its default value, which is currently zero.  Right-click (or Ctrl+Click on OSX) on the pin’s gray box to bring up its menu, and choose “Edit Default”.  Change the value to 20 and click on OK.


We now do the same with the “Output Max” pin and change the default value to 8000:


To see the effect of what we have just done, let’s add “LCD Number” node and connect it to the Output Value.


Add a new slider and connect it to the “Input Value”:


As you move this new slider, you will see the output number is 20 when the slider is at the far left, and 8000 when the slider is at the far right.  Don’t worry if this is not entirely clear at this point – it’s not the most straightforward node to use but you will find it useful to quickly convert values between nodes.


We can now add a second link from the “Output Value” and connect it to the Signal’s Frequency input.  Move the slider and hear the change in the sound.

The full patch should look like this (click on the image to zoom in):


That’s it for this first tutorial but even at this early stage there are plenty of other nodes to try out if you want to explore further.

In the Nodes window on the left of the editor is a full list of all the currently available nodes.  Click on their names once to get further information and links to documentation.  Double-click on the name to add it to the current patch window, or you can drag and drop it into the window.

If you have any feedback or questions, or were unable to complete the tutorial, please let me know via the comments of this post, or contact me here.

Free Brushes for Painting With Light

For the new art installation I just completed at Birmingham Open Media (BOM) for the upcoming Ingenious and Fearless Companions exhibition, I had to create some new brushes to use in Painting With Light.

You can click on each brush below to get each full size brush individually, or click here to download a zip archive of all four brushes.

Painting With Light 1.5.1 BETA

I’ve made a new release of Painting With Light for OSX and Windows that fixes a couple of critical bugs in the Sequencer, and adds this rather lovely installer for OSX!

  • Improved HAP playback reliability
  • Fixed crash when loading images into Sequencer
  • Fixed Sequencer drag and drop under OSX
  • New version number scheme (as I’ve switched from Mercurial to Git)
  • Backspace key deletes shapes on OSX

In a recent workshop we experienced some issues with versions of OSX.  After some research into the subject, I may have to recommend a minimum of 10.9 (Mavericks).  PWL definitely won’t run on 10.6 (Snow Leopard), but you might get away with 10.7 (Lion) or 10.8 (Mountain Lion).

Download Painting With Light 1.5.1 for Windows

Download Painting With Light 1.5.1 for OSX

Using code inside Fugio

Screenshot 2016-02-26 09.51.23

An example of using code in Fugio when it makes sense to (trying out the new 2D drawing functionality).

While the node interface is a great way of creating reusable components of code that don’t change much, it isn’t a good fit when you’re trying to define very custom logic. If we stuck to just using nodes, we’d need huge trees of small nodes that would be difficult to build, debug, and maintain, and would have performance overhead implications. Sometimes writing code is just much more efficient in all of these areas, and the design of Fugio recognises this.

Therefore, we can use code, but just when we need to. I feel this offers a good balance between flexibility and simple design.

In other news, there has been a great deal of (boring) work done on refining the editor and hammering out all those little bugs that don’t break things but are just annoying.

The cross-platform installer is under way, with an almost working OSX one done, and a Windows version not far behind. I’m not focussing on Linux right now, as it’s a huge amount of work just supporting two platforms!

I’ve also done some development on the audio side, with the signal generator node receiving quite a bit of focus. I’m using it to build some very basic (at present) synthesisers!

New Fugio Editor Features

Screenshot 2016-02-06 07.39.27

Several new features have been added to Fugio in the past week while enjoying a bit of Californian winter sunshine!

  • Editor zooming – and general trackpad navigation improvements
  • Node grouping – group nodes into nested groups making it much easier to understand the structure of complicated patches
  • Snippets – save a re-usable sub-set of nodes to a ‘snippet’ that can be drag and dropped into new patches
  • Rewrote the audio input node so it’s working well now with FFT analysis, etc
  • Finished off split/join framework where a pin that contains data such as a colour can be right clicked on and a menu of nodes appears to split the colour into RGBA or HSLA etc values

With these additions, I think I’m pretty happy with the level of functionality of the editor so next step is to go through the whole code base and get it ready for its public release.