— boreal-kiss.net

Processing with Sublime Text 2

In the first two sections I will give you brief reviews on Processing related IDEs (Processing IDE and Eclipse). In the third section, I will introduce Sublime Text 2 and the way how to integrate with Processing drawing API. If you urge to know how to do it, go to the third section.

1. Problems on Processing IDE

Processing is an easy-to-use, lightweight drawing tool that comes with really sophisticated libraries written in Java. It’s so easy that one could launch the application and write some code to embody the idea in his mind within a few minutes. It’s like drawing a daily sketch on a paper and the result will be amazingly beautiful thanks to its great libraries. I love it as an artist.

However I, as a developer, have found some problems on Processing IDE. First, I have been always annoyed by its strange indentation like the picture below; each time I push the enter key, indentation occurs differently even in the same lexical scope. This gives me an additional work to fix them, is really time-consuming, is not relavant with drawing at all.

Second, Processing IDE wont’ well manage a project when it gets larger with a bunch of class files. This mainly comes from the combination of the nature of the Processing framework and the IDE:

  • Processing uses Java inner classes. All class files must resides within the same hierarchy with a main project file.
  • The IDE automatically includes all the class files within the project. Each class always shows up in tab panes.

You can easily imagine the catastrophe when you work with, let’s say a project with one hundred class files. All class files will immediately show up in tab panes. Nobody would like to tab-browse all of them at the same time but Processing IDE offers you. The picture below is an example of my projects which has 20 class files. I will not see which tab is which even after expanding the window to the monitor size. I only know the class name after selecting one of the tabs.

2. Eclipse as a nice alternative but…

The problems above could be solved when one goes to Eclipse. It’s an IDE tailoring to Java development. Since the Processing framework is also written in Java, one could also make a Processing project on Eclipse (For the detail see the tutorial: Processing in Eclipse). The Eclipse IDE won’t give you any strange indentation nor a nightmare of managing a large project. Each class file is properly managed and/or protected by Java’s namespace so that one can easily spot what he wants to see. Changing class files’ hierarchy in a project scale is even a piece of cake thanks to the refactoring function. Really nice, at least for developers. For artists no; the IDE is super heavy. It’s so heavy to launch that one must wait a minute or more watching the opening pane (you will be soon bored by seeing the picture below) before actual drawing. Since the waiting time will easily kills one’s idea in the head, Eclipse is not suitable to a daily sketch.

3. Sublime Text 2 as a nice alternative, yes!

Having used Sublime Text 2 for a while, I find it meeting my needs both as an artist and developer:

  • It’s well developed as an editor. No annoying bugs for me so far (e.g., strange indentation behaviour etc.).
  • It’s lightweight and launches fast.
  • It well manages any size of a Java project (less effective than Eclipse IDE though), so it is suited to Processing drawing as well.

My current way of Processing drawing on Sublime Text 2 follows these steps:

  1. Write everything in Java, linking the Processing drawing API framework (core.jar). This enables the Java project to use Processing API.
  2. Compile and run the Java program with javac- and java-command line tool.

Since using Sublime Text 2 for Processing drawing needs some additional works awful to command line beginners (me also), I will explain them step by step.

3-1. Link to Processing API

Right-clicking the Processing.app to show package contents, you can find a file called “core.jar” (Java archive file) in the following path:

/Applications/Processing.app/Contents/Resources/Java/core/library/core.jar

Processing’s PApplet class (main class for Processing) is defined in this file. Extending the main class of a Java project to the subclass of PApplet, one could use Processing standard drawing API (you will see the actual linkage to this file when compiling in the next section). The Java Main class (bare-bone) looks like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//Main.java
 
import processing.core.PApplet;
 
public class Main extends PApplet{
	public static void main(String args[]) {
		PApplet.main(new String[] {Main.class.getName()});
	}
 
	//Processing setup method.
	public void setup(){
 
	}
 
	//Processing draw method.
	public void draw(){
 
	}
}

We will run a program from this class as an entry point.

3-2. Customize Sublime Text 2 settings

Since Sublime Text 2 simply compile the Java program and won’t run the program by the built-in Build command, we need customize its settings. Browsing packages (Sublime Text 2 > Preferences > Browse Packages…), find Java build setting file named “JavaC.sublime-build” (you should better backup this file in case) :

~/Library/Application Support/Sublime Text 2/Packages/Java/JavaC.sublime-build

(“~” means my home directory) The default looks like the following, showing that it only compiles a Java file with javac command line tool:

//Original JavaC.sublime-build.
 
{
	"cmd": ["javac", "$file"],
	"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
	"selector": "source.java"
}

Since compiling and running a Java project from command line needs multiple instructions for better use (e.g., create a bin directory to separate binary files from source for house keeping, etc.), we direct Sublime Text 2 to execute a bash file (I’ll call it “java_compile.sh”) that contains some necessary instructions, rather than execute javac command directly. My customized “JavaC.sublime-build” is the following (the path to the bash file is not important):

//Customized JavaC.sublime-build.
 
{
	"cmd": ["~/Documents/Java/java_compile/java_compile.sh", "$file"],
	"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
	"selector": "source.java"
}

Inside the bash file, I added the following commands:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/bin/bash
#java_compile.sh

#Path to a directory for storing class files.
PATH_TO_BIN_DIR="../bin"
 
#Create the directory above if not exists.
mkdir -p $PATH_TO_BIN_DIR
 
#Remove all binary files created at the previous compile time.
find $PATH_TO_BIN_DIR -type f -name "*.class" -exec rm -f {} \;
 
#Strip the path component.
file_name=$(basename $1)
 
#Strip the file extension.
class_name="${file_name%.*}"
 
#Path to the Processing core library.
PATH_TO_JAR_FILE="/Applications/Processing.app/Contents/Resources/Java/core/library/core.jar"
 
#Compile.
javac -d $PATH_TO_BIN_DIR -classpath $PATH_TO_JAR_FILE: $file_name
 
#Run.
java -classpath $PATH_TO_BIN_DIR:$PATH_TO_JAR_FILE: $class_name

When building Main.java by Build command on Sublime Text 2, this bash file will be executed, linking to the Processing library, compiling all the files to store them in a bin directory in the parent directory, and running the program. Below is an example of a project hierarchy.

Make sure the bash file is executable. In Terminal.app, type the following command from the same directory where the bash file is:

chmod u+x java_compile.sh

For more tuning around java command line tools, read the related article: How to Compile and Run Java Code from a Command Line.

Edited at 24.11.2012

One of readers gave me a comment that he had difficulties with the compile when linking multiple external libraries. Since I also find this is very hard for people who is not familiar with shell scripting, I’ll show you the way how to do this; basically what you have to do is concatenate files’ path string into one variable that will be an argument for classpath option both in compile- and run- time. As an example here is my compile file when I use OpenGL libraries (Processing 2.0). Hope this would save your time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#!/bin/bash
#java_compile.sh

#Path to a directory for storing class files.
PATH_TO_BIN_DIR="../bin"
 
#Create the directory above if not exists.
mkdir -p $PATH_TO_BIN_DIR
 
#Remove all binary files created at the previous compile time.
find $PATH_TO_BIN_DIR -type f -name "*.class" -exec rm -f {} \;
 
#Strip the path component.
file_name=$(basename $1)
 
#Strip the file extension.
class_name="${file_name%.*}"
 
#Core: path to the Processing core library.
PATH_TO_JAR_FILES="/Applications/Processing.app/Contents/Resources/Java/core/library/core.jar"
 
#Optional: path to OpenGL libraries.
PATH_TO_JAR_FILES=$PATH_TO_JAR_FILES:"/Applications/Processing.app/Contents/Resources/Java/core/library/jogl-all.jar"
PATH_TO_JAR_FILES=$PATH_TO_JAR_FILES:"/Applications/Processing.app/Contents/Resources/Java/core/library/gluegen-rt.jar"
 
#Compile.
javac -d $PATH_TO_BIN_DIR -classpath $PATH_TO_JAR_FILES: $file_name
 
#Run in 32-/64-bit mode.
#java -d32 -classpath $PATH_TO_BIN_DIR:$PATH_TO_JAR_FILES: $class_name
java -d64 -classpath $PATH_TO_BIN_DIR:$PATH_TO_JAR_FILES: $class_name
1 comment
  1. Week 4 | Creative Coding Intro says: November 6, 20137:24 pm

    [...] is also a TextMate bundle if you prefer to work in TextMate, or you can follow this guy’s method if you like working in Sublime [...]

Submit comment

Get Adobe Flash player