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>