Merge pull request #7373 from GregStanton/dev-2.0

Overhaul custom shapes for p5.js 2.0

Author: davepagurek

preview/global/sketch.js

@@ -1,14 +1,55 @@
-console.log(p5);
+const vertSrc = `#version 300 es
+ precision mediump float;
+ uniform mat4 uModelViewMatrix;
+ uniform mat4 uProjectionMatrix;
 
+ in vec3 aPosition;
+ in vec2 aOffset;
+
+ void main(){
+   vec4 positionVec4 = vec4(aPosition.xyz, 1.0);
+   positionVec4.xy += aOffset;
+   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ }
+`;
+
+const fragSrc = `#version 300 es
+ precision mediump float;
+ out vec4 outColor;
+ void main(){
+   outColor = vec4(0.0, 1.0, 1.0, 1.0);
+ }
+`;
+
+let myShader;
 function setup(){
-  createCanvas(200, 200);
+  createCanvas(100, 100, WEBGL);
+
+  // Create and use the custom shader.
+  myShader = createShader(vertSrc, fragSrc);
+
+  describe('A wobbly, cyan circle on a gray background.');
 }
 
-async function draw(){
-  background(0, 50, 50);
-  circle(100, 100, 50);
+function draw(){
+  // Set the styles
+  background(125);
+  noStroke();
+  shader(myShader);
+
+  // Draw the circle.
+  beginShape();
+  for (let i = 0; i < 30; i++){
+    const x = 40 * cos(i/30 * TWO_PI);
+    const y = 40 * sin(i/30 * TWO_PI);
+
+    // Apply some noise to the coordinates.
+    const xOff = 10 * noise(x + millis()/1000) - 5;
+    const yOff = 10 * noise(y + millis()/1000) - 5;
 
-  fill('white');
-  textSize(30);
-  text('hello', 10, 30);
+    // Apply these noise values to the following vertex.
+    vertexProperty('aOffset', [xOff, yOff]);
+    vertex(x, y);
+  }
+  endShape(CLOSE);
 }

preview/index.html

@@ -20,30 +20,30 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
-      let f;
-      const testWebgl = true
-
-      p.setup = async function () {
-        // TODO: make this work without a name
-        f = await p.loadFont('font/Lato-Black.ttf', 'Lato')
-        p.createCanvas(200, 200, testWebgl ? p.WEBGL : undefined);
+      p.setup = function () {
+        p.createCanvas(100, 100, p.WEBGL);
       };
 
       p.draw = function () {
-        p.background(0, 50, 50);
-        if (testWebgl) p.translate(-p.width/2, -p.height/2);
-
-        p.fill('white');
-        p.textSize(60);
-        p.textAlign(p.RIGHT, p.CENTER)
-        p.textFont(f)
-        p.text('hello, world!', 0, p.height/2, p.width);
+        p.background(200);
+        p.strokeCap(p.SQUARE);
+        p.strokeJoin(p.MITER);
+        p.translate(-p.width/2, -p.height/2);
+        p.noStroke();
+        p.beginShape();
+        p.bezierOrder(2);
+        p.fill('red');
+        p.vertex(10, 10);
+        p.fill('lime');
+        p.bezierVertex(40, 25);
+        p.fill('blue');
+        p.bezierVertex(10, 40);
+        p.endShape();
       };
     };
 
     new p5(sketch);
   </script>
-  <p style="font-family: Lato">hello, world!</p>
 </body>
 
 </html>

src/color/p5.Color.js

@@ -466,6 +466,10 @@ class Color {
   }
 
   get _array() {
+    return this.array();
+  }
+
+  array() {
     return [...this.color.coords, this.color.alpha];
   }
 

src/color/setting.js

@@ -1269,7 +1269,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noFill = function() {
-    this._renderer.states.doFill = false;
+    this._renderer.noFill();
     return this;
   };
 
@@ -1325,7 +1325,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noStroke = function() {
-    this._renderer.states.doStroke = false;
+    this._renderer.states.strokeColor = null;
     return this;
   };
 

src/core/constants.js

@@ -768,6 +768,18 @@ export const QUAD_STRIP = 'quad_strip';
  * @final
  */
 export const TESS = 'tess';
+/**
+ * @typedef {0x0007} EMPTY_PATH
+ * @property {EMPTY_PATH} EMPTY_PATH
+ * @final
+ */
+export const EMPTY_PATH = 0x0007;
+/**
+ * @typedef {0x0008} PATH
+ * @property {PATH} PATH
+ * @final
+ */
+export const PATH = 0x0008;
 /**
  * @typedef {'close'} CLOSE
  * @property {CLOSE} CLOSE
@@ -1330,4 +1342,32 @@ export const HALF_FLOAT = 'half-float';
  * @property {RGBA} RGBA
  * @final
  */
-export const RGBA = 'rgba';
+export const RGBA = 'rgba';
+
+/**
+ * The `splineEnds` mode where splines curve through
+ * their first and last points.
+ * @typedef {unique symbol} INCLUDE
+ * @property {INCLUDE} INCLUDE
+ * @final
+ */
+export const INCLUDE = Symbol('include');
+
+/**
+ * The `splineEnds` mode where the first and last points in a spline
+ * affect the direction of the curve, but are not rendered.
+ * @typedef {unique symbol} EXCLUDE
+ * @property {EXCLUDE} EXCLUDE
+ * @final
+ */
+export const EXCLUDE = Symbol('exclude');
+
+/**
+ * The `splineEnds` mode where the spline loops back to its first point.
+ * Only used internally.
+ * @typedef {unique symbol} JOIN
+ * @property {JOIN} JOIN
+ * @final
+ * @private
+ */
+export const JOIN = Symbol('join');

src/core/main.js

@@ -414,9 +414,6 @@ class p5 {
 
     this._styles = [];
 
-    this._bezierDetail = 20;
-    this._curveDetail = 20;
-
     this._colorMode = constants.RGB;
     this._colorMaxes = {
       rgb: [255, 255, 255, 255],