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.