ABOUT

This is a proof of concept for an enhancement

to p5's beginShape()/endShape(). Without changing the 

p5 API, it shows how it may be possible to create composite 

paths: paths built from a mix of curve primitives.

​

NOTES

1. SVG paths and native canvas paths mix curve primitives

in a way that's similar to what's proposed here.

​

2. This sketch.js file just contains a demo shape.

​

3. The code that makes the demos work is located in Shape.js in

this project's file directory.

​

TODO

Everything works, but more testing is necessary, it remains to be

determined precisely how this code will fit into the existing p5

codebase, etc. See TODO.txt in this project's file directory.

*/

​

const x = 75;

const y = 75;

const w = 250;

const h = 200;

const d = 80;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  /*

  NOTE:

  In the examples below, the "shape" namespace 

  is used to prevent conflict with p5's current implementation.

  */

  //Example: Rounded rect

  shape.beginShape();

  shape.vertex(x + d / 2, y);

  shape.vertex(x + w, y);

  shape.vertex(x + w, y + h);

  shape.vertex(x, y + h);

  shape.vertex(x, y + d / 2);

  shape.arcVertex(d, d, 0, MINOR, CLOCKWISE, x + d / 2, y);

  shape.endShape();

}