CODEWITHSUNDEEP
processing
Joshua Garcia
Joshua Garcia

Reputation: 87

Array of ellipses rotating along own center point

This is a continuation of the original post:

Calculate ellipse size in relation to distance from center point

I am trying to create a grid of ellipses that all rotate along their own center of rotation. Then, I am trying to scale that "square grid" of ellipses by a center point while still allowing them to rotate along their own individual center points.

Multiple ellipses + Scale by center

ArrayList<RotatingEllipse> ellipses = new ArrayList<RotatingEllipse>();


void setup() {
  size(500, 500);
  noStroke();
  smooth();

  ellipses.add(new RotatingEllipse(width*.25, height*.25));
  ellipses.add(new RotatingEllipse(width*.75, height*.75));

  ellipses.add(new RotatingEllipse(width*.75, height*.25));
  ellipses.add(new RotatingEllipse(width*.25, height*.75));

  ellipses.add(new RotatingEllipse(width/2*.25, height/2*.25));
  ellipses.add(new RotatingEllipse(width/2*.75, height/2*.75));

  ellipses.add(new RotatingEllipse(width/2*.75, height/2*.25));
  ellipses.add(new RotatingEllipse(width/2*.25, height/2*.75));
}

void draw() {
  background(#202020);

  for (RotatingEllipse e : ellipses) {
    e.stepAndDraw();
  }
}


class RotatingEllipse {

  float rotateAroundX;
  float rotateAroundY;
  float distanceFromRotatingPoint;
  float angle;

  public RotatingEllipse(float startX, float startY) {

    rotateAroundX = (width/2 + startX)/2;
    rotateAroundY = (height/2 + startY)/2;


    distanceFromRotatingPoint = dist(startX, startY, rotateAroundX,    rotateAroundY);

    angle = atan2(startY-height/2, startX-width/2);
  }

  public void stepAndDraw() {


    angle += PI/128;


    float x = rotateAroundX + cos(angle)*distanceFromRotatingPoint;
    float y = rotateAroundY + sin(angle)*distanceFromRotatingPoint;



    float distance = dist(x, y, width/2, height/2); 

// size of ellipses  
    float diameter = 50*(200-distance)/500;
   ellipse(x, y, diameter, diameter);
  }
}

Upvotes: 0

Views: 149

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

I think your question has two parts.

Part 1: Why are your points showing up where they are?

The best thing you can do to understand where things will be is to get out a piece of paper and a pencil and draw out some points. Where will each of your points show up?

Processing is putting your points exactly where you're telling it to put them. Here's an example:

ellipses.add(new RotatingEllipse(width/2*.25, height/2*.75));

Where do you expect that to show up? If your width and height are both 500, then width/2*.25 will be 62.5 and height/2*.75 will be 187.5. In other words, this will be somewhere in the upper-left quadrant of your screen.

Do that math for every one of your ellipses, and you'll see exactly why they're showing up where they are.

Part 2: How can you calculate the midpoint between two points?

This is more a math question than a programming question, and googling something like "midpoint between two points" returns a ton of results.

But basically, if you have two points at x1,y1 and x2,y2, then you can find their midpoint by averaging their x and y positions:

midpoint = (x1+x2)2, (y1+y2)/2

I suggest you work through the first part to figure out where your points should be, then use the second part to find midpoints between those points.

Upvotes: 0

Related Questions