Moving in a circle - Processing

We all know about degrees - there are 360 degrees in a circle. Why 360? There's no great reason except that it goes back a long long way, and have something to do with inaccurate calendars and base 60 number systems.
In computing we use radians instead of degrees, because radians have a relationship to the geometry of a circle and actually make the math a lot easier. The total number of radians in a circle is pi times two (TWO_PI). Processing likes to think of radians going from -Pi to Pi, counting up as you go clockwise (while math counts the UP on the vertical axis, most computer languages count DOWN, so our rotation will appear to be reversed from your 10th grade math class, which I'm sure you remember like yesterday). Pi as you'll recall, is a ratio of a circle's circumference to its diameter which is 3.14(ish), so the total number of radians in a circle is 6.28(ish), although don't bother memorizing Pi because processing has a PI and TWO_PI as keywords already. In the image below the radians are represented with the greek symbol theta.

So why covert everything to radians and PI? Because we can use trigonometry that's why, but DON"T PANIC processing will do all the heavy lifting for us - pythagorean theorem ... schmagorean theorem!
If you remember your mathz, trig is build around the relationship between a circle and a triangle. For our purposes we are most interested in the relationships between the hypotenuse, the opposite and the adjacent also known as the sine and cosine.
Actually, the Pythagorean theorem is a little handy to know (the square of the hypotenuse = the sum of the squares of the opposite two sides).

sine = opposite over hypotenuse (give us the Y value)
cosine = adjacent over hypotenuse (give us the X value)
For example. Let's say we want a ball to orbit the mouse.

	float r = 0; 
	float radius = 60; 

	void setup() {
	  size (400, 400);
	  smooth();
	}

	void draw() {
	  background(100);
	  r += .01; 
	  float px = mouseX  + cos(r)* radius;
	  float py = mouseY  + sin(r)* radius;
	  ellipse(px, py, 5, 5);
	}
	

To calculate the x and y location of the circle you need to start by calculating the x and y relative to the center of the angle, then add the cartesian coordinates after.
float px = mouseX + cos(r)*(radius);
In the line above cos(r) will give us a value between -1 and 1, multiplying that by the radius give us a larger number. We add that larger number to mouseX which provides the center point for our rotating circle. Okay, but what if you know the location of two points and need the rotation. Again, processing is your math buddy - you can use the atan2 function to get the radians between any two points.

HEY! - Notice that atan2 asks for the Y value then the x value. Usually it's the other way around so don't get messed up.

	void setup() {
	  size (400, 400);
	  rectMode(CENTER);
	  smooth(); 
	}
	void draw() {
	  background(200); 
	  float rot = atan2(mouseY-height/2, mouseX-width/2);
	  pushMatrix();
	  translate(width/2, height/2); 
	  rotate(rot); 
	  rect(20, 0, 40, 10); 
	  popMatrix();
	}

In the above sketch, we get the radians between the mouse and the center of the stage in the line
float rot = atan2(mouseY-height/2, mouseX-width/2);

To rotate something in processing you need to use translate to tell processing what point you are rotating around. This switches the point 0, 0 from the top left corner of the stage to the new coordinates you provide in the translate function. Notice that, when drawing the rectangle, the x and y coordinates are 20, 0, (not width/2 + 20, height/2), this is because 0, 0 is now the center of the stage.

	float locX = 200; 
	float locY = 100; 
	float  r2 = .5; 
	float speed = 7.5; 
	void setup() {
	  size (600, 400);
	  smooth();
	}
	void draw() {
	  background(200); 

	  float px2 = locX + cos(r2)*(speed); // find the X and Y that will be the next "step" of the ball.
	  float py2 = locY + sin(r2)*(speed);  
	  locX +=  px2 - locX; //find the difference between the next locaiton and current location, 
	  locY +=  py2 - locY; // and add the difference to the current location. 

	  pushMatrix(); // save current state
	  translate(locX, locY); // make the "center" the new location
	  rotate(r2); 
	  line(0, 0, -40, 0); // draw the line and circle from this new center. 
	  ellipse(0, 0, 6, 6); 
	  popMatrix(); // go back to current state. 

	  if (locX > width || // collison detection. 
	    locX < 0 ) {
	    r2 = PI - r2;
	  }

	  if (locY > height ||
	    locY < 0 ) {
	    r2 = TWO_PI - r2;
	  }
	}
	

PVectors

There is a great tutorial on PVectors on the processing site. Simply put, a vector is a class that contains two or three variables. Once you declare your vector you can use dot syntax to extract the x, y (and z) values, however, you can add vectors together without needing to extract this information. This requires using special syntax, but it's easy. In the below example I have two vectors for each "star" a location vector and a velocity vector. To move the star we update the velocity vector, then add it to the location vector using loc.add(velocity).
To make multiple stars I added a class, so you should check the classes page for a description on how this works.

	ArrayList starlist; 
	void setup() {
	  size (600, 400);
	  smooth();
	  starlist = new ArrayList();
	  newStar();
	}

	void newStar() {
	  for (int i = 0; i < 150; i ++) {
	    starlist.add(new StarClass());
	  }
	}

	void draw() {
	  background(200);  
	  for (int i = starlist.size()-1; i >= 0; i--) {
	    StarClass dstar = (StarClass) starlist.get(i); 
	    dstar.update();
	    dstar.display();
	     for (int j = starlist.size()-1; j >= 0; j--) {
	       if(j != i){      
	       } 
	     }
	  }
	}

	class StarClass {
	  float  r2; 
	  float speed; 
	  PVector loc, velocity; 
	  StarClass() {
	    // create a random location of x and y for the starting point.
	    loc = new PVector(int(random(width)), int(random(height))); 
	    speed = random(2, 8);
	    r2 = random(TWO_PI);
	     // create a velocity vector based on the speed and rotation.
	    velocity = new PVector(cos(r2)*(speed), sin(r2)*(speed));
	  }
	  void update() {
	    // the velocity is calculated every time and the velocity vector is updated
	   velocity.x = cos(r2)*(speed); 
	   velocity.y = sin(r2)*(speed); 
	   // the velocity vector is added to the loc vector
	    loc.add(velocity);
	    if (loc.x > width || // collison detection. 
	    loc.x < 0 ) { // pull out the x and y values of the loc vector
	      r2 = PI - r2;
	    }
	    if (loc.y > height ||
	      loc.y  < 0 ) {
	      r2 = TWO_PI - r2;
	    }
	  }
	  void display() {
	    pushMatrix();
	    translate(loc.x, loc.y);
	    rotate(r2); 
	    line(0, 0, -40, 0); 
	    ellipse(0, 0, 6, 6); 
	    popMatrix(); 
	  }
	}