From 431134e4db556086fe5845d1eea7997bb7dfe4b4 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Thu, 1 Jun 2023 00:40:27 +0900 Subject: [PATCH 01/22] try convert Renderer to class --- src/core/p5.Renderer.js | 77 +++++++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index af2d77d1ec..a3294206f8 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -19,47 +19,48 @@ import * as constants from '../core/constants'; * @param {p5} [pInst] pointer to p5 instance * @param {Boolean} [isMainCanvas] whether we're using it as main canvas */ -p5.Renderer = function (elt, pInst, isMainCanvas) { - p5.Element.call(this, elt, pInst); - this.canvas = elt; - this._pixelsState = pInst; - if (isMainCanvas) { - this._isMainCanvas = true; - // for pixel method sharing with pimage - this._pInst._setProperty('_curElement', this); - this._pInst._setProperty('canvas', this.canvas); - this._pInst._setProperty('width', this.width); - this._pInst._setProperty('height', this.height); - } else { - // hide if offscreen buffer by default - this.canvas.style.display = 'none'; - this._styles = []; // non-main elt styles stored in p5.Renderer - } +p5.Renderer = class extends p5.Element { + constructor(elt, pInst, isMainCanvas) { + super(elt, pInst); + this.canvas = elt; + this._pixelsState = pInst; + if (isMainCanvas) { + this._isMainCanvas = true; + // for pixel method sharing with pimage + this._pInst._setProperty('_curElement', this); + this._pInst._setProperty('canvas', this.canvas); + this._pInst._setProperty('width', this.width); + this._pInst._setProperty('height', this.height); + } else { + // hide if offscreen buffer by default + this.canvas.style.display = 'none'; + this._styles = []; // non-main elt styles stored in p5.Renderer + } - this._textSize = 12; - this._textLeading = 15; - this._textFont = 'sans-serif'; - this._textStyle = constants.NORMAL; - this._textAscent = null; - this._textDescent = null; - this._textAlign = constants.LEFT; - this._textBaseline = constants.BASELINE; - this._textWrap = constants.WORD; - - this._rectMode = constants.CORNER; - this._ellipseMode = constants.CENTER; - this._curveTightness = 0; - this._imageMode = constants.CORNER; - - this._tint = null; - this._doStroke = true; - this._doFill = true; - this._strokeSet = false; - this._fillSet = false; - this._leadingSet = false; + this._textSize = 12; + this._textLeading = 15; + this._textFont = 'sans-serif'; + this._textStyle = constants.NORMAL; + this._textAscent = null; + this._textDescent = null; + this._textAlign = constants.LEFT; + this._textBaseline = constants.BASELINE; + this._textWrap = constants.WORD; + + this._rectMode = constants.CORNER; + this._ellipseMode = constants.CENTER; + this._curveTightness = 0; + this._imageMode = constants.CORNER; + + this._tint = null; + this._doStroke = true; + this._doFill = true; + this._strokeSet = false; + this._fillSet = false; + this._leadingSet = false; + } }; -p5.Renderer.prototype = Object.create(p5.Element.prototype); // the renderer should return a 'style' object that it wishes to // store on the push stack. From 822a535ac29588725504d32521227df417c79236 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Thu, 1 Jun 2023 00:47:15 +0900 Subject: [PATCH 02/22] add name for Renderer, if not succeed, revert. --- src/core/p5.Renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index a3294206f8..2fc341a78a 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -19,7 +19,7 @@ import * as constants from '../core/constants'; * @param {p5} [pInst] pointer to p5 instance * @param {Boolean} [isMainCanvas] whether we're using it as main canvas */ -p5.Renderer = class extends p5.Element { +p5.Renderer = class Renderer extends p5.Element { constructor(elt, pInst, isMainCanvas) { super(elt, pInst); this.canvas = elt; From 10db45776280aa99488badf89ba04390c0a13afd Mon Sep 17 00:00:00 2001 From: asukaminato Date: Thu, 1 Jun 2023 00:53:42 +0900 Subject: [PATCH 03/22] try convert Renderer2D --- src/core/p5.Renderer.js | 77 +++++++++++++++++++-------------------- src/core/p5.Renderer2D.js | 13 +++---- 2 files changed, 44 insertions(+), 46 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 2fc341a78a..af2d77d1ec 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -19,48 +19,47 @@ import * as constants from '../core/constants'; * @param {p5} [pInst] pointer to p5 instance * @param {Boolean} [isMainCanvas] whether we're using it as main canvas */ -p5.Renderer = class Renderer extends p5.Element { - constructor(elt, pInst, isMainCanvas) { - super(elt, pInst); - this.canvas = elt; - this._pixelsState = pInst; - if (isMainCanvas) { - this._isMainCanvas = true; - // for pixel method sharing with pimage - this._pInst._setProperty('_curElement', this); - this._pInst._setProperty('canvas', this.canvas); - this._pInst._setProperty('width', this.width); - this._pInst._setProperty('height', this.height); - } else { - // hide if offscreen buffer by default - this.canvas.style.display = 'none'; - this._styles = []; // non-main elt styles stored in p5.Renderer - } - - this._textSize = 12; - this._textLeading = 15; - this._textFont = 'sans-serif'; - this._textStyle = constants.NORMAL; - this._textAscent = null; - this._textDescent = null; - this._textAlign = constants.LEFT; - this._textBaseline = constants.BASELINE; - this._textWrap = constants.WORD; - - this._rectMode = constants.CORNER; - this._ellipseMode = constants.CENTER; - this._curveTightness = 0; - this._imageMode = constants.CORNER; - - this._tint = null; - this._doStroke = true; - this._doFill = true; - this._strokeSet = false; - this._fillSet = false; - this._leadingSet = false; +p5.Renderer = function (elt, pInst, isMainCanvas) { + p5.Element.call(this, elt, pInst); + this.canvas = elt; + this._pixelsState = pInst; + if (isMainCanvas) { + this._isMainCanvas = true; + // for pixel method sharing with pimage + this._pInst._setProperty('_curElement', this); + this._pInst._setProperty('canvas', this.canvas); + this._pInst._setProperty('width', this.width); + this._pInst._setProperty('height', this.height); + } else { + // hide if offscreen buffer by default + this.canvas.style.display = 'none'; + this._styles = []; // non-main elt styles stored in p5.Renderer } + + this._textSize = 12; + this._textLeading = 15; + this._textFont = 'sans-serif'; + this._textStyle = constants.NORMAL; + this._textAscent = null; + this._textDescent = null; + this._textAlign = constants.LEFT; + this._textBaseline = constants.BASELINE; + this._textWrap = constants.WORD; + + this._rectMode = constants.CORNER; + this._ellipseMode = constants.CENTER; + this._curveTightness = 0; + this._imageMode = constants.CORNER; + + this._tint = null; + this._doStroke = true; + this._doFill = true; + this._strokeSet = false; + this._fillSet = false; + this._leadingSet = false; }; +p5.Renderer.prototype = Object.create(p5.Element.prototype); // the renderer should return a 'style' object that it wishes to // store on the push stack. diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 1e0875f8da..65ac52eb97 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -11,15 +11,14 @@ import './p5.Renderer'; const styleEmpty = 'rgba(0,0,0,0)'; // const alphaThreshold = 0.00125; // minimum visible -p5.Renderer2D = function (elt, pInst, isMainCanvas) { - p5.Renderer.call(this, elt, pInst, isMainCanvas); - this.drawingContext = this.canvas.getContext('2d'); - this._pInst._setProperty('drawingContext', this.drawingContext); - return this; +p5.Renderer2D = class Renderer2D extends p5.Renderer{ + constructor (elt, pInst, isMainCanvas) { + super(elt, pInst, isMainCanvas); + this.drawingContext = this.canvas.getContext('2d'); + this._pInst._setProperty('drawingContext', this.drawingContext); + } }; -p5.Renderer2D.prototype = Object.create(p5.Renderer.prototype); - p5.Renderer2D.prototype._applyDefaults = function () { this._cachedFillStyle = this._cachedStrokeStyle = undefined; this._cachedBlendMode = constants.BLEND; From 6117d710976235ad7dd23d76ce63cf791c428d9e Mon Sep 17 00:00:00 2001 From: asukaminato Date: Thu, 1 Jun 2023 01:09:12 +0900 Subject: [PATCH 04/22] test RendererGL --- src/core/p5.Renderer2D.js | 13 +++++++------ src/webgl/p5.RendererGL.js | 14 ++++++++------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 65ac52eb97..1e0875f8da 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -11,14 +11,15 @@ import './p5.Renderer'; const styleEmpty = 'rgba(0,0,0,0)'; // const alphaThreshold = 0.00125; // minimum visible -p5.Renderer2D = class Renderer2D extends p5.Renderer{ - constructor (elt, pInst, isMainCanvas) { - super(elt, pInst, isMainCanvas); - this.drawingContext = this.canvas.getContext('2d'); - this._pInst._setProperty('drawingContext', this.drawingContext); - } +p5.Renderer2D = function (elt, pInst, isMainCanvas) { + p5.Renderer.call(this, elt, pInst, isMainCanvas); + this.drawingContext = this.canvas.getContext('2d'); + this._pInst._setProperty('drawingContext', this.drawingContext); + return this; }; +p5.Renderer2D.prototype = Object.create(p5.Renderer.prototype); + p5.Renderer2D.prototype._applyDefaults = function () { this._cachedFillStyle = this._cachedStrokeStyle = undefined; this._cachedBlendMode = constants.BLEND; diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index c85c873303..a135a056f6 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -599,14 +599,16 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.fontInfos = {}; - this._curShader = undefined; + this._curShader = undefined; - return this; - } + return this; +}; - ////////////////////////////////////////////// - // Setting - ////////////////////////////////////////////// +p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); + +////////////////////////////////////////////// +// Setting +////////////////////////////////////////////// _setAttributeDefaults(pInst) { // See issue #3850, safer to enable AA in Safari From a0e97bdabb56c6b21e53d376531104b8ef31e8d0 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:01:48 +0900 Subject: [PATCH 05/22] move Renderer2D to class --- src/core/p5.Renderer2D.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 1e0875f8da..65ac52eb97 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -11,15 +11,14 @@ import './p5.Renderer'; const styleEmpty = 'rgba(0,0,0,0)'; // const alphaThreshold = 0.00125; // minimum visible -p5.Renderer2D = function (elt, pInst, isMainCanvas) { - p5.Renderer.call(this, elt, pInst, isMainCanvas); - this.drawingContext = this.canvas.getContext('2d'); - this._pInst._setProperty('drawingContext', this.drawingContext); - return this; +p5.Renderer2D = class Renderer2D extends p5.Renderer{ + constructor (elt, pInst, isMainCanvas) { + super(elt, pInst, isMainCanvas); + this.drawingContext = this.canvas.getContext('2d'); + this._pInst._setProperty('drawingContext', this.drawingContext); + } }; -p5.Renderer2D.prototype = Object.create(p5.Renderer.prototype); - p5.Renderer2D.prototype._applyDefaults = function () { this._cachedFillStyle = this._cachedStrokeStyle = undefined; this._cachedBlendMode = constants.BLEND; From 1d2c7e35f3d6013981d28c4382f45d2e5e52cc16 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:10:16 +0900 Subject: [PATCH 06/22] Renderer to class --- src/core/p5.Renderer.js | 93 +++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 45 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index af2d77d1ec..e1c926ee2a 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -13,53 +13,56 @@ import * as constants from '../core/constants'; * Renderer2D and Renderer3D classes, respectively. * * @class p5.Renderer - * @constructor - * @extends p5.Element - * @param {String} elt DOM node that is wrapped - * @param {p5} [pInst] pointer to p5 instance - * @param {Boolean} [isMainCanvas] whether we're using it as main canvas */ -p5.Renderer = function (elt, pInst, isMainCanvas) { - p5.Element.call(this, elt, pInst); - this.canvas = elt; - this._pixelsState = pInst; - if (isMainCanvas) { - this._isMainCanvas = true; - // for pixel method sharing with pimage - this._pInst._setProperty('_curElement', this); - this._pInst._setProperty('canvas', this.canvas); - this._pInst._setProperty('width', this.width); - this._pInst._setProperty('height', this.height); - } else { - // hide if offscreen buffer by default - this.canvas.style.display = 'none'; - this._styles = []; // non-main elt styles stored in p5.Renderer - } - - this._textSize = 12; - this._textLeading = 15; - this._textFont = 'sans-serif'; - this._textStyle = constants.NORMAL; - this._textAscent = null; - this._textDescent = null; - this._textAlign = constants.LEFT; - this._textBaseline = constants.BASELINE; - this._textWrap = constants.WORD; - - this._rectMode = constants.CORNER; - this._ellipseMode = constants.CENTER; - this._curveTightness = 0; - this._imageMode = constants.CORNER; - - this._tint = null; - this._doStroke = true; - this._doFill = true; - this._strokeSet = false; - this._fillSet = false; - this._leadingSet = false; -}; +p5.Renderer = class Renderer extends p5.Element { + /** + * @class p5.Renderer + * @constructor + * @extends p5.Element + * @param {String} elt DOM node that is wrapped + * @param {p5} [pInst] pointer to p5 instance + * @param {Boolean} [isMainCanvas] whether we're using it as main canvas + */ + constructor(elt, pInst, isMainCanvas) { + super(elt, pInst); + this.canvas = elt; + this._pixelsState = pInst; + if (isMainCanvas) { + this._isMainCanvas = true; + // for pixel method sharing with pimage + this._pInst._setProperty('_curElement', this); + this._pInst._setProperty('canvas', this.canvas); + this._pInst._setProperty('width', this.width); + this._pInst._setProperty('height', this.height); + } else { + // hide if offscreen buffer by default + this.canvas.style.display = 'none'; + this._styles = []; // non-main elt styles stored in p5.Renderer + } -p5.Renderer.prototype = Object.create(p5.Element.prototype); + this._textSize = 12; + this._textLeading = 15; + this._textFont = 'sans-serif'; + this._textStyle = constants.NORMAL; + this._textAscent = null; + this._textDescent = null; + this._textAlign = constants.LEFT; + this._textBaseline = constants.BASELINE; + this._textWrap = constants.WORD; + + this._rectMode = constants.CORNER; + this._ellipseMode = constants.CENTER; + this._curveTightness = 0; + this._imageMode = constants.CORNER; + + this._tint = null; + this._doStroke = true; + this._doFill = true; + this._strokeSet = false; + this._fillSet = false; + this._leadingSet = false; + } +} // the renderer should return a 'style' object that it wishes to // store on the push stack. From 63eb85f4a3d60e968d0df261772125e722abe72c Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:15:27 +0900 Subject: [PATCH 07/22] fix ci --- src/webgl/p5.RendererGL.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index a135a056f6..eaea500d70 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -599,16 +599,14 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.fontInfos = {}; - this._curShader = undefined; + this._curShader = undefined; - return this; -}; - -p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); + return this; + } -////////////////////////////////////////////// -// Setting -////////////////////////////////////////////// + ////////////////////////////////////////////// + // Setting + ////////////////////////////////////////////// _setAttributeDefaults(pInst) { // See issue #3850, safer to enable AA in Safari @@ -1635,7 +1633,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); _arraysEqual(a, b) { const aLength = a.length; if (aLength !== b.length) return false; - return a.every((ai,i) => ai === b[i]); + return a.every((ai, i) => ai === b[i]); } _isTypedArray(arr) { @@ -1701,7 +1699,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); } // function to calculate BezierVertex Coefficients - _bezierCoefficients (t) { + _bezierCoefficients(t) { const t2 = t * t; const t3 = t2 * t; const mt = 1 - t; @@ -1711,7 +1709,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); } // function to calculate QuadraticVertex Coefficients - _quadraticCoefficients (t) { + _quadraticCoefficients(t) { const t2 = t * t; const mt = 1 - t; const mt2 = mt * mt; @@ -1719,7 +1717,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); } // function to convert Bezier coordinates to Catmull Rom Splines - _bezierToCatmull (w) { + _bezierToCatmull(w) { const p1 = w[1]; const p2 = w[1] + (w[2] - w[0]) / this._curveTightness; const p3 = w[2] - (w[3] - w[1]) / this._curveTightness; @@ -1727,7 +1725,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); const p = [p1, p2, p3, p4]; return p; } - _initTessy () { + _initTessy() { // function called for each vertex of tesselator output function vertexCallback(data, polyVertArray) { for (let i = 0; i < data.length; i++) { @@ -1771,7 +1769,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); return tessy; } - _triangulate (contours) { + _triangulate(contours) { // libtess will take 3d verts and flatten to a plane for tesselation. // libtess is capable of calculating a plane to tesselate on, but // if all of the vertices have the same z values, we'll just @@ -1801,7 +1799,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype); const triangleVerts = []; this._tessy.gluTessBeginPolygon(triangleVerts); - for(const contour of contours){ + for (const contour of contours) { this._tessy.gluTessBeginContour(); for ( let j = 0; From 4481ca6a9ca538a8eb9632ecaf660d6a007cf749 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:16:00 +0900 Subject: [PATCH 08/22] remove return this; --- src/webgl/p5.RendererGL.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index eaea500d70..ee378ed828 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -600,8 +600,6 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.fontInfos = {}; this._curShader = undefined; - - return this; } ////////////////////////////////////////////// From a5a9edcd25e1ec66bb2f104f91f18b6f7f7fc056 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:18:14 +0900 Subject: [PATCH 09/22] fix ci --- src/core/p5.Renderer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index e1c926ee2a..d06a416581 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -14,7 +14,7 @@ import * as constants from '../core/constants'; * * @class p5.Renderer */ -p5.Renderer = class Renderer extends p5.Element { +class Renderer extends p5.Element { /** * @class p5.Renderer * @constructor @@ -64,6 +64,8 @@ p5.Renderer = class Renderer extends p5.Element { } } +p5.Renderer = Renderer; + // the renderer should return a 'style' object that it wishes to // store on the push stack. p5.Renderer.prototype.push = function () { From 262b2b67d28c5c8f286aac215efc0f9a91117266 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:55:22 +0900 Subject: [PATCH 10/22] revert From 53501dd3c5dc0f64da83dec502160c7053b02a3e Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 03:59:01 +0900 Subject: [PATCH 11/22] test some converts --- src/core/p5.Renderer.js | 249 ++++++++++++++++++++-------------------- 1 file changed, 124 insertions(+), 125 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index d06a416581..bc482963f7 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -62,170 +62,167 @@ class Renderer extends p5.Element { this._fillSet = false; this._leadingSet = false; } -} - -p5.Renderer = Renderer; -// the renderer should return a 'style' object that it wishes to -// store on the push stack. -p5.Renderer.prototype.push = function () { - return { - properties: { - _doStroke: this._doStroke, - _strokeSet: this._strokeSet, - _doFill: this._doFill, - _fillSet: this._fillSet, - _tint: this._tint, - _imageMode: this._imageMode, - _rectMode: this._rectMode, - _ellipseMode: this._ellipseMode, - _textFont: this._textFont, - _textLeading: this._textLeading, - _leadingSet: this._leadingSet, - _textSize: this._textSize, - _textAlign: this._textAlign, - _textBaseline: this._textBaseline, - _textStyle: this._textStyle, - _textWrap: this._textWrap - } - }; -}; + // the renderer should return a 'style' object that it wishes to + // store on the push stack. + push () { + return { + properties: { + _doStroke: this._doStroke, + _strokeSet: this._strokeSet, + _doFill: this._doFill, + _fillSet: this._fillSet, + _tint: this._tint, + _imageMode: this._imageMode, + _rectMode: this._rectMode, + _ellipseMode: this._ellipseMode, + _textFont: this._textFont, + _textLeading: this._textLeading, + _leadingSet: this._leadingSet, + _textSize: this._textSize, + _textAlign: this._textAlign, + _textBaseline: this._textBaseline, + _textStyle: this._textStyle, + _textWrap: this._textWrap + } + }; + } -// a pop() operation is in progress -// the renderer is passed the 'style' object that it returned -// from its push() method. -p5.Renderer.prototype.pop = function (style) { - if (style.properties) { + // a pop() operation is in progress + // the renderer is passed the 'style' object that it returned + // from its push() method. + pop (style) { + if (style.properties) { // copy the style properties back into the renderer - Object.assign(this, style.properties); + Object.assign(this, style.properties); + } } -}; -/** + /** * Resize our canvas element. */ -p5.Renderer.prototype.resize = function (w, h) { - this.width = w; - this.height = h; - this.elt.width = w * this._pInst._pixelDensity; - this.elt.height = h * this._pInst._pixelDensity; - this.elt.style.width = `${w}px`; - this.elt.style.height = `${h}px`; - if (this._isMainCanvas) { - this._pInst._setProperty('width', this.width); - this._pInst._setProperty('height', this.height); + resize (w, h) { + this.width = w; + this.height = h; + this.elt.width = w * this._pInst._pixelDensity; + this.elt.height = h * this._pInst._pixelDensity; + this.elt.style.width = `${w}px`; + this.elt.style.height = `${h}px`; + if (this._isMainCanvas) { + this._pInst._setProperty('width', this.width); + this._pInst._setProperty('height', this.height); + } } -}; -p5.Renderer.prototype.get = function (x, y, w, h) { - const pixelsState = this._pixelsState; - const pd = pixelsState._pixelDensity; - const canvas = this.canvas; + get (x, y, w, h) { + const pixelsState = this._pixelsState; + const pd = pixelsState._pixelDensity; + const canvas = this.canvas; - if (typeof x === 'undefined' && typeof y === 'undefined') { + if (typeof x === 'undefined' && typeof y === 'undefined') { // get() - x = y = 0; - w = pixelsState.width; - h = pixelsState.height; - } else { - x *= pd; - y *= pd; + x = y = 0; + w = pixelsState.width; + h = pixelsState.height; + } else { + x *= pd; + y *= pd; - if (typeof w === 'undefined' && typeof h === 'undefined') { + if (typeof w === 'undefined' && typeof h === 'undefined') { // get(x,y) - if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) { - return [0, 0, 0, 0]; - } + if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) { + return [0, 0, 0, 0]; + } - return this._getPixel(x, y); - } + return this._getPixel(x, y); + } // get(x,y,w,h) - } + } - const region = new p5.Image(w, h); - region.canvas - .getContext('2d') - .drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w, h); + const region = new p5.Image(w, h); + region.canvas + .getContext('2d') + .drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w, h); - return region; -}; - -p5.Renderer.prototype.textLeading = function (l) { - if (typeof l === 'number') { - this._setProperty('_leadingSet', true); - this._setProperty('_textLeading', l); - return this._pInst; + return region; } - return this._textLeading; -}; + textLeading (l) { + if (typeof l === 'number') { + this._setProperty('_leadingSet', true); + this._setProperty('_textLeading', l); + return this._pInst; + } -p5.Renderer.prototype.textSize = function (s) { - if (typeof s === 'number') { - this._setProperty('_textSize', s); - if (!this._leadingSet) { + return this._textLeading; + } + + textSize (s) { + if (typeof s === 'number') { + this._setProperty('_textSize', s); + if (!this._leadingSet) { // only use a default value if not previously set (#5181) - this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT); + this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT); + } + return this._applyTextProperties(); } - return this._applyTextProperties(); - } - return this._textSize; -}; + return this._textSize; + } -p5.Renderer.prototype.textStyle = function (s) { - if (s) { - if ( - s === constants.NORMAL || + textStyle (s) { + if (s) { + if ( + s === constants.NORMAL || s === constants.ITALIC || s === constants.BOLD || s === constants.BOLDITALIC - ) { - this._setProperty('_textStyle', s); + ) { + this._setProperty('_textStyle', s); + } + + return this._applyTextProperties(); } - return this._applyTextProperties(); + return this._textStyle; } - return this._textStyle; -}; - -p5.Renderer.prototype.textAscent = function () { - if (this._textAscent === null) { - this._updateTextMetrics(); + textAscent () { + if (this._textAscent === null) { + this._updateTextMetrics(); + } + return this._textAscent; } - return this._textAscent; -}; -p5.Renderer.prototype.textDescent = function () { - if (this._textDescent === null) { - this._updateTextMetrics(); + textDescent () { + if (this._textDescent === null) { + this._updateTextMetrics(); + } + return this._textDescent; } - return this._textDescent; -}; -p5.Renderer.prototype.textAlign = function (h, v) { - if (typeof h !== 'undefined') { - this._setProperty('_textAlign', h); + textAlign (h, v) { + if (typeof h !== 'undefined') { + this._setProperty('_textAlign', h); - if (typeof v !== 'undefined') { - this._setProperty('_textBaseline', v); - } + if (typeof v !== 'undefined') { + this._setProperty('_textBaseline', v); + } - return this._applyTextProperties(); - } else { - return { - horizontal: this._textAlign, - vertical: this._textBaseline - }; + return this._applyTextProperties(); + } else { + return { + horizontal: this._textAlign, + vertical: this._textBaseline + }; + } } -}; - -p5.Renderer.prototype.textWrap = function (wrapStyle) { - this._setProperty('_textWrap', wrapStyle); - return this._textWrap; -}; + textWrap (wrapStyle) { + this._setProperty('_textWrap', wrapStyle); + return this._textWrap; + } +} p5.Renderer.prototype.text = function (str, x, y, maxWidth, maxHeight) { const p = this._pInst; const textWrapStyle = this._textWrap; @@ -532,4 +529,6 @@ function calculateOffset(object) { return [currentLeft, currentTop]; } +p5.Renderer = Renderer; + export default p5.Renderer; From 892c0a19a77bb95247fc3728532476a8766dda1a Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 04:03:06 +0900 Subject: [PATCH 12/22] fin convert renderer --- src/core/p5.Renderer.js | 458 ++++++++++++++++++++-------------------- 1 file changed, 229 insertions(+), 229 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index bc482963f7..0130f33c0c 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -222,140 +222,199 @@ class Renderer extends p5.Element { this._setProperty('_textWrap', wrapStyle); return this._textWrap; } -} -p5.Renderer.prototype.text = function (str, x, y, maxWidth, maxHeight) { - const p = this._pInst; - const textWrapStyle = this._textWrap; - - let lines; - let line; - let testLine; - let testWidth; - let words; - let chars; - let shiftedY; - let finalMaxHeight = Number.MAX_VALUE; - // fix for #5785 (top of bounding box) - let finalMinHeight = y; - - if (!(this._doFill || this._doStroke)) { - return; - } - - if (typeof str === 'undefined') { - return; - } else if (typeof str !== 'string') { - str = str.toString(); - } - // Replaces tabs with double-spaces and splits string on any line - // breaks present in the original string - str = str.replace(/(\t)/g, ' '); - lines = str.split('\n'); - - if (typeof maxWidth !== 'undefined') { - if (this._rectMode === constants.CENTER) { - x -= maxWidth / 2; + text(str, x, y, maxWidth, maxHeight) { + const p = this._pInst; + const textWrapStyle = this._textWrap; + + let lines; + let line; + let testLine; + let testWidth; + let words; + let chars; + let shiftedY; + let finalMaxHeight = Number.MAX_VALUE; + // fix for #5785 (top of bounding box) + let finalMinHeight = y; + + if (!(this._doFill || this._doStroke)) { + return; } - switch (this._textAlign) { - case constants.CENTER: - x += maxWidth / 2; - break; - case constants.RIGHT: - x += maxWidth; - break; + if (typeof str === 'undefined') { + return; + } else if (typeof str !== 'string') { + str = str.toString(); } - if (typeof maxHeight !== 'undefined') { + // Replaces tabs with double-spaces and splits string on any line + // breaks present in the original string + str = str.replace(/(\t)/g, ' '); + lines = str.split('\n'); + + if (typeof maxWidth !== 'undefined') { if (this._rectMode === constants.CENTER) { - y -= maxHeight / 2; - finalMinHeight -= maxHeight / 2; + x -= maxWidth / 2; } - let originalY = y; - let ascent = p.textAscent(); - - switch (this._textBaseline) { - case constants.BOTTOM: - shiftedY = y + maxHeight; - y = Math.max(shiftedY, y); - // fix for #5785 (top of bounding box) - finalMinHeight += ascent; - break; + switch (this._textAlign) { case constants.CENTER: - shiftedY = y + maxHeight / 2; - y = Math.max(shiftedY, y); - // fix for #5785 (top of bounding box) - finalMinHeight += ascent / 2; + x += maxWidth / 2; + break; + case constants.RIGHT: + x += maxWidth; break; } - // remember the max-allowed y-position for any line (fix to #928) - finalMaxHeight = y + maxHeight - ascent; + if (typeof maxHeight !== 'undefined') { + if (this._rectMode === constants.CENTER) { + y -= maxHeight / 2; + finalMinHeight -= maxHeight / 2; + } - // fix for #5785 (bottom of bounding box) - if (this._textBaseline === constants.CENTER) { - finalMaxHeight = originalY + maxHeight - ascent / 2; - } - } else { + let originalY = y; + let ascent = p.textAscent(); + + switch (this._textBaseline) { + case constants.BOTTOM: + shiftedY = y + maxHeight; + y = Math.max(shiftedY, y); + // fix for #5785 (top of bounding box) + finalMinHeight += ascent; + break; + case constants.CENTER: + shiftedY = y + maxHeight / 2; + y = Math.max(shiftedY, y); + // fix for #5785 (top of bounding box) + finalMinHeight += ascent / 2; + break; + } + + // remember the max-allowed y-position for any line (fix to #928) + finalMaxHeight = y + maxHeight - ascent; + + // fix for #5785 (bottom of bounding box) + if (this._textBaseline === constants.CENTER) { + finalMaxHeight = originalY + maxHeight - ascent / 2; + } + } else { // no text-height specified, show warning for BOTTOM / CENTER - if (this._textBaseline === constants.BOTTOM || + if (this._textBaseline === constants.BOTTOM || this._textBaseline === constants.CENTER) { // use rectHeight as an approximation for text height - let rectHeight = p.textSize() * this._textLeading; - finalMinHeight = y - rectHeight / 2; - finalMaxHeight = y + rectHeight / 2; + let rectHeight = p.textSize() * this._textLeading; + finalMinHeight = y - rectHeight / 2; + finalMaxHeight = y + rectHeight / 2; + } } - } - // Render lines of text according to settings of textWrap - // Splits lines at spaces, for loop adds one word + space - // at a time and tests length with next word added - if (textWrapStyle === constants.WORD) { - let nlines = []; - for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { - line = ''; - words = lines[lineIndex].split(' '); - for (let wordIndex = 0; wordIndex < words.length; wordIndex++) { - testLine = `${line + words[wordIndex]}` + ' '; - testWidth = this.textWidth(testLine); - if (testWidth > maxWidth && line.length > 0) { - nlines.push(line); - line = `${words[wordIndex]}` + ' '; - } else { - line = testLine; + // Render lines of text according to settings of textWrap + // Splits lines at spaces, for loop adds one word + space + // at a time and tests length with next word added + if (textWrapStyle === constants.WORD) { + let nlines = []; + for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { + line = ''; + words = lines[lineIndex].split(' '); + for (let wordIndex = 0; wordIndex < words.length; wordIndex++) { + testLine = `${line + words[wordIndex]}` + ' '; + testWidth = this.textWidth(testLine); + if (testWidth > maxWidth && line.length > 0) { + nlines.push(line); + line = `${words[wordIndex]}` + ' '; + } else { + line = testLine; + } } + nlines.push(line); } - nlines.push(line); - } - let offset = 0; - if (this._textBaseline === constants.CENTER) { - offset = (nlines.length - 1) * p.textLeading() / 2; - } else if (this._textBaseline === constants.BOTTOM) { - offset = (nlines.length - 1) * p.textLeading(); - } + let offset = 0; + if (this._textBaseline === constants.CENTER) { + offset = (nlines.length - 1) * p.textLeading() / 2; + } else if (this._textBaseline === constants.BOTTOM) { + offset = (nlines.length - 1) * p.textLeading(); + } + + for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { + line = ''; + words = lines[lineIndex].split(' '); + for (let wordIndex = 0; wordIndex < words.length; wordIndex++) { + testLine = `${line + words[wordIndex]}` + ' '; + testWidth = this.textWidth(testLine); + if (testWidth > maxWidth && line.length > 0) { + this._renderText( + p, + line.trim(), + x, + y - offset, + finalMaxHeight, + finalMinHeight + ); + line = `${words[wordIndex]}` + ' '; + y += p.textLeading(); + } else { + line = testLine; + } + } + this._renderText( + p, + line.trim(), + x, + y - offset, + finalMaxHeight, + finalMinHeight + ); + y += p.textLeading(); + } + } else { + let nlines = []; + for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { + line = ''; + chars = lines[lineIndex].split(''); + for (let charIndex = 0; charIndex < chars.length; charIndex++) { + testLine = `${line + chars[charIndex]}`; + testWidth = this.textWidth(testLine); + if (testWidth <= maxWidth) { + line += chars[charIndex]; + } else if (testWidth > maxWidth && line.length > 0) { + nlines.push(line); + line = `${chars[charIndex]}`; + } + } + } + + nlines.push(line); + let offset = 0; + if (this._textBaseline === constants.CENTER) { + offset = (nlines.length - 1) * p.textLeading() / 2; + } else if (this._textBaseline === constants.BOTTOM) { + offset = (nlines.length - 1) * p.textLeading(); + } - for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { - line = ''; - words = lines[lineIndex].split(' '); - for (let wordIndex = 0; wordIndex < words.length; wordIndex++) { - testLine = `${line + words[wordIndex]}` + ' '; - testWidth = this.textWidth(testLine); - if (testWidth > maxWidth && line.length > 0) { - this._renderText( - p, - line.trim(), - x, - y - offset, - finalMaxHeight, - finalMinHeight - ); - line = `${words[wordIndex]}` + ' '; - y += p.textLeading(); - } else { - line = testLine; + // Splits lines at characters, for loop adds one char at a time + // and tests length with next char added + for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { + line = ''; + chars = lines[lineIndex].split(''); + for (let charIndex = 0; charIndex < chars.length; charIndex++) { + testLine = `${line + chars[charIndex]}`; + testWidth = this.textWidth(testLine); + if (testWidth <= maxWidth) { + line += chars[charIndex]; + } else if (testWidth > maxWidth && line.length > 0) { + this._renderText( + p, + line.trim(), + x, + y - offset, + finalMaxHeight, + finalMinHeight + ); + y += p.textLeading(); + line = `${chars[charIndex]}`; + } } } this._renderText( @@ -369,147 +428,88 @@ p5.Renderer.prototype.text = function (str, x, y, maxWidth, maxHeight) { y += p.textLeading(); } } else { - let nlines = []; - for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { - line = ''; - chars = lines[lineIndex].split(''); - for (let charIndex = 0; charIndex < chars.length; charIndex++) { - testLine = `${line + chars[charIndex]}`; - testWidth = this.textWidth(testLine); - if (testWidth <= maxWidth) { - line += chars[charIndex]; - } else if (testWidth > maxWidth && line.length > 0) { - nlines.push(line); - line = `${chars[charIndex]}`; - } - } - } - - nlines.push(line); + // Offset to account for vertically centering multiple lines of text - no + // need to adjust anything for vertical align top or baseline let offset = 0; if (this._textBaseline === constants.CENTER) { - offset = (nlines.length - 1) * p.textLeading() / 2; + offset = (lines.length - 1) * p.textLeading() / 2; } else if (this._textBaseline === constants.BOTTOM) { - offset = (nlines.length - 1) * p.textLeading(); + offset = (lines.length - 1) * p.textLeading(); } - // Splits lines at characters, for loop adds one char at a time - // and tests length with next char added - for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { - line = ''; - chars = lines[lineIndex].split(''); - for (let charIndex = 0; charIndex < chars.length; charIndex++) { - testLine = `${line + chars[charIndex]}`; - testWidth = this.textWidth(testLine); - if (testWidth <= maxWidth) { - line += chars[charIndex]; - } else if (testWidth > maxWidth && line.length > 0) { - this._renderText( - p, - line.trim(), - x, - y - offset, - finalMaxHeight, - finalMinHeight - ); - y += p.textLeading(); - line = `${chars[charIndex]}`; - } - } + // Renders lines of text at any line breaks present in the original string + for (let i = 0; i < lines.length; i++) { + this._renderText( + p, + lines[i], + x, + y - offset, + finalMaxHeight, + finalMinHeight - offset + ); + y += p.textLeading(); } - this._renderText( - p, - line.trim(), - x, - y - offset, - finalMaxHeight, - finalMinHeight - ); - y += p.textLeading(); - } - } else { - // Offset to account for vertically centering multiple lines of text - no - // need to adjust anything for vertical align top or baseline - let offset = 0; - if (this._textBaseline === constants.CENTER) { - offset = (lines.length - 1) * p.textLeading() / 2; - } else if (this._textBaseline === constants.BOTTOM) { - offset = (lines.length - 1) * p.textLeading(); } - // Renders lines of text at any line breaks present in the original string - for (let i = 0; i < lines.length; i++) { - this._renderText( - p, - lines[i], - x, - y - offset, - finalMaxHeight, - finalMinHeight - offset - ); - y += p.textLeading(); - } + return p; } - return p; -}; - -p5.Renderer.prototype._applyDefaults = function () { - return this; -}; + _applyDefaults() { + return this; + } -/** + /** * Helper function to check font type (system or otf) */ -p5.Renderer.prototype._isOpenType = function (f = this._textFont) { - return typeof f === 'object' && f.font && f.font.supported; -}; - -p5.Renderer.prototype._updateTextMetrics = function () { - if (this._isOpenType()) { - this._setProperty('_textAscent', this._textFont._textAscent()); - this._setProperty('_textDescent', this._textFont._textDescent()); - return this; + _isOpenType(f = this._textFont) { + return typeof f === 'object' && f.font && f.font.supported; } - // Adapted from http://stackoverflow.com/a/25355178 - const text = document.createElement('span'); - text.style.fontFamily = this._textFont; - text.style.fontSize = `${this._textSize}px`; - text.innerHTML = 'ABCjgq|'; + _updateTextMetrics() { + if (this._isOpenType()) { + this._setProperty('_textAscent', this._textFont._textAscent()); + this._setProperty('_textDescent', this._textFont._textDescent()); + return this; + } - const block = document.createElement('div'); - block.style.display = 'inline-block'; - block.style.width = '1px'; - block.style.height = '0px'; + // Adapted from http://stackoverflow.com/a/25355178 + const text = document.createElement('span'); + text.style.fontFamily = this._textFont; + text.style.fontSize = `${this._textSize}px`; + text.innerHTML = 'ABCjgq|'; - const container = document.createElement('div'); - container.appendChild(text); - container.appendChild(block); + const block = document.createElement('div'); + block.style.display = 'inline-block'; + block.style.width = '1px'; + block.style.height = '0px'; - container.style.height = '0px'; - container.style.overflow = 'hidden'; - document.body.appendChild(container); + const container = document.createElement('div'); + container.appendChild(text); + container.appendChild(block); - block.style.verticalAlign = 'baseline'; - let blockOffset = calculateOffset(block); - let textOffset = calculateOffset(text); - const ascent = blockOffset[1] - textOffset[1]; + container.style.height = '0px'; + container.style.overflow = 'hidden'; + document.body.appendChild(container); - block.style.verticalAlign = 'bottom'; - blockOffset = calculateOffset(block); - textOffset = calculateOffset(text); - const height = blockOffset[1] - textOffset[1]; - const descent = height - ascent; + block.style.verticalAlign = 'baseline'; + let blockOffset = calculateOffset(block); + let textOffset = calculateOffset(text); + const ascent = blockOffset[1] - textOffset[1]; - document.body.removeChild(container); + block.style.verticalAlign = 'bottom'; + blockOffset = calculateOffset(block); + textOffset = calculateOffset(text); + const height = blockOffset[1] - textOffset[1]; + const descent = height - ascent; - this._setProperty('_textAscent', ascent); - this._setProperty('_textDescent', descent); + document.body.removeChild(container); - return this; -}; + this._setProperty('_textAscent', ascent); + this._setProperty('_textDescent', descent); + return this; + } +} /** * Helper fxn to measure ascent and descent. * Adapted from http://stackoverflow.com/a/25355178 From 4235e82472dc5418383f54ceefff6ff2a4a82ac2 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 13:49:30 +0900 Subject: [PATCH 13/22] try parallel --- Gruntfile.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index ad02117858..fdc6217fe4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -161,7 +161,8 @@ module.exports = grunt => { options: { reporter: 'spec', require: '@babel/register', - ui: 'tdd' + ui: 'tdd', + parallel: true } } }, From 8ce87c8d646bc83e733918f7ce808dda6a8ba089 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 14:03:14 +0900 Subject: [PATCH 14/22] try fix ci --- src/core/p5.Renderer.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 0130f33c0c..192d6abe71 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -157,19 +157,6 @@ class Renderer extends p5.Element { return this._textLeading; } - textSize (s) { - if (typeof s === 'number') { - this._setProperty('_textSize', s); - if (!this._leadingSet) { - // only use a default value if not previously set (#5181) - this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT); - } - return this._applyTextProperties(); - } - - return this._textSize; - } - textStyle (s) { if (s) { if ( @@ -528,6 +515,19 @@ function calculateOffset(object) { } return [currentLeft, currentTop]; } +// maybe because of this. +Renderer.prototype.textSize = function(s) { + if (typeof s === 'number') { + this._setProperty('_textSize', s); + if (!this._leadingSet) { + // only use a default value if not previously set (#5181) + this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT); + } + return this._applyTextProperties(); + } + + return this._textSize; +} p5.Renderer = Renderer; From 1b6840c6fda527fd9d574f36970194a2208b5c9e Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 14:04:12 +0900 Subject: [PATCH 15/22] fix ci --- src/core/p5.Renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 192d6abe71..3aa563e3a2 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -527,7 +527,7 @@ Renderer.prototype.textSize = function(s) { } return this._textSize; -} +}; p5.Renderer = Renderer; From cf7ff5fdb1e5804f10fe9a584a095b89f21acede Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 14:20:44 +0900 Subject: [PATCH 16/22] add i18n, remove parallel --- Gruntfile.js | 1 - package.json | 4 +++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index fdc6217fe4..6497fed83c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -162,7 +162,6 @@ module.exports = grunt => { reporter: 'spec', require: '@babel/register', ui: 'tdd', - parallel: true } } }, diff --git a/package.json b/package.json index 5fe9a69c63..41eff9a4c0 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,9 @@ { "locales": [ "en", - "es" + "es", + "ko", + "zh" ], "outputPath": "translations/{{locale}}/{{ns}}.json", "tFunctionNames": [ From b1b33f5eedf884510790a2fab22430aa08ba4d5b Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 14:23:16 +0900 Subject: [PATCH 17/22] fix ci --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index 6497fed83c..ad02117858 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -161,7 +161,7 @@ module.exports = grunt => { options: { reporter: 'spec', require: '@babel/register', - ui: 'tdd', + ui: 'tdd' } } }, From c1d0a0f3b5e4bfa7e19463325f5c2797ef03197d Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 14:35:45 +0900 Subject: [PATCH 18/22] Renderer2D to class --- src/core/p5.Renderer.js | 2 +- src/core/p5.Renderer2D.js | 2083 +++++++++++++++++++------------------ 2 files changed, 1047 insertions(+), 1038 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 3aa563e3a2..4e602110e4 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -515,7 +515,7 @@ function calculateOffset(object) { } return [currentLeft, currentTop]; } -// maybe because of this. +// This caused the test to failed. Renderer.prototype.textSize = function(s) { if (typeof s === 'number') { this._setProperty('_textSize', s); diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 65ac52eb97..3b5144b257 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -11,267 +11,267 @@ import './p5.Renderer'; const styleEmpty = 'rgba(0,0,0,0)'; // const alphaThreshold = 0.00125; // minimum visible -p5.Renderer2D = class Renderer2D extends p5.Renderer{ +class Renderer2D extends p5.Renderer{ constructor (elt, pInst, isMainCanvas) { super(elt, pInst, isMainCanvas); this.drawingContext = this.canvas.getContext('2d'); this._pInst._setProperty('drawingContext', this.drawingContext); } -}; - -p5.Renderer2D.prototype._applyDefaults = function () { - this._cachedFillStyle = this._cachedStrokeStyle = undefined; - this._cachedBlendMode = constants.BLEND; - this._setFill(constants._DEFAULT_FILL); - this._setStroke(constants._DEFAULT_STROKE); - this.drawingContext.lineCap = constants.ROUND; - this.drawingContext.font = 'normal 12px sans-serif'; -}; - -p5.Renderer2D.prototype.resize = function (w, h) { - p5.Renderer.prototype.resize.call(this, w, h); - this.drawingContext.scale( - this._pInst._pixelDensity, - this._pInst._pixelDensity - ); -}; - -////////////////////////////////////////////// -// COLOR | Setting -////////////////////////////////////////////// - -p5.Renderer2D.prototype.background = function (...args) { - this.drawingContext.save(); - this.resetMatrix(); - - if (args[0] instanceof p5.Image) { - if (args[1] >= 0) { + + + _applyDefaults() { + this._cachedFillStyle = this._cachedStrokeStyle = undefined; + this._cachedBlendMode = constants.BLEND; + this._setFill(constants._DEFAULT_FILL); + this._setStroke(constants._DEFAULT_STROKE); + this.drawingContext.lineCap = constants.ROUND; + this.drawingContext.font = 'normal 12px sans-serif'; + } + + resize(w, h) { + p5.Renderer.prototype.resize.call(this, w, h); + this.drawingContext.scale( + this._pInst._pixelDensity, + this._pInst._pixelDensity + ); + } + + ////////////////////////////////////////////// + // COLOR | Setting + ////////////////////////////////////////////// + + background(...args) { + this.drawingContext.save(); + this.resetMatrix(); + + if (args[0] instanceof p5.Image) { + if (args[1] >= 0) { // set transparency of background - const img = args[0]; - this.drawingContext.globalAlpha = args[1] / 255; - this._pInst.image(img, 0, 0, this.width, this.height); + const img = args[0]; + this.drawingContext.globalAlpha = args[1] / 255; + this._pInst.image(img, 0, 0, this.width, this.height); + } else { + this._pInst.image(args[0], 0, 0, this.width, this.height); + } } else { - this._pInst.image(args[0], 0, 0, this.width, this.height); - } - } else { - const curFill = this._getFill(); - // create background rect - const color = this._pInst.color(...args); + const curFill = this._getFill(); + // create background rect + const color = this._pInst.color(...args); - //accessible Outputs - if (this._pInst._addAccsOutput()) { - this._pInst._accsBackground(color.levels); - } + //accessible Outputs + if (this._pInst._addAccsOutput()) { + this._pInst._accsBackground(color.levels); + } - const newFill = color.toString(); - this._setFill(newFill); + const newFill = color.toString(); + this._setFill(newFill); - if (this._isErasing) { - this.blendMode(this._cachedBlendMode); - } + if (this._isErasing) { + this.blendMode(this._cachedBlendMode); + } - this.drawingContext.fillRect(0, 0, this.width, this.height); - // reset fill - this._setFill(curFill); + this.drawingContext.fillRect(0, 0, this.width, this.height); + // reset fill + this._setFill(curFill); - if (this._isErasing) { - this._pInst.erase(); + if (this._isErasing) { + this._pInst.erase(); + } } + this.drawingContext.restore(); } - this.drawingContext.restore(); -}; - -p5.Renderer2D.prototype.clear = function () { - this.drawingContext.save(); - this.resetMatrix(); - this.drawingContext.clearRect(0, 0, this.width, this.height); - this.drawingContext.restore(); -}; - -p5.Renderer2D.prototype.fill = function (...args) { - const color = this._pInst.color(...args); - this._setFill(color.toString()); - - //accessible Outputs - if (this._pInst._addAccsOutput()) { - this._pInst._accsCanvasColors('fill', color.levels); + + clear() { + this.drawingContext.save(); + this.resetMatrix(); + this.drawingContext.clearRect(0, 0, this.width, this.height); + this.drawingContext.restore(); } -}; -p5.Renderer2D.prototype.stroke = function (...args) { - const color = this._pInst.color(...args); - this._setStroke(color.toString()); + fill(...args) { + const color = this._pInst.color(...args); + this._setFill(color.toString()); - //accessible Outputs - if (this._pInst._addAccsOutput()) { - this._pInst._accsCanvasColors('stroke', color.levels); + //accessible Outputs + if (this._pInst._addAccsOutput()) { + this._pInst._accsCanvasColors('fill', color.levels); + } } -}; -p5.Renderer2D.prototype.erase = function (opacityFill, opacityStroke) { - if (!this._isErasing) { - // cache the fill style - this._cachedFillStyle = this.drawingContext.fillStyle; - const newFill = this._pInst.color(255, opacityFill).toString(); - this.drawingContext.fillStyle = newFill; + stroke(...args) { + const color = this._pInst.color(...args); + this._setStroke(color.toString()); - //cache the stroke style - this._cachedStrokeStyle = this.drawingContext.strokeStyle; - const newStroke = this._pInst.color(255, opacityStroke).toString(); - this.drawingContext.strokeStyle = newStroke; + //accessible Outputs + if (this._pInst._addAccsOutput()) { + this._pInst._accsCanvasColors('stroke', color.levels); + } + } - //cache blendMode - const tempBlendMode = this._cachedBlendMode; - this.blendMode(constants.REMOVE); - this._cachedBlendMode = tempBlendMode; + erase(opacityFill, opacityStroke) { + if (!this._isErasing) { + // cache the fill style + this._cachedFillStyle = this.drawingContext.fillStyle; + const newFill = this._pInst.color(255, opacityFill).toString(); + this.drawingContext.fillStyle = newFill; - this._isErasing = true; - } -}; + //cache the stroke style + this._cachedStrokeStyle = this.drawingContext.strokeStyle; + const newStroke = this._pInst.color(255, opacityStroke).toString(); + this.drawingContext.strokeStyle = newStroke; -p5.Renderer2D.prototype.noErase = function () { - if (this._isErasing) { - this.drawingContext.fillStyle = this._cachedFillStyle; - this.drawingContext.strokeStyle = this._cachedStrokeStyle; + //cache blendMode + const tempBlendMode = this._cachedBlendMode; + this.blendMode(constants.REMOVE); + this._cachedBlendMode = tempBlendMode; - this.blendMode(this._cachedBlendMode); - this._isErasing = false; - } -}; - -////////////////////////////////////////////// -// IMAGE | Loading & Displaying -////////////////////////////////////////////// - -p5.Renderer2D.prototype.image = function ( - img, - sx, - sy, - sWidth, - sHeight, - dx, - dy, - dWidth, - dHeight -) { - let cnv; - if (img.gifProperties) { - img._animateGif(this._pInst); + this._isErasing = true; + } } - try { - if (p5.MediaElement && img instanceof p5.MediaElement) { - img._ensureCanvas(); - } - if (this._tint && img.canvas) { - cnv = this._getTintedImageCanvas(img); - } - if (!cnv) { - cnv = img.canvas || img.elt; - } - let s = 1; - if (img.width && img.width > 0) { - s = cnv.width / img.width; - } + noErase() { if (this._isErasing) { + this.drawingContext.fillStyle = this._cachedFillStyle; + this.drawingContext.strokeStyle = this._cachedStrokeStyle; + this.blendMode(this._cachedBlendMode); + this._isErasing = false; } - this.drawingContext.drawImage( - cnv, - s * sx, - s * sy, - s * sWidth, - s * sHeight, - dx, - dy, - dWidth, - dHeight - ); - if (this._isErasing) { - this._pInst.erase(); + } + + ////////////////////////////////////////////// + // IMAGE | Loading & Displaying + ////////////////////////////////////////////// + + image( + img, + sx, + sy, + sWidth, + sHeight, + dx, + dy, + dWidth, + dHeight + ) { + let cnv; + if (img.gifProperties) { + img._animateGif(this._pInst); } - } catch (e) { - if (e.name !== 'NS_ERROR_NOT_AVAILABLE') { - throw e; + + try { + if (p5.MediaElement && img instanceof p5.MediaElement) { + img._ensureCanvas(); + } + if (this._tint && img.canvas) { + cnv = this._getTintedImageCanvas(img); + } + if (!cnv) { + cnv = img.canvas || img.elt; + } + let s = 1; + if (img.width && img.width > 0) { + s = cnv.width / img.width; + } + if (this._isErasing) { + this.blendMode(this._cachedBlendMode); + } + this.drawingContext.drawImage( + cnv, + s * sx, + s * sy, + s * sWidth, + s * sHeight, + dx, + dy, + dWidth, + dHeight + ); + if (this._isErasing) { + this._pInst.erase(); + } + } catch (e) { + if (e.name !== 'NS_ERROR_NOT_AVAILABLE') { + throw e; + } } } -}; -p5.Renderer2D.prototype._getTintedImageCanvas = function (img) { - if (!img.canvas) { - return img; - } + _getTintedImageCanvas (img) { + if (!img.canvas) { + return img; + } - if (!img.tintCanvas) { + if (!img.tintCanvas) { // Once an image has been tinted, keep its tint canvas // around so we don't need to re-incur the cost of // creating a new one for each tint - img.tintCanvas = document.createElement('canvas'); - } + img.tintCanvas = document.createElement('canvas'); + } - // Keep the size of the tint canvas up-to-date - if (img.tintCanvas.width !== img.canvas.width) { - img.tintCanvas.width = img.canvas.width; - } - if (img.tintCanvas.height !== img.canvas.height) { - img.tintCanvas.height = img.canvas.height; - } + // Keep the size of the tint canvas up-to-date + if (img.tintCanvas.width !== img.canvas.width) { + img.tintCanvas.width = img.canvas.width; + } + if (img.tintCanvas.height !== img.canvas.height) { + img.tintCanvas.height = img.canvas.height; + } - // Goal: multiply the r,g,b,a values of the source by - // the r,g,b,a values of the tint color - const ctx = img.tintCanvas.getContext('2d'); + // Goal: multiply the r,g,b,a values of the source by + // the r,g,b,a values of the tint color + const ctx = img.tintCanvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, img.canvas.width, img.canvas.height); + ctx.save(); + ctx.clearRect(0, 0, img.canvas.width, img.canvas.height); - if (this._tint[0] < 255 || this._tint[1] < 255 || this._tint[2] < 255) { + if (this._tint[0] < 255 || this._tint[1] < 255 || this._tint[2] < 255) { // Color tint: we need to use the multiply blend mode to change the colors. // However, the canvas implementation of this destroys the alpha channel of // the image. To accommodate, we first get a version of the image with full // opacity everywhere, tint using multiply, and then use the destination-in // blend mode to restore the alpha channel again. - // Start with the original image - ctx.drawImage(img.canvas, 0, 0); - - // This blend mode makes everything opaque but forces the luma to match - // the original image again - ctx.globalCompositeOperation = 'luminosity'; - ctx.drawImage(img.canvas, 0, 0); - - // This blend mode forces the hue and chroma to match the original image. - // After this we should have the original again, but with full opacity. - ctx.globalCompositeOperation = 'color'; - ctx.drawImage(img.canvas, 0, 0); - - // Apply color tint - ctx.globalCompositeOperation = 'multiply'; - ctx.fillStyle = `rgb(${this._tint.slice(0, 3).join(', ')})`; - ctx.fillRect(0, 0, img.canvas.width, img.canvas.height); - - // Replace the alpha channel with the original alpha * the alpha tint - ctx.globalCompositeOperation = 'destination-in'; - ctx.globalAlpha = this._tint[3] / 255; - ctx.drawImage(img.canvas, 0, 0); - } else { + // Start with the original image + ctx.drawImage(img.canvas, 0, 0); + + // This blend mode makes everything opaque but forces the luma to match + // the original image again + ctx.globalCompositeOperation = 'luminosity'; + ctx.drawImage(img.canvas, 0, 0); + + // This blend mode forces the hue and chroma to match the original image. + // After this we should have the original again, but with full opacity. + ctx.globalCompositeOperation = 'color'; + ctx.drawImage(img.canvas, 0, 0); + + // Apply color tint + ctx.globalCompositeOperation = 'multiply'; + ctx.fillStyle = `rgb(${this._tint.slice(0, 3).join(', ')})`; + ctx.fillRect(0, 0, img.canvas.width, img.canvas.height); + + // Replace the alpha channel with the original alpha * the alpha tint + ctx.globalCompositeOperation = 'destination-in'; + ctx.globalAlpha = this._tint[3] / 255; + ctx.drawImage(img.canvas, 0, 0); + } else { // If we only need to change the alpha, we can skip all the extra work! - ctx.globalAlpha = this._tint[3] / 255; - ctx.drawImage(img.canvas, 0, 0); - } + ctx.globalAlpha = this._tint[3] / 255; + ctx.drawImage(img.canvas, 0, 0); + } - ctx.restore(); - return img.tintCanvas; -}; + ctx.restore(); + return img.tintCanvas; + } -////////////////////////////////////////////// -// IMAGE | Pixels -////////////////////////////////////////////// + ////////////////////////////////////////////// + // IMAGE | Pixels + ////////////////////////////////////////////// -p5.Renderer2D.prototype.blendMode = function (mode) { - if (mode === constants.SUBTRACT) { - console.warn('blendMode(SUBTRACT) only works in WEBGL mode.'); - } else if ( - mode === constants.BLEND || + blendMode (mode) { + if (mode === constants.SUBTRACT) { + console.warn('blendMode(SUBTRACT) only works in WEBGL mode.'); + } else if ( + mode === constants.BLEND || mode === constants.REMOVE || mode === constants.DARKEST || mode === constants.LIGHTEST || @@ -286,1010 +286,1019 @@ p5.Renderer2D.prototype.blendMode = function (mode) { mode === constants.DODGE || mode === constants.BURN || mode === constants.ADD - ) { - this._cachedBlendMode = mode; - this.drawingContext.globalCompositeOperation = mode; - } else { - throw new Error(`Mode ${mode} not recognized.`); + ) { + this._cachedBlendMode = mode; + this.drawingContext.globalCompositeOperation = mode; + } else { + throw new Error(`Mode ${mode} not recognized.`); + } + } + + blend (...args) { + const currBlend = this.drawingContext.globalCompositeOperation; + const blendMode = args[args.length - 1]; + + const copyArgs = Array.prototype.slice.call(args, 0, args.length - 1); + + this.drawingContext.globalCompositeOperation = blendMode; + + p5.prototype.copy.apply(this, copyArgs); + + this.drawingContext.globalCompositeOperation = currBlend; + } + + // p5.Renderer2D.prototype.get = p5.Renderer.prototype.get; + // .get() is not overridden + + // x,y are canvas-relative (pre-scaled by _pixelDensity) + _getPixel (x, y) { + let imageData, index; + imageData = this.drawingContext.getImageData(x, y, 1, 1).data; + index = 0; + return [ + imageData[index + 0], + imageData[index + 1], + imageData[index + 2], + imageData[index + 3] + ]; + } + + loadPixels () { + const pixelsState = this._pixelsState; // if called by p5.Image + + const pd = pixelsState._pixelDensity; + const w = this.width * pd; + const h = this.height * pd; + const imageData = this.drawingContext.getImageData(0, 0, w, h); + // @todo this should actually set pixels per object, so diff buffers can + // have diff pixel arrays. + pixelsState._setProperty('imageData', imageData); + pixelsState._setProperty('pixels', imageData.data); } -}; - -p5.Renderer2D.prototype.blend = function (...args) { - const currBlend = this.drawingContext.globalCompositeOperation; - const blendMode = args[args.length - 1]; - - const copyArgs = Array.prototype.slice.call(args, 0, args.length - 1); - - this.drawingContext.globalCompositeOperation = blendMode; - - p5.prototype.copy.apply(this, copyArgs); - - this.drawingContext.globalCompositeOperation = currBlend; -}; - -// p5.Renderer2D.prototype.get = p5.Renderer.prototype.get; -// .get() is not overridden - -// x,y are canvas-relative (pre-scaled by _pixelDensity) -p5.Renderer2D.prototype._getPixel = function (x, y) { - let imageData, index; - imageData = this.drawingContext.getImageData(x, y, 1, 1).data; - index = 0; - return [ - imageData[index + 0], - imageData[index + 1], - imageData[index + 2], - imageData[index + 3] - ]; -}; - -p5.Renderer2D.prototype.loadPixels = function () { - const pixelsState = this._pixelsState; // if called by p5.Image - - const pd = pixelsState._pixelDensity; - const w = this.width * pd; - const h = this.height * pd; - const imageData = this.drawingContext.getImageData(0, 0, w, h); - // @todo this should actually set pixels per object, so diff buffers can - // have diff pixel arrays. - pixelsState._setProperty('imageData', imageData); - pixelsState._setProperty('pixels', imageData.data); -}; - -p5.Renderer2D.prototype.set = function (x, y, imgOrCol) { + + set (x, y, imgOrCol) { // round down to get integer numbers - x = Math.floor(x); - y = Math.floor(y); - const pixelsState = this._pixelsState; - if (imgOrCol instanceof p5.Image) { - this.drawingContext.save(); - this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); - this.drawingContext.scale( - pixelsState._pixelDensity, - pixelsState._pixelDensity - ); - this.drawingContext.clearRect(x, y, imgOrCol.width, imgOrCol.height); - this.drawingContext.drawImage(imgOrCol.canvas, x, y); - this.drawingContext.restore(); - } else { - let r = 0, - g = 0, - b = 0, - a = 0; - let idx = + x = Math.floor(x); + y = Math.floor(y); + const pixelsState = this._pixelsState; + if (imgOrCol instanceof p5.Image) { + this.drawingContext.save(); + this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); + this.drawingContext.scale( + pixelsState._pixelDensity, + pixelsState._pixelDensity + ); + this.drawingContext.clearRect(x, y, imgOrCol.width, imgOrCol.height); + this.drawingContext.drawImage(imgOrCol.canvas, x, y); + this.drawingContext.restore(); + } else { + let r = 0, + g = 0, + b = 0, + a = 0; + let idx = 4 * (y * pixelsState._pixelDensity * (this.width * pixelsState._pixelDensity) + x * pixelsState._pixelDensity); - if (!pixelsState.imageData) { - pixelsState.loadPixels.call(pixelsState); - } - if (typeof imgOrCol === 'number') { - if (idx < pixelsState.pixels.length) { - r = imgOrCol; - g = imgOrCol; - b = imgOrCol; - a = 255; - //this.updatePixels.call(this); + if (!pixelsState.imageData) { + pixelsState.loadPixels.call(pixelsState); } - } else if (imgOrCol instanceof Array) { - if (imgOrCol.length < 4) { - throw new Error('pixel array must be of the form [R, G, B, A]'); - } - if (idx < pixelsState.pixels.length) { - r = imgOrCol[0]; - g = imgOrCol[1]; - b = imgOrCol[2]; - a = imgOrCol[3]; + if (typeof imgOrCol === 'number') { + if (idx < pixelsState.pixels.length) { + r = imgOrCol; + g = imgOrCol; + b = imgOrCol; + a = 255; //this.updatePixels.call(this); - } - } else if (imgOrCol instanceof p5.Color) { - if (idx < pixelsState.pixels.length) { - r = imgOrCol.levels[0]; - g = imgOrCol.levels[1]; - b = imgOrCol.levels[2]; - a = imgOrCol.levels[3]; + } + } else if (imgOrCol instanceof Array) { + if (imgOrCol.length < 4) { + throw new Error('pixel array must be of the form [R, G, B, A]'); + } + if (idx < pixelsState.pixels.length) { + r = imgOrCol[0]; + g = imgOrCol[1]; + b = imgOrCol[2]; + a = imgOrCol[3]; + //this.updatePixels.call(this); + } + } else if (imgOrCol instanceof p5.Color) { + if (idx < pixelsState.pixels.length) { + r = imgOrCol.levels[0]; + g = imgOrCol.levels[1]; + b = imgOrCol.levels[2]; + a = imgOrCol.levels[3]; //this.updatePixels.call(this); + } } - } - // loop over pixelDensity * pixelDensity - for (let i = 0; i < pixelsState._pixelDensity; i++) { - for (let j = 0; j < pixelsState._pixelDensity; j++) { + // loop over pixelDensity * pixelDensity + for (let i = 0; i < pixelsState._pixelDensity; i++) { + for (let j = 0; j < pixelsState._pixelDensity; j++) { // loop over - idx = + idx = 4 * ((y * pixelsState._pixelDensity + j) * this.width * pixelsState._pixelDensity + (x * pixelsState._pixelDensity + i)); - pixelsState.pixels[idx] = r; - pixelsState.pixels[idx + 1] = g; - pixelsState.pixels[idx + 2] = b; - pixelsState.pixels[idx + 3] = a; + pixelsState.pixels[idx] = r; + pixelsState.pixels[idx + 1] = g; + pixelsState.pixels[idx + 2] = b; + pixelsState.pixels[idx + 3] = a; + } } } } -}; -p5.Renderer2D.prototype.updatePixels = function (x, y, w, h) { - const pixelsState = this._pixelsState; - const pd = pixelsState._pixelDensity; - if ( - x === undefined && + updatePixels (x, y, w, h) { + const pixelsState = this._pixelsState; + const pd = pixelsState._pixelDensity; + if ( + x === undefined && y === undefined && w === undefined && h === undefined - ) { - x = 0; - y = 0; - w = this.width; - h = this.height; - } - x *= pd; - y *= pd; - w *= pd; - h *= pd; + ) { + x = 0; + y = 0; + w = this.width; + h = this.height; + } + x *= pd; + y *= pd; + w *= pd; + h *= pd; - if (this.gifProperties) { - this.gifProperties.frames[this.gifProperties.displayIndex].image = + if (this.gifProperties) { + this.gifProperties.frames[this.gifProperties.displayIndex].image = pixelsState.imageData; - } + } - this.drawingContext.putImageData(pixelsState.imageData, x, y, 0, 0, w, h); -}; + this.drawingContext.putImageData(pixelsState.imageData, x, y, 0, 0, w, h); + } -////////////////////////////////////////////// -// SHAPE | 2D Primitives -////////////////////////////////////////////// + ////////////////////////////////////////////// + // SHAPE | 2D Primitives + ////////////////////////////////////////////// -/** + /** * Generate a cubic Bezier representing an arc on the unit circle of total * angle `size` radians, beginning `start` radians above the x-axis. Up to * four of these curves are combined to make a full arc. * * See ecridge.com/bezier.pdf for an explanation of the method. */ -p5.Renderer2D.prototype._acuteArcToBezier = function _acuteArcToBezier( - start, - size -) { + _acuteArcToBezier( + start, + size + ) { // Evaluate constants. - const alpha = size / 2.0, - cos_alpha = Math.cos(alpha), - sin_alpha = Math.sin(alpha), - cot_alpha = 1.0 / Math.tan(alpha), - // This is how far the arc needs to be rotated. - phi = start + alpha, - cos_phi = Math.cos(phi), - sin_phi = Math.sin(phi), - lambda = (4.0 - cos_alpha) / 3.0, - mu = sin_alpha + (cos_alpha - lambda) * cot_alpha; - - // Return rotated waypoints. - return { - ax: Math.cos(start).toFixed(7), - ay: Math.sin(start).toFixed(7), - bx: (lambda * cos_phi + mu * sin_phi).toFixed(7), - by: (lambda * sin_phi - mu * cos_phi).toFixed(7), - cx: (lambda * cos_phi - mu * sin_phi).toFixed(7), - cy: (lambda * sin_phi + mu * cos_phi).toFixed(7), - dx: Math.cos(start + size).toFixed(7), - dy: Math.sin(start + size).toFixed(7) - }; -}; - -/* + const alpha = size / 2.0, + cos_alpha = Math.cos(alpha), + sin_alpha = Math.sin(alpha), + cot_alpha = 1.0 / Math.tan(alpha), + // This is how far the arc needs to be rotated. + phi = start + alpha, + cos_phi = Math.cos(phi), + sin_phi = Math.sin(phi), + lambda = (4.0 - cos_alpha) / 3.0, + mu = sin_alpha + (cos_alpha - lambda) * cot_alpha; + + // Return rotated waypoints. + return { + ax: Math.cos(start).toFixed(7), + ay: Math.sin(start).toFixed(7), + bx: (lambda * cos_phi + mu * sin_phi).toFixed(7), + by: (lambda * sin_phi - mu * cos_phi).toFixed(7), + cx: (lambda * cos_phi - mu * sin_phi).toFixed(7), + cy: (lambda * sin_phi + mu * cos_phi).toFixed(7), + dx: Math.cos(start + size).toFixed(7), + dy: Math.sin(start + size).toFixed(7) + }; + } + + /* * This function requires that: * * 0 <= start < TWO_PI * * start <= stop < start + TWO_PI */ -p5.Renderer2D.prototype.arc = function (x, y, w, h, start, stop, mode) { - const ctx = this.drawingContext; - const rx = w / 2.0; - const ry = h / 2.0; - const epsilon = 0.00001; // Smallest visible angle on displays up to 4K. - let arcToDraw = 0; - const curves = []; - - x += rx; - y += ry; - - // Create curves - while (stop - start >= epsilon) { - arcToDraw = Math.min(stop - start, constants.HALF_PI); - curves.push(this._acuteArcToBezier(start, arcToDraw)); - start += arcToDraw; - } + arc (x, y, w, h, start, stop, mode) { + const ctx = this.drawingContext; + const rx = w / 2.0; + const ry = h / 2.0; + const epsilon = 0.00001; // Smallest visible angle on displays up to 4K. + let arcToDraw = 0; + const curves = []; + + x += rx; + y += ry; + + // Create curves + while (stop - start >= epsilon) { + arcToDraw = Math.min(stop - start, constants.HALF_PI); + curves.push(this._acuteArcToBezier(start, arcToDraw)); + start += arcToDraw; + } - // Fill curves - if (this._doFill) { - ctx.beginPath(); - curves.forEach((curve, index) => { - if (index === 0) { - ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry); - } - /* eslint-disable indent */ + // Fill curves + if (this._doFill) { + ctx.beginPath(); + curves.forEach((curve, index) => { + if (index === 0) { + ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry); + } + /* eslint-disable indent */ ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry, x + curve.cx * rx, y + curve.cy * ry, x + curve.dx * rx, y + curve.dy * ry); /* eslint-enable indent */ - }); - if (mode === constants.PIE || mode == null) { - ctx.lineTo(x, y); + }); + if (mode === constants.PIE || mode == null) { + ctx.lineTo(x, y); + } + ctx.closePath(); + ctx.fill(); } - ctx.closePath(); - ctx.fill(); - } - // Stroke curves - if (this._doStroke) { - ctx.beginPath(); - curves.forEach((curve, index) => { - if (index === 0) { - ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry); - } - /* eslint-disable indent */ + // Stroke curves + if (this._doStroke) { + ctx.beginPath(); + curves.forEach((curve, index) => { + if (index === 0) { + ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry); + } + /* eslint-disable indent */ ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry, x + curve.cx * rx, y + curve.cy * ry, x + curve.dx * rx, y + curve.dy * ry); /* eslint-enable indent */ - }); - if (mode === constants.PIE) { - ctx.lineTo(x, y); - ctx.closePath(); - } else if (mode === constants.CHORD) { - ctx.closePath(); + }); + if (mode === constants.PIE) { + ctx.lineTo(x, y); + ctx.closePath(); + } else if (mode === constants.CHORD) { + ctx.closePath(); + } + ctx.stroke(); } - ctx.stroke(); + return this; } - return this; -}; - -p5.Renderer2D.prototype.ellipse = function (args) { - const ctx = this.drawingContext; - const doFill = this._doFill, - doStroke = this._doStroke; - const x = parseFloat(args[0]), - y = parseFloat(args[1]), - w = parseFloat(args[2]), - h = parseFloat(args[3]); - if (doFill && !doStroke) { - if (this._getFill() === styleEmpty) { - return this; + + ellipse (args) { + const ctx = this.drawingContext; + const doFill = this._doFill, + doStroke = this._doStroke; + const x = parseFloat(args[0]), + y = parseFloat(args[1]), + w = parseFloat(args[2]), + h = parseFloat(args[3]); + if (doFill && !doStroke) { + if (this._getFill() === styleEmpty) { + return this; + } + } else if (!doFill && doStroke) { + if (this._getStroke() === styleEmpty) { + return this; + } } - } else if (!doFill && doStroke) { - if (this._getStroke() === styleEmpty) { - return this; + const kappa = 0.5522847498, + // control point offset horizontal + ox = w / 2 * kappa, + // control point offset vertical + oy = h / 2 * kappa, + // x-end + xe = x + w, + // y-end + ye = y + h, + // x-middle + xm = x + w / 2, + ym = y + h / 2; // y-middle + ctx.beginPath(); + ctx.moveTo(x, ym); + ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); + ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); + ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); + ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); + if (doFill) { + ctx.fill(); + } + if (doStroke) { + ctx.stroke(); } } - const kappa = 0.5522847498, - // control point offset horizontal - ox = w / 2 * kappa, - // control point offset vertical - oy = h / 2 * kappa, - // x-end - xe = x + w, - // y-end - ye = y + h, - // x-middle - xm = x + w / 2, - ym = y + h / 2; // y-middle - ctx.beginPath(); - ctx.moveTo(x, ym); - ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); - ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); - ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); - ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); - if (doFill) { - ctx.fill(); - } - if (doStroke) { - ctx.stroke(); - } -}; -p5.Renderer2D.prototype.line = function (x1, y1, x2, y2) { - const ctx = this.drawingContext; - if (!this._doStroke) { - return this; - } else if (this._getStroke() === styleEmpty) { - return this; - } - ctx.beginPath(); - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - ctx.stroke(); - return this; -}; - -p5.Renderer2D.prototype.point = function (x, y) { - const ctx = this.drawingContext; - if (!this._doStroke) { - return this; - } else if (this._getStroke() === styleEmpty) { + line (x1, y1, x2, y2) { + const ctx = this.drawingContext; + if (!this._doStroke) { + return this; + } else if (this._getStroke() === styleEmpty) { + return this; + } + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); return this; } - const s = this._getStroke(); - const f = this._getFill(); - // swapping fill color to stroke and back after for correct point rendering - this._setFill(s); - ctx.beginPath(); - ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false); - ctx.fill(); - this._setFill(f); -}; - -p5.Renderer2D.prototype.quad = function (x1, y1, x2, y2, x3, y3, x4, y4) { - const ctx = this.drawingContext; - const doFill = this._doFill, - doStroke = this._doStroke; - if (doFill && !doStroke) { - if (this._getFill() === styleEmpty) { + + point (x, y) { + const ctx = this.drawingContext; + if (!this._doStroke) { return this; - } - } else if (!doFill && doStroke) { - if (this._getStroke() === styleEmpty) { + } else if (this._getStroke() === styleEmpty) { return this; } - } - ctx.beginPath(); - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - ctx.lineTo(x3, y3); - ctx.lineTo(x4, y4); - ctx.closePath(); - if (doFill) { + const s = this._getStroke(); + const f = this._getFill(); + // swapping fill color to stroke and back after for correct point rendering + this._setFill(s); + ctx.beginPath(); + ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false); ctx.fill(); + this._setFill(f); } - if (doStroke) { - ctx.stroke(); - } - return this; -}; - -p5.Renderer2D.prototype.rect = function (args) { - const x = args[0]; - const y = args[1]; - const w = args[2]; - const h = args[3]; - let tl = args[4]; - let tr = args[5]; - let br = args[6]; - let bl = args[7]; - const ctx = this.drawingContext; - const doFill = this._doFill, - doStroke = this._doStroke; - if (doFill && !doStroke) { - if (this._getFill() === styleEmpty) { - return this; + + quad (x1, y1, x2, y2, x3, y3, x4, y4) { + const ctx = this.drawingContext; + const doFill = this._doFill, + doStroke = this._doStroke; + if (doFill && !doStroke) { + if (this._getFill() === styleEmpty) { + return this; + } + } else if (!doFill && doStroke) { + if (this._getStroke() === styleEmpty) { + return this; + } } - } else if (!doFill && doStroke) { - if (this._getStroke() === styleEmpty) { - return this; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.lineTo(x3, y3); + ctx.lineTo(x4, y4); + ctx.closePath(); + if (doFill) { + ctx.fill(); + } + if (doStroke) { + ctx.stroke(); } + return this; } - ctx.beginPath(); - if (typeof tl === 'undefined') { + rect (args) { + const x = args[0]; + const y = args[1]; + const w = args[2]; + const h = args[3]; + let tl = args[4]; + let tr = args[5]; + let br = args[6]; + let bl = args[7]; + const ctx = this.drawingContext; + const doFill = this._doFill, + doStroke = this._doStroke; + if (doFill && !doStroke) { + if (this._getFill() === styleEmpty) { + return this; + } + } else if (!doFill && doStroke) { + if (this._getStroke() === styleEmpty) { + return this; + } + } + ctx.beginPath(); + + if (typeof tl === 'undefined') { // No rounded corners - ctx.rect(x, y, w, h); - } else { + ctx.rect(x, y, w, h); + } else { // At least one rounded corner // Set defaults when not specified - if (typeof tr === 'undefined') { - tr = tl; - } - if (typeof br === 'undefined') { - br = tr; - } - if (typeof bl === 'undefined') { - bl = br; - } + if (typeof tr === 'undefined') { + tr = tl; + } + if (typeof br === 'undefined') { + br = tr; + } + if (typeof bl === 'undefined') { + bl = br; + } - // corner rounding must always be positive - const absW = Math.abs(w); - const absH = Math.abs(h); - const hw = absW / 2; - const hh = absH / 2; + // corner rounding must always be positive + const absW = Math.abs(w); + const absH = Math.abs(h); + const hw = absW / 2; + const hh = absH / 2; - // Clip radii - if (absW < 2 * tl) { - tl = hw; - } - if (absH < 2 * tl) { - tl = hh; - } - if (absW < 2 * tr) { - tr = hw; - } - if (absH < 2 * tr) { - tr = hh; - } - if (absW < 2 * br) { - br = hw; - } - if (absH < 2 * br) { - br = hh; + // Clip radii + if (absW < 2 * tl) { + tl = hw; + } + if (absH < 2 * tl) { + tl = hh; + } + if (absW < 2 * tr) { + tr = hw; + } + if (absH < 2 * tr) { + tr = hh; + } + if (absW < 2 * br) { + br = hw; + } + if (absH < 2 * br) { + br = hh; + } + if (absW < 2 * bl) { + bl = hw; + } + if (absH < 2 * bl) { + bl = hh; + } + + // Draw shape + ctx.beginPath(); + ctx.moveTo(x + tl, y); + ctx.arcTo(x + w, y, x + w, y + h, tr); + ctx.arcTo(x + w, y + h, x, y + h, br); + ctx.arcTo(x, y + h, x, y, bl); + ctx.arcTo(x, y, x + w, y, tl); + ctx.closePath(); } - if (absW < 2 * bl) { - bl = hw; + if (this._doFill) { + ctx.fill(); } - if (absH < 2 * bl) { - bl = hh; + if (this._doStroke) { + ctx.stroke(); } + return this; + } + - // Draw shape + triangle (args) { + const ctx = this.drawingContext; + const doFill = this._doFill, + doStroke = this._doStroke; + const x1 = args[0], + y1 = args[1]; + const x2 = args[2], + y2 = args[3]; + const x3 = args[4], + y3 = args[5]; + if (doFill && !doStroke) { + if (this._getFill() === styleEmpty) { + return this; + } + } else if (!doFill && doStroke) { + if (this._getStroke() === styleEmpty) { + return this; + } + } ctx.beginPath(); - ctx.moveTo(x + tl, y); - ctx.arcTo(x + w, y, x + w, y + h, tr); - ctx.arcTo(x + w, y + h, x, y + h, br); - ctx.arcTo(x, y + h, x, y, bl); - ctx.arcTo(x, y, x + w, y, tl); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.lineTo(x3, y3); ctx.closePath(); + if (doFill) { + ctx.fill(); + } + if (doStroke) { + ctx.stroke(); + } } - if (this._doFill) { - ctx.fill(); - } - if (this._doStroke) { - ctx.stroke(); - } - return this; -}; - -p5.Renderer2D.prototype.triangle = function (args) { - const ctx = this.drawingContext; - const doFill = this._doFill, - doStroke = this._doStroke; - const x1 = args[0], - y1 = args[1]; - const x2 = args[2], - y2 = args[3]; - const x3 = args[4], - y3 = args[5]; - if (doFill && !doStroke) { - if (this._getFill() === styleEmpty) { + + endShape ( + mode, + vertices, + isCurve, + isBezier, + isQuadratic, + isContour, + shapeKind + ) { + if (vertices.length === 0) { return this; } - } else if (!doFill && doStroke) { - if (this._getStroke() === styleEmpty) { + if (!this._doStroke && !this._doFill) { return this; } - } - ctx.beginPath(); - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - ctx.lineTo(x3, y3); - ctx.closePath(); - if (doFill) { - ctx.fill(); - } - if (doStroke) { - ctx.stroke(); - } -}; - -p5.Renderer2D.prototype.endShape = function ( - mode, - vertices, - isCurve, - isBezier, - isQuadratic, - isContour, - shapeKind -) { - if (vertices.length === 0) { - return this; - } - if (!this._doStroke && !this._doFill) { - return this; - } - const closeShape = mode === constants.CLOSE; - let v; - if (closeShape && !isContour) { - vertices.push(vertices[0]); - } - let i, j; - const numVerts = vertices.length; - if (isCurve && (shapeKind === constants.POLYGON || shapeKind === null)) { - if (numVerts > 3) { - const b = [], - s = 1 - this._curveTightness; - this.drawingContext.beginPath(); - this.drawingContext.moveTo(vertices[1][0], vertices[1][1]); - for (i = 1; i + 2 < numVerts; i++) { - v = vertices[i]; - b[0] = [v[0], v[1]]; - b[1] = [ - v[0] + (s * vertices[i + 1][0] - s * vertices[i - 1][0]) / 6, - v[1] + (s * vertices[i + 1][1] - s * vertices[i - 1][1]) / 6 - ]; - b[2] = [ - vertices[i + 1][0] + - (s * vertices[i][0] - s * vertices[i + 2][0]) / 6, - vertices[i + 1][1] + (s * vertices[i][1] - s * vertices[i + 2][1]) / 6 - ]; - b[3] = [vertices[i + 1][0], vertices[i + 1][1]]; - this.drawingContext.bezierCurveTo( - b[1][0], - b[1][1], - b[2][0], - b[2][1], - b[3][0], - b[3][1] - ); - } - if (closeShape) { - this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]); - } - this._doFillStrokeClose(closeShape); + const closeShape = mode === constants.CLOSE; + let v; + if (closeShape && !isContour) { + vertices.push(vertices[0]); } - } else if ( - isBezier && - (shapeKind === constants.POLYGON || shapeKind === null) - ) { - this.drawingContext.beginPath(); - for (i = 0; i < numVerts; i++) { - if (vertices[i].isVert) { - if (vertices[i].moveTo) { - this.drawingContext.moveTo(vertices[i][0], vertices[i][1]); - } else { - this.drawingContext.lineTo(vertices[i][0], vertices[i][1]); + let i, j; + const numVerts = vertices.length; + if (isCurve && (shapeKind === constants.POLYGON || shapeKind === null)) { + if (numVerts > 3) { + const b = [], + s = 1 - this._curveTightness; + this.drawingContext.beginPath(); + this.drawingContext.moveTo(vertices[1][0], vertices[1][1]); + for (i = 1; i + 2 < numVerts; i++) { + v = vertices[i]; + b[0] = [v[0], v[1]]; + b[1] = [ + v[0] + (s * vertices[i + 1][0] - s * vertices[i - 1][0]) / 6, + v[1] + (s * vertices[i + 1][1] - s * vertices[i - 1][1]) / 6 + ]; + b[2] = [ + vertices[i + 1][0] + + (s * vertices[i][0] - s * vertices[i + 2][0]) / 6, + vertices[i + 1][1] + + (s * vertices[i][1] - s * vertices[i + 2][1]) / 6 + ]; + b[3] = [vertices[i + 1][0], vertices[i + 1][1]]; + this.drawingContext.bezierCurveTo( + b[1][0], + b[1][1], + b[2][0], + b[2][1], + b[3][0], + b[3][1] + ); } - } else { - this.drawingContext.bezierCurveTo( - vertices[i][0], - vertices[i][1], - vertices[i][2], - vertices[i][3], - vertices[i][4], - vertices[i][5] - ); + if (closeShape) { + this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]); + } + this._doFillStrokeClose(closeShape); } - } - this._doFillStrokeClose(closeShape); - } else if ( - isQuadratic && + } else if ( + isBezier && (shapeKind === constants.POLYGON || shapeKind === null) - ) { - this.drawingContext.beginPath(); - for (i = 0; i < numVerts; i++) { - if (vertices[i].isVert) { - if (vertices[i].moveTo) { - this.drawingContext.moveTo(vertices[i][0], vertices[i][1]); + ) { + this.drawingContext.beginPath(); + for (i = 0; i < numVerts; i++) { + if (vertices[i].isVert) { + if (vertices[i].moveTo) { + this.drawingContext.moveTo(vertices[i][0], vertices[i][1]); + } else { + this.drawingContext.lineTo(vertices[i][0], vertices[i][1]); + } } else { - this.drawingContext.lineTo(vertices[i][0], vertices[i][1]); + this.drawingContext.bezierCurveTo( + vertices[i][0], + vertices[i][1], + vertices[i][2], + vertices[i][3], + vertices[i][4], + vertices[i][5] + ); } - } else { - this.drawingContext.quadraticCurveTo( - vertices[i][0], - vertices[i][1], - vertices[i][2], - vertices[i][3] - ); } - } - this._doFillStrokeClose(closeShape); - } else { - if (shapeKind === constants.POINTS) { + this._doFillStrokeClose(closeShape); + } else if ( + isQuadratic && + (shapeKind === constants.POLYGON || shapeKind === null) + ) { + this.drawingContext.beginPath(); for (i = 0; i < numVerts; i++) { - v = vertices[i]; - if (this._doStroke) { - this._pInst.stroke(v[6]); - } - this._pInst.point(v[0], v[1]); - } - } else if (shapeKind === constants.LINES) { - for (i = 0; i + 1 < numVerts; i += 2) { - v = vertices[i]; - if (this._doStroke) { - this._pInst.stroke(vertices[i + 1][6]); - } - this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]); - } - } else if (shapeKind === constants.TRIANGLES) { - for (i = 0; i + 2 < numVerts; i += 3) { - v = vertices[i]; - this.drawingContext.beginPath(); - this.drawingContext.moveTo(v[0], v[1]); - 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._doFill) { - this._pInst.fill(vertices[i + 2][5]); - this.drawingContext.fill(); - } - if (this._doStroke) { - this._pInst.stroke(vertices[i + 2][6]); - this.drawingContext.stroke(); + if (vertices[i].isVert) { + if (vertices[i].moveTo) { + this.drawingContext.moveTo(vertices[i][0], vertices[i][1]); + } else { + this.drawingContext.lineTo(vertices[i][0], vertices[i][1]); + } + } else { + this.drawingContext.quadraticCurveTo( + vertices[i][0], + vertices[i][1], + vertices[i][2], + vertices[i][3] + ); } } - } else if (shapeKind === constants.TRIANGLE_STRIP) { - for (i = 0; i + 1 < numVerts; i++) { - v = vertices[i]; - this.drawingContext.beginPath(); - this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]); - this.drawingContext.lineTo(v[0], v[1]); - if (this._doStroke) { - this._pInst.stroke(vertices[i + 1][6]); + this._doFillStrokeClose(closeShape); + } else { + if (shapeKind === constants.POINTS) { + for (i = 0; i < numVerts; i++) { + v = vertices[i]; + if (this._doStroke) { + this._pInst.stroke(v[6]); + } + this._pInst.point(v[0], v[1]); } - if (this._doFill) { - this._pInst.fill(vertices[i + 1][5]); + } else if (shapeKind === constants.LINES) { + for (i = 0; i + 1 < numVerts; i += 2) { + v = vertices[i]; + if (this._doStroke) { + this._pInst.stroke(vertices[i + 1][6]); + } + this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]); } - if (i + 2 < numVerts) { + } else if (shapeKind === constants.TRIANGLES) { + for (i = 0; i + 2 < numVerts; i += 3) { + v = vertices[i]; + this.drawingContext.beginPath(); + this.drawingContext.moveTo(v[0], v[1]); + 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._doFill) { + this._pInst.fill(vertices[i + 2][5]); + this.drawingContext.fill(); + } if (this._doStroke) { this._pInst.stroke(vertices[i + 2][6]); + this.drawingContext.stroke(); + } + } + } else if (shapeKind === constants.TRIANGLE_STRIP) { + for (i = 0; i + 1 < numVerts; i++) { + v = vertices[i]; + this.drawingContext.beginPath(); + this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]); + this.drawingContext.lineTo(v[0], v[1]); + if (this._doStroke) { + this._pInst.stroke(vertices[i + 1][6]); } if (this._doFill) { - this._pInst.fill(vertices[i + 2][5]); + this._pInst.fill(vertices[i + 1][5]); + } + if (i + 2 < numVerts) { + this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]); + if (this._doStroke) { + this._pInst.stroke(vertices[i + 2][6]); + } + if (this._doFill) { + this._pInst.fill(vertices[i + 2][5]); + } } + this._doFillStrokeClose(closeShape); } - this._doFillStrokeClose(closeShape); - } - } else if (shapeKind === constants.TRIANGLE_FAN) { - if (numVerts > 2) { + } else if (shapeKind === constants.TRIANGLE_FAN) { + if (numVerts > 2) { // For performance reasons, try to batch as many of the // fill and stroke calls as possible. - this.drawingContext.beginPath(); - for (i = 2; i < numVerts; i++) { + this.drawingContext.beginPath(); + for (i = 2; i < numVerts; i++) { + v = vertices[i]; + this.drawingContext.moveTo(vertices[0][0], vertices[0][1]); + this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]); + this.drawingContext.lineTo(v[0], v[1]); + this.drawingContext.lineTo(vertices[0][0], vertices[0][1]); + // If the next colour is going to be different, stroke / fill now + if (i < numVerts - 1) { + if ( + (this._doFill && v[5] !== vertices[i + 1][5]) || + (this._doStroke && v[6] !== vertices[i + 1][6]) + ) { + if (this._doFill) { + this._pInst.fill(v[5]); + this.drawingContext.fill(); + this._pInst.fill(vertices[i + 1][5]); + } + if (this._doStroke) { + this._pInst.stroke(v[6]); + this.drawingContext.stroke(); + this._pInst.stroke(vertices[i + 1][6]); + } + this.drawingContext.closePath(); + this.drawingContext.beginPath(); // Begin the next one + } + } + } + this._doFillStrokeClose(closeShape); + } + } else if (shapeKind === constants.QUADS) { + for (i = 0; i + 3 < numVerts; i += 4) { v = vertices[i]; - this.drawingContext.moveTo(vertices[0][0], vertices[0][1]); - this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]); + this.drawingContext.beginPath(); + this.drawingContext.moveTo(v[0], v[1]); + for (j = 1; j < 4; j++) { + this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]); + } this.drawingContext.lineTo(v[0], v[1]); - this.drawingContext.lineTo(vertices[0][0], vertices[0][1]); - // If the next colour is going to be different, stroke / fill now - if (i < numVerts - 1) { - if ( - (this._doFill && v[5] !== vertices[i + 1][5]) || - (this._doStroke && v[6] !== vertices[i + 1][6]) - ) { + if (this._doFill) { + this._pInst.fill(vertices[i + 3][5]); + } + if (this._doStroke) { + this._pInst.stroke(vertices[i + 3][6]); + } + this._doFillStrokeClose(closeShape); + } + } else if (shapeKind === constants.QUAD_STRIP) { + if (numVerts > 3) { + for (i = 0; i + 1 < numVerts; i += 2) { + v = vertices[i]; + this.drawingContext.beginPath(); + if (i + 3 < numVerts) { + this.drawingContext.moveTo( + vertices[i + 2][0], vertices[i + 2][1]); + this.drawingContext.lineTo(v[0], v[1]); + this.drawingContext.lineTo( + vertices[i + 1][0], vertices[i + 1][1]); + this.drawingContext.lineTo( + vertices[i + 3][0], vertices[i + 3][1]); if (this._doFill) { - this._pInst.fill(v[5]); - this.drawingContext.fill(); - this._pInst.fill(vertices[i + 1][5]); + this._pInst.fill(vertices[i + 3][5]); } if (this._doStroke) { - this._pInst.stroke(v[6]); - this.drawingContext.stroke(); - this._pInst.stroke(vertices[i + 1][6]); + this._pInst.stroke(vertices[i + 3][6]); } - this.drawingContext.closePath(); - this.drawingContext.beginPath(); // Begin the next one + } else { + this.drawingContext.moveTo(v[0], v[1]); + this.drawingContext.lineTo( + vertices[i + 1][0], vertices[i + 1][1]); } + this._doFillStrokeClose(closeShape); } } - this._doFillStrokeClose(closeShape); - } - } else if (shapeKind === constants.QUADS) { - for (i = 0; i + 3 < numVerts; i += 4) { - v = vertices[i]; + } else { this.drawingContext.beginPath(); - this.drawingContext.moveTo(v[0], v[1]); - for (j = 1; j < 4; j++) { - this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]); - } - this.drawingContext.lineTo(v[0], v[1]); - if (this._doFill) { - this._pInst.fill(vertices[i + 3][5]); - } - if (this._doStroke) { - this._pInst.stroke(vertices[i + 3][6]); - } - this._doFillStrokeClose(closeShape); - } - } else if (shapeKind === constants.QUAD_STRIP) { - if (numVerts > 3) { - for (i = 0; i + 1 < numVerts; i += 2) { + this.drawingContext.moveTo(vertices[0][0], vertices[0][1]); + for (i = 1; i < numVerts; i++) { v = vertices[i]; - this.drawingContext.beginPath(); - if (i + 3 < numVerts) { - this.drawingContext.moveTo(vertices[i + 2][0], vertices[i + 2][1]); - this.drawingContext.lineTo(v[0], v[1]); - this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]); - this.drawingContext.lineTo(vertices[i + 3][0], vertices[i + 3][1]); - if (this._doFill) { - this._pInst.fill(vertices[i + 3][5]); + if (v.isVert) { + if (v.moveTo) { + this.drawingContext.moveTo(v[0], v[1]); + } else { + this.drawingContext.lineTo(v[0], v[1]); } - if (this._doStroke) { - this._pInst.stroke(vertices[i + 3][6]); - } - } else { - this.drawingContext.moveTo(v[0], v[1]); - this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]); - } - this._doFillStrokeClose(closeShape); - } - } - } else { - this.drawingContext.beginPath(); - this.drawingContext.moveTo(vertices[0][0], vertices[0][1]); - for (i = 1; i < numVerts; i++) { - v = vertices[i]; - if (v.isVert) { - if (v.moveTo) { - this.drawingContext.moveTo(v[0], v[1]); - } else { - this.drawingContext.lineTo(v[0], v[1]); } } + this._doFillStrokeClose(closeShape); } - this._doFillStrokeClose(closeShape); } - } - isCurve = false; - isBezier = false; - isQuadratic = false; - isContour = false; - if (closeShape) { - vertices.pop(); - } + isCurve = false; + isBezier = false; + isQuadratic = false; + isContour = false; + if (closeShape) { + vertices.pop(); + } - return this; -}; -////////////////////////////////////////////// -// SHAPE | Attributes -////////////////////////////////////////////// + return this; + } + ////////////////////////////////////////////// + // SHAPE | Attributes + ////////////////////////////////////////////// -p5.Renderer2D.prototype.strokeCap = function (cap) { - if ( - cap === constants.ROUND || + strokeCap (cap) { + if ( + cap === constants.ROUND || cap === constants.SQUARE || cap === constants.PROJECT - ) { - this.drawingContext.lineCap = cap; + ) { + this.drawingContext.lineCap = cap; + } + return this; } - return this; -}; -p5.Renderer2D.prototype.strokeJoin = function (join) { - if ( - join === constants.ROUND || + strokeJoin (join) { + if ( + join === constants.ROUND || join === constants.BEVEL || join === constants.MITER - ) { - this.drawingContext.lineJoin = join; + ) { + this.drawingContext.lineJoin = join; + } + return this; } - return this; -}; -p5.Renderer2D.prototype.strokeWeight = function (w) { - if (typeof w === 'undefined' || w === 0) { + strokeWeight (w) { + if (typeof w === 'undefined' || w === 0) { // hack because lineWidth 0 doesn't work - this.drawingContext.lineWidth = 0.0001; - } else { - this.drawingContext.lineWidth = w; + this.drawingContext.lineWidth = 0.0001; + } else { + this.drawingContext.lineWidth = w; + } + return this; } - return this; -}; -p5.Renderer2D.prototype._getFill = function () { - if (!this._cachedFillStyle) { - this._cachedFillStyle = this.drawingContext.fillStyle; + _getFill () { + if (!this._cachedFillStyle) { + this._cachedFillStyle = this.drawingContext.fillStyle; + } + return this._cachedFillStyle; } - return this._cachedFillStyle; -}; -p5.Renderer2D.prototype._setFill = function (fillStyle) { - if (fillStyle !== this._cachedFillStyle) { - this.drawingContext.fillStyle = fillStyle; - this._cachedFillStyle = fillStyle; + _setFill (fillStyle) { + if (fillStyle !== this._cachedFillStyle) { + this.drawingContext.fillStyle = fillStyle; + this._cachedFillStyle = fillStyle; + } } -}; -p5.Renderer2D.prototype._getStroke = function () { - if (!this._cachedStrokeStyle) { - this._cachedStrokeStyle = this.drawingContext.strokeStyle; + _getStroke () { + if (!this._cachedStrokeStyle) { + this._cachedStrokeStyle = this.drawingContext.strokeStyle; + } + return this._cachedStrokeStyle; } - return this._cachedStrokeStyle; -}; -p5.Renderer2D.prototype._setStroke = function (strokeStyle) { - if (strokeStyle !== this._cachedStrokeStyle) { - this.drawingContext.strokeStyle = strokeStyle; - this._cachedStrokeStyle = strokeStyle; + _setStroke (strokeStyle) { + if (strokeStyle !== this._cachedStrokeStyle) { + this.drawingContext.strokeStyle = strokeStyle; + this._cachedStrokeStyle = strokeStyle; + } } -}; - -////////////////////////////////////////////// -// SHAPE | Curves -////////////////////////////////////////////// -p5.Renderer2D.prototype.bezier = function (x1, y1, x2, y2, x3, y3, x4, y4) { - this._pInst.beginShape(); - this._pInst.vertex(x1, y1); - this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4); - this._pInst.endShape(); - return this; -}; - -p5.Renderer2D.prototype.curve = function (x1, y1, x2, y2, x3, y3, x4, y4) { - this._pInst.beginShape(); - this._pInst.curveVertex(x1, y1); - this._pInst.curveVertex(x2, y2); - this._pInst.curveVertex(x3, y3); - this._pInst.curveVertex(x4, y4); - this._pInst.endShape(); - return this; -}; - -////////////////////////////////////////////// -// SHAPE | Vertex -////////////////////////////////////////////// - -p5.Renderer2D.prototype._doFillStrokeClose = function (closeShape) { - if (closeShape) { - this.drawingContext.closePath(); + + ////////////////////////////////////////////// + // SHAPE | Curves + ////////////////////////////////////////////// + bezier (x1, y1, x2, y2, x3, y3, x4, y4) { + this._pInst.beginShape(); + this._pInst.vertex(x1, y1); + this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4); + this._pInst.endShape(); + return this; } - if (this._doFill) { - this.drawingContext.fill(); + + curve (x1, y1, x2, y2, x3, y3, x4, y4) { + this._pInst.beginShape(); + this._pInst.curveVertex(x1, y1); + this._pInst.curveVertex(x2, y2); + this._pInst.curveVertex(x3, y3); + this._pInst.curveVertex(x4, y4); + this._pInst.endShape(); + return this; } - if (this._doStroke) { - this.drawingContext.stroke(); + + ////////////////////////////////////////////// + // SHAPE | Vertex + ////////////////////////////////////////////// + + _doFillStrokeClose (closeShape) { + if (closeShape) { + this.drawingContext.closePath(); + } + if (this._doFill) { + this.drawingContext.fill(); + } + if (this._doStroke) { + this.drawingContext.stroke(); + } } -}; - -////////////////////////////////////////////// -// TRANSFORM -////////////////////////////////////////////// - -p5.Renderer2D.prototype.applyMatrix = function (a, b, c, d, e, f) { - this.drawingContext.transform(a, b, c, d, e, f); -}; - -p5.Renderer2D.prototype.resetMatrix = function () { - this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); - this.drawingContext.scale( - this._pInst._pixelDensity, - this._pInst._pixelDensity - ); - return this; -}; - -p5.Renderer2D.prototype.rotate = function (rad) { - this.drawingContext.rotate(rad); -}; - -p5.Renderer2D.prototype.scale = function (x, y) { - this.drawingContext.scale(x, y); - return this; -}; - -p5.Renderer2D.prototype.translate = function (x, y) { - // support passing a vector as the 1st parameter - if (x instanceof p5.Vector) { - y = x.y; - x = x.x; + + ////////////////////////////////////////////// + // TRANSFORM + ////////////////////////////////////////////// + + applyMatrix (a, b, c, d, e, f) { + this.drawingContext.transform(a, b, c, d, e, f); } - this.drawingContext.translate(x, y); - return this; -}; - -////////////////////////////////////////////// -// TYPOGRAPHY -// -////////////////////////////////////////////// - -p5.Renderer2D.prototype.text = function (str, x, y, maxWidth, maxHeight) { - let baselineHacked; - - // baselineHacked: (HACK) - // A temporary fix to conform to Processing's implementation - // of BASELINE vertical alignment in a bounding box - - if (typeof maxWidth !== 'undefined') { - if (this.drawingContext.textBaseline === constants.BASELINE) { - baselineHacked = true; - this.drawingContext.textBaseline = constants.TOP; - } + + resetMatrix () { + this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); + this.drawingContext.scale( + this._pInst._pixelDensity, + this._pInst._pixelDensity + ); + return this; } - const p = p5.Renderer.prototype.text.apply(this, arguments); + rotate (rad) { + this.drawingContext.rotate(rad); + } + + scale (x, y) { + this.drawingContext.scale(x, y); + return this; + } - if (baselineHacked) { - this.drawingContext.textBaseline = constants.BASELINE; + translate (x, y) { + // support passing a vector as the 1st parameter + if (x instanceof p5.Vector) { + y = x.y; + x = x.x; + } + this.drawingContext.translate(x, y); + return this; } - return p; -}; + ////////////////////////////////////////////// + // TYPOGRAPHY + // + ////////////////////////////////////////////// -p5.Renderer2D.prototype._renderText = function (p, line, x, y, maxY, minY) { - if (y < minY || y >= maxY) { - return; // don't render lines beyond our minY/maxY bounds (see #5785) + text (str, x, y, maxWidth, maxHeight) { + let baselineHacked; + + // baselineHacked: (HACK) + // A temporary fix to conform to Processing's implementation + // of BASELINE vertical alignment in a bounding box + + if (typeof maxWidth !== 'undefined') { + if (this.drawingContext.textBaseline === constants.BASELINE) { + baselineHacked = true; + this.drawingContext.textBaseline = constants.TOP; + } + } + + const p = p5.Renderer.prototype.text.apply(this, arguments); + + if (baselineHacked) { + this.drawingContext.textBaseline = constants.BASELINE; + } + + return p; } - p.push(); // fix to #803 + _renderText (p, line, x, y, maxY, minY) { + if (y < minY || y >= maxY) { + return; // don't render lines beyond our minY/maxY bounds (see #5785) + } - if (!this._isOpenType()) { + p.push(); // fix to #803 + + if (!this._isOpenType()) { // a system/browser font - // no stroke unless specified by user - if (this._doStroke && this._strokeSet) { - this.drawingContext.strokeText(line, x, y); - } + // no stroke unless specified by user + if (this._doStroke && this._strokeSet) { + this.drawingContext.strokeText(line, x, y); + } - if (this._doFill) { + if (this._doFill) { // if fill hasn't been set by user, use default text fill - if (!this._fillSet) { - this._setFill(constants._DEFAULT_TEXT_FILL); + if (!this._fillSet) { + this._setFill(constants._DEFAULT_TEXT_FILL); + } + + this.drawingContext.fillText(line, x, y); } + } else { + // an opentype font, let it handle the rendering - this.drawingContext.fillText(line, x, y); + this._textFont._renderPath(line, x, y, { renderer: this }); } - } else { - // an opentype font, let it handle the rendering - this._textFont._renderPath(line, x, y, { renderer: this }); + p.pop(); + return p; } - p.pop(); - return p; -}; + textWidth (s) { + if (this._isOpenType()) { + return this._textFont._textWidth(s, this._textSize); + } -p5.Renderer2D.prototype.textWidth = function (s) { - if (this._isOpenType()) { - return this._textFont._textWidth(s, this._textSize); + return this.drawingContext.measureText(s).width; } - return this.drawingContext.measureText(s).width; -}; + _applyTextProperties () { + let font; + const p = this._pInst; -p5.Renderer2D.prototype._applyTextProperties = function () { - let font; - const p = this._pInst; + this._setProperty('_textAscent', null); + this._setProperty('_textDescent', null); - this._setProperty('_textAscent', null); - this._setProperty('_textDescent', null); + font = this._textFont; - font = this._textFont; + if (this._isOpenType()) { + font = this._textFont.font.familyName; + this._setProperty('_textStyle', this._textFont.font.styleName); + } + + this.drawingContext.font = `${this._textStyle || 'normal'} ${this._textSize || + 12}px ${font || 'sans-serif'}`; - if (this._isOpenType()) { - font = this._textFont.font.familyName; - this._setProperty('_textStyle', this._textFont.font.styleName); + this.drawingContext.textAlign = this._textAlign; + if (this._textBaseline === constants.CENTER) { + this.drawingContext.textBaseline = constants._CTX_MIDDLE; + } else { + this.drawingContext.textBaseline = this._textBaseline; + } + + return p; } - this.drawingContext.font = `${this._textStyle || 'normal'} ${this._textSize || - 12}px ${font || 'sans-serif'}`; + ////////////////////////////////////////////// + // STRUCTURE + ////////////////////////////////////////////// + + // a push() operation is in progress. + // the renderer should return a 'style' object that it wishes to + // store on the push stack. + // derived renderers should call the base class' push() method + // to fetch the base style object. + push () { + this.drawingContext.save(); + + // get the base renderer style + return p5.Renderer.prototype.push.apply(this); + } + + // a pop() operation is in progress + // the renderer is passed the 'style' object that it returned + // from its push() method. + // derived renderers should pass this object to their base + // class' pop method + pop (style) { + this.drawingContext.restore(); + // Re-cache the fill / stroke state + this._cachedFillStyle = this.drawingContext.fillStyle; + this._cachedStrokeStyle = this.drawingContext.strokeStyle; - this.drawingContext.textAlign = this._textAlign; - if (this._textBaseline === constants.CENTER) { - this.drawingContext.textBaseline = constants._CTX_MIDDLE; - } else { - this.drawingContext.textBaseline = this._textBaseline; + p5.Renderer.prototype.pop.call(this, style); } +} - return p; -}; - -////////////////////////////////////////////// -// STRUCTURE -////////////////////////////////////////////// - -// a push() operation is in progress. -// the renderer should return a 'style' object that it wishes to -// store on the push stack. -// derived renderers should call the base class' push() method -// to fetch the base style object. -p5.Renderer2D.prototype.push = function () { - this.drawingContext.save(); - - // get the base renderer style - return p5.Renderer.prototype.push.apply(this); -}; - -// a pop() operation is in progress -// the renderer is passed the 'style' object that it returned -// from its push() method. -// derived renderers should pass this object to their base -// class' pop method -p5.Renderer2D.prototype.pop = function (style) { - this.drawingContext.restore(); - // Re-cache the fill / stroke state - this._cachedFillStyle = this.drawingContext.fillStyle; - this._cachedStrokeStyle = this.drawingContext.strokeStyle; - - p5.Renderer.prototype.pop.call(this, style); -}; +p5.Renderer2D = Renderer2D; export default p5.Renderer2D; From 12dedeb76d932aa5a9f6cbdbcc9d6d5e0baf2215 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 14:40:57 +0900 Subject: [PATCH 19/22] fix ci --- src/core/p5.Renderer2D.js | 45 +++++++++++++++++++++------------------ 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 3b5144b257..2ba4034fea 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -1177,28 +1177,7 @@ class Renderer2D extends p5.Renderer{ // ////////////////////////////////////////////// - text (str, x, y, maxWidth, maxHeight) { - let baselineHacked; - // baselineHacked: (HACK) - // A temporary fix to conform to Processing's implementation - // of BASELINE vertical alignment in a bounding box - - if (typeof maxWidth !== 'undefined') { - if (this.drawingContext.textBaseline === constants.BASELINE) { - baselineHacked = true; - this.drawingContext.textBaseline = constants.TOP; - } - } - - const p = p5.Renderer.prototype.text.apply(this, arguments); - - if (baselineHacked) { - this.drawingContext.textBaseline = constants.BASELINE; - } - - return p; - } _renderText (p, line, x, y, maxY, minY) { if (y < minY || y >= maxY) { @@ -1299,6 +1278,30 @@ class Renderer2D extends p5.Renderer{ } } +// Fix test +Renderer2D.prototype.text = function(str, x, y, maxWidth, maxHeight) { + let baselineHacked; + + // baselineHacked: (HACK) + // A temporary fix to conform to Processing's implementation + // of BASELINE vertical alignment in a bounding box + + if (typeof maxWidth !== 'undefined') { + if (this.drawingContext.textBaseline === constants.BASELINE) { + baselineHacked = true; + this.drawingContext.textBaseline = constants.TOP; + } + } + + const p = p5.Renderer.prototype.text.apply(this, arguments); + + if (baselineHacked) { + this.drawingContext.textBaseline = constants.BASELINE; + } + + return p; +}; + p5.Renderer2D = Renderer2D; export default p5.Renderer2D; From bb52ec9b5b90ab4dcfc7e9c51ada4e574ef418ad Mon Sep 17 00:00:00 2001 From: asukaminato Date: Fri, 30 Jun 2023 16:20:31 +0900 Subject: [PATCH 20/22] use super --- src/core/p5.Renderer2D.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 2ba4034fea..c355333f13 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -29,7 +29,7 @@ class Renderer2D extends p5.Renderer{ } resize(w, h) { - p5.Renderer.prototype.resize.call(this, w, h); + super.resize(w, h); this.drawingContext.scale( this._pInst._pixelDensity, this._pInst._pixelDensity @@ -1260,7 +1260,7 @@ class Renderer2D extends p5.Renderer{ this.drawingContext.save(); // get the base renderer style - return p5.Renderer.prototype.push.apply(this); + return super.push(); } // a pop() operation is in progress @@ -1274,7 +1274,7 @@ class Renderer2D extends p5.Renderer{ this._cachedFillStyle = this.drawingContext.fillStyle; this._cachedStrokeStyle = this.drawingContext.strokeStyle; - p5.Renderer.prototype.pop.call(this, style); + super.pop(style); } } From ab4f444360618578a393fd1f65fef22b9036246c Mon Sep 17 00:00:00 2001 From: AsukaMinato Date: Sat, 1 Jul 2023 13:59:55 +0900 Subject: [PATCH 21/22] fix doc --- src/core/p5.Renderer.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 4e602110e4..1d7a962801 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -13,16 +13,13 @@ import * as constants from '../core/constants'; * Renderer2D and Renderer3D classes, respectively. * * @class p5.Renderer + * @constructor + * @extends p5.Element + * @param {HTMLElement} elt DOM node that is wrapped + * @param {p5} [pInst] pointer to p5 instance + * @param {Boolean} [isMainCanvas] whether we're using it as main canvas */ class Renderer extends p5.Element { - /** - * @class p5.Renderer - * @constructor - * @extends p5.Element - * @param {String} elt DOM node that is wrapped - * @param {p5} [pInst] pointer to p5 instance - * @param {Boolean} [isMainCanvas] whether we're using it as main canvas - */ constructor(elt, pInst, isMainCanvas) { super(elt, pInst); this.canvas = elt; From 5830f17c25e761dd16e964c5d130d54af58634f3 Mon Sep 17 00:00:00 2001 From: asukaminato Date: Sun, 2 Jul 2023 10:33:06 +0900 Subject: [PATCH 22/22] change back. --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 41eff9a4c0..5fe9a69c63 100644 --- a/package.json +++ b/package.json @@ -119,9 +119,7 @@ { "locales": [ "en", - "es", - "ko", - "zh" + "es" ], "outputPath": "translations/{{locale}}/{{ns}}.json", "tFunctionNames": [