# Topic:   [Processing] Spirograph Program   (Read 3620 times)

0 Members and 1 Guest are viewing this topic.

#### Connors

• ^ This guy is amazing.

• Posts: 2374

• It's a secret to everyone...
##### [Processing] Spirograph Program
« 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 1float r = 40; //radius 1float t2 = 0;float r2 = 90;float c;polar center = new polar(t, r); //First arm coordspolar arm = new polar(t2, r2); //second arm coordsfloat 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;  }  }``
« Last Edit: September 29, 2012, 11:53:55 PM by Connors »
Warning: The above post may have been modified multiple times.

"In a great game, the character must never perfectly obey the user's command"
- Tim Rogers

http://connorspuzzles.tumblr.com/

#### Gan

• ^ This guy is amazing.

• Posts: 4408
##### Re: [Processing] Spirograph Program
« Reply #1 on: September 30, 2012, 12:07:26 AM »
That's really fancy.

#### Circuit

• GMG-er

• Posts: 299

• blast from the past
##### Re: [Processing] Spirograph Program
« Reply #2 on: September 30, 2012, 12:58:56 AM »
That's cool.

#### Connors

• ^ This guy is amazing.

• Posts: 2374

• It's a secret to everyone...
##### Re: [Processing] Spirograph Program
« Reply #3 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.
« Last Edit: September 30, 2012, 01:21:20 PM by Connors »
Warning: The above post may have been modified multiple times.

"In a great game, the character must never perfectly obey the user's command"
- Tim Rogers

http://connorspuzzles.tumblr.com/

#### Gan

• ^ This guy is amazing.

• Posts: 4408
##### Re: [Processing] Spirograph Program
« Reply #4 on: September 30, 2012, 01:31:31 PM »
That looks really cool. Fancy, elegant.
Does processing have anti-aliasing?

#### Connors

• ^ This guy is amazing.

• Posts: 2374

• It's a secret to everyone...
##### Re: [Processing] Spirograph Program
« Reply #5 on: September 30, 2012, 05:17:45 PM »
You know what I should look this up I think it does have smoothing.
Warning: The above post may have been modified multiple times.

"In a great game, the character must never perfectly obey the user's command"
- Tim Rogers

http://connorspuzzles.tumblr.com/

#### Connors

• ^ This guy is amazing.

• Posts: 2374

• It's a secret to everyone...
##### Re: [Processing] Spirograph Program
« Reply #6 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.
« Last Edit: September 30, 2012, 09:14:51 PM by Connors »
Warning: The above post may have been modified multiple times.

"In a great game, the character must never perfectly obey the user's command"
- Tim Rogers

http://connorspuzzles.tumblr.com/

#### Gan

• ^ This guy is amazing.

• Posts: 4408
##### Re: [Processing] Spirograph Program
« Reply #7 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 1float r = 40; //radius 1float t2 = 0;float r2 = 90;float c;polar center = new polar(t, r); //First arm coordspolar arm = new polar(t2, r2); //second arm coordsfloat 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.
« Last Edit: November 21, 2012, 08:14:20 PM by Gan »