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

Answers

• TfGuy44

  March 2018

  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

  March 2018

  A version in p5.js (aka. javascript)

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

  Kf

  
• jeremydouglass

  March 2018 edited March 2018

  @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

  March 2018

  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

  March 2018

  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

  March 2018

  // 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
  //