Заливка 3D-формы соединяется с первой вершиной на P5. js webGL

Question

Это тот эффект, которого я пытаюсь достичь

Это делается с помощью обработки 3.x

Я пытаюсь воссоздать тот же эффект с помощью p5 . js https://editor.p5js.org/atommic/sketches/kqblWtqln

Вот как это выглядит на p5. js когда все вершины имеют одинаковое значение z

Когда все вершины находятся в одной плоскости, проблем нет, и все выглядит так, как ожидалось

значения X и Y этой формы представляют собой 2 массива. Значение Z является функцией mouseX.

for (var i = 0; i < xpos0.length; i++) {

    G = abs((xpos0[i] - mouseX+500)) / (80);
    if (G >= 1) {
        G = 1;
    }
    curveY = curvePoint(-5, 15, 0, 20, G);

    vertex(xpos0[i], ypos0[i], -curveY);  
}

Вот как это выглядит на P5. js при использовании других значений z

При перемещении мышь и изменение значения Z некоторых вершин, этот эффект происходит. Заливка каким-то образом связывает все с первой вершиной массива

Есть идеи, почему это происходит и как чтобы этого избежать?

Answer 1

По-видимому, это известная проблема, поскольку она описана как ожидаемое поведение в документации p5 js

https://p5js.org/reference/# / p5 / vertex