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

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

相反，你需要＆＃34;解构＆＃34;程序通过理解它的作用，用英语描述，然后采用英语描述并用另一种语言实现。它并不像通过和替换您正在发现的文本那么简单。

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

var myArray = [thingOne, thingTwo, thingThree];

据推测，您想要对vertices数组做类似的事情。但就像我说的那样，你采取的方法只是给你带来一些麻烦。您无法直接翻译代码。你必须解构它正在做的事情并重新实现目标语言中的逻辑。

将PVector []转换为p5.js

1 个答案: