[SOLVED] How to use bezierVertex with UV coordinates in p5js?

How to use bezierVertex with UV coordinates in p5js?

I'm working on a project which I need to map the UV coordinates to the custom shape. I checked the reference where vertex can hold u and v parameters, but bezierVertex does not have it in documentation. However, I checked this GitHub issue where they mentioned bezierVertex can hold

bezierVertex(x2, y2, z2, u2, v2, x3, y3, z3, u3, v3, x4, y4, z4, u4, v4)

however, that does not work either.

I got a sample code where I'm currently modifying points in a rectangular shape I made.

let initVariables = {
    mP: false,
};

const mM = [];

class Measurement {
    constructor(initVariables, _ref) {
        this.initVariables = initVariables;
        this.ref = _ref;
        this.pointActive = false;
        this.activePoint = createVector(0, 0);
    }

    checkPoints() {
        if (dist(mouseX, mouseY, this.ref.x + 300, this.ref.y + 250) <
            26
        ) {
            this.activePoint = this.ref.x;
            this.pointActive = true;

            if (this.initVariables.mP) {
                this.ref.x = mouseX - 300;
                this.ref.y = mouseY - 250;
            }

        } else {
            this.pointActive = false;
        }
    }

    drawMeasurement() {
        if (this.pointActive) {
            noStroke();
            fill(0, 20);
            circle(
                this.ref.x,
                this.ref.y,
                26
            );
        }
       stroke(255, 0, 0);
       fill(255, 0, 0);
        strokeWeight(2);
        circle(this.ref.x, this.ref.y, 5);
       noFill();
    }

}

function preload() {
        img = loadImage('https://t3.ftcdn.net/jpg/02/77/30/98/360_F_277309825_h8RvZkoyBGPDocMtippdfe3497xTrOXO.jpg');
}
 
function setup() {
  createCanvas(600, 500, WEBGL);
  
  
  const measurements = [
    {
      x: -100,
      y: -100,
      u: 0,
      v: 0,
    },
    {
      x: 100,
      y: -100,
      u: 1,
      v: 0,
    },
    {
      x: 100,
      y: 100,
      u: 1,
      v: 1,
    },
    {
      x: -100,
      y: 100,
      u: 0,
      v: 1,
    },
  ];
  for(let measurement of measurements){
    const m = new Measurement(initVariables, measurement);
    mM.push(m);
  }
  
  
  
 }

function draw() {
  background(237, 239, 237);
  
  textureMode(NORMAL);
  texture(img);
  
  stroke(0);
  strokeWeight(2);
  beginShape();
   mM.map((m) => {
          vertex(m.ref.x, m.ref.y, m.ref.u, m.ref.v);
        });
  endShape(CLOSE);
  for (let dimension of mM) {
        dimension.drawMeasurement();
        dimension.checkPoints();
  }

}

mousePressed = () => {
        initVariables.mP = true;
    };
    mouseReleased = async () => {
        initVariables.mP = false;
    };

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

Solution

A bit late answer to the question, but the answer is simply no, it is not possible to have UV coordinates with bezierVertex according to the developers. Instead we had to use the mask to achieve the result.

Devs also added:

Not yet, so for now your best bet will be to manually convert your beziers to polylines that you can use with vertex(). To do this, you can use bezierPoint() to calculate positions along your curve. Normally you'd use three calls to this for x, y, and z, but for texture coordinates, you can add two additional calls for u and v.