Skip to content

Commit 3554eb3

Browse files
committed
Added bezierVertex docs
1 parent dbdb30a commit 3554eb3

File tree

1 file changed

+52
-32
lines changed

1 file changed

+52
-32
lines changed

src/shape/vertex.js

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ function vertex(p5, fn){
3030
*
3131
* After calling `beginShape()`, shapes can be built by calling
3232
* <a href="#/p5/vertex">vertex()</a>,
33-
* <a href="#/p5/bezierVertex">bezierVertex()</a>,
3433
* <a href="#/p5/bezierVertex">bezierVertex()</a>, and/or
3534
* <a href="#/p5/splineVertex">splineVertex()</a>. Calling
3635
* <a href="#/p5/endShape">endShape()</a> will stop adding vertices to the
@@ -410,20 +409,17 @@ function vertex(p5, fn){
410409
* <a href="#/p5/bezier">bezier()</a> function. `bezierVertex()` must be
411410
* called between the
412411
* <a href="#/p5/beginShape">beginShape()</a> and
413-
* <a href="#/p5/endShape">endShape()</a> functions. The curved segment uses
414-
* the previous vertex as the first anchor point, so there must be at least
415-
* one call to <a href="#/p5/vertex">vertex()</a> before `bezierVertex()` can
416-
* be used.
417-
*
418-
* The first four parameters, `x2`, `y2`, `x3`, and `y3`, set the curve’s two
419-
* control points. The control points "pull" the curve towards them.
420-
*
421-
* The fifth and sixth parameters, `x4`, and `y4`, set the last anchor point.
422-
* The last anchor point is where the curve ends.
423-
*
424-
* Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
425-
* `bezierVertex()` has eight arguments because each point has x-, y-, and
426-
* z-coordinates.
412+
* <a href="#/p5/endShape">endShape()</a> functions. There must be at least
413+
* one call to <a href="#/p5/vertex">bezierVertex()</a>, before
414+
* a number of `bezierVertex()` calls that is a multiple of the parameter
415+
* set by <a href="#/p5/bezierOrder">bezierOrder(...)</a> (default 3).
416+
*
417+
* Each curve of order 3 requires three calls to `bezierVertext`, so
418+
* 2 curves would need 7 calls to `bezierVertex()`:
419+
* (1 one initial anchor point, two sets of 3 curves describing the curves)
420+
* With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2.
421+
*
422+
* Bézier curves can also be drawn in 3D using WebGL mode.
427423
*
428424
* Note: `bezierVertex()` won’t work when an argument is passed to
429425
* <a href="#/p5/beginShape">beginShape()</a>.
@@ -449,10 +445,12 @@ function vertex(p5, fn){
449445
* beginShape();
450446
*
451447
* // Add the first anchor point.
452-
* vertex(30, 20);
448+
* bezierVertex(30, 20);
453449
*
454450
* // Add the Bézier vertex.
455-
* bezierVertex(80, 0, 80, 75, 30, 75);
451+
* bezierVertex(80, 0);
452+
* bezierVertex(80, 75);
453+
* bezierVertex(30, 75);
456454
*
457455
* // Stop drawing the shape.
458456
* endShape();
@@ -489,10 +487,12 @@ function vertex(p5, fn){
489487
* beginShape();
490488
*
491489
* // Add the first anchor point.
492-
* vertex(30, 20);
490+
* bezierVertex(30, 20);
493491
*
494492
* // Add the Bézier vertex.
495-
* bezierVertex(80, 0, 80, 75, 30, 75);
493+
* bezierVertex(80, 0);
494+
* bezierVertex(80, 75);
495+
* bezierVertex(30, 75);
496496
*
497497
* // Stop drawing the shape.
498498
* endShape();
@@ -549,10 +549,12 @@ function vertex(p5, fn){
549549
* beginShape();
550550
*
551551
* // Add the first anchor point.
552-
* vertex(30, 20);
552+
* bezierVertex(30, 20);
553553
*
554554
* // Add the Bézier vertex.
555-
* bezierVertex(x2, y2, 80, 75, 30, 75);
555+
* bezierVertex(x2, y2);
556+
* bezierVertex(80, 75);
557+
* bezierVertex(30, 75);
556558
*
557559
* // Stop drawing the shape.
558560
* endShape();
@@ -596,11 +598,16 @@ function vertex(p5, fn){
596598
* beginShape();
597599
*
598600
* // Add the first anchor point.
599-
* vertex(30, 20);
601+
* bezierVertex(30, 20);
600602
*
601603
* // Add the Bézier vertices.
602-
* bezierVertex(80, 0, 80, 75, 30, 75);
603-
* bezierVertex(50, 80, 60, 25, 30, 20);
604+
* bezierVertex(80, 0);
605+
* bezierVertex(80, 75);
606+
* bezierVertex(30, 75);
607+
*
608+
* bezierVertex(50, 80);
609+
* bezierVertex(60, 25);
610+
* bezierVertex(30, 20);
604611
*
605612
* // Stop drawing the shape.
606613
* endShape();
@@ -632,16 +639,30 @@ function vertex(p5, fn){
632639
*
633640
* // Draw the first moon.
634641
* beginShape();
635-
* vertex(-20, -30, 0);
636-
* bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
637-
* bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
642+
* bezierVertex(-20, -30, 0);
643+
*
644+
* bezierVertex(30, -50, 0);
645+
* bezierVertex(30, 25, 0);
646+
* bezierVertex(-20, 25, 0);
647+
*
648+
* bezierVertex(0, 30, 0);
649+
* bezierVertex(10, -25, 0);
650+
* bezierVertex(-20, -30, 0);
638651
* endShape();
639652
*
640653
* // Draw the second moon.
641654
* beginShape();
642-
* vertex(-20, -30, -20);
643-
* bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
644-
* bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
655+
*
656+
* bezierVertex(-20, -30, -20);
657+
*
658+
* bezierVertex(30, -50, -20);
659+
* bezierVertex(30, 25, -20);
660+
* bezierVertex(-20, 25, -20);
661+
*
662+
* bezierVertex(0, 30, -20);
663+
* bezierVertex(10, -25, -20);
664+
* bezierVertex(-20, -30, -20);
665+
*
645666
* endShape();
646667
* }
647668
* </code>
@@ -1069,8 +1090,7 @@ function vertex(p5, fn){
10691090
*
10701091
* After calling <a href="#/p5/beginShape">beginShape()</a>, shapes can be
10711092
* built by calling <a href="#/p5/vertex">vertex()</a>,
1072-
* <a href="#/p5/bezierVertex">bezierVertex()</a>,
1073-
* <a href="#/p5/quadraticVertex">quadraticVertex()</a>, and/or
1093+
* <a href="#/p5/bezierVertex">bezierVertex()</a> and/or
10741094
* <a href="#/p5/splineVertex">splineVertex()</a>. Calling
10751095
* `endShape()` will stop adding vertices to the
10761096
* shape. Each shape will be outlined with the current stroke color and filled

0 commit comments

Comments
 (0)