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);
	}
}

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;
    
    public void setup(){
        size(600,600);
        smooth();
        background(255);
        frameRate( 60 );
        red = 80;
        green = 160;
        blue  = 240;
        transp = 10;
    }
    
    public void draw() {
       if( mousePressed ) {
    	   if ( random( 100 ) < 5 ){
       
    		   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;
    	   }
    	   
           fill( red, green, blue, transp );
           stroke( 0 ); // black
        }
        else {
            fill(255, 255, 255, transp );
            stroke(255);
        }

       ellipse( mouseX, mouseY, 80, 80);
   }
}