* @module Shape * @submodule Curves * @for p5
(p5, fn)
| 5 | */ |
| 6 | |
| 7 | function curves(p5, fn){ |
| 8 | /** |
| 9 | * Draws a Bézier curve. |
| 10 | * |
| 11 | * Bézier curves can form shapes and curves that slope gently. They're defined |
| 12 | * by two anchor points and two control points. Bézier curves provide more |
| 13 | * control than the spline curves created with the |
| 14 | * <a href="#/p5/spline">spline()</a> function. |
| 15 | * |
| 16 | * The first two parameters, `x1` and `y1`, set the first anchor point. The |
| 17 | * first anchor point is where the curve starts. |
| 18 | * |
| 19 | * The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control |
| 20 | * points. The control points "pull" the curve towards them. |
| 21 | * |
| 22 | * The seventh and eighth parameters, `x4` and `y4`, set the last anchor |
| 23 | * point. The last anchor point is where the curve ends. |
| 24 | * |
| 25 | * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of |
| 26 | * `bezier()` has twelve arguments because each point has x-, y-, |
| 27 | * and z-coordinates. |
| 28 | * |
| 29 | * @method bezier |
| 30 | * @param {Number} x1 x-coordinate of the first anchor point. |
| 31 | * @param {Number} y1 y-coordinate of the first anchor point. |
| 32 | * @param {Number} x2 x-coordinate of the first control point. |
| 33 | * @param {Number} y2 y-coordinate of the first control point. |
| 34 | * @param {Number} x3 x-coordinate of the second control point. |
| 35 | * @param {Number} y3 y-coordinate of the second control point. |
| 36 | * @param {Number} x4 x-coordinate of the second anchor point. |
| 37 | * @param {Number} y4 y-coordinate of the second anchor point. |
| 38 | * @chainable |
| 39 | * |
| 40 | * @example |
| 41 | * function setup() { |
| 42 | * createCanvas(100, 100); |
| 43 | * |
| 44 | * background(200); |
| 45 | * |
| 46 | * // Draw the anchor points in black. |
| 47 | * stroke(0); |
| 48 | * strokeWeight(5); |
| 49 | * point(85, 20); |
| 50 | * point(15, 80); |
| 51 | * |
| 52 | * // Draw the control points in red. |
| 53 | * stroke(255, 0, 0); |
| 54 | * point(10, 10); |
| 55 | * point(90, 90); |
| 56 | * |
| 57 | * // Draw a black bezier curve. |
| 58 | * noFill(); |
| 59 | * stroke(0); |
| 60 | * strokeWeight(1); |
| 61 | * bezier(85, 20, 10, 10, 90, 90, 15, 80); |
| 62 | * |
| 63 | * // Draw red lines from the anchor points to the control points. |
| 64 | * stroke(255, 0, 0); |