将 PVector [ ] 翻译成 p5.js

Question

我正在将这个.pde 文件翻译成p5.js，但我似乎遇到了PVector[] 命令的问题。我可以将什么用作我的代码的 p5.js 等效项？任何建议都会非常有帮助！

这是我的代码：

var state = 0;
var scale = 100;
var phi = (1 + sqrt(5)) / 2.0;
var radious = sqrt(sq(1) + sq(phi));
ArrayList<Triangle> triangles;

function setup() {
  createCanvas(500, 500, WEBGL);
  P5.vector[] vertices = {
    new P5.vector(0, 1, phi),
      new P5.vector(0, -1, phi),
      new P5.vector(0, -1, -phi),
      new P5.vector(0, 1, -phi),
      new P5.vector(phi, 0, 1),
      new P5.vector(-phi, 0, 1),
      new P5.vector(-phi, 0, -1),
      new P5.vector(phi, 0, -1),
      new P5.vector(1, phi, 0),
      new P5.vector(-1, phi, 0),
      new P5.vector(-1, -phi, 0),
      new P5.vector(1, -phi, 0)
  };
  triangles = new ArrayList < Triangle > ();
  triangles.add(new Triangle(vertices[0], vertices[8], vertices[9]));
  triangles.add(new Triangle(vertices[0], vertices[9], vertices[5]));
  triangles.add(new Triangle(vertices[0], vertices[5], vertices[1]));
  triangles.add(new Triangle(vertices[0], vertices[1], vertices[4]));
  triangles.add(new Triangle(vertices[0], vertices[4], vertices[8]));
  triangles.add(new Triangle(vertices[1], vertices[5], vertices[10]));
  triangles.add(new Triangle(vertices[1], vertices[10], vertices[11]));
  triangles.add(new Triangle(vertices[1], vertices[11], vertices[4]));
  triangles.add(new Triangle(vertices[2], vertices[3], vertices[7]));
  triangles.add(new Triangle(vertices[2], vertices[7], vertices[11]));
  triangles.add(new Triangle(vertices[2], vertices[11], vertices[10]));
  triangles.add(new Triangle(vertices[2], vertices[10], vertices[6]));
  triangles.add(new Triangle(vertices[2], vertices[6], vertices[3]));
  triangles.add(new Triangle(vertices[3], vertices[6], vertices[9]));
  triangles.add(new Triangle(vertices[3], vertices[9], vertices[8]));
  triangles.add(new Triangle(vertices[3], vertices[8], vertices[7]));
  triangles.add(new Triangle(vertices[4], vertices[11], vertices[7]));
  triangles.add(new Triangle(vertices[4], vertices[7], vertices[8]));
  triangles.add(new Triangle(vertices[5], vertices[9], vertices[6]));
  triangles.add(new Triangle(vertices[5], vertices[6], vertices[10]));

  for (var i = 0; i < 3; i++) {
    ArrayList < Triangle > nextTriangles = new ArrayList < Triangle > ();
    for (Triangle t: triangles) {
      nextTriangles.addAll(t.divide());
    }
    triangles = nextTriangles;
  }

}

function mousePressed() {
  state++;
  if (state == 3) {
    state = 0;
  }
}

function draw() {
  background(0);
  translate(width / 2, height / 2);
  rotateX(frameCount * 0.001);
  rotateY(frameCount * 0.002);
  rotateZ(frameCount * 0.003);
  for (Triangle t: triangles) {
    t.display();
  }
  println(triangles.size());
}

class Triangle {

  P5.vector[] vertices;

  Triangle(P5.vector v0, P5.vector v1, P5.vector v2) {
    vertices = new P5.vector[3];
    vertices[0] = v0;
    vertices[1] = v1;
    vertices[2] = v2;
  }

  function display() {
    switch (state) {
      case 0:
        stroke(255);
        fill(128);
        beginShape();
        for (var i = 0; i < 3; i++) {
          vertex(vertices[i].x * scale, vertices[i].y * scale, vertices[i].z * scale);
        }
        endShape(CLOSE);
        break;
      case 1:
        stroke(255);
        noFill();
        beginShape();
        for (var i = 0; i < 3; i++) {
          vertex(vertices[i].x * scale, vertices[i].y * scale, vertices[i].z * scale);
        }
        endShape(CLOSE);
        break;
      case 2:
        noFill();
        stroke(255);
        for (var i = 0; i < 3; i++) {
          point(vertices[i].x * scale, vertices[i].y * scale, vertices[i].z * scale);
        }
        break;
    }
  }

  ArrayList < Triangle > divide() {
    P5.vector[] midpoints = new P5.vector[3];
    for (var i = 0; i < 3; i++) {
      var j = i != 2 ? i + 1 : 0;
      P5.vector m = P5.vector.lerp(vertices[i], vertices[j], 0.5);
      m.normalize();
      m.mult(radious);
      midpoints[i] = m;
    }
    ArrayList < Triangle > triangles = new ArrayList < Triangle > ();

    triangles.add(new Triangle(vertices[0], midpoints[0], midpoints[2]));
    triangles.add(new Triangle(vertices[1], midpoints[1], midpoints[0]));
    triangles.add(new Triangle(vertices[2], midpoints[2], midpoints[1]));
    triangles.add(new Triangle(midpoints[0], midpoints[1], midpoints[2]));
    return triangles;
  }
}

如何将我对PVector[] 的使用转换为p5.js？

Answer 1

如果我是你，我不会尝试通过做一个基本的替换来翻译代码，就像你正在做的那样。

相反，您需要通过了解程序的功能来“解构”程序，用英语描述它，然后获取该英语描述并用另一种语言实现它。这不像浏览和替换您正在发现的文本那么简单。

话虽如此，您指出的那一行只是创建了一个P5.vector 实例的数组。要将其转换为 JavaScript，请查看如何在 JavaScript 中创建数组：

var myArray = [thingOne, thingTwo, thingThree];

大概你想对你的vertices 数组做类似的事情。但就像我说的那样，你所采取的方法只会让你头疼。您不能直接翻译代码。你必须解构它在做什么并用目标语言重新实现逻辑。