Graphical user interface capabilities in SC let us build frontends for our computer music projects. They are a convenient way to create custom virtual synths, and package up novel programs for ourselves and other users.

GUI classes include various forms of slider, buttons, dials, drop down lists, drag and drop facilities and many more custom views.

This file will use code which should work on all platforms without any worry about the underlying implementation (SC 3.3.1 on). There may be slight differences between versions of SuperCollider on the available GUI capabilities.

[side note: On the Mac, for SC3.5 and earlier, you can press shift+cmd+N immediately to see a selection of the available GUI widgets.]

Just in case you want to know more about the implementation:

Because GUIs tend to be quite operating system specific, under the surface, there are different main GUI implementations available.

From SC 3.6, the standard GUI library is qt.

Historically, there are also OS X ('cocoa') specific classes (usually with prefix SC before the class names used here) and SwingOSC ('swing') Java cross platform classes (usually with prefix JSC).

You can call the standard cross-platform GUI class names, like Slider, Window, View, without worrying about which of qt, Cocoa or SwingOSC is operative.

Both qt and SwingOSC act like servers, sending and receiving messages from the language app. On OS X, a native Cocoa implementation is built into the standard language environment for SC3.5 and earlier.

Test which GUI library you are using by default:

GUI.current

For more on this, see:

[GUI] //main GUI help file

[GUI-Classes] //list of all GUI classes, with cross-

Quick swap of implementation:

GUI.cocoa//SC 3.5 and earlier on a Mac

GUI.swing//will only work if SwingOSC is installed, see instructions with SwingOSC

//make sure SwingOSC server is running if you are using that, before you run any GUI code:

SwingOSC.default.boot

To make a window

//The Rect(angle) takes the initial screen position and the window size

//as screenx, screeny, windowwidth, windowheight, where screeny is 0 at the bottom

(

var w;

w=Window("My Window", Rect(100,500,200,200));

//A 200 by 200 window appears at screen co-ordinates (100, 500)

w.front; //this line is needed to make the window actually appear

)

Note that we count on the y axis from screen origin at bottom left, to the bottom left corner of the window.

We add controls to our window, defining any parameters of their use. We pass in the window we wish the control to appear in and use a Rect again to specify where in the window the control will appear and how large it is. However, this time the co-ordinates are no longer relative to the screen, but relative to the top left corner of the window, and x and y positions indicate distance from left and from top respectively.

(

var w, slid;

w=Window("My Window", Rect(100,500,200,100));

//A 200 by 100 window appears at screen co-ordinates (100, 500)

slid=Slider(w,Rect(10,10,180,40)); //a basic slider object of size 180 by 40 appears 10 pixels in from the left, and 10 pixels down from the top

slid.action_({slid.value.postln;}); //this is the callback: the function is called whenever you move the slider. action_ means to set up the slider object to use the function passed in as its argument.

w.front;

)

Note how the default slider range is from 0.0 to 1.0

We might not want to create numbers from 0.0 to 1.0, but remap the value to other ranges. 0.0 to 1.0 is a very useful starting point, though. Try:

1.0.rand//create a random number from 0.0 to 1.0

1.0.rand*50//create a random number from 0.0 to 1.0, and multiply it by 50 to get a new range from 0.0 to 50.0

1.0.rand*50+14.7//create a random number from 0.0 to 1.0, multiply it by 50, then add 14.7, to get a new range from 14.7 to 64.7

1.0.rand.linlin(0.0,1.0,14.7,64.71)//create a random number from 0.0 to 1.0, and use a built in function to remap it to the output range 14.7 to 64.71

1.0.rand.linexp(0.0,1.0,14.7,64.71) //create a random number from 0.0 to 1.0, and use a built in function to remap it to the output range 14.7 to 64.71 with an exponential function, which tends to spend longer over lower values

Rather than doing these remappings yourself, an alternative is to take advantage of a ControlSpec, a helpful class which can be used to turn input into any desired range through various available precanned mappings