Open In App

p5.js curveTightness() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The curveTightness() function in p5.js is used to modify the quality of curves created using the curve() and curveVertex() functions. The tightness parameter is used to define how the curve would fit its vertex points. The default value of tightness for a curve is 0.0 and the value of 1.0 connects all the points with straight lines.
The tightness value can range from -5.0 to 5.0, with the higher values deforming the curve more, while still leaving them recognizable.
Syntax:

curveTightness( amount )

Parameters: This function accepts one parameter as mentioned above and described below: 
 

  • amount: It is a number that specifies the amount that the curve would be deformed from its original vertices. This value ranges from -5.0 to 5.0.

Examples below illustrates the curvePoint() function in p5.js:

Example 1:

javascript




function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  tightnessSlider = createSlider(-5, 5, 0, 0.1);
  tightnessSlider.position(20, 40);
}
  
function draw() {
  background("green");
  text("Move the sliders to change the tightness of the curve", 10, 20);
  
  // Get the tightness value
  tightnessValue = tightnessSlider.value();
  
  // Set the tightness value
  curveTightness(tightnessValue);
  
  // Draw curve using curveVertex()
  beginShape();
  curveVertex(20, 50);
  curveVertex(50, 75);
  curveVertex(250, 150);
  curveVertex(50, 250);
  curveVertex(20, 250);
  endShape();
  
  text("Current Tightness: " + tightnessValue, 10, 280);
}


Output:

curveTight-curveVertexFn

Example 2:

javascript




function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  tightnessSlider = createSlider(-5, 5, 0, 0.1);
  tightnessSlider.position(20, 40);
}
  
function draw() {
  background("green");
  text("Move the sliders to change the tightness of the curve", 10, 20);
  
  // Get the tightness value
  tightnessValue = tightnessSlider.value();
  
  // Set the tightness value
  curveTightness(tightnessValue);
  
  // Draw curve using curve()
  curve(60, 200, 140, 120, 500, 250, 450, 250);
  
  text("Current Tightness: " + tightnessValue, 10, 280);
}


Output:

curveTight-curveFn

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/curveTightness
 



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