p5.js quadraticVertex() Function
Last Updated :
11 Aug, 2023
The quadraticVertex() function in p5.js is used to specify the vertex coordinates used to draw a quadratic bezier curve. Every call to this function defines the position of one control point and one anchor point of the bezier curve.
This function can only be used between beginShape() and endShape(). It must be prefaced with a call to the vertex() function to set the first anchor point when called with beginShape() for the first time.
The function expects four parameters in 2D mode and six parameters (which includes z coordinates) in 3D mode. Both the 2D and 3D modes can be used for drawing in the WebGL mode.
Syntax:
quadraticVertex( cx, cy, x3, y3 )
OR
quadraticVertex( cx, cy, cz, x3, y3, z3 )
Parameters: This function accepts six parameters as mentioned above and described below:
- cx: It is a number that specifies the x-coordinate of the control point.
- cy: It is a number that specifies the y-coordinate of the control point.
- x3: It is a number that specifies the x-coordinate of the anchor point.
- y3: It is a number that specifies the y-coordinate of the anchor point.
- cz: It is a number that specifies the z-coordinate of the control point. It is used in the WebGL mode.
- z3: It is a number that specifies the z-coordinate of the anchor point. It is used in the WebGL mode.
The examples below illustrates the quadraticVertex() function in p5.js:
Example 1:
function setup() {
createCanvas(500, 300);
textSize(16);
}
function draw() {
background( "green" );
fill( "black" );
text(
"The bezier below is made using bezierVertex()" +
" function in Canvas" ,
10,
20
);
text( "Red fill color is used to denote anchor" +
" points" , 10, 40);
text( "Blue fill color is used to denote control" +
" points" , 10, 60);
let p1 = { x: 80, y: 240 };
let p2 = { x: 200, y: 100 };
let p3 = { x: 300, y: 200 };
let p4 = { x: 400, y: 200 };
let p5 = { x: 400, y: 100 };
noFill();
beginShape();
vertex(p1.x, p1.y);
quadraticVertex(p2.x, p2.y, p3.x, p3.y);
quadraticVertex(p4.x, p4.y, p5.x, p5.y);
endShape();
fill( "red" );
circle(p1.x, p1.y, 10);
fill( "blue" );
circle(p2.x, p2.y, 10);
fill( "red" );
circle(p3.x, p3.y, 10);
fill( "blue" );
circle(p4.x, p4.y, 10);
fill( "red" );
circle(p5.x, p5.y, 10);
}
|
Output:
Example 2:
let newFont;
function preload() {
newFont = loadFont( "fonts/Montserrat.otf" );
}
function setup() {
createCanvas(500, 300, WEBGL);
textFont(newFont, 14);
}
function draw() {
translate(-width / 2, -height / 2);
background( "green" );
fill( "black" );
text(
"The bezier below is made using bezierVertex()" +
" function in Canvas" ,
10,
20
);
let p1 = { x: 80, y: 240, z: 10 };
let p2 = { x: 250, y: 100, z: 100 };
let p3 = { x: 300, y: 200, z: 10 };
let p4 = { x: 300, y: 250, z: 200 };
let p5 = { x: 400, y: 100, z: 10 };
beginShape();
vertex(p1.x, p1.y, p1.z);
quadraticVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z);
quadraticVertex(p4.x, p4.y, p4.z, p5.x, p5.y, p5.z);
endShape();
}
|
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/quadraticVertex
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...