Merge branch 'dev-2.0' into 2d-build-filter

package.json

@@ -82,7 +82,7 @@
   "author": "",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+
     }
   },
   "msw": {

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,25 +20,25 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
-      let g, f;
-
       p.setup = function () {
-        p.createCanvas(200, 200);
-        g = p.createGraphics(200, 200);
-        f = p.createGraphics(200, 200, p.WEBGL);
+        p.createCanvas(100, 100, p.WEBGL);
       };
 
       p.draw = function () {
-        p.background(0, 50, 50);
-        p.circle(100, 100, 50);
-
-        p.fill('white');
-        p.textSize(30);
-        p.text('hello', 10, 30);
-
-        // f.fill('red');
-        f.sphere();
-        p.image(f, 0, 0);
+        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();
       };
     };
 

src/app.js

@@ -49,11 +49,6 @@ io(p5);
 import math from './math';
 math(p5);
 
-// typography
-import './typography/attributes';
-import './typography/loading_displaying';
-import './typography/p5.Font';
-
 // utilities
 import utilities from './utilities';
 utilities(p5);
@@ -62,6 +57,10 @@ utilities(p5);
 import webgl from './webgl';
 webgl(p5);
 
+// typography
+import type from './type'
+type(p5);
+
 import './core/init';
 
 export default p5;

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

@@ -59,9 +59,9 @@ class p5 {
     this._initializeInstanceVariables();
     this._events = {
       // keep track of user-events for unregistering later
-      mousemove: null,
-      mousedown: null,
-      mouseup: null,
+      pointerdown: null,
+      pointerup: null,
+      pointermove: null,
       dragend: null,
       dragover: null,
       click: null,
@@ -72,16 +72,11 @@ class p5 {
       keyup: null,
       keypress: null,
       wheel: null,
-      touchstart: null,
-      touchmove: null,
-      touchend: null,
       resize: null,
       blur: null
     };
     this._millisStart = -1;
     this._recording = false;
-    this._touchstart = false;
-    this._touchend = false;
 
     // States used in the custom random generators
     this._lcg_random_state = null; // NOTE: move to random.js
@@ -233,6 +228,14 @@ class p5 {
     // unhide any hidden canvases that were created
     const canvases = document.getElementsByTagName('canvas');
 
+    // Apply touchAction = 'none' to canvases if pointer events exist
+    if (Object.keys(this._events).some(event => event.startsWith('pointer'))) {
+      for (const k of canvases) {
+        k.style.touchAction = 'none';
+      }
+    }
+
+
     for (const k of canvases) {
       if (k.dataset.hidden === 'true') {
         k.style.visibility = '';
@@ -411,9 +414,6 @@ class p5 {
 
     this._styles = [];
 
-    this._bezierDetail = 20;
-    this._curveDetail = 20;
-
     this._colorMode = constants.RGB;
     this._colorMaxes = {
       rgb: [255, 255, 255, 255],