3D 指挥棒圆围绕太阳移动

Question

如何使用平移和旋转在 canvas 上定位球体和线，并使用 Java 处理旋转整个场景？

我需要能够做到这一点，这样我才能：

为 3D 指挥棒创建一个 class，它包含两个大小相等的球体和一条连接两个球体中心的线。指挥棒 class 必须具有以下字段变量：

float x, y, z; // the x, y, z coordinates of the center of one baton sphere
               // the other baton sphere should be (-x, -y, -z)

float angle; // rotation angle

float speed; //rotational speed

float radius; //radius of the baton sphere

在草图的主选项卡中，我需要创建一个包含以下内容的场景：

在 window 的中心有一个半径为 50 的黄色球体。黄色球体不动。 6 根警棍绕 y 轴旋转穿过黄色球体。每根警棍以 0.01 到 0.04 之间的随机速度旋转。所有警棍距黄色球体中心的距离都不同。每个接力球的半径是15到30之间的随机数

3D Batons Picture

这是我的代码：

Baton[] batons;
void setup() {
  size(600, 600);
  batons = new Baton[4];
  for(int i = 0; i < batons.length; i++)
  batons[i] = new Baton(100, 100, 100, 45, 2, 25, 2);
}

void draw() {
  background(255);
  stroke(0);
  translate(width/2, height/2);
  fill(255, 200, 50);
  sphere(50);

  for(int i = 0; i < batons.length; i++) {
    batons[i].update();
    batons[i].display();
  }
}

class Baton {
  float x;
  float y;
  float z;
  float angle;
  float speed;
  float radius;
  float theta;

  Baton(float x, float y, float z, float angle, float speed, float radius, float theta) {
    this.x = x;
    this.y = y;
    this.z = y;
    this.angle = angle;
    this.speed = speed;
    this.radius = radius;
    theta = 0;
  }

   void update() {
      theta = theta + speed;
    }

  void display() {
    pushMatrix();
      rotate(theta);
      translate(radius/2, 0);
      fill(51, 51, 51);
      noStroke();
      sphere(radius);
      popMatrix();

      line(x, y, -x, -y);

      pushMatrix();
      rotate(theta);
      translate(radius/2, 0);
      fill(51, 51, 51);
      noStroke();
      sphere(radius);
      popMatrix();

    }
  }

接力棒必须去 through 中间的太阳。这意味着这两个圆圈和连接它的线必须绕着太阳旋转。为了更容易解释，这条线将穿过太阳并与两个圆圈一起旋转。见上图link。

Answer 1

使您的代码呈现与您附加的图像不同的主要因素是 Baton 对象放置在 canvas 的中心并最终被中心的球体隐藏。

在这里，我将接力球从中心移开，并放慢了 frameRate 和 speed 的速度，以便更容易看到它们的移动方式。

Baton[] batons;
void setup() {
  size(600, 600, P3D);
  batons = new Baton[4];
  frameRate(1); // slowed down the frame rate to 1 frame per second
  for(int i = 0; i < batons.length; i++){
    // changed speed from 2 to 0.1 so that the batons move in smaller increments
    batons[i] = new Baton(100, 100, 100, 45, 0.1, 25, 2);
  }
}

void draw() {
  background(255);
  stroke(0);
  translate(width/2, height/2);
  fill(255, 200, 50);
  sphere(50);

  for(int i = 0; i < batons.length; i++) {
    batons[i].update();
    batons[i].display();
  }
}

class Baton {
  float x;
  float y;
  float z;
  float angle;
  float speed;
  float radius;
  float theta;

  Baton(float x, float y, float z, float angle, float speed, float radius, float theta) {
    this.x = x;
    this.y = y;
    this.z = y;
    this.angle = angle;
    this.speed = speed;
    this.radius = radius;
    theta = 0;
  }

   void update() {
      theta = theta + speed;
    }

  void display() {
    pushMatrix();
    // since we want the entire configuration to rotate we will rotate the entire canvas
    rotate(theta);
    // for a more interesting rotation we could do this instead:
    // rotateX(theta);
    // rotateY(theta);
    // rotateZ(theta); 
      float distanceBetweenBatonSpheres = radius + 300;
      translate(distanceBetweenBatonSpheres/2, 0);
      fill(0, 200, 200);
      sphere(radius);
      // now we undo the previous translate and also move back out to the other side of the central sphere
      translate(distanceBetweenBatonSpheres/-1.0, 0);
      sphere(radius);
      // and finally.. draw a line to connect the two spheres
      line(0,0,distanceBetweenBatonSpheres, 0);
      popMatrix();
    }
  }

请注意我们如何旋转整个 canvas 以便球体的配置作为一个实体沿着连接接力球的线旋转。

另请参阅有关通过在 x、y 和 z 方向上旋转使草图更有趣的评论。

3D 指挥棒圆围绕太阳移动

3D Baton Circles move around a Sun

processing