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();
  }
}

一般来说，保持事情尽可能简单是最好的。你正在上课，那真是太棒了！封装功能很好。它将来可以更容易地插入其他草图。

但是，我的班级中有一些未使用的变量：

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

其中一些在构造函数中初始化，但从未再次使用过。

在绘制圆圈方面的主要问题是divide()和xyArray。在divide()中，您是围绕具有单个半径的圆计算点，但在display()中，您似乎想要使用不同的半径。我删除了divide()函数，该函数删除了使用xyArray的需要并将其循环两次（一次设置位置，然后读取它）。请注意，而不是radius，现在会使用pulseRadius，并考虑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();
  }
}

玩得开心！

椭圆的同心环

1 个答案: