Processing Skeleton Project and Simple Exercises

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

---

This is an introduction to Processing in Eclipse. A skeleton class is all that is needed to start any Processing project this way. In this tutorial you will play with very simple animation and quickly build up on more complicated features of Processing.

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 too 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...

a solution...

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.

a possible solution...

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.

Hints & Solutions

Exercise #5

• Read about the fill() function in processing.org, and in particular pay attention to the notion of transparency.
• Analyze this new piece of code, and try it out:

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;
	int   transp = 255;
	
	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;
		if ( x > width ) directionX = -directionX;
		if ( y > height ) directionY = -directionY;
		
		transp -= 1;  
		if ( transp==0 ) transp = 255;

		fill( 255, 0, 0, transp ); // red
		ellipse(x, y, 80, 80);
	}
}

• Modify it so that the circle stays within the boundary of the applet
• Make the circle completely disappear when its transparency is maximum.
• Right now it comes back fully opaque as soon as it has disappeared. Modify the program and make the circle gradually disappear and gradually reappear as it moves around.
• Change the color of the circle when it has fully disappeared, before it reappears. So, for example, it will start red and completely fade away, then it will slowly reappear green, and then start disappearing again. When its fully gone, and reappears, then its color will be orange, or some new color of your choice.

Hints and Solutions

Exercise #6

• Same as Exercise #5, but there should be two circles on the applet...

Hints and Solutions

Exercise #7

• Create a new java class (click on the package, New, Java Class) and call it Circle

package tutorial1;

import processing.core.*;

public class Circle {
	float x;
	float y;
	float dirX;
	float dirY;
	int   color;
	PApplet parent;
	
	Circle( PApplet p, float xx, float yy, float dx, float dy ) {
		parent = p;
		x = xx;
		y = yy;
		dirX = dx;
		dirY = dy;
		color = parent.color( 255, 0, 0, 0 ); // red 
	}
	
	public void fill( int col ) {
		color = col;
	}
	
	public void draw( ) {
		parent.fill( color );
		parent.ellipse( x, y, 80, 80 );
	}
	
	public void move( ) {
		x += dirX;
		y += dirY;
	}
}

• Create a new java class called Main2, with the following code

package tutorial1;

import processing.core.*;

public class Main2 extends PApplet {
	Circle c;
	
	public void setup() {
		// define the window size, make graphics softer, and make
		// the background white
		size(600, 600);
		smooth();
		background(255);
		
		// create the circle 
		c = new Circle( this, width/2, height/2, 1, 0.5f );
	}

	public void draw() {
		background(255);

		if (mousePressed) {
			c.fill(0);
		} else {
			c.fill(255);
		}
		c.move();
		c.draw();
	}
}

• Check it out!
• Now, repeat all the previous exercises, but use the Circle class instead.

Exercise #8

• Create an ArrayList of Circles (the class you added in the previous exercise), and make your program move two circles on the applet. Their initial direction will be random, but they will move around the applet, bouncing off the sides, and change color and transparency as they go around.
• When it works with 2 circles, then try 20!

Hints and Solutions