June 10, 2011

Angle Reference Circle in Processing

When I think back to trig, I seam to remember 0 degrees always being horizontal and to the right of the center. That turns out to be pretty arbitrary. Different programming languages tend to have different ideas about what angle is considered 0. It's not a problem, just something you need to know in order to get the angels your expecting. The following image is of a sketch I made in Processing to show what it considers 0. Turns out it's down and vertical. I went ahead and made the whole circle with some tick marks for practice. The labels show the angle in both degrees and radians. The lines in the center are random, the numbers on them just show the order in which they were created. The code to create them later served as the base for the branches in the random recursion tree from my last post.
I made a screen shot and used it as a reference to help visualize angles while programming but without the overhead of having a Processing sketch running. Perhaps it could be useful to someone else as well. If someone wants a cleaner version without the center lines, let me know and i will add it. Or just make your own. Here is the code I used, simplified a bit though so it just draws the main circle with tick marks and labels but does not put those random lines in the center.

Circle c;

void setup(){

  c = new Circle(300);

void draw(){


//This code goes in a tab named Circle////////////////////
class Circle{
  int radius;
  int xcenter;
  int ycenter;
  float angleR;
  int angleD;
  int angleOffset;
  boolean dispRadians;

  Circle(int r){
    radius = r;
    xcenter = width/2;
    ycenter = height/2;
    dispRadians = true;

  void drawAll(boolean dr){
    dispRadians = dr;
    for(int i=0;i<360;i++){

  void drawFullCirc(){

  void drawPoint(int angleD, int r, int tI){ //tI = tickInterval;
    int xpos;
    int ypos;
    angleR = angleD * (PI/180);

    xpos = int(float(xcenter)  +sin(angleR)*radius);
    ypos = int(float(ycenter)  +cos(angleR)*radius);
    if(angleD % tI == 0){
      if(angleD % 45 == 0){
      }else if(angleD % 10 == 0){

  void displayText(int aD,float aR, int x, int y){
      aR = float(round(aR*100))/100;

  void drawTicks(float aR,int aD){
    int x1;
    int y1;
    if(aD % 90 == 0){
      x1 = int(float(xcenter)+sin(aR)*(radius-100));
      y1 = int(float(xcenter)+cos(aR)*(radius-100));
    }else if(aD % 45 == 0){
      x1 = int(float(xcenter)+sin(aR)*(radius-60));
      y1 = int(float(xcenter)+cos(aR)*(radius-60));
      x1 = int(float(xcenter)+sin(aR)*(radius-30));
      y1 = int(float(xcenter)+cos(aR)*(radius-30));
    int x2 = int(float(xcenter)+sin(aR)*(radius+10));
    int y2 = int(float(xcenter)+cos(aR)*(radius+10));

If this is useful for anyone, please leave a comment. Thanks.

No comments:

Post a Comment