Skip to content

Commit c0ec064

Browse files
davepagurekdavepagurek
committed
Make p5 also expose properties from the renderer like graphics do
1 parent 9ae00f4 commit c0ec064

12 files changed

+46
-50
lines changed

‎src/core/p5.Graphics.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ class Graphics {
4545
// Attach renderer properties
4646
for (const p in this._renderer) {
4747
if(p[0] === '_' || typeof this._renderer[p] === 'function') continue;
48+
if (Object.hasOwn(this, p)) continue;
4849
Object.defineProperty(this, p, {
4950
get(){
5051
return this._renderer?.[p];

‎src/core/p5.Renderer.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Image } from '../image/p5.Image';
99

1010
class Renderer {
1111
constructor(pInst, w, h, isMainCanvas) {
12-
this._pInst = this._pixelsState = pInst;
12+
this._pInst = pInst;
1313
this._isMainCanvas = isMainCanvas;
1414
this.pixels = [];
1515
this._pixelDensity = Math.ceil(window.devicePixelRatio) || 1;
@@ -117,15 +117,14 @@ class Renderer {
117117
}
118118

119119
get(x, y, w, h) {
120-
const pixelsState = this._pixelsState;
121120
const pd = this._pixelDensity;
122121
const canvas = this.canvas;
123122

124123
if (typeof x === 'undefined' && typeof y === 'undefined') {
125124
// get()
126125
x = y = 0;
127-
w = pixelsState.width;
128-
h = pixelsState.height;
126+
w = this.width;
127+
h = this.height;
129128
} else {
130129
x *= pd;
131130
y *= pd;

‎src/core/p5.Renderer2D.js

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -495,23 +495,20 @@ class Renderer2D extends Renderer {
495495
}
496496

497497
loadPixels() {
498-
const pixelsState = this._pixelsState; // if called by p5.Image
499-
500498
const pd = this._pixelDensity;
501499
const w = this.width * pd;
502500
const h = this.height * pd;
503501
const imageData = this.drawingContext.getImageData(0, 0, w, h);
504502
// @todo this should actually set pixels per object, so diff buffers can
505503
// have diff pixel arrays.
506-
pixelsState.imageData = imageData;
507-
this.pixels = pixelsState.pixels = imageData.data;
504+
this.imageData = imageData;
505+
this.pixels = imageData.data;
508506
}
509507

510508
set(x, y, imgOrCol) {
511509
// round down to get integer numbers
512510
x = Math.floor(x);
513511
y = Math.floor(y);
514-
const pixelsState = this._pixelsState;
515512
if (imgOrCol instanceof Image) {
516513
this.drawingContext.save();
517514
this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
@@ -533,11 +530,11 @@ class Renderer2D extends Renderer {
533530
this._pixelDensity *
534531
(this.width * this._pixelDensity) +
535532
x * this._pixelDensity);
536-
if (!pixelsState.imageData) {
537-
pixelsState.loadPixels();
533+
if (!this.imageData) {
534+
this.loadPixels();
538535
}
539536
if (typeof imgOrCol === 'number') {
540-
if (idx < pixelsState.pixels.length) {
537+
if (idx < this.pixels.length) {
541538
r = imgOrCol;
542539
g = imgOrCol;
543540
b = imgOrCol;
@@ -548,15 +545,15 @@ class Renderer2D extends Renderer {
548545
if (imgOrCol.length < 4) {
549546
throw new Error('pixel array must be of the form [R, G, B, A]');
550547
}
551-
if (idx < pixelsState.pixels.length) {
548+
if (idx < this.pixels.length) {
552549
r = imgOrCol[0];
553550
g = imgOrCol[1];
554551
b = imgOrCol[2];
555552
a = imgOrCol[3];
556553
//this.updatePixels.call(this);
557554
}
558555
} else if (imgOrCol instanceof p5.Color) {
559-
if (idx < pixelsState.pixels.length) {
556+
if (idx < this.pixels.length) {
560557
r = imgOrCol.levels[0];
561558
g = imgOrCol.levels[1];
562559
b = imgOrCol.levels[2];
@@ -574,17 +571,16 @@ class Renderer2D extends Renderer {
574571
this.width *
575572
this._pixelDensity +
576573
(x * this._pixelDensity + i));
577-
pixelsState.pixels[idx] = r;
578-
pixelsState.pixels[idx + 1] = g;
579-
pixelsState.pixels[idx + 2] = b;
580-
pixelsState.pixels[idx + 3] = a;
574+
this.pixels[idx] = r;
575+
this.pixels[idx + 1] = g;
576+
this.pixels[idx + 2] = b;
577+
this.pixels[idx + 3] = a;
581578
}
582579
}
583580
}
584581
}
585582

586583
updatePixels(x, y, w, h) {
587-
const pixelsState = this._pixelsState;
588584
const pd = this._pixelDensity;
589585
if (
590586
x === undefined &&
@@ -604,10 +600,10 @@ class Renderer2D extends Renderer {
604600

605601
if (this.gifProperties) {
606602
this.gifProperties.frames[this.gifProperties.displayIndex].image =
607-
pixelsState.imageData;
603+
this.imageData;
608604
}
609605

610-
this.drawingContext.putImageData(pixelsState.imageData, x, y, 0, 0, w, h);
606+
this.drawingContext.putImageData(this.imageData, x, y, 0, 0, w, h);
611607
}
612608

613609
//////////////////////////////////////////////

‎src/core/rendering.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,18 @@ function rendering(p5, fn){
143143
this._defaultGraphicsCreated = true;
144144
this._elements.push(this._renderer);
145145
this._renderer._applyDefaults();
146+
147+
// Attach renderer properties
148+
for (const p in this._renderer) {
149+
if (p[0] === '_' || typeof this._renderer[p] === 'function') continue;
150+
if (Object.hasOwn(this, p)) continue;
151+
Object.defineProperty(this, p, {
152+
get(){
153+
return this._renderer?.[p];
154+
}
155+
})
156+
}
157+
146158
return this._renderer;
147159
};
148160

‎src/dom/dom.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2624,17 +2624,14 @@ function dom(p5, fn){
26242624
if (arg instanceof p5.Element && arg.elt instanceof HTMLSelectElement) {
26252625
// If given argument is p5.Element of select type
26262626
self = arg;
2627-
this.elt = arg.elt;
26282627
} else if (arg instanceof HTMLSelectElement) {
26292628
self = addElement(arg, this);
2630-
this.elt = arg;
26312629
} else {
26322630
const elt = document.createElement('select');
26332631
if (arg && typeof arg === 'boolean') {
26342632
elt.setAttribute('multiple', 'true');
26352633
}
26362634
self = addElement(elt, this);
2637-
this.elt = elt;
26382635
}
26392636
self.option = function (name, value) {
26402637
let index;
@@ -2884,21 +2881,18 @@ function dom(p5, fn){
28842881
) {
28852882
// If given argument is p5.Element of div/span type
28862883
self = arg0;
2887-
this.elt = arg0.elt;
28882884
} else if (
28892885
// If existing radio Element is provided as argument 0
28902886
arg0 instanceof HTMLDivElement ||
28912887
arg0 instanceof HTMLSpanElement
28922888
) {
28932889
self = addElement(arg0, this);
2894-
this.elt = arg0;
28952890
radioElement = arg0;
28962891
if (typeof args[1] === 'string') name = args[1];
28972892
} else {
28982893
if (typeof arg0 === 'string') name = arg0;
28992894
radioElement = document.createElement('div');
29002895
self = addElement(radioElement, this);
2901-
this.elt = radioElement;
29022896
}
29032897
self._name = name || 'radioOption';
29042898

‎src/image/pixels.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ function pixels(p5, fn){
142142
* </code>
143143
* </div>
144144
*/
145-
fn.pixels = [];
146145

147146
/**
148147
* Copies a region of pixels from one image to another.

‎src/webgl/3d_primitives.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3178,7 +3178,7 @@ function primitives3D(p5, fn){
31783178
this.states.doStroke = false;;
31793179

31803180
this.texture(img);
3181-
this.textureMode = constants.NORMAL;
3181+
this.states.textureMode = constants.NORMAL;
31823182

31833183
let u0 = 0;
31843184
if (sx <= img.width) {

‎src/webgl/material.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2392,7 +2392,7 @@ function material(p5, fn){
23922392
`You tried to set ${mode} textureMode only supports IMAGE & NORMAL `
23932393
);
23942394
} else {
2395-
this._renderer.textureMode = mode;
2395+
this._renderer.states.textureMode = mode;
23962396
}
23972397
};
23982398

@@ -2671,8 +2671,8 @@ function material(p5, fn){
26712671
* </div>
26722672
*/
26732673
fn.textureWrap = function (wrapX, wrapY = wrapX) {
2674-
this._renderer.textureWrapX = wrapX;
2675-
this._renderer.textureWrapY = wrapY;
2674+
this._renderer.states.textureWrapX = wrapX;
2675+
this._renderer.states.textureWrapY = wrapY;
26762676

26772677
for (const texture of this._renderer.textures.values()) {
26782678
texture.setWrapMode(wrapX, wrapY);

‎src/webgl/p5.RendererGL.Immediate.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ function rendererGLImmediate(p5, fn){
146146
lineVertexColor[3]
147147
);
148148

149-
if (this.textureMode === constants.IMAGE && !this.isProcessingVertices) {
149+
if (this.states.textureMode === constants.IMAGE && !this.isProcessingVertices) {
150150
if (this.states._tex !== null) {
151151
if (this.states._tex.width > 0 && this.states._tex.height > 0) {
152152
u /= this.states._tex.width;

‎src/webgl/p5.RendererGL.js

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,9 @@ class RendererGL extends Renderer {
235235
this.states.drawMode = constants.FILL;
236236

237237
this.states._tex = null;
238+
this.states.textureMode = constants.IMAGE;
239+
this.states.textureWrapX = constants.CLAMP;
240+
this.states.textureWrapY = constants.CLAMP;
238241

239242
// erasing
240243
this._isErasing = false;
@@ -382,11 +385,6 @@ class RendererGL extends Renderer {
382385
this.filterLayerTemp = undefined;
383386
this.defaultFilterShaders = {};
384387

385-
this.textureMode = constants.IMAGE;
386-
// default wrap settings
387-
this.textureWrapX = constants.CLAMP;
388-
this.textureWrapY = constants.CLAMP;
389-
this.states._tex = null;
390388
this._curveTightness = 6;
391389

392390
// lookUpTable for coefficients needed to be calculated for bezierVertex, same are used for curveVertex
@@ -1096,8 +1094,6 @@ class RendererGL extends Renderer {
10961094
* @private
10971095
*/
10981096
loadPixels() {
1099-
const pixelsState = this._pixelsState;
1100-
11011097
//@todo_FES
11021098
if (this._pInst._glAttributes.preserveDrawingBuffer !== true) {
11031099
console.log(
@@ -1109,9 +1105,9 @@ class RendererGL extends Renderer {
11091105
const pd = this._pixelDensity;
11101106
const gl = this.GL;
11111107

1112-
pixelsState.pixels =
1108+
this.pixels =
11131109
readPixelsWebGL(
1114-
pixelsState.pixels,
1110+
this.pixels,
11151111
gl,
11161112
null,
11171113
0,
@@ -1126,7 +1122,7 @@ class RendererGL extends Renderer {
11261122

11271123
updatePixels() {
11281124
const fbo = this._getTempFramebuffer();
1129-
fbo.pixels = this._pixelsState.pixels;
1125+
fbo.pixels = this.pixels;
11301126
fbo.updatePixels();
11311127
this.push();
11321128
this.resetMatrix();
@@ -1212,9 +1208,8 @@ class RendererGL extends Renderer {
12121208
this.states.curCamera._resize();
12131209

12141210
//resize pixels buffer
1215-
const pixelsState = this._pixelsState;
1216-
if (typeof pixelsState.pixels !== 'undefined') {
1217-
pixelsState.pixels =
1211+
if (typeof this.pixels !== 'undefined') {
1212+
this.pixels =
12181213
new Uint8Array(
12191214
this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4
12201215
);

‎src/webgl/p5.Texture.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ class Texture {
122122
this.glTex = gl.createTexture();
123123
}
124124

125-
this.glWrapS = this._renderer.textureWrapX;
126-
this.glWrapT = this._renderer.textureWrapY;
125+
this.glWrapS = this._renderer.states.textureWrapX;
126+
this.glWrapT = this._renderer.states.textureWrapY;
127127

128128
this.setWrapMode(this.glWrapS, this.glWrapT);
129129
this.bindTexture();

‎test/unit/webgl/p5.Texture.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,11 @@ suite('p5.Texture', function() {
127127
);
128128
test('Set textureMode to NORMAL', function() {
129129
myp5.textureMode(myp5.NORMAL);
130-
assert.deepEqual(myp5._renderer.textureMode, myp5.NORMAL);
130+
assert.deepEqual(myp5._renderer.states.textureMode, myp5.NORMAL);
131131
});
132132
test('Set textureMode to IMAGE', function() {
133133
myp5.textureMode(myp5.IMAGE);
134-
assert.deepEqual(myp5._renderer.textureMode, myp5.IMAGE);
134+
assert.deepEqual(myp5._renderer.states.textureMode, myp5.IMAGE);
135135
});
136136
test('Set global wrap mode to clamp', function() {
137137
myp5.textureWrap(myp5.CLAMP);

0 commit comments

Comments
 (0)