Processing Skeleton Project Solutions

--D. Thiebaut 10:24, 18 June 2012 (EDT)

---

Here are some solutions to selected exercises. They may not be exactly what was asked for, but will give a general idea of possible approaches.

Exercise 2

Here's a possible solution for Exercise 2. One trick I'm using is to add a small random value to the current directionX and directionY variables. Instead of doing

  directionX = random( 10 );

which would store a random value between 0 and 10 into directionX, I prefer to do something like this:

  directionX = directionX + random( 2 ) - 4;

This ways directionX changes by at most -2 to +2 in value. This makes it for smoother changes in direction.

To help with the smoothness, I do not change direction every time draw() is called, but only some random percentage of the time. This is done by changing the direction only when random( 100 ) is less than 5. This way, on the average, the direction changes on the average after 95 steps out of 100 in the same direction.

  if ( random( 100 )  < 5 ) {

       // change direction

  }

I'm also changing the color in the same if statement. Just for fun ;-)

package tutorial1;

import processing.core.*;

public class Exercise2 extends PApplet {
	
	//--- position and velocity of the circle
	float directionX = 2;  // initial direction components of the circle
	float directionY = 1;
	float x, y;              // location of the center of the circle
	int   transp = 255;
	int   red   = 10;     // for changing the colors of the circles...
	int   green = 120;
	int   blue  = 200;
	
	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 of the circle		
		x = width/2;
		y = height/2;
		directionX = 1;
		directionY = 2;
	}

	public void draw() {
		background( 0x6666ee );   // light blue color in hexadecimal.

		// change direction only 5% of the time there's a move, on the average, and 
		// only if the circle is at least 100 pixels away from an edge (otherwise we
		// could get stuck outside the applet...)
		if ( random(100) < 5 && x > 100 && x < width-100 && y > 100 & y < height-100  ) {
			directionX = directionX  + random( 1 ) - 2; // a random number between -5 and 5
			directionY = directionY + random( 1 ) - 2; // same
			red  = (int ) (255 +  red + random( 5 ) - 10 ) % 255; // do not allow colors to go over 255;
			green = (int) (255 + green + random( 6 ) - 10 ) % 255; 
			blue  = (int) (255 + blue + random( 2 ) - 10 ) % 255;
		}
			
                // new position of center of circle
		x += directionX;
		y += directionY;

                // revert direction if center goes off the applet...
		if ( x > width || x < 0 ) directionX = -directionX;
		if ( y > height || y < 0 ) directionY = -directionY;
		
                // change transparency of circle, from opaque to fully transparent...
		transp -= 1;  
		if ( transp==0 ) transp = 255;

                // draw circle in random color, at new place
		fill( red, green, blue, transp ); 
		ellipse(x, y, 80, 80);
	}
}

Variation

To make the animation stop when the mouse is pressed, we can test mousePressed at the beginning of the draw() function, and decide to return and not do anything if the boolean is true:

public void draw() {
		
		if ( mousePressed )
			return;
		
		background( 0x6666ee );
		// change direction only 5% of the time there's a move, on the average, and 
		// only if the circle is at least 100 pixels away from an edge (otherwise we
		// could get stuck outside the applet...)
		if ( random(100) < 5 && x > 100 && x < width-100 && y > 100 & y < height-100  ) {
			directionX = directionX  + random( 1 ) - 2; // a random number between -5 and 5
			directionY = directionY + random( 1 ) - 2; // same
			red  = (int ) (255 +  red + random( 5 ) - 10 ) % 255; // do not allow colors to go over 255;
			green = (int) (255 + green + random( 6 ) - 10 ) % 255; 
			blue  = (int) (255 + blue + random( 2 ) - 10 ) % 255;
		}
			
		x += directionX;
		y += directionY;
		if ( x > width || x < 0 ) directionX = -directionX;
		if ( y > height || y < 0 ) directionY = -directionY;
		
		transp -= 1;  
		if ( transp==0 ) transp = 255;

		fill( red, green, blue, transp ); // red
		ellipse(x, y, 80, 80);
	}

Exercise 3

Here's a possible solution for Exercise 3.

package tutorial1;

import processing.core.*;

public class Exercise3 extends PApplet {
    int red, green, blue, transp;  // color and transparency for the circle
    
    public void setup(){
        size(600,600);
        smooth();
        //--- all white background ---
        background(255);  

        //--- fast frame rate for speedy screen updates ---
        frameRate( 60 );   

        //--- initial color and transparency ---
        red = 80;
        green = 160;
        blue  = 240;
        transp = 10;
    }
    
    public void draw() {
       //--- if user presses mouse key... ---
       if( mousePressed ) {

           //--- change color only 5% of the time... ---
    	   if ( random( 100 ) < 5 ){
                   // +/- random delta in [-5,5] for color and transparency
    		   red = (  (int) (255 + red + random(5)-10 ) ) % 255;
    		   green = (  (int) (255 + green + random(5)-10 ) ) % 255;
    		   blue = (  (int) (255 + blue + random(5)-10 ) ) % 255;
    		   transp = (  (int) (255 + transp + random(5)-10 ) ) % 255;
    	   }
    	   
           //--- define color ---
           fill( red, green, blue, transp );
           stroke( 0 ); // black
        }
        else {
            //--- set circles white, but possibly transparent (nice effect...) ---
            fill(255, 255, 255, transp );
            stroke(255);
        }

       //--- draw circle ---
       ellipse( mouseX, mouseY, 80, 80);
   }
}