Open In App

p5.js bezierDetail() function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The bezierDetail() function in p5.js is used to set the resolution at which Beziers display. In order to use it we must use WEBGL render parameter.

Syntax:

bezierDetail( detail )

Parameters: The function accepts single parameter detail which stores the resolution of the curves.

Below programs illustrate the bezierDetail() function in p5.js:

Example 1: This example uses bezierDetail() function to set resolution at which Beziers display.




function setup() {
  
    // Create canvas size
    createCanvas(450, 310, WEBGL);
      
    // bezierDetail() function
    bezierDetail(6);
}
  
function draw() {
  
    // Set the background color
    background(220);
    noFill();
      
    // Bezier function with 8 parameters 
    // except z-coordinate
    bezier(85, 20, 10, 10, 160, 90, 50, 80);
}


Output:

Example 2: This example uses bezierDetail() function to set resolution at which Beziers display.




function setup() {
      
    // Create canvas of given size
    createCanvas(350, 350, WEBGL);
      
    // Use bezierDetail function
    bezierDetail(4);
}
  
function draw() {
      
    // Set background color
    background(0, 0, 0);
      
    noFill();
      
    // Set stroke color
    stroke(255);
      
    // Draw bezier curve
    bezier(150, 50, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
}


Output:

Reference: https://p5js.org/reference/#/p5/bezierDetail



Last Updated : 11 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads