Topic:   [Processing] Spirograph Program   (Read 3794 times)


0 Members and 1 Guest are viewing this topic.

Connors


  • ^ This guy is amazing.

  • ****


  • Posts: 2374

  • It's a secret to everyone...
    • View Profile
[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 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;
  }
 
}
« 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


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4408
    • View Profile
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
    • View Profile
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...
    • View Profile
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


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4408
    • View Profile
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...
    • View Profile
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...
    • View Profile
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


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4408
    • View Profile
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 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.
« Last Edit: November 21, 2012, 08:14:20 PM by Gan »

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4408
    • View Profile
Re: [Processing] Spirograph Program
« Reply #8 on: November 21, 2012, 08:16:28 PM »
!!!!!

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