How to make an array of ellipses travel along the circumference of another array of larger ellipses

637pm

So I have an Array of 5 large ellipses, but I want to make an array of 5 smaller ellipses where each smaller ellipse travels around the circumference of a larger ellipse from the other array. So basically the larger ellipses act as an orbit path for the smaller ellipses. Below is my code for the 5 larger ellipses

int[] orbit = {50, 100, 150, 200, 250};

void setup() {
    background(148, 103, 252);
    size(400,400);
}

void draw() {
    background(148, 103, 252);

    // draws earth shadow
    noStroke();
    fill(30, 40, 0);
    ellipse(200, 400, 400, 120);

    // draws sun
    noStroke();
    fill(255, 255, 0);
    ellipse(200, 25, 25, 25);

    // draws glow
    fill(255, 255, 0, 120);
    ellipse(200, 25, 50, 50);

    //draws orbits for planets to travel around
    for (int i = 0; i < orbit.length; i++){
        noFill();
        stroke(103, 230, 252);
        ellipse(200, 200, orbit[i], orbit[i]);
    }
}

TfGuy44

float r, dr;

void setup(){
  size(200,200);
  r = 0;
  dr = 0.03;
}

void draw(){
  background(0);
  translate(100,100);
  stroke(128);
  noFill();
  ellipse(0,0,150,150);
  noStroke();
  fill(200,0,200);
  pushMatrix();
  rotate(r);
  ellipse(75,0,20,20);
  popMatrix();
  r+=dr;
}

kfrajer

A version in p5.js (aka. javascript)

http://p5js.sketchpad.cc/sp/pad/view/cBsGAgGbjz/latest

Kf

jeremydouglass

@kfrajer -- beautiful demo sketch.

@637pm -- with two gears this is a simple Spirograph:

https://en.wikipedia.org/wiki/Spirograph

you can extend this Spirograph approach to an arbitrary number of gears if you want the curves to be more complex, or if you want to draw with multiple Spirograph pens at the same time -- on the same gear, or on different gearings (like tracing multiple planets and moons in the same solar system).

To find the location of one pen in your graph, rotate to the orientation of the current gear and then travels its radius -- then does it again (rotate, travel), as many times as you want. In other words, find a pen using a turtle.

This means you can store a pen gearing (that is, an orbit path) as an array or ArrayList of PVectors, one vec per gear leading from the center out:

(initial orientation, radius, speed)
(initial orientation, radius, speed)

So, for example, a lunar satellite would be stored as three gears / vectors: 1. Earth orientation/radius/speed (around Sun), 2. Moon o/r/s (around Earth), 3. satellite o/r/s (around Moon). (Note this is for a 2D model with circular orbits)

To find the current rotation of each gear, use the initial orientation, speed, and elapsed time since the starting clock or frameRate. This avoids drift due to cumulative rounding errors.

Chrisir

sketch from above with better variable names; it's angle, not radius

float angle, delta_angle;
float radius; 

void setup() {
  size(200, 200);

  angle = PI;
  delta_angle = 0.03;

  radius=75;
}

void draw() {
  background(0);

  translate(100, 100);
  stroke(128);
  noFill();
  ellipse(0, 0, 
    2*radius, 2*radius);

  pushMatrix();
  rotate(angle);
  noStroke();
  fill(200, 0, 200);
  ellipse(radius, 0, 
    20, 20);
  popMatrix();

  angle += delta_angle;
  //
}
//

HarryCodes

Somebody might like this addition that moves the ellipse by clicking the mouse. click with the mouse on the left of screen and it moves one way, right side and it moves the other way.

float angle, delta_angle;
float radius; 

void setup() {
  size(200, 200);
   angle = map(radians(mouseX), radians(0), radians(200), 0, TWO_PI);
  delta_angle = 0.03;

  radius=75;


  noLoop();
}

void draw() {
  background(0);


  translate(100, 100);
  stroke(128);
  noFill();
  ellipse(0, 0, 
    2*radius, 2*radius);

  pushMatrix();
  rotate(angle);
  noStroke();
  fill(200, 0, 200);
  ellipse(radius, 0, 
    20, 20);
  popMatrix();

  angle += delta_angle;

}

void mousePressed() {
  if (mouseX < width/2){
   delta_angle = 0.00; 
   delta_angle += 0.03;
  }
    if (mouseX > width/2){
   delta_angle = 0.00;   
   delta_angle -= 0.03;
  }

  redraw();
}

Chrisir

// https : // forum.processing.org/two/discussion/26802/how-to-make-an-array-of-ellipses-travel-along-the-circumference-of-another-array-of-larger-ellipses#latest

// Spirograph 

// the initial circles 
ArrayList<Circle> mainCircles = new ArrayList(); 

// this can change some visuals 
boolean testing = false; 

void setup() {

  size(1400, 1000);

  mainCircles.add(new Circle(width/2, height/2, 75, 0.03, 5*0.03, true));
  mainCircles.add(new Circle(width/2, height/2, 175, 2*0.03, 7*0.03, true));
  mainCircles.add(new Circle(width/2, height/2, 375, 2*0.03, 7*0.03, true));

  background(100);
}//func 

void draw() {
  //if (keyPressed)
  //  background(100);

  //if (testing)
  //  background(100);

  for (Circle s : mainCircles) {
    s.doStep();
  }
  //
}//func

// ----------------------------------------------------------------

void keyPressed() {
  if (key=='t') {
    testing=!testing;
  }
  if (key=='c') {
    background(100);
  }
}//func

// ========================================

class Circle {

  //

  float x, y; 
  float r;      // radius
  float a, da;  // angle and delta_angle 

  color col1 = color(211), col2; 

  boolean isInitial; 

  Circle childCircle=null; 

  // constr 
  Circle( float x_, float y_, 
    float r_, 
    float da_, 
    float secondSpeed_, 
    boolean isInitial_) {

    x=x_;
    y=y_;

    r=r_;

    da = da_;

    isInitial=isInitial_;

    if (isInitial_) {
      col1=color(255); // white
      col2=color(200);
      childCircle = new Circle(x, y, 115, secondSpeed_, -1, false);
    } else {
      col1=color(255, 0, 0);  // red
      col2=color(color(random(255), random(255), random(255)));
    }//else 
    //
  } // constr 

  void doStep() {

    pushMatrix(); 

    translate(x, y);

    stroke(col1);
    noFill();

    if (testing)
      ellipse(0, 0, 2*r, 2*r); // big ellipse 

    pushMatrix();
    rotate(a);

    noStroke();
    fill(col2);
    if (!isInitial) 
      ellipse(r, 0, 17, 17);  // small 

    if (childCircle!=null) {
      childCircle.x=screenX(r, 0); 
      childCircle.y=screenY(r, 0);
    }

    popMatrix();

    popMatrix(); 

    a+=da;

    if (childCircle!=null) 
      childCircle.doStep();
    //
  }//method
  //
}//class
//