椭圆同心环

Question

我正在尝试重新创建一个由越来越大的圆组成的数组，每个圆被划分为创建点以创建脉动的椭圆。我知道如何将每个圆除以多个点并绘制椭圆。我知道如何创建一系列同心圆，但我似乎无法集中精力将它们放在一起。当我这样做时，我收到如下所示的结果..

之所以会出现这种结果，是因为每个单独的椭圆都在增加与原始椭圆的距离。尽管如此，我不确定如何解决将一系列圆除以多个点以创建椭圆的原始问题。

谢谢。

Blackhole b;

void setup() {
  size(750, 500);
  smooth();
  b = new Blackhole();
}

void draw() {
  b.divide();
  b.display();

}

class Blackhole {
  PVector location;
  PVector velocity;
  PVector acceleration;
  PVector center;
  float speed = 0;

  int [] eSize = {0, 25, 50, 75, 100, 125, 150, 175};
  float radius = 100;
  int numPoints = 16;
  float angle = TWO_PI/(float)numPoints;
  float [] [] xyArray;

  Blackhole() {
    location = new PVector(width/2, height/2);
    velocity = new PVector(0, 0);
    acceleration = new PVector(.0, 0);
  }

  void divide() {
    xyArray = new float [numPoints][3]; 
    for (int i=0; i<numPoints; i++) { 
      float x = radius*sin(angle*i)+width/2;
      float y = radius*cos(angle*i)+height/2;
      xyArray[i][0] = x; 
      xyArray[i][1] = y;
    }
   }



  void display() {
    background(#202020);


    speed = speed + 0.05;
    float pulse = noise(speed);
    pulse = map(pulse, 0, 1, 150, 175);

    noFill();
    stroke(255, 100);
     for ( int j = 0; j < eSize.length; j++) {
      for ( int i = 0; i < numPoints; i++) {
        float x = xyArray[i][0];
         float y = xyArray[i][1];
         ellipse(width/2, height/2, pulse + eSize[j], pulse + eSize[j]);
         ellipse(x, y, 5, 5);
       }
     }
   }
 }

Answer 1

画一圈又一圈应该不复杂，您已经了解如何将极坐标系转换为笛卡尔坐标系。像这样简单的东西会起作用：

/*
    draws a large circle with each vertex drawn as a smaller circle
    sides = circle detail, the more sides, the more detaild the circle will be
    largeRadius = large circle radius
    smallRadius = radius of each small circle
*/
void circleOfCircles(int sides,float largeRadius, float smallRadius){
  float angleIncrement = TWO_PI / sides;
  for(int i = 0 ; i < sides; i++){
    float x = cos(angleIncrement * i) * largeRadius;
    float y = sin(angleIncrement * i) * largeRadius;
    ellipse(x,y,smallRadius,smallRadius);
  }
}

使用您的值将如下所示：

float speed = 0;
int [] eSize = {0, 25, 50, 75, 100, 125, 150, 175};
float radius = 100;
int numPoints = 16;


void setup(){
  size(750,500);
  smooth();
}
void draw(){
  background(#202020);
  translate(width * 0.5, height * 0.5);

  speed = speed + 0.05;
  float pulse = noise(speed);
  pulse = map(pulse, 0.0, 1.0, 150, 175);

  noFill();
  stroke(255, 100);
   for ( int j = 0; j < eSize.length; j++) {
     circleOfCircles(numPoints,pulse + eSize[j], 5);
   }
}
/*
    draws a large circle with each vertex drawn as a smaller circle
    sides = circle detail, the more sides, the more detaild the circle will be
    largeRadius = large circle radius
    smallRadius = radius of each small circle
*/
void circleOfCircles(int sides,float largeRadius, float smallRadius){
  float angleIncrement = TWO_PI / sides;
  for(int i = 0 ; i < sides; i++){
    float x = cos(angleIncrement * i) * largeRadius;
    float y = sin(angleIncrement * i) * largeRadius;
    ellipse(x,y,smallRadius,smallRadius);
  }
}

如果极坐标到笛卡尔的转换令人困惑，您可以简单地 isolate transformations using pushMatrix() and popMatrix():

void circleOfCircles(int sides,float largeRadius, float smallRadius){
  float angleIncrement = TWO_PI / sides;
  for(int i = 0 ; i < sides; i++){
    pushMatrix();
      rotate(angleIncrement * i);
      translate(largeRadius,0);
      ellipse(0,0,smallRadius,smallRadius);
    popMatrix();
  }
}

一般来说，最好让事情尽可能简单。您正在使用 class，这太棒了！封装功能很好。方便以后插入其他sketch。

但是，我在你的 class:

中有一些未使用的变量

PVector location;
  PVector velocity;
  PVector acceleration;
  PVector center;

其中一些已在构造函数中初始化，但再也没有使用过。

绘制圆圈方面的主要问题是围绕 divide() 和 xyArray。在 divide() 中，您计算的是围绕具有单一半径的圆的点，但在 display() 中，您似乎想要使用不同的半径。我删除了 divide() 函数，这样就不需要使用 xyArray 并循环两次（一次设置位置，然后读取它）。请注意，现在使用 pulseRadius 而不是 radius，它考虑了 pulse 和 eSize。

这是您使用 radius 的代码的简化版本，还有 pulse 和 eSize，这可能是您想要做的：

Blackhole b;

void setup() {
  size(750, 500);
  smooth();
  b = new Blackhole();
}

void draw() {
  background(#202020);
  b.display();
}

class Blackhole {
  float speed = 0;

  int [] eSize = {0, 25, 50, 75, 100, 125, 150, 175};
  float radius = 100;
  int numPoints = 16;
  float angle = TWO_PI/(float)numPoints;

  Blackhole() {

  }

  void display() {

    speed = speed + 0.05;
    float pulse = noise(speed);
    pulse = map(pulse, 0, 1, 150, 175);

    noFill();
    stroke(255, 100);
     for ( int j = 0; j < eSize.length; j++) {
      for ( int i = 0; i < numPoints; i++) {

        float pulseRadius = radius + pulse + eSize[j];
        float x = pulseRadius * sin(angle*i)+width/2;
        float y = pulseRadius * cos(angle*i)+height/2;
        ellipse(x, y, 5, 5);
       }
     }
   }
 }

作为探索，here 是一个 javascript 代码演示，使用函数和正弦调用来改变大圆和两个半径中的点数。

int numPoints = 16;


void setup(){
  size(750,500);
  smooth();
  noFill();
}
void draw(){
  background(#202020);
  translate(width * 0.5, height * 0.5);

  for(int i = 0 ; i < numPoints; i++){
    stroke(255, (i+1) * 10);
    circleOfCircles((int)map(sin(frameCount * .001 + i),-1.0,1.0,12 , 64),//number of sides
                         map(sin(frameCount * .010 + i),-1.0,1.0,100,225),//large radius
                         map(sin(frameCount * .100 + i),-1.0,1.0,  1, 30));//small radius
  }
}
/*
    draws a large circle with each vertex drawn as a smaller circle
    sides = circle detail, the more sides, the more detaild the circle will be
    largeRadius = large circle radius
    smallRadius = radius of each small circle
*/
void circleOfCircles(int sides,float largeRadius, float smallRadius){
  float angleIncrement = TWO_PI / sides;
  for(int i = 0 ; i < sides; i++){
    pushMatrix();
      rotate(angleIncrement * i);
      translate(largeRadius,0);
      ellipse(0,0,smallRadius,smallRadius);
    popMatrix();
  }
}

玩得开心！

椭圆同心环

Concentric ring of ellipses

processing