@@ -323,7 +323,73 @@ Additional shanges to shapes in p5.js 1.x, compared to p5.js 2.0, are as follows
323
323
* Sampling detail cleanup
324
324
* p5.js 1.x has separate ` curveDetail() ` and ` bezierDetail() `
325
325
* p5.js 2.0 uses ` curveDetail() ` to cover both, as the more general function
326
- * Defauls updated: in p5.js 1.x, ` endContour() ` is the same as ` endContour(CLOSE) `
326
+ * Defaults updated: in p5.js 1.x, ` endContour() ` is the same as ` endContour(CLOSE) `
327
+
328
+ Finally, the behavior of ` endShape ` allows creating different shapes.
329
+
330
+
331
+ <table >
332
+ <tr ><th >
333
+ p5.js 1.x
334
+
335
+ ![ image] ( https://github.com/user-attachments/assets/7e476299-8b7a-4852-8922-65a6165ca0e4 )
336
+ </th ><th >
337
+ p5.js 2.x
338
+
339
+ ![ image] ( https://github.com/user-attachments/assets/f5db1307-6339-4801-89be-b08c76253acf )
340
+
341
+ </th ></tr >
342
+ <tr ><td >
343
+
344
+ ``` js
345
+ function setup () {
346
+ createCanvas (100 , 100 );
347
+ background (200 );
348
+ beginShape ();
349
+
350
+ // Add the first control point.
351
+ curveVertex (32 , 91 );
352
+ curveVertex (32 , 91 );
353
+
354
+ // Add the anchor points.
355
+ curveVertex (21 , 17 );
356
+ curveVertex (68 , 19 );
357
+
358
+ // Add the second control point.
359
+ curveVertex (84 , 91 );
360
+ curveVertex (84 , 91 );
361
+
362
+ // Stop drawing the shape.
363
+ endShape (CLOSE );
364
+ }
365
+ ```
366
+ </td ><td >
367
+
368
+
369
+ ``` js
370
+ function setup () {
371
+ createCanvas (100 , 100 );
372
+ background (200 );
373
+ beginShape ();
374
+
375
+ // Control points not needed
376
+ // if the goal is a smooth close
377
+ // curveVertex(32, 91);
378
+ curveVertex (32 , 91 );
379
+
380
+ // Add the anchor points.
381
+ curveVertex (21 , 17 );
382
+ curveVertex (68 , 19 );
383
+
384
+ // Second control point also excluded
385
+ // curveVertex(82, 91);
386
+ curveVertex (82 , 91 );
387
+ endShape (CLOSE );
388
+ }
389
+ ```
390
+
391
+ </td ></tr >
392
+ </table >
327
393
328
394
All of the above usages in p5.js 1.x remain available with the [ shapes.js] ( https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js ) compatibility add-on library.
329
395
0 commit comments