时间戳

首页 > 解决方案 > 3D 指挥棒圈围绕太阳移动

processing - 3D 指挥棒圈围绕太阳移动

问题描述

如何使用 translate 和 rotate 来定位画布上的球体和线条，并使用 Java Processing 旋转整个场景？

我需要能够做到这一点，以便我可以：

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

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

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

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

3D警棍图片

这是我的代码： 

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中间的太阳。这意味着这两个圆圈和连接它的线必须围绕太阳旋转。为了更容易解释，这条线将穿过太阳并与两个圆圈一起旋转。请参阅上面的图片链接。

标签： processing

解决方案

使您的代码呈现与您附加的图像不同的主要原因是指挥棒对象放置在画布的中心，最终被中心的球体隐藏。

在这里，我将指挥棒球体从中心移开，并减慢了速度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();
    }
  }

请注意我们如何旋转整个画布，以便球体的配置随着连接接力棒球体的线一起旋转。

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

推荐阅读