From b7925c41ded41e3eef9f8511950208df3d261550 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Mon, 18 Nov 2024 16:44:59 -0500 Subject: [PATCH 1/2] Move fill and stroke into the base renderer --- src/color/setting.js | 4 +- src/core/p5.Renderer.js | 23 ++++++--- src/core/p5.Renderer2D.js | 74 ++++++++++++++-------------- src/shape/2d_primitives.js | 14 +++--- src/shape/curves.js | 4 +- src/shape/vertex.js | 2 +- src/typography/loading_displaying.js | 2 +- src/typography/p5.Font.js | 4 +- src/webgl/3d_primitives.js | 16 +++--- src/webgl/GeometryBuilder.js | 6 +-- src/webgl/ShapeBuilder.js | 4 +- src/webgl/material.js | 8 +-- src/webgl/p5.Framebuffer.js | 2 +- src/webgl/p5.RendererGL.js | 25 +++++----- src/webgl/text.js | 8 +-- test/unit/webgl/p5.RendererGL.js | 10 ++-- 16 files changed, 107 insertions(+), 99 deletions(-) diff --git a/src/color/setting.js b/src/color/setting.js index 3c7a68c003..31f08db1f8 100644 --- a/src/color/setting.js +++ b/src/color/setting.js @@ -1269,7 +1269,7 @@ function setting(p5, fn){ * */ fn.noFill = function() { - this._renderer.states.doFill = false; + this._renderer.noFill(); return this; }; @@ -1325,7 +1325,7 @@ function setting(p5, fn){ * */ fn.noStroke = function() { - this._renderer.states.doStroke = false; + this._renderer.states.strokeColor = false; return this; }; diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 09eebec1bd..d4d13bb75f 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -4,6 +4,7 @@ * @for p5 */ +import { Color } from '../color/p5.Color'; import * as constants from '../core/constants'; import { Image } from '../image/p5.Image'; @@ -25,9 +26,9 @@ class Renderer { // Renderer state machine this.states = { - doStroke: true, + strokeColor: new Color([0, 0, 0]), strokeSet: false, - doFill: true, + fillColor: new Color([255, 255, 255]), fillSet: false, tint: null, imageMode: constants.CORNER, @@ -153,14 +154,22 @@ class Renderer { } - fill() { + fill(...args) { this.states.fillSet = true; - this.states.doFill = true; + this.states.fillColor = this._pInst.color(...args); } - stroke() { + noFill() { + this.states.fillColor = null; + } + + stroke(...args) { this.states.strokeSet = true; - this.states.doStroke = true; + this.states.strokeColor = this._pInst.color(...args); + } + + noStroke() { + this.states.strokeColor = null; } textSize(s) { @@ -254,7 +263,7 @@ class Renderer { // fix for #5785 (top of bounding box) let finalMinHeight = y; - if (!(this.states.doFill || this.states.doStroke)) { + if (!(this.states.fillColor || this.states.strokeColor)) { return; } diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 75cf1b953d..2cd1e27eb5 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -201,7 +201,7 @@ class Renderer2D extends Renderer { fill(...args) { super.fill(...args); - const color = this._pInst.color(...args); + const color = this.states.fillColor; this._setFill(color.toString()); //accessible Outputs @@ -212,7 +212,7 @@ class Renderer2D extends Renderer { stroke(...args) { super.stroke(...args); - const color = this._pInst.color(...args); + const color = this.states.strokeColor; this._setStroke(color.toString()); //accessible Outputs @@ -672,7 +672,7 @@ class Renderer2D extends Renderer { } // Fill curves - if (this.states.doFill) { + if (this.states.fillColor) { if (!this._clipping) ctx.beginPath(); curves.forEach((curve, index) => { if (index === 0) { @@ -692,7 +692,7 @@ class Renderer2D extends Renderer { } // Stroke curves - if (this.states.doStroke) { + if (this.states.strokeColor) { if (!this._clipping) ctx.beginPath(); curves.forEach((curve, index) => { if (index === 0) { @@ -717,8 +717,8 @@ class Renderer2D extends Renderer { ellipse(args) { const ctx = this.drawingContext; - const doFill = this.states.doFill, - doStroke = this.states.doStroke; + const doFill = !!this.states.fillColor, + doStroke = this.states.strokeColor; const x = parseFloat(args[0]), y = parseFloat(args[1]), w = parseFloat(args[2]), @@ -750,7 +750,7 @@ class Renderer2D extends Renderer { line(x1, y1, x2, y2) { const ctx = this.drawingContext; - if (!this.states.doStroke) { + if (!this.states.strokeColor) { return this; } else if (this._getStroke() === styleEmpty) { return this; @@ -764,7 +764,7 @@ class Renderer2D extends Renderer { point(x, y) { const ctx = this.drawingContext; - if (!this.states.doStroke) { + if (!this.states.strokeColor) { return this; } else if (this._getStroke() === styleEmpty) { return this; @@ -785,8 +785,8 @@ class Renderer2D extends Renderer { quad(x1, y1, x2, y2, x3, y3, x4, y4) { const ctx = this.drawingContext; - const doFill = this.states.doFill, - doStroke = this.states.doStroke; + const doFill = !!this.states.fillColor, + doStroke = this.states.strokeColor; if (doFill && !doStroke) { if (this._getFill() === styleEmpty) { return this; @@ -821,8 +821,8 @@ class Renderer2D extends Renderer { let br = args[6]; let bl = args[7]; const ctx = this.drawingContext; - const doFill = this.states.doFill, - doStroke = this.states.doStroke; + const doFill = !!this.states.fillColor, + doStroke = this.states.strokeColor; if (doFill && !doStroke) { if (this._getFill() === styleEmpty) { return this; @@ -891,10 +891,10 @@ class Renderer2D extends Renderer { ctx.arcTo(x, y, x + w, y, tl); ctx.closePath(); } - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { ctx.fill(); } - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { ctx.stroke(); } return this; @@ -903,8 +903,8 @@ class Renderer2D extends Renderer { triangle(args) { const ctx = this.drawingContext; - const doFill = this.states.doFill, - doStroke = this.states.doStroke; + const doFill = !!this.states.fillColor, + doStroke = this.states.strokeColor; const x1 = args[0], y1 = args[1]; const x2 = args[2], @@ -945,7 +945,7 @@ class Renderer2D extends Renderer { if (vertices.length === 0) { return this; } - if (!this.states.doStroke && !this.states.doFill) { + if (!this.states.strokeColor && !this.states.fillColor) { return this; } const closeShape = mode === constants.CLOSE; @@ -1039,7 +1039,7 @@ class Renderer2D extends Renderer { if (shapeKind === constants.POINTS) { for (i = 0; i < numVerts; i++) { v = vertices[i]; - if (this.states.doStroke) { + if (this.states.strokeColor) { this._pInst.stroke(v[6]); } this._pInst.point(v[0], v[1]); @@ -1047,7 +1047,7 @@ class Renderer2D extends Renderer { } else if (shapeKind === constants.LINES) { for (i = 0; i + 1 < numVerts; i += 2) { v = vertices[i]; - if (this.states.doStroke) { + if (this.states.strokeColor) { this._pInst.stroke(vertices[i + 1][6]); } this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]); @@ -1060,11 +1060,11 @@ class Renderer2D extends Renderer { this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]); this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]); this.drawingContext.closePath(); - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this._pInst.fill(vertices[i + 2][5]); this.drawingContext.fill(); } - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this._pInst.stroke(vertices[i + 2][6]); this.drawingContext.stroke(); } @@ -1075,18 +1075,18 @@ class Renderer2D extends Renderer { if (!this._clipping) this.drawingContext.beginPath(); this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]); this.drawingContext.lineTo(v[0], v[1]); - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this._pInst.stroke(vertices[i + 1][6]); } - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this._pInst.fill(vertices[i + 1][5]); } if (i + 2 < numVerts) { this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]); - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this._pInst.stroke(vertices[i + 2][6]); } - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this._pInst.fill(vertices[i + 2][5]); } } @@ -1106,15 +1106,15 @@ class Renderer2D extends Renderer { // If the next colour is going to be different, stroke / fill now if (i < numVerts - 1) { if ( - (this.states.doFill && v[5] !== vertices[i + 1][5]) || - (this.states.doStroke && v[6] !== vertices[i + 1][6]) + (this.states.fillColor && v[5] !== vertices[i + 1][5]) || + (this.states.strokeColor && v[6] !== vertices[i + 1][6]) ) { - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this._pInst.fill(v[5]); this.drawingContext.fill(); this._pInst.fill(vertices[i + 1][5]); } - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this._pInst.stroke(v[6]); this.drawingContext.stroke(); this._pInst.stroke(vertices[i + 1][6]); @@ -1135,10 +1135,10 @@ class Renderer2D extends Renderer { this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]); } this.drawingContext.lineTo(v[0], v[1]); - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this._pInst.fill(vertices[i + 3][5]); } - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this._pInst.stroke(vertices[i + 3][6]); } this._doFillStrokeClose(closeShape); @@ -1156,10 +1156,10 @@ class Renderer2D extends Renderer { vertices[i + 1][0], vertices[i + 1][1]); this.drawingContext.lineTo( vertices[i + 3][0], vertices[i + 3][1]); - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this._pInst.fill(vertices[i + 3][5]); } - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this._pInst.stroke(vertices[i + 3][6]); } } else { @@ -1290,10 +1290,10 @@ class Renderer2D extends Renderer { if (closeShape) { this.drawingContext.closePath(); } - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { this.drawingContext.fill(); } - if (!this._clipping && this.states.doStroke) { + if (!this._clipping && this.states.strokeColor) { this.drawingContext.stroke(); } } @@ -1352,11 +1352,11 @@ class Renderer2D extends Renderer { // a system/browser font // no stroke unless specified by user - if (this.states.doStroke && this.states.strokeSet) { + if (this.states.strokeColor && this.states.strokeSet) { this.drawingContext.strokeText(line, x, y); } - if (!this._clipping && this.states.doFill) { + if (!this._clipping && this.states.fillColor) { // if fill hasn't been set by user, use default text fill if (!this.states.fillSet) { this._setFill(constants._DEFAULT_TEXT_FILL); diff --git a/src/shape/2d_primitives.js b/src/shape/2d_primitives.js index 6e4f551322..3f1e0a3506 100644 --- a/src/shape/2d_primitives.js +++ b/src/shape/2d_primitives.js @@ -313,7 +313,7 @@ function primitives(p5, fn){ // if the current stroke and fill settings wouldn't result in something // visible, exit immediately - if (!this._renderer.states.doStroke && !this._renderer.states.doFill) { + if (!this._renderer.states.strokeColor && !this._renderer.states.fillColor) { return this; } @@ -540,7 +540,7 @@ function primitives(p5, fn){ fn._renderEllipse = function(x, y, w, h, detailX) { // if the current stroke and fill settings wouldn't result in something // visible, exit immediately - if (!this._renderer.states.doStroke && !this._renderer.states.doFill) { + if (!this._renderer.states.strokeColor && !this._renderer.states.fillColor) { return this; } @@ -712,7 +712,7 @@ function primitives(p5, fn){ fn.line = function(...args) { p5._validateParameters('line', args); - if (this._renderer.states.doStroke) { + if (this._renderer.states.strokeColor) { this._renderer.line(...args); } @@ -896,7 +896,7 @@ function primitives(p5, fn){ fn.point = function(...args) { p5._validateParameters('point', args); - if (this._renderer.states.doStroke) { + if (this._renderer.states.strokeColor) { if (args.length === 1 && args[0] instanceof p5.Vector) { this._renderer.point.call( this._renderer, @@ -1057,7 +1057,7 @@ function primitives(p5, fn){ fn.quad = function(...args) { p5._validateParameters('quad', args); - if (this._renderer.states.doStroke || this._renderer.states.doFill) { + if (this._renderer.states.strokeColor || this._renderer.states.fillColor) { if (this._renderer.isP3D && args.length < 12) { // if 3D and we weren't passed 12 args, assume Z is 0 this._renderer.quad.call( @@ -1334,7 +1334,7 @@ function primitives(p5, fn){ // internal method to have renderer draw a rectangle fn._renderRect = function() { - if (this._renderer.states.doStroke || this._renderer.states.doFill) { + if (this._renderer.states.strokeColor || this._renderer.states.fillColor) { // duplicate width for height in case only 3 arguments is provided if (arguments.length === 3) { arguments[3] = arguments[2]; @@ -1433,7 +1433,7 @@ function primitives(p5, fn){ fn.triangle = function(...args) { p5._validateParameters('triangle', args); - if (this._renderer.states.doStroke || this._renderer.states.doFill) { + if (this._renderer.states.strokeColor || this._renderer.states.fillColor) { this._renderer.triangle(args); } diff --git a/src/shape/curves.js b/src/shape/curves.js index 949f60e8ec..54874bafd9 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -205,7 +205,7 @@ function curves(p5, fn){ // if the current stroke and fill settings wouldn't result in something // visible, exit immediately - if (!this._renderer.states.doStroke && !this._renderer.states.doFill) { + if (!this._renderer.states.strokeColor && !this._renderer.states.fillColor) { return this; } @@ -758,7 +758,7 @@ function curves(p5, fn){ fn.curve = function(...args) { p5._validateParameters('curve', args); - if (this._renderer.states.doStroke) { + if (this._renderer.states.strokeColor) { this._renderer.curve(...args); } diff --git a/src/shape/vertex.js b/src/shape/vertex.js index 73afcc1653..bc22d7d886 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -1529,7 +1529,7 @@ function vertex(p5, fn){ if (vertices.length === 0) { return this; } - if (!this._renderer.states.doStroke && !this._renderer.states.doFill) { + if (!this._renderer.states.strokeColor && !this._renderer.states.fillColor) { return this; } diff --git a/src/typography/loading_displaying.js b/src/typography/loading_displaying.js index 47e7fc5812..b7b22ea43f 100644 --- a/src/typography/loading_displaying.js +++ b/src/typography/loading_displaying.js @@ -325,7 +325,7 @@ p5.prototype.loadFont = async function(path, onSuccess, onError) { */ p5.prototype.text = function(str, x, y, maxWidth, maxHeight) { p5._validateParameters('text', arguments); - return !(this._renderer.states.doFill || this._renderer.states.doStroke) + return !(this._renderer.states.fillColor || this._renderer.states.strokeColor) ? this : this._renderer.text(...arguments); }; diff --git a/src/typography/p5.Font.js b/src/typography/p5.Font.js index a91712e2ed..43b98796ba 100644 --- a/src/typography/p5.Font.js +++ b/src/typography/p5.Font.js @@ -538,11 +538,11 @@ p5.Font = class Font { } // only draw stroke if manually set by user - if (pg.states.doStroke && pg.states.strokeSet && !pg._clipping) { + if (pg.states.strokeColor && pg.states.strokeSet && !pg._clipping) { ctx.stroke(); } - if (pg.states.doFill && !pg._clipping) { + if (pg.states.fillColor && !pg._clipping) { // if fill hasn't been set by user, use default-text-fill if (!pg.states.fillSet) { pg._setFill(constants._DEFAULT_TEXT_FILL); diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 869b7ab240..c9106c2e69 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -2250,7 +2250,7 @@ function primitives3D(p5, fn){ if (detail <= 50) { arcGeom._edgesToVertices(arcGeom); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( `Cannot apply a stroke to an ${shape} with more than 50 detail` ); @@ -3179,7 +3179,7 @@ function primitives3D(p5, fn){ this.push(); this.noLights(); - this.states.doStroke = false;; + this.states.strokeColor = false;; this.texture(img); this.states.textureMode = constants.NORMAL; @@ -3366,7 +3366,7 @@ function primitives3D(p5, fn){ planeGeom.computeFaces().computeNormals(); if (detailX <= 1 && detailY <= 1) { planeGeom._makeTriangleEdges()._edgesToVertices(); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( 'Cannot draw stroke on plane objects with more' + ' than 1 detailX or 1 detailY' @@ -3446,7 +3446,7 @@ function primitives3D(p5, fn){ boxGeom.computeNormals(); if (detailX <= 4 && detailY <= 4) { boxGeom._edgesToVertices(); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( 'Cannot draw stroke on box objects with more' + ' than 4 detailX or 4 detailY' @@ -3502,7 +3502,7 @@ function primitives3D(p5, fn){ ellipsoidGeom.computeFaces(); if (detailX <= 24 && detailY <= 24) { ellipsoidGeom._makeTriangleEdges()._edgesToVertices(); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( 'Cannot draw stroke on ellipsoids with more' + ' than 24 detailX or 24 detailY' @@ -3539,7 +3539,7 @@ function primitives3D(p5, fn){ // normals are computed in call to _truncatedCone if (detailX <= 24 && detailY <= 16) { cylinderGeom._makeTriangleEdges()._edgesToVertices(); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( 'Cannot draw stroke on cylinder objects with more' + ' than 24 detailX or 16 detailY' @@ -3565,7 +3565,7 @@ function primitives3D(p5, fn){ _truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false); if (detailX <= 24 && detailY <= 16) { coneGeom._makeTriangleEdges()._edgesToVertices(); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( 'Cannot draw stroke on cone objects with more' + ' than 24 detailX or 16 detailY' @@ -3628,7 +3628,7 @@ function primitives3D(p5, fn){ torusGeom.computeFaces(); if (detailX <= 24 && detailY <= 16) { torusGeom._makeTriangleEdges()._edgesToVertices(); - } else if (this.states.doStroke) { + } else if (this.states.strokeColor) { console.log( 'Cannot draw strokes on torus object with more' + ' than 24 detailX or 16 detailY' diff --git a/src/webgl/GeometryBuilder.js b/src/webgl/GeometryBuilder.js index a5691db31e..8bb3c272c5 100644 --- a/src/webgl/GeometryBuilder.js +++ b/src/webgl/GeometryBuilder.js @@ -87,12 +87,12 @@ class GeometryBuilder { this.geometry.vertexProperty(propName, data, size); } - if (this.renderer.states.doFill) { + if (this.renderer.states.fillColor) { this.geometry.faces.push( ...input.faces.map(f => f.map(idx => idx + startIdx)) ); } - if (this.renderer.states.doStroke) { + if (this.renderer.states.strokeColor) { this.geometry.edges.push( ...input.edges.map(edge => edge.map(idx => idx + startIdx)) ); @@ -111,7 +111,7 @@ class GeometryBuilder { addImmediate(geometry, shapeMode) { const faces = []; - if (this.renderer.states.doFill) { + if (this.renderer.states.fillColor) { if ( shapeMode === constants.TRIANGLE_STRIP || shapeMode === constants.QUAD_STRIP diff --git a/src/webgl/ShapeBuilder.js b/src/webgl/ShapeBuilder.js index 258f8c07e8..02e5318ff1 100644 --- a/src/webgl/ShapeBuilder.js +++ b/src/webgl/ShapeBuilder.js @@ -260,7 +260,7 @@ export class ShapeBuilder { _processVertices(mode) { if (this.geometry.vertices.length === 0) return; - const calculateStroke = this.renderer.states.doStroke; + const calculateStroke = this.renderer.states.strokeColor; const shouldClose = mode === constants.CLOSE; if (calculateStroke) { this.geometry.edges = this._calculateEdges( @@ -280,7 +280,7 @@ export class ShapeBuilder { const hasContour = this.contourIndices.length > 0; // We tesselate when drawing curves or convex shapes const shouldTess = - this.renderer.states.doFill && + this.renderer.states.fillColor && ( this.isBezier || this.isQuadratic || diff --git a/src/webgl/material.js b/src/webgl/material.js index 0c0a8e035f..b6652f495c 100644 --- a/src/webgl/material.js +++ b/src/webgl/material.js @@ -2953,7 +2953,7 @@ function material(p5, fn){ this._renderer.states.curAmbientColor = color._array; this._renderer.states._useNormalMaterial = false; this._renderer.states.enableLighting = true; - this._renderer.states.doFill = true; + this._renderer.states.fillColor = true; return this; }; @@ -3650,7 +3650,7 @@ function material(p5, fn){ this.states.drawMode = constants.TEXTURE; this.states._useNormalMaterial = false; this.states._tex = tex; - this.states.doFill = true; + this.states.fillColor = true; }; RendererGL.prototype.normalMaterial = function(...args) { @@ -3659,8 +3659,8 @@ function material(p5, fn){ this.states._useEmissiveMaterial = false; this.states._useNormalMaterial = true; this.states.curFillColor = [1, 1, 1, 1]; - this.states.doFill = true; - this.states.doStroke = false; + this.states.fillColor = true; + this.states.strokeColor = false; } // RendererGL.prototype.ambientMaterial = function(v1, v2, v3) { diff --git a/src/webgl/p5.Framebuffer.js b/src/webgl/p5.Framebuffer.js index 9d78813469..45da02c255 100644 --- a/src/webgl/p5.Framebuffer.js +++ b/src/webgl/p5.Framebuffer.js @@ -1559,7 +1559,7 @@ class Framebuffer { this.renderer.states.imageMode = constants.CORNER; this.renderer.setCamera(this.filterCamera); this.renderer.resetMatrix(); - this.renderer.states.doStroke = false; + this.renderer.states.strokeColor = false; this.renderer.clear(); this.renderer._drawingFilter = true; this.renderer.image( diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index e806ef8b1f..49bc497eb8 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -468,7 +468,7 @@ class RendererGL extends Renderer { this.shapeBuilder.geometry, this.shapeBuilder.shapeMode ); - } else if (this.states.doFill || this.states.doStroke) { + } else if (this.states.fillColor || this.states.strokeColor) { this._drawGeometry( this.shapeBuilder.geometry, { mode: this.shapeBuilder.shapeMode, count } @@ -509,14 +509,14 @@ class RendererGL extends Renderer { } if ( - this.states.doFill && + this.states.fillColor && geometry.vertices.length >= 3 && ![constants.LINES, constants.POINTS].includes(mode) ) { this._drawFills(geometry, { mode, count }); } - if (this.states.doStroke && geometry.lineVertices.length >= 1) { + if (this.states.strokeColor && geometry.lineVertices.length >= 1) { this._drawStrokes(geometry, { count }); } @@ -965,7 +965,7 @@ class RendererGL extends Renderer { super.fill(...args); //see material.js for more info on color blending in webgl // const color = fn.color.apply(this._pInst, arguments); - const color = this._pInst.color(...args); + const color = this.states.fillColor; this.states.curFillColor = color._array; this.states.drawMode = constants.FILL; this.states._useNormalMaterial = false; @@ -1004,8 +1004,7 @@ class RendererGL extends Renderer { stroke(...args) { super.stroke(...args); // const color = fn.color.apply(this._pInst, arguments); - const color = this._pInst.color(...args); - this.states.curStrokeColor = color._array; + this.states.curStrokeColor = this.states.strokeColor._array; } strokeCap(cap) { @@ -1095,7 +1094,7 @@ class RendererGL extends Renderer { this.matchSize(tmp, target); // setup this.push(); - this.states.doStroke = false; + this.states.strokeColor = false; this.blendMode(constants.BLEND); // draw main to temp buffer @@ -1129,7 +1128,7 @@ class RendererGL extends Renderer { // every other non-blur shader uses single pass else { fbo.draw(() => { - this.states.doStroke = false; + this.states.strokeColor = false; this.blendMode(constants.BLEND); this.shader(this.states.filterShader); this.states.filterShader.setUniform('tex0', target); @@ -1145,7 +1144,7 @@ class RendererGL extends Renderer { } // draw fbo contents onto main renderer. this.push(); - this.states.doStroke = false; + this.states.strokeColor = false; this.clear(); this.push(); this.states.imageMode = constants.CORNER; @@ -1258,8 +1257,8 @@ class RendererGL extends Renderer { this.push(); this.resetShader(); - if (this.states.doFill) this.fill(0, 0); - if (this.states.doStroke) this.stroke(0, 0); + if (this.states.fillColor) this.fill(0, 0); + if (this.states.strokeColor) this.stroke(0, 0); } endClip() { @@ -2036,7 +2035,7 @@ class RendererGL extends Renderer { newFramebuffer.draw(() => { this.shader(this.states.diffusedShader); this.states.diffusedShader.setUniform('environmentMap', input); - this.states.doStroke = false; + this.states.strokeColor = false; this.rectMode(constants.CENTER); this.noLights(); this.rect(0, 0, width, height); @@ -2088,7 +2087,7 @@ class RendererGL extends Renderer { this.clear(); this.states.specularShader.setUniform('environmentMap', input); this.states.specularShader.setUniform('roughness', roughness); - this.states.doStroke = false; + this.states.strokeColor = false; this.noLights(); this.plane(w, w); }); diff --git a/src/webgl/text.js b/src/webgl/text.js index b8355f0c9a..d3d69e8b23 100644 --- a/src/webgl/text.js +++ b/src/webgl/text.js @@ -642,7 +642,7 @@ function text(p5, fn){ ); return; } - if (y >= maxY || !this.states.doFill) { + if (y >= maxY || !this.states.fillColor) { return; // don't render lines beyond our maxY position } @@ -656,10 +656,10 @@ function text(p5, fn){ p.push(); // fix to #803 // remember this state, so it can be restored later - const doStroke = this.states.doStroke; + const doStroke = this.states.strokeColor; const drawMode = this.states.drawMode; - this.states.doStroke = false; + this.states.strokeColor = false; this.states.drawMode = constants.TEXTURE; // get the cached FontInfo object @@ -752,7 +752,7 @@ function text(p5, fn){ // clean up sh.unbindShader(); - this.states.doStroke = doStroke; + this.states.strokeColor = doStroke; this.states.drawMode = drawMode; gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js index 931aa0ef24..0eb5891170 100644 --- a/test/unit/webgl/p5.RendererGL.js +++ b/test/unit/webgl/p5.RendererGL.js @@ -141,21 +141,21 @@ suite('p5.RendererGL', function() { test('check activate and deactivating fill and stroke', function() { myp5.noStroke(); assert( - !myp5._renderer.states.doStroke, + !myp5._renderer.states.strokeColor, 'stroke shader still active after noStroke()' ); - assert.isTrue( - myp5._renderer.states.doFill, + assert( + !myp5._renderer.states.doFill, 'fill shader deactivated by noStroke()' ); myp5.stroke(0); myp5.noFill(); assert( - myp5._renderer.states.doStroke, + !!myp5._renderer.states.strokeColor, 'stroke shader not active after stroke()' ); assert.isTrue( - !myp5._renderer.states.doFill, + !myp5._renderer.states.fillColor, 'fill shader still active after noFill()' ); }); From 3e7132cb35802e431d8b01490e50e73f79e41ce2 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Mon, 18 Nov 2024 16:55:18 -0500 Subject: [PATCH 2/2] Add vertex state getter --- src/core/p5.Renderer.js | 7 +++++++ src/webgl/p5.RendererGL.js | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index d4d13bb75f..08f825a4f0 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -172,6 +172,13 @@ class Renderer { this.states.strokeColor = null; } + vertexProperties() { + return { + stroke: this.states.strokeColor, + fill: this.states.fillColor, + } + } + textSize(s) { if (typeof s === 'number') { this.states.textSize = s; diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 49bc497eb8..b186db1175 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -1007,6 +1007,13 @@ class RendererGL extends Renderer { this.states.curStrokeColor = this.states.strokeColor._array; } + vertexProperties() { + return { + ...super.vertexProperties(), + normal: this.states._currentNormal, + } + } + strokeCap(cap) { this.curStrokeCap = cap; }