將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陣列類似的東西。但就像我說的，你採取的方法只會給你一些頭痛。你不能直接翻譯代碼。你必須解構它正在做什麼，並重新實現目標語言的邏輯。