Bezier / ベジェ曲線

bezier() 関数の最初の2つのパラメータは曲線の始点を指定し、最後の2つのパラメータは終点を指定します。中間のパラメータは、曲線の形状を定義する制御点を設定します。

bezier curve
Form Math

View Source Code

/*
 * @name Bezier
 * @arialabel 10 lines in a bezier curve formation. The bottom of the curve does not move but as the user’s mouse moves, the top of the curve follows the left and right movement 
 * @description The first two parameters for the bezier() function specify the
 * first point in the curve and the last two parameters specify the last point.
 * The middle parameters set the control points that define the shape of the
 * curve.
 */
function setup() {
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  noFill();
}

function draw() {
  background(0);
  for (let i = 0; i < 200; i += 20) {
    bezier(
      mouseX - i / 2.0,
      40 + i,
      410,
      20,
      440,
      300,
      240 - i / 16.0,
      300 + i / 8.0
    );
  }
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.