Merge branch 'dev-2.0' into 2.0-color

package.json

@@ -22,6 +22,7 @@
   },
   "version": "1.9.4",
   "dependencies": {
+    "@davepagurek/bezier-path": "^0.0.2",
     "acorn": "^8.12.1",
     "acorn-walk": "^8.3.4",
     "colorjs.io": "^0.5.2",
@@ -81,9 +82,7 @@
   },
   "author": "",
   "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "hooks": {}
   },
   "msw": {
     "workerDirectory": [

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/setting.js

@@ -1279,7 +1279,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noFill = function() {
-    this._renderer.states.doFill = false;
+    this._renderer.noFill();
     return this;
   };
 
@@ -1335,7 +1335,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

@@ -771,6 +771,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
@@ -1333,3 +1345,31 @@ export const FLOAT = 'float';
  * @final
  */
 export const HALF_FLOAT = 'half-float';
+
+/**
+ * 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

@@ -413,10 +413,6 @@ class p5 {
     };
 
     this._styles = [];
-
-    this._bezierDetail = 20;
-    this._curveDetail = 20;
-
     this._downKeys = {}; //Holds the key codes of currently pressed keys
   }
 }