Skip to content
Related Articles

Related Articles

p5.js | curveTightness() Function
  • Last Updated : 25 May, 2020

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
 

My Personal Notes arrow_drop_up
Recommended Articles
Page :