Skip to content

Commit 9586bcf

Browse files
authored
Update README.md to include endShape behavior change description
1 parent 8fb5352 commit 9586bcf

File tree

1 file changed

+67
-1
lines changed

1 file changed

+67
-1
lines changed

README.md

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,73 @@ Additional shanges to shapes in p5.js 1.x, compared to p5.js 2.0, are as follows
323323
* Sampling detail cleanup
324324
* p5.js 1.x has separate `curveDetail()` and `bezierDetail()`
325325
* 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>
327393

328394
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.
329395

0 commit comments

Comments
 (0)