[Processing] Spirograph Program

[Connors]

For those who haven't heard of it, Processing is based on java and it is designed to allow programmers to test ideas and experiment with code.

I looked through the examples and found one about polar coordinates which gave me the idea to try something we touched on in a programming class. I made a spirograph program. It consists of a point rotating around the center, with a second point orbiting around it, and it traces the second point's path. It mimics the real life spirograph toy.

Code: [Select]

float t = 0; //theta 1
float r = 40; //radius 1
float t2 = 0;
float r2 = 90;
float c;
polar center = new polar(t, r); //First arm coords
polar arm = new polar(t2, r2); //second arm coords
float centerX;
float centerY;

void setup() {
  size (400, 400);
  centerX = width/2;
  centerY = height/2;
}

void draw() {
  //x = center.cartX();
  //y = polar.cartY();
  t += 0.03;
  t2 += -0.013;
  center.reset(t, r);
  arm.reset(t2, r2);
  //background(0);
  ellipseMode(CENTER);
  c += 0.04;
  stroke(0);
  //stroke(200, 255 - ((int)c), (int)c); //gradual color change.
  //ellipse(center.cartX()+centerX, center.cartY()+centerY, 5, 5);
  point(center.cartX()+centerX+arm.cartX(), center.cartY()+centerY+arm.cartY());
}

Code: [Select]

class polar {
  float t, r;
  
  polar(float theta, float radius) {
    t = theta;
    r = radius;
  }
  
  void reset(float theta, float radius) {
    t = theta;
    r = radius;
  }
  
  float cartX() {
    float cx = r * cos(t); //convert polar coords to cartesian x coord.
    return cx;
  }
  
  float cartY() {
    float cy = r * sin(t); //convert polar coords to cartesian y coord.
    return cy;
  }
  
}

[Gan]

That's really fancy.

[Circuit]

That's cool.

[Connors]

Now here's something more original, that probably would only work with a virtual spirograph:

t2 += cos(t)*0.2;

Now the rotation of the second arm is dependent on that of the first.
And you get things like the attachment. I will experiment with sine and tangent and whatever else I can think of.

[Gan]

That looks really cool. Fancy, elegant.
Does processing have anti-aliasing?

[Connors]

You know what I should look this up I think it does have smoothing.

[Connors]

Here's some of the most interesting images created by varying the speed or radius of an arm based on cosine.

[Gan]

Oh man this is so cool. I'm testing out the code myself. Just downloading Processing. This is pretty epic sauce.

Edit:

Code: [Select]

float t = 0; //theta 1
float r = 40; //radius 1
float t2 = 0;
float r2 = 90;
float c;
polar center = new polar(t, r); //First arm coords
polar arm = new polar(t2, r2); //second arm coords
float centerX;
float centerY;

void setup() {
  size (400, 400);
  centerX = width/2;
  centerY = height/2;
}

void draw() {
  for (int i = 0; i < 20; i = i+1) {
    
  //x = center.cartX();
  //y = polar.cartY();
  t += 0.03 + (i/10);
  t2 += -0.013;
  center.reset(t, r);
  arm.reset(t2, r2);
  //background(0);
  ellipseMode(CENTER);
  c += 0.04;
  stroke(0);
  //stroke(200, 255 - ((int)c), (int)c); //gradual color change.
  //ellipse(center.cartX()+centerX, center.cartY()+centerY, 5, 5);
  point(center.cartX()+centerX+arm.cartX(), center.cartY()+centerY+arm.cartY());
  
  }
}

class polar {
  float t, r;
  
  polar(float theta, float radius) {
    t = theta;
    r = radius;
  }
  
  void reset(float theta, float radius) {
    t = theta;
    r = radius;
  }
  
  float cartX() {
    float cx = r * cos(t); //convert polar coords to cartesian x coord.
    return cx;
  }
  
  float cartY() {
    float cy = r * sin(t); //convert polar coords to cartesian y coord.
    return cy;
  }
  
}

This is awesome, it draws it slowly like it's drawing with a colored pencil.

[Gan]

!!!!!

I JUST SWITCHED TO JAVASCRIPT MODE AND IT WORKS. THIS IS AMAZING. ZOMGWILHAGOUAHBE"OSGBAJNOEL