将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阵列类似的东西。但就像我说的，你采取的方法只会给你一些头痛。你不能直接翻译代码。你必须解构它正在做什么，并重新实现目标语言的逻辑。