椭圆的同心环-Java 学习之路

我正在尝试重新创建一个不断增大的圆形阵列，每个圆圈被分割以创建点以创建脉动的椭圆 . 我知道如何将每个圆圈除以多个点并绘制椭圆 . 而且我知道如何创建一系列同心圆，但我似乎无法将它们整理在一起 . 当我这样做时，我会收到一个看起来像这样的结果 .

Circle Overlap

发生这种结果是因为每个单独的椭圆在距离原始椭圆的距离增加时添加了许多椭圆 . 然而，我不知道如何解决原始问题，即将一系列圆圈除以若干点来创建椭圆 .

谢谢 .

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

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

circles animation preview

玩得开心！

回复于 2024-04-29T08:49:27+08:00

椭圆的同心环

1 回答

相关问题