Processing Skeleton Project and Simple Exercises

--D. Thiebaut 09:46, 16 June 2012 (EDT)

---

This is the second part of a quick tutorial to accessing an SQLite database from Processing. Check out Part 1 for how to run the example in Processing's IDE.

Setup

• First follow the steps of this great tutorial for creating Processing applications with Eclipse. Remember the steps for adding the core.jar library to your Eclipse project. You will need to repeat them for every new Processing project you want to create. The other option you'll have is to copy paste the skeleton project into another new project, in which case the core library should follow automatically into your new project.
• Note: sometimes it is hard to get the Build Path option for the core.jar file. If this option does not appear, a work-around is to right click on the project, and pick Properties, Java Build Path, then click on the Libraries tab, then Add Jar, pick the core.jar file, and then click Ok.

Skeleton Class

• Create a new class in your package, and call it Main.java.
• In the Edit Window, enter the following code:

package tutorial1;

import processing.core.*;

public class Main extends PApplet {

	public void setup() {
		// define the window size, make graphics softer, and make
		// the background white
		size(600, 600);
		smooth();
		background(255);
	}

	public void draw() {
                // erase screen
		background(255);

                // change color of circle paint depending on mouse button
		if (mousePressed) 
			fill(0);
		else 
			fill(255);
		
                // draw a circle where the mouse is located
		ellipse(mouseX, mouseY, 80, 80);
	}
}

• Click on the white triangle in a green circle under the top menu, and run the Applet. Notice that a circle should appear and follow the mouse. Notice also that it should change color as you click the mouse button.

Exercises

Here is a collection of exercises you should go through. They will build on this simple example and get you to play with different features of Processing.

Exercise #1

• Change the color of circle to yellow and red, depending on whether the mouse button is clicked or not. Use the processing.org site to figure out how color works in Processing.

Exercise #2

• Swap the mouseX and mouseY coordinates in the ellipse() function and see what happens.
• Replace one of the mouseX or mouseY by a call to the random() function.
• You will notice that the circle change widely in the random direction every frame. It's way to busy to be interesting. Instead make the circle stay put when the mouse button is not pressed, and move only when the button is pressed.
• Figure out a way to make the circle move in a random direction, but in a smoother more attractive way...

Exercise #3

• Remove the call to the background() function in the draw() function and see what happens...
• Make the color random and use the new applet to paint the screen. Use the mouse button to switch between painting and erasing.

Exercise #4

• Try this new version of the program:

package tutorial1;

import processing.core.*;

public class Main extends PApplet {
	
	//--- position and velocity of the circle
	float directionX = 2;
	float directionY = 1;
	float x, y;
	
	public void setup() {
		// define the window size, make graphics softer, and make
		// the background white
		size(600, 600);
		smooth();
		background(255);
		
		// define circle position and speed
		x = width/2;
		y = height/2;
		directionX = 1;
		directionY = 2;
	}

	public void draw() {
		background(255);

		x += directionX;
		y += directionY;
		fill( 255, 0, 0 ); // red
		ellipse(x, y, 80, 80);
	}
}

• Try it!
• Change it so that the circle changes direction when the mouse button is pressed.
• Change once more it so that when the button is clicked (check the mouseClicked() function) the circle changes direction and turns right at a right-angle.

Exercise #1

Exercise #1

Exercise #1