Tutorial: Making a ProcessingModule - ColoradoSchoolOfMines/interface_sdk GitHub Wiki

This contains the most basic steps of how to create a ProcessingModule, from an empty file to completion. Advanced Processing users may want to move directly to Creating a Module Using Handtracking to begin experimenting with input devices.

Working with the SDK

If your workspace has not been set up to run the Interface SDK, be sure to consult our guide to setup your project. As always, be sure to set up a proper package path and include the SDK as a library for your project.

Class Setup

For a class to properly follow SDK standards, the main class needs to extend ProcessingModule, located within the SDK. This class extends PApplet and allows for all functions in Processing 1.5.1. At this time, we do not support Processing 2 functions. Set up your class as follows:

import edu.mines.acmX.exhibit.module_management.modules.ProcessingModule;

public class MyClass extends ProcessingModule {

}

Required Functions

After extending ProcessingModule, you will have to include the two abstract functions setup() and draw(). setup() will be the first function called at the beginning of the program, and draw() will be called continuously. The first line of setup() should call size(width, height) so that your module has the correct dimensions. If you need to perform logic that isn't directly related to drawing, we recommend creating an update() function that will be the first line of draw(), like so:

public class MyClass extends ProcessingModule {

	@Override
	public void setup() {
		size(width, height);
	}
	
	public void update() {
	
	}
	
	@Override
	public void draw() {
		update();
	}
}

Using Subclasses

If you want to include subclasses in your ProcessingModule and wish to draw using Processing, your class will need to store a PApplet object, as this is inherent in Processing's design. You will likely want a draw() function in your subclass that would be called in your main module class. For instance, if you write a second class like so...

public class MySubClass {

	private PApplet parent;

	public MySubClass(PApplet parent) {
		this.parent = parent;
	}

	public void draw() {
		
	}
}

...you would implement it in your main class like this:

public class MyClass extends ProcessingModule {

	private MySubClass subClass;

	@Override
	public void setup() {
		size(width, height);
		subClass = new MySubClass(this);
	}

	@Override
	public void draw() {
		subClass.draw();
	}
}

Drawing Text

Processing provides a substantial library of graphical tools for drawing images, shapes, and text to the screen. The simplest object to draw is a String. To draw a String to the screen, simply call text(String text, float x, float y) in draw():

public void draw() {
	text("Hello World", 0, 0); //draws top left corner at (0, 0)
}

To change how text is drawn with respect to the provided coordinate, call the textAlign function before calling text(...). For instance, to draw text centered around a point, write code like this:

public void draw() {
	textAlign(CENTER, CENTER);
	text("Hello World", 100, 100); //draws around point (100, 100)
	textAlign(LEFT, TOP); //reset to default to protect other draw loops
}

To change the font color, call fill(int, int, int):

public void draw() {
	fill(255, 0, 0); //draw red text
	text("Hello World", 0, 0); 
	fill(0); //reset to black
}

Drawing Images

In Processing, images are stored in a PImage format. Processing handles images in two stages: loading and drawing.

To draw an image, first call loadImage(String) in your setup() or update() functions, and store the result in a PImage. Then draw the image by calling image(PImage img, int x, int y) to draw to the screen.

IMPORTANT NOTE: The SDK is written to look for images in the images/ directory in your project. If you have made your project in Eclipse, create a new directory in your base project folder named "images" and place your desired images there. If you created your project using Maven, create the folder named "images" under src/main/resources. Maven will automatically move these files to the correct location when you package the project.

private PImage img;
...
@Override
public void setup() {
	size(width, height);
	img = loadImage("helloworld.jpg"); //located in images/helloworld.jpg
}
...
@Override
public void draw() {
	image(img, 0, 0); //draw the upper left corner at (0, 0)
}

To draw an image from its center, call imageMode:

public void draw() {
	imageMode(CENTER);
	image("helloworld.jpg", 100, 100); //draws around point (100, 100)
	imageMode(CORNER); //it's good form to reset this to avoid breaking other draw loops
}

Processing Resources

For more advanced functionality, search the Internet for what you're looking for (it probably exists somewhere). Here are the most helpful resources:

  • Processing Wiki - This is the main wiki for Processing. There are many code tutorials for different functions available, and links to other resources.
  • Processing Reference API - This provides a comprehensive list of functions used in Processing. WARNING: This page has been updated to reflect changes made in Processing 2.0. Not all functions available on this page will work in Processing 1.5.1.
  • Processing Forums - When in doubt, ask! Chances are someone else has had your problem, so search first, but if you don't find a match, there are experienced Processing users available who can answer your questions.

Next Steps

To run your module, see Running Your First Module for more information on running your project.

If your module is functional, the next step is to export your module into a JAR. This depends on how you set up your project:

Once you've created your JAR, see Running with the Module Manager to run your module with the SDK deployment package.

If you would like to extend the functionality of your module, see Making a Module using Handtracking, or explore the more advanced functions of Processing using the links above.