如何在 p5.js 中为球体（冠状病毒）周围的圆柱体制作嵌套 for 循环？

Question

我很新，正在学习 p5.js，我正在尝试在 p5.js 中用一个球体和一堆圆柱体制作一个 3D 冠状病毒。

你可以在这里看到我的草图：https : //editor.p5js.org/zzzzzij/sketches/frE9-37R

    var sketch = function (p) {
      with(p) {

        let angle = 0;

        p.setup = function() {
          createCanvas(400, 400, WEBGL);
        };
    
        p.draw = function() {
          ambientLight(255);
          background(175);
          noStroke();
          rotateY(angle);
          rotateZ(angle*0.8);
          normalMaterial();

          push();
          rotateY(PI);
          sphere(100);
          pop();

          push();
          for (i = 0; i < 24; i ++) {
            rotateZ(PI/6);
            push();
            translate (0, -21*5, 0*5);
            rotateY(PI/18);
            rotateX(0);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 24; i ++) {
            rotateZ(PI/5);
            push();
            translate (0, -19*5, 9*5);
            rotateY(PI/18);
            rotateX(-PI/8);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 24; i ++) {
            rotateZ(PI/4);
            push();
            translate (0, -15*5, 15*5);
            rotateY(PI/18);
            rotateX(-PI/4);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 24; i ++) {
            rotateZ(PI/3);
            push();
            translate (0, -9*5, 19*5);
            rotateY(PI/18);
            rotateX(-PI/2.5);
            cylinder (6, 20);
            pop();
          }  
            
          for (i = 0; i < 5; i ++) {
            rotateZ(0);
            push();
            translate (0, 0*5, 21*5);
            rotateY(0);
            rotateX(-PI/2);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 5; i ++) {
            rotateZ(0);
            push();
            translate (0, 0*5, -21*5);
            rotateY(0);
            rotateX(-PI/2);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 24; i ++) {
            rotateZ(PI/3);
            push();
            translate (0, 9*5, -19*5);
            rotateY(-PI/18);
            rotateX(-PI/2.5);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 24; i ++) {
            rotateZ(PI/4);
            push();
            translate (0, 15*5, -15*5);
            rotateY(-PI/18);
            rotateX(-PI/4);
            cylinder (6, 20);
            pop();
          } 

          for (i = 0; i < 24; i ++) {
            rotateZ(PI/5);
            push();
            translate (0, 19*5, -9*5);
            rotateY(-PI/18);
            rotateX(-PI/8);
            cylinder (6, 20);
            pop();
          } 
          
          pop();
            
          angle+=0.01;
        };
     
      }
    };
    
    let node = document.createElement('div');
    window.document.getElementById('p5-container').appendChild(node);
    new p5(sketch, node);

body {
  background-color:#e9e9e9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<div id="p5-container"></div>

因为我需要每个圆柱体指向不同的方向，所以我想出了使用一堆 for 循环，沿着 Z 轴一个接一个地间隔圆柱体，每次循环收缩并沿 X 和 Y 旋转时多一点。

如您所见，这对我来说导致了 7 个 for 循环。而其中的 3 个只是对其他 3 个的一些负值来完成球。

我只是想知道是否有办法在嵌套循环中编写这些 for 循环？我已经想通了，但只是想不出一个解决方案......

或者如果有人有更好的方法来编写这些圆柱体循环？

谢谢！

Answer 1

这是一个简单的解决方案。我在下面的代码中所做的是，我首先根据顶点的数量计算每个顶点的位置total，并将它们存储在一个名为globe!的二维数组中。这将允许您存储稍后可以在代码中使用的信息，以在单个 for 循环（每个）中绘制球体和圆柱体！

然后，我使用三角形（换句话说，顶点、边和面）根据 中存储的信息创建了一个球体globe。你会注意到我画的是球体而不是圆柱体。如果你尝试将其改为圆柱体，它看起来不会很有吸引力。我不太擅长数学，但你可以通过计算normals每个顶点的 来解决这个问题。您可能会发现这个A Unit Vector (Normalize) - The Nature of Code and normalize()很有帮助，但请记住，您需要将其从 2D 转换为 3D！

const globe = []; //Holds a 2D array of vectors (v1,v2)
const r = 70; //Radius of circle
const total = 15; //number of vertices
let angleX = 0; //Rotate X axis
let angleY = 0; //Rotate Y axis

function setup() {
  createCanvas(300, 200, WEBGL);

  //Calculate vectors according to number of vertices given
  for (let i = 0; i < total + 1; i++) {
    globe[i] = []; //Create 2D array to hold vertices
    const lat = map(i, 0, total, 0, PI);
    for (let j = 0; j < total + 1; j++) {
      const lon = map(j, 0, total, 0, TWO_PI);
      const x = r * sin(lat) * cos(lon);
      const y = r * sin(lat) * sin(lon);
      const z = r * cos(lat);
      globe[i][j] = createVector(x, y, z); //Store vertices in 2D array
    }
  }
}

function draw(){
  background(51);
  rotateX(angleX);
  rotateY(angleY);
  fill(255);
  stroke(1);
  //Draw Sphere using globe 2D array
  for (let i = 0; i < total; i++) {
    beginShape(TRIANGLE_STRIP);
    for (let j = 0; j < total + 1; j++) {
      const v1 = globe[i][j];
      vertex(v1.x, v1.y, v1.z);
      const v2 = globe[i + 1][j];
      vertex(v2.x, v2.y, v2.z);
      vertices = [v1,v2];
    }
    endShape();
  }
  
  //Draw Cylinders
  for (i = 0; i < total; i ++) {
    for (j = 0; j < total; j ++) {
      const v1 = globe[i][j];
      const v2 = globe[i + 1][j];
      
      push();
      noStroke();
      translate(v1.x,v1.y,v1.z)
      
      normalMaterial();
      sphere(3,5);
      pop();
    }
  } 
  
  //Rotate on X & Y axes 
  angleX += 0.005;
  angleY += 0.006;
  
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>