Note: I’m working on a Mac and have not tested this on a Windows machine. If anyone attempts to do so based on these instructions please send feedback or leave a comment. Also, this is a work in progress. I have not been able to test all of the features of Processing yet. Please see the caveat at the bottom of this page if you are expecting this to work seamlessly. Lastly, I am aware of the existing pyprocessing project available on Github. It is sweet and seems to work well. If you want to dive right into to using Jython with Processing, check it out. This post is more of a reminder to myself and anyone else of how to set it all up from scratch.

Setting it all up basically involves installing some dependencies and linking them together.

• Jython – This the Java implementation of Python. Just download the installer and double click it. There are a couple of prompts but the most important one to take note of is where Jython is being installed. You can install it anywhere on your system. Mine, for example, is installed at:

  /Users/makemachine/development/libs/jython/2.5.2/

  Once Jython is installed, you can add it to your path and test it by typing jython into the Terminal. If all is well, you should see the familiar Python interactive shell, however it will actually be the Jython interactive shell. My .bash_profile looks something like this:

  PATH="/Users/makemachine/development/libs/jython/2.5.2/bin:${PATH}"
  export PATH
  

• Eclipse – If you are not familiar with Eclipse, it is an IDE ( integrated development environment ) that allows you to run, launch, debug and profile code for many differently languages. I installed the “Eclipse IDE for Java Developers” version, which I believe is a fairly basic version of Eclipse.
• PyDev – PyDev is a plugin for Eclipse that enables some really nice features for writing Python in Eclipse. It can be installed in a couple of different ways. I found that just using Eclipse’s built in plugin manager worked well. Once installed you should restart Eclipse. One way to verify that PyDev is installed is to go to Eclipse » Preferences and look for PyDev in the right hand menu.
• Processing – Before you can get to writing a Processing app, you will need to actually download Processing. Once it is downloaded, copy it to your Applications directory. I decided to make a copy of the contents of the Processing.app file and save them to another location on my computer. I did this just so I would have the files sand-boxed so that in the event of something breaking, Processing will still work as normal. To do this, right-click the Processing app, choose Show Package Contents, navigate to Contents » Resources » Java. Copy and paste this Java folder somewhere on your system. I placed mine at:

  /Users/makemachine/development/libs/processing

Now that everything is installed you can start a project:

• Open Eclipse
• Choose Window » Open Perspective » Other and choose PyDev
• Right-click in the PyDev Package Explore on the left side of the screen
• Choose New » Project
• Choose PyDev Project from the menu
• Set a name for your project and the place it should live on your computer
• Choose “Jython” for project type
• If this is the first time you’ve used PyDev and Jython in Eclipse you will need to set the path to Jython
• Click “Configure an interpreter”
• Under Jython interpreters click the “New” button and browse to the location of the jython.jar file in the top level dir where you saved Jython in the first step.
• Click “Ok”
• Click “Finish”
• Next you need to link the Processing files to the project
• Right-click the Project file in the PyDev Package Explorer and choose “Properties”
• Under PyDev – PYTHONPATH, choose the External Libraries tab
• Click the “Add zip/jar/egg” button
• Navigate to the location where you saved the Processing libraries and select each of the following .jar files
• core.jar
• modes/java/libraries/java/opengl/library/gluegen-rt.jar
• modes/java/libraries/java/opengl/library/jogl.jar
• modes/java/libraries/java/opengl/library/opengl.jar
• Click “Ok”
• Right click the “src” folder in your project and choose New » PyDev module, name it main.py ( or whatever you want )
• Choose “Module:Main” form the list
• Click “Ok”

Now you should be able to run compile and run a Processing app! Here is some boilerplate code.

from processing.core import PApplet

class JythonProcessingApp( PApplet ):
    def setup(self):
        self.size(960, 540)
        pass

    def update(self, n):

        pass

    def draw(self):
        self.background(0)
        pass

if __name__ == '__main__':
    PApplet.runSketch( ['A Jython Processing App'], JythonProcessingApp() )

To run it, with main.py open in the editor, click the little green button with a white arrow in the toolbar at the top left of the screen. If everything is working you should see a Processing app open. Right now it is not doing anything except redrawing a black screen on every frame, but that is a good start!

If you want to use Processing in the OPENGL mode there is one last step. You must add the path to the native OpenGL libraries. This is pretty trivial but took me quite a while to figure it out.

• Click the little down arrow next to the green run button and choose “Run Configurations”
• Under “Jython Run”, choose your project
• Selecte the “(x)=Arguments” tab
• In the VM Arguments box add this:

  -Djava.library.path=YOUR PATH TO PROCESSING LIBS/Java/modes/java/libraries/opengl/library/macosx/

CAVEAT:

This will allow you to run Processing apps in OPENGL mode. That said, I have run into an issue where certain OPENGL commands seem to be failing. Hence, there is more work to be done.

Looking at the instructions above, this seems like a daunting task, but I assure you, that it is nothing more than installing a few things and understanding how to link them together.

What have I been doing?

I have been flying low… researching, thinking and seeking new a direction for makemachine and my path in general.

New Site
I did re-build my portfolio site! Check it out here: http://jeremynealbrown.com. A re-design is probably inevitable for makemachine too.

Reading
I recently read a great book called “You Are Not a Gadget”, by Jaron Lanier, which inspired me in many ways.

School
One of the first things that I did when I got back from my travels was sign up for college math courses. It’s been great, I’ve learned/re-learned a ton and I’m continuing with it next term.

irl-social
Starting the Codex up has been a really interesting experience. We are now renting the space that we were previously only borrowing for the meetings. There is much room for growth there.

Musix
Soundcloud has recently become a home to some of my original music, released also under the makemachine moniker.

Programming
From Clojure & Haskell to Python & C++, I’ve been trying out all sorts of languages and libraries and learning volumes. In a perfect world I would only need one language that was capable of every programming task. However, there are so many unique challenges and domains today, it is not likely that one can do it all. Poor Flash and it’s neatly built language ActionScript. It seems like many people have nothing nice to say about it these days. Well, I have held back my urge to contribute to the flames of forum and comment wars about it and I will continue to do so. I’m not a platform evangelist. I do wish it was not taking such a beating though. It is a great language and a fun platform to write code for.

In Conclusion
It is not by mistake that this post is scattered and rambling. There are many irons in many fires, but one thing I am sure of is that there is much more in store for makemachine.

Earlier this summer I picked up a freelance Kinect gig. The client was pretty adamant about using the official Kinect SDK from Microsoft. The SDK is only available for Windows and as a Mac user, I had to make the decision wether or not to purchase a new Windows machine, try a virtual machine solution or use Bootcamp.

Purchasing a dedicated Windows box was the least risky, but the thought of having two computers around was not that appealing. Add to that the fact that the hardware specs on most consumer PC laptops are pretty limited compared to a the Mac and it is becomes harder to make an argument in favor of making the new purchase.

Knowing that the Kinect SDK required quite a large number of dependencies including both drivers and frameworks and that it requires considerable integration with actual hardware, the virtual machine option seemed pretty uncertain.

The last option, partitioning my disk and running Windows via Bootcamp became the most desirable solution. Still for many of the same concerns as running a virtual machine, I was certain that all of the drivers and frameworks would play nicely with Windows running on my Mac.

Just for clarity, here are my laptop specs:

Unibody Mac Book Pro
2.2 GHz Intel Core i7
8 GB 1333 MHz DDR3 Ram
128 GB Solid State HD

I ultimately ended up using Cinder and the KinectSDK block written by my friend Stephen Schieberl and documented here: http://forum.libcinder.org/topic/kinect-sdk-block and here: http://www.bantherewind.com/kinect-sdk-block-for-cinder.

The point of this article is to broadcast that it is not only possible to run the Kinect SDK on a Mac but that it works very well. I won’t go into detail about the installation process. Essentially you need to install Windows and then all of the dependencies for the SDK which are documented on the Kinect SDK website.

If you are running into problems, feel free to leave a question in the comments section or e-mail me personally.

This experiment uses the concept of recursion and feedback to generatively compose audio. Currently the compositions are composed of several pre-recorded audio files each with rhythms at 120 b.p.m. As the app runs, audio from each queued loop is pushed into an audio buffer and during that process by way of some randomness each loop has the possibility of spawning a new node. All spawning happens on one of 8 beats in each measure. This ensures that the tracks stay in time with one another.

None of the audio files are properly mastered so the output is a little low. Additionally, most of the sounds are muted or bass heavy and hence not very audible through laptop speakers. Headphones or speakers are recommended. Also, keep in mind that because each composition is based on recursion and randomness, so sometimes a composition will consist of only one or only a few loops. Just press play again.

Initially I built this app for The Codex, a collective of creative technologists here in Portland. Read more about The Codex here. I plan to continue to develop this project. There are many directions this thing could go. To be continued…

Last year, before the grand adventure all over the globe, my friends and I started meeting up on a regular basis to exchange ideas about code and technology. Well, I’ve been back on the West Coast for a while and have decided that it is once again time to gather friends to share ideas.

However, this time I wanted things to be a little different. As opposed to the meetings we held last year, I was hoping that the next round of gatherings would be more open and inviting to disciplines outside of the world of software and programming. Artists, musicians, concept designers, IA, AI and many more creative minds would all be welcome. After a few e-mails, securing a meeting place and finding a projector to use, the plan was laid for a night of serious geek time.

The first meeting was a big success. You can read about it here on a new makemachine subdomain. This is where you can stay up to date with whats happening with our group. The name of the group is “The Codex”, which has it’s roots in our original concept, as a code exchange.

The future of The Codex, is very open. We have begun to form a set of basic guidelines that will help inform our decisions as a group. Conversations have started about group projects and community outreach, but at the moment we are focussing smaller projects.

Check out the new site here: http://codex.makemachine.net/

Here it is in action:

As you can see you can have multiple styles at the same time. Setting the styles couldn’t be much simpler. It just requires setting some static vars on the Factory class.

// -- gray and green
Factory.BACKGROUND_COLOR = 0x333333;
Factory.METER_FILL_COLOR_1 = 0xb4ff00;
Factory.METER_FILL_COLOR_2 = 0x76a700;
Factory.TEXT_COLOR_1 = 0xb4ff00
Factory.TEXT_COLOR_2 = 0xffffff;
Factory.MOUSE_UP_COLOR = Factory.BACKGROUND_COLOR;
Factory.MOUSE_OVER_COLOR = 0x555555
Factory.BACKGROUND_CORNER_RADIUS = 0;

It is also possible to customize the fonts used, like so:

All you need to do is change the source to the font in the embed state in the makemachine/display/text/fonts/Fonts.as class.

[Embed(source="Droid_Sans/DroidSans.ttf", embedAsCFF="false", fontName="default", mimeType="application/x-font")]

public static const DefaultFont:Class;


]]>
			http://labs.makemachine.net/2011/08/ui-elements-customization/feed/
		0
		
		
		
		http://labs.makemachine.net/2011/08/as3-ui-elements/
		http://labs.makemachine.net/2011/08/as3-ui-elements/#comments
		Tue, 23 Aug 2011 18:39:19 +0000
		Jeremy
				
		

		http://labs.makemachine.net/?p=687
		
I've written and open sourced a lightweight user interface framework for rapid prototyping]]>
			Hello people. Fear not! makemachine lives!

After a short break to work on some client projects, I’ve re-immersed myself in audio programming with ActionScript. As a part of the re-entry, I’ve written a lightweight user interface framework for rapid prototyping. In this article I’ll walk through how the components are built and how to use them in your own code. I’ll cover the basic usage in this article. Expect future articles that explore the finer details of the framework.
As a preview, below is the “SpectrumApp” demo in the samples directory featuring the Spectrum, Slider, Toggle & Button components.
SpectrumApp




– press play button ( if other tabs contain flash content the audio visualizer may not work, close them and refresh this page )
Source Code & Examples

First of all, take a look at the new repo up on Github located here: https://github.com/makemachine/makemachine.actionscript
The framework that we’ll be looking at is kept in the makemachine/display/ directory. The class InterfaceElement is the base class for all components. It defines some basic functionality that you probably won’t need to concern yourself with in order to use the components. Though, it is important to note that the InterfaceElement does implement a render cycle to prevent re-drawing elements more than needed.
Next, take a look in the /shapes/ directory. This code is used to draw basic shapes such as rectangles, polygons and circles. The shapes are used in virtually all of the user interface components. Shapes can have many of their graphical properties changed such as gradient fill colors, line style, bitmap fill & corner radius ( on rectangles ). Below is the shapes demo from the samples folder.
ShapesApp



You can see in the example above that there are all kinds of shapes, from circles to rounded rectangles and wedges. As it is for all InterfaceElement sub-classes the instantiation syntax is very simple. The following code will create and add a WedgeShape object to the supplied container. Note that the first parameter is the parent object and should be of type DisplayObjectContainer. If it is null, you will need to add the new object manually using addChild(), otherwise the object is added to the first constructor argument.
var wedge:WedgeShape = new WedgeShape( container );

You can also define the position of the newly created object by specifying an x and y coordinate in the constructor. 
var wedge:WedgeShape = new WedgeShape( container, 100, 100 );

These shapes are used extensively in all of the user interface elements. There is another class that is also used extensively and this is the BitmapText class located in the /display/text/ directory. BitmapText wraps a standard Flash TextField and exposes an API for all of it’s properties. The difference is that the TextField is rendered as a Bitmap. Wrapping the class and rendering it as bitmap allows for better control of when the text is re-drawn. BitmapText can be generated using the Factory class, like so:
var text:BitmapText = Factory.singleLineField( container, xpos, ypos,
                                               "stylename", "initial text" );

Similarly a multi-line field can be create like so:
var text:BitmapText = Factory.singleLineField( container, xpos, ypos, width,
                                               "stylename", "initial text" );

Next, let’s take a look at a few examples using actual components. 
HelloButtonApp



public function HelloButtonApp()
{
	var btn:Button = new Button( this, 10, 10 );
	btn.setText( "Hello Button" );
	btn.callback = helloButton;
	btn.data = "Generic data object attached to button";
}

protected function helloButton( btn:Button ):void
{
	trace( btn.data );
}

As you can see, this is not very complex. A Button object is created. The parent is defined with the first param and it will be positioned at ( 10, 10 ) according to the second and third params. The text is set using the setText() method. A callback is set to be triggered when the Button is pressed and some generic data is attached to the Button. You may have noticed that there is no call to addChild(). This is not necessary with you supply the parentContainer ( first ) parameter of any InterfaceElement sub-class. When this parameter is supplied the component is automatically added to the display list.
ButtonBarApp



public function ButtonBarApp()
{
	var btn:Button;
	var buttons:Vector.<Button> = new Vector.<Button>();
	bar = new ButtonBar( this, 10, 10 );
	var icons:Vector. = Vector.( [ Icons.SineWaveIcon,
						     Icons.TriangleWaveIcon,
   						     Icons.SquareWaveIcon,
						     Icons.SawtoothDownIcon,
						     Icons.SawtoothUpIcon,
						     Icons.BatmanIcon,
						     Icons.NoiseIcon ] );

	for( var i:int = 0; i < icons.length; i++ )
	{
		btn = new Button();
		btn.setIcon( new icons[i]() );
		buttons.push( btn );
	}

	bar.setContent( buttons );
        // -- buttons will auto size without setting an explicit size
	bar.setExplicitButtonSize( 30, 30 );
	bar.addEventListener( Event.SELECT, onButtonBarSelect );
}

protected function onButtonBarSelect( event:Event ):void
{
	trace( bar.selectedIndex );
}

This one requires a little more code. The ButtonBar component allows multiple buttons to be used as a selection box. Only one item in a button bar can be selected at a time. The generic Button class can have either a text or graphic label. Any graphic can be used with the setIcon() method, however, the above code is setting one of the built in icons as the label. The framework comes with a handful of built-in icons. I'll be adding more icons as time goes by. There is an Adobe Illustrator file included in the repo that contains the actual art for these icons.
One of the key concepts in the framework is the use of Parameter objects. Parameters wrap numerical values, can be given names and assigned a unit of measure. Below is example of how the Parameter object is used:
HelloParametersApp



public function HelloParametersApp()
{
	var slider:Slider = new Slider( this, 10, 10 );

	// -- Notice how when the slider is adjusted the value turns from "Hz" to "kHz"
	var param1:Parameter = new Parameter( "Frequency", 200, 2000, 250 );
	param1.units = "Hz";
	param1.addEventListener( Event.CHANGE, onParamUpdate );
	slider.parameter = param1;
	slider.validate();

	var knob1:Knob = new Knob( this, slider.x, slider.y + slider.height + 5 );
	knob1.parameter = param1;
	knob1.validate();

	var knob2:Knob = new Knob( this, knob1.x + knob1.width + 1, knob1.y );
	var param2:Parameter = new Parameter( "Amplitude", 0.0, 1.0, .5 );
	knob2.parameter = param2;
	knob2.validate();
}

protected function onParamUpdate( event:Event ):void
{
	if( event.target is Parameter )
	{
		var param:Parameter = event.target as Parameter;
		trace( int( param.value ) );
	}
}

When a component such as a Knob or a Slider has it's .parameter property set, it automatically takes on the properties of that Parameter. It's label is changed to display the name of the Parameter and it's value field displays a value between the min and max values of the Parameter. Text for values is trimmed to the nearest two or three decimal places and if the value exceeds 1000 it is truncated and has a lower case "k" added it it.
In the audio library I'm working on, Parameters are used throughout many of the processors and filters. Being able to pass around references to parameters is really nice in that you are not bound to static class variables. The concept is a little abstract but it really speeds up development and has many advantages. I'll be writing more on the use of Parameters in future articles about sound programming.
No user interface framework is complete without some sort of auto-layout classes. There are two container classes, the XBox  and the YBox. These containers display InterfaceElement objects in either horizontal or vertical layouts. 
ContainersApp



public function ContainersApp()
{
	var ybox:YBox = new YBox( this, 5, 5 );

	// -- label size is based on constant values in the Factory class
	var label:Label = new Label( ybox );
	label.setText( "Controls" );

	// -- notice how the two knobs fit nicely below the label
	var xbox:XBox = new XBox( ybox, 0, 0 );

	var knob1:Knob = new Knob( xbox );
	var knob2:Knob = new Knob( xbox );

	var slider:Slider = new Slider( ybox );
}

The above code is pretty straightforward. It is using a YBox to stack all of the elements vertically and an XBox horizontally stack the two knobs.
Well, this article is getting lengthy, so it shall now end. I'm really looking forward to developing this further as I use it in more sound programming experiments. I'll also be writing more posts soon about how to customize the components and other features as time permits.
]]>
			http://labs.makemachine.net/2011/08/as3-ui-elements/feed/
		1