Game Maker's Garage Forum

Game Creation => Code Exchange => Topic started by: Connors on September 29, 2012, 11:37:46 PM

Title: [Processing] Spirograph Program
Post by: Connors on September 29, 2012, 11:37:46 PM
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;
  }
 
}
Title: Re: [Processing] Spirograph Program
Post by: Gan on September 30, 2012, 12:07:26 AM
That's really fancy.
Title: Re: [Processing] Spirograph Program
Post by: Circuit on September 30, 2012, 12:58:56 AM
That's cool.
Title: Re: [Processing] Spirograph Program
Post by: Connors on September 30, 2012, 01:14:31 PM
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.
Title: Re: [Processing] Spirograph Program
Post by: Gan on September 30, 2012, 01:31:31 PM
That looks really cool. Fancy, elegant.
Does processing have anti-aliasing?
Title: Re: [Processing] Spirograph Program
Post by: Connors on September 30, 2012, 05:17:45 PM
You know what I should look this up I think it does have smoothing.
Title: Re: [Processing] Spirograph Program
Post by: Connors on September 30, 2012, 09:08:45 PM
Here's some of the most interesting images created by varying the speed or radius of an arm based on cosine.
Title: Re: [Processing] Spirograph Program
Post by: Gan on November 21, 2012, 08:10:37 PM
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.
Title: Re: [Processing] Spirograph Program
Post by: Gan on November 21, 2012, 08:16:28 PM
!!!!!

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