Skip to content

Commit ca7055a

Browse files
author
lauren mccarthy
committed
removing pushstyle pushmatrix converting to push pop closes #243 
1 parent 0461584 commit ca7055a

File tree

7 files changed

+169
-114
lines changed

7 files changed

+169
-114
lines changed

‎docs/js/p5.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/p5.js

+29-30
Original file line numberDiff line numberDiff line change
@@ -189,12 +189,12 @@ var core = function (require, shim, constants) {
189189
}.bind(this), 1000 / this._targetFrameRate);
190190
}
191191
if (typeof userDraw === 'function') {
192-
this.pushMatrix();
192+
this.push();
193193
if (typeof userSetup === 'undefined') {
194194
this.scale(this._pixelDensity, this._pixelDensity);
195195
}
196196
userDraw();
197-
this.popMatrix();
197+
this.pop();
198198
}
199199
}.bind(this);
200200
this._runFrames = function () {
@@ -3418,43 +3418,53 @@ var structure = function (require, core) {
34183418
p5.prototype.loop = function () {
34193419
this._loop = true;
34203420
};
3421-
p5.prototype.pushStyle = function () {
3421+
p5.prototype.push = function () {
3422+
var ctx = this.canvas.getContext('2d');
3423+
ctx.save();
34223424
this.styles.push({
3423-
fillStyle: this.canvas.getContext('2d').fillStyle,
3424-
strokeStyle: this.canvas.getContext('2d').strokeStyle,
3425-
lineWidth: this.canvas.getContext('2d').lineWidth,
3426-
lineCap: this.canvas.getContext('2d').lineCap,
3427-
lineJoin: this.canvas.getContext('2d').lineJoin,
3425+
fillStyle: ctx.fillStyle,
3426+
strokeStyle: ctx.strokeStyle,
3427+
lineWidth: ctx.lineWidth,
3428+
lineCap: ctx.lineCap,
3429+
lineJoin: ctx.lineJoin,
34283430
tint: this._tint,
34293431
imageMode: this._imageMode,
34303432
rectMode: this._rectMode,
34313433
ellipseMode: this._ellipseMode,
34323434
colorMode: this._colorMode,
3433-
textAlign: this.canvas.getContext('2d').textAlign,
3435+
textAlign: ctx.textAlign,
34343436
textFont: this.textFont,
34353437
textLeading: this.textLeading,
34363438
textSize: this.textSize,
34373439
textStyle: this.textStyle
34383440
});
34393441
};
3440-
p5.prototype.popStyle = function () {
3442+
p5.prototype.pop = function () {
3443+
var ctx = this.canvas.getContext('2d');
3444+
ctx.restore();
34413445
var lastS = this.styles.pop();
3442-
this.canvas.getContext('2d').fillStyle = lastS.fillStyle;
3443-
this.canvas.getContext('2d').strokeStyle = lastS.strokeStyle;
3444-
this.canvas.getContext('2d').lineWidth = lastS.lineWidth;
3445-
this.canvas.getContext('2d').lineCap = lastS.lineCap;
3446-
this.canvas.getContext('2d').lineJoin = lastS.lineJoin;
3446+
ctx.fillStyle = lastS.fillStyle;
3447+
ctx.strokeStyle = lastS.strokeStyle;
3448+
ctx.lineWidth = lastS.lineWidth;
3449+
ctx.lineCap = lastS.lineCap;
3450+
ctx.lineJoin = lastS.lineJoin;
34473451
this._tint = lastS.tint;
34483452
this._imageMode = lastS.imageMode;
34493453
this._rectMode = lastS._rectMode;
34503454
this._ellipseMode = lastS.ellipseMode;
34513455
this._colorMode = lastS._colorMode;
3452-
this.canvas.getContext('2d').textAlign = lastS.textAlign;
3456+
ctx.textAlign = lastS.textAlign;
34533457
this.textFont = lastS.textFont;
34543458
this.textLeading = lastS.textLeading;
34553459
this.textSize = lastS.textSize;
34563460
this.textStyle = lastS.textStyle;
34573461
};
3462+
p5.prototype.pushStyle = function () {
3463+
throw new Error('pushStyle() not used, see push()');
3464+
};
3465+
p5.prototype.popStyle = function () {
3466+
throw new Error('popStyle() not used, see pop()');
3467+
};
34583468
p5.prototype.redraw = function () {
34593469
var context = this._isGlobal ? window : this;
34603470
if (context.draw) {
@@ -3492,24 +3502,13 @@ var transform = function (require, core, constants, outputtext_area) {
34923502
return this;
34933503
};
34943504
p5.prototype.popMatrix = function () {
3495-
this.canvas.getContext('2d').restore();
3496-
this._matrices.pop();
3497-
return this;
3505+
throw new Error('popMatrix() not used, see pop()');
34983506
};
34993507
p5.prototype.printMatrix = function () {
3500-
return this;
3508+
throw new Error('printMatrix() not implemented');
35013509
};
35023510
p5.prototype.pushMatrix = function () {
3503-
this.canvas.getContext('2d').save();
3504-
this._matrices.push([
3505-
1,
3506-
0,
3507-
0,
3508-
1,
3509-
0,
3510-
0
3511-
]);
3512-
return this;
3511+
throw new Error('pushMatrix() not used, see push()');
35133512
};
35143513
p5.prototype.resetMatrix = function () {
35153514
this.canvas.getContext('2d').setTransform();

‎lib/p5.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/core.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -220,12 +220,12 @@ define(function (require) {
220220
}
221221
// call user's draw
222222
if (typeof userDraw === 'function') {
223-
this.pushMatrix();
223+
this.push();
224224
if (typeof userSetup === 'undefined') {
225225
this.scale(this._pixelDensity, this._pixelDensity);
226226
}
227227
userDraw();
228-
this.popMatrix();
228+
this.pop();
229229
}
230230
}.bind(this);
231231

‎src/math/random.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ define(function (require) {
184184
*}
185185
* </code>
186186
* </div>
187-
*/
187+
*/
188188
var y2;
189189
var previous = false;
190190
p5.prototype.randomGaussian = function(mean, sd) {

‎src/structure/structure.js

+123-37
Original file line numberDiff line numberDiff line change
@@ -47,37 +47,73 @@ define(function (require) {
4747
};
4848

4949
/**
50-
* The pushStyle() function saves the current style settings and popStyle()
51-
* restores the prior settings. Note that these functions are always used
52-
* together. They allow you to change the style settings and later return to
53-
* what you had. When a new style is started with pushStyle(), it builds on
54-
* the current style information. The pushStyle() and popStyle() functions
55-
* can be embedded to provide more control. (See the second example above
56-
* for a demonstration.)
57-
*
58-
* The style information controlled by the following functions are included
59-
* in the style: fill(), stroke(), tint(), strokeWeight(), strokeCap(),
60-
* strokeJoin(), imageMode(), rectMode(), ellipseMode(), shapeMode(),
61-
* colorMode(), textAlign(), textFont(), textMode(), textSize(),
62-
* textLeading(), emissive(), specular(), shininess(), ambient()
63-
*
64-
* @method pushStyle
50+
* The push() function saves the current drawing style settings and
51+
* transformations, while pop() restores these settings. Note that these
52+
* functions are always used together. They allow you to change the style
53+
* and transformation settings and later return to what you had. When a new
54+
* state is started with push(), it builds on the current style and transform
55+
* information. The push() and pop() functions can be embedded to provide
56+
* more control. (See the second example for a demonstration.)
57+
* <br><br>
58+
* push() stores information related to the current transformation state
59+
* and style settings controlled by the following functions: fill(),
60+
* stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
61+
* imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
62+
* textFont(), textMode(), textSize(), textLeading().
63+
*
64+
* @method push
65+
* @example
66+
* <div>
67+
* <code>
68+
* ellipse(0, 50, 33, 33); // Left circle
69+
*
70+
* push(); // Start a new drawing state
71+
* strokeWeight(10);
72+
* fill(204, 153, 0);
73+
* translate(50, 0);
74+
* ellipse(0, 50, 33, 33); // Middle circle
75+
* pop(); // Restore original state
76+
*
77+
* ellipse(100, 50, 33, 33); // Right circle
78+
* </code>
79+
* </div>
80+
* <div>
81+
* <code>
82+
* ellipse(0, 50, 33, 33); // Left circle
83+
*
84+
* push(); // Start a new drawing state
85+
* strokeWeight(10);
86+
* fill(204, 153, 0);
87+
* ellipse(33, 50, 33, 33); // Left-middle circle
88+
*
89+
* push(); // Start another new drawing state
90+
* stroke(0, 102, 153);
91+
* ellipse(66, 50, 33, 33); // Right-middle circle
92+
* pop(); // Restore previous state
93+
*
94+
* pop(); // Restore original state
95+
*
96+
* ellipse(100, 50, 33, 33); // Right circle
97+
* </code>
98+
* </div>
6599
*/
66-
p5.prototype.pushStyle = function() {
100+
p5.prototype.push = function() {
101+
var ctx = this.canvas.getContext('2d');
102+
ctx.save();
67103

68104
this.styles.push({
69-
fillStyle: this.canvas.getContext('2d').fillStyle, // fill
70-
strokeStyle: this.canvas.getContext('2d').strokeStyle, // stroke
71-
lineWidth: this.canvas.getContext('2d').lineWidth, // strokeWeight
72-
lineCap: this.canvas.getContext('2d').lineCap, // strokeCap
73-
lineJoin: this.canvas.getContext('2d').lineJoin, // strokeJoin
105+
fillStyle: ctx.fillStyle, // fill
106+
strokeStyle: ctx.strokeStyle, // stroke
107+
lineWidth: ctx.lineWidth, // strokeWeight
108+
lineCap: ctx.lineCap, // strokeCap
109+
lineJoin: ctx.lineJoin, // strokeJoin
74110
tint: this._tint, // tint
75111
imageMode: this._imageMode, // imageMode
76112
rectMode: this._rectMode, // rectMode
77113
ellipseMode: this._ellipseMode, // ellipseMode
78114
// @todo shapeMode
79115
colorMode: this._colorMode, // colorMode
80-
textAlign: this.canvas.getContext('2d').textAlign, // textAlign
116+
textAlign: ctx.textAlign, // textAlign
81117
textFont: this.textFont,
82118
textLeading: this.textLeading, // textLeading
83119
textSize: this.textSize, // textSize
@@ -86,38 +122,88 @@ define(function (require) {
86122
};
87123

88124
/**
89-
* The pushStyle() function saves the current style settings and popStyle()
90-
* restores the prior settings; these functions are always used together.
91-
* They allow you to change the style settings and later return to what you
92-
* had. When a new style is started with pushStyle(), it builds on the
93-
* current style information. The pushStyle() and popStyle() functions can
94-
* be embedded to provide more control (see the second example above for
95-
* a demonstration.)
125+
* The push() function saves the current drawing style settings and
126+
* transformations, while pop() restores these settings. Note that these
127+
* functions are always used together. They allow you to change the style
128+
* and transformation settings and later return to what you had. When a new
129+
* state is started with push(), it builds on the current style and transform
130+
* information. The push() and pop() functions can be embedded to provide
131+
* more control. (See the second example for a demonstration.)
132+
* <br><br>
133+
* push() stores information related to the current transformation state
134+
* and style settings controlled by the following functions: fill(),
135+
* stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
136+
* imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
137+
* textFont(), textMode(), textSize(), textLeading().
96138
*
97-
* @method popStyle
139+
* @method pop
140+
* @example
141+
* <div>
142+
* <code>
143+
* ellipse(0, 50, 33, 33); // Left circle
144+
*
145+
* push(); // Start a new drawing state
146+
* translate(50, 0);
147+
* strokeWeight(10);
148+
* fill(204, 153, 0);
149+
* ellipse(0, 50, 33, 33); // Middle circle
150+
* pop(); // Restore original state
151+
*
152+
* ellipse(100, 50, 33, 33); // Right circle
153+
* </code>
154+
* </div>
155+
* <div>
156+
* <code>
157+
* ellipse(0, 50, 33, 33); // Left circle
158+
*
159+
* push(); // Start a new drawing state
160+
* strokeWeight(10);
161+
* fill(204, 153, 0);
162+
* ellipse(33, 50, 33, 33); // Left-middle circle
163+
*
164+
* push(); // Start another new drawing state
165+
* stroke(0, 102, 153);
166+
* ellipse(66, 50, 33, 33); // Right-middle circle
167+
* pop(); // Restore previous state
168+
*
169+
* pop(); // Restore original state
170+
*
171+
* ellipse(100, 50, 33, 33); // Right circle
172+
* </code>
173+
* </div>
98174
*/
99-
p5.prototype.popStyle = function() {
175+
p5.prototype.pop = function() {
176+
var ctx = this.canvas.getContext('2d');
177+
ctx.restore();
100178

101179
var lastS = this.styles.pop();
102180

103-
this.canvas.getContext('2d').fillStyle = lastS.fillStyle; // fill
104-
this.canvas.getContext('2d').strokeStyle = lastS.strokeStyle; // stroke
105-
this.canvas.getContext('2d').lineWidth = lastS.lineWidth; // strokeWeight
106-
this.canvas.getContext('2d').lineCap = lastS.lineCap; // strokeCap
107-
this.canvas.getContext('2d').lineJoin = lastS.lineJoin; // strokeJoin
181+
ctx.fillStyle = lastS.fillStyle; // fill
182+
ctx.strokeStyle = lastS.strokeStyle; // stroke
183+
ctx.lineWidth = lastS.lineWidth; // strokeWeight
184+
ctx.lineCap = lastS.lineCap; // strokeCap
185+
ctx.lineJoin = lastS.lineJoin; // strokeJoin
108186
this._tint = lastS.tint; // tint
109187
this._imageMode = lastS.imageMode; // imageMode
110188
this._rectMode = lastS._rectMode; // rectMode
111189
this._ellipseMode = lastS.ellipseMode; // elllipseMode
112190
// @todo shapeMode
113191
this._colorMode = lastS._colorMode; // colorMode
114-
this.canvas.getContext('2d').textAlign = lastS.textAlign; // textAlign
192+
ctx.textAlign = lastS.textAlign; // textAlign
115193
this.textFont = lastS.textFont;
116194
this.textLeading = lastS.textLeading; // textLeading
117195
this.textSize = lastS.textSize; // textSize
118196
this.textStyle = lastS.textStyle; // textStyle
119197
};
120198

199+
p5.prototype.pushStyle = function() {
200+
throw new Error('pushStyle() not used, see push()');
201+
};
202+
203+
p5.prototype.popStyle = function() {
204+
throw new Error('popStyle() not used, see pop()');
205+
};
206+
121207
/**
122208
*
123209
* Executes the code within draw() one time. This functions allows the

0 commit comments

Comments
 (0)