Skip to content

Commit edecbc1

Browse files
perminder-17perminder-17
authored
Merge branch 'dev-2.0' into strands-support-globals
2 parents c5f4665 + 8b74c3f commit edecbc1

16 files changed

Lines changed: 174 additions & 18 deletions

File tree

‎src/color/p5.Color.js‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -364,26 +364,45 @@ class Color {
364364
* </code>
365365
* </div>
366366
*/
367-
toString(format) {
368-
if (format === undefined && this._defaultStringValue !== undefined) {
367+
toString(format) {
368+
if (format === undefined && this._defaultStringValue !== undefined) {
369369
return this._defaultStringValue;
370+
}
371+
372+
let outputFormat = format;
373+
if (format === '#rrggbb') {
374+
outputFormat = 'hex';
370375
}
371376

372377
const key = `${this._color.space.id}-${this._color.coords.join(',')}-${this._color.alpha}-${format}`;
373378
let colorString = serializationMap.get(key);
374379

375-
if(!colorString){
380+
if (!colorString) {
376381
colorString = serialize(this._color, {
377-
format
382+
format: outputFormat
378383
});
384+
385+
if (format === '#rrggbb') {
386+
colorString = String(colorString);
387+
if (colorString.length === 4) {
388+
const r = colorString[1];
389+
const g = colorString[2];
390+
const b = colorString[3];
391+
colorString = `#${r}${r}${g}${g}${b}${b}`;
392+
}
393+
if (colorString.length > 7) {
394+
colorString = colorString.slice(0, 7);
395+
}
396+
colorString = colorString.toLowerCase();
397+
}
398+
379399
if (serializationMap.size > 1000) {
380400
serializationMap.delete(serializationMap.keys().next().value)
381401
}
382402
serializationMap.set(key, colorString);
383403
}
384404
return colorString;
385405
}
386-
387406
/**
388407
* Checks the contrast between two colors. This method returns a boolean
389408
* value to indicate if the two color has enough contrast. `true` means that

‎src/dom/p5.MediaElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ class MediaElement extends Element {
6666
source.src = newValue;
6767
elt.appendChild(source);
6868
self.elt.src = newValue;
69-
self.modified = true;
69+
self._modified = true;
7070
}
7171
});
7272

‎src/webgl/p5.Texture.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,9 @@ class Texture {
225225
data.setModified && data.setModified(true);
226226
}
227227
} else if (this.isSrcP5Image) {
228+
if (data.gifProperties) {
229+
data._animateGif(this._renderer._pInst);
230+
}
228231
// for an image, we only update if the modified field has been set,
229232
// for example, by a call to p5.Image.set
230233
if (data.isModified()) {

‎src/webgl/utils.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -281,17 +281,14 @@ export function setWebGLUniformValue(shader, uniform, data, getTexture, gl) {
281281
"You're trying to use a number as the data for a texture." +
282282
"Please use a texture.",
283283
);
284-
return this;
284+
return;
285285
}
286286
gl.activeTexture(data);
287287
gl.uniform1i(location, data);
288288
} else {
289289
gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
290290
uniform.texture = data instanceof Texture ? data : getTexture(data);
291291
gl.uniform1i(location, uniform.samplerIndex);
292-
if (uniform.texture.src.gifProperties) {
293-
uniform.texture.src._animateGif(this._pInst);
294-
}
295292
}
296293
break;
297294
case gl.SAMPLER_CUBE:

‎test/unit/color/p5.Color.js‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -791,15 +791,58 @@ suite('p5.Color', function() {
791791
});
792792
});
793793

794-
suite.todo('p5.Color.prototype.toString', function() {
795-
// var colorStr;
794+
suite('p5.Color.prototype.toString', function() {
795+
suite('#rrggbb format', function() {
796+
test('should expand short hex (#rgb) to full 6-digit format', function() {
797+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
798+
const c = mockP5Prototype.color('#f06');
799+
const result = c.toString('#rrggbb');
800+
assert.equal(result, '#ff0066');
801+
});
802+
803+
test('should truncate hex with alpha (#rrggbbaa) to 6 digits', function() {
804+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
805+
const c = mockP5Prototype.color(255, 0, 102, 128);
806+
const result = c.toString('#rrggbb');
807+
assert.equal(result.length, 7);
808+
assert.equal(result, '#ff0066');
809+
});
810+
811+
test('should output lowercase hex string', function() {
812+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
813+
const c = mockP5Prototype.color(255, 170, 187);
814+
const result = c.toString('#rrggbb');
815+
assert.equal(result, result.toLowerCase());
816+
assert.equal(result, '#ffaabb');
817+
});
818+
819+
test('should correctly format standard RGB colors', function() {
820+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
821+
const c = mockP5Prototype.color(255, 0, 102);
822+
const result = c.toString('#rrggbb');
823+
assert.equal(result, '#ff0066');
824+
});
825+
826+
test('should correctly format black color', function() {
827+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
828+
const c = mockP5Prototype.color(0, 0, 0);
829+
const result = c.toString('#rrggbb');
830+
assert.equal(result, '#000000');
831+
});
796832

797-
// beforeEach(function() {
798-
// mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
799-
// c = mockP5Prototype.color(128, 0, 128, 128);
800-
// colorStr = c.toString();
801-
// });
833+
test('should correctly format white color', function() {
834+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
835+
const c = mockP5Prototype.color(255, 255, 255);
836+
const result = c.toString('#rrggbb');
837+
assert.equal(result, '#ffffff');
838+
});
802839

803-
// NOTE: need some tests here
840+
test('should handle colors created from 6-digit hex string', function() {
841+
mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
842+
const c = mockP5Prototype.color('#9932cc');
843+
const result = c.toString('#rrggbb');
844+
assert.equal(result, '#9932cc');
845+
});
846+
});
804847
});
805848
});

‎test/unit/visual/cases/webgl.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1163,4 +1163,83 @@ visualSuite('WebGL', function() {
11631163
});
11641164
});
11651165

1166+
visualSuite('Transforms', function() {
1167+
visualTest('translate() moves shapes in x and y axes', function(p5, screenshot) {
1168+
p5.createCanvas(50, 50, p5.WEBGL);
1169+
p5.background(200);
1170+
p5.noStroke();
1171+
1172+
// Red circle at origin
1173+
p5.fill('red');
1174+
p5.circle(0, 0, 10);
1175+
1176+
// Green circle translated by (15, 0)
1177+
p5.push();
1178+
p5.translate(15, 0);
1179+
p5.fill('green');
1180+
p5.circle(0, 0, 10);
1181+
p5.pop();
1182+
1183+
// Blue circle translated by (0, 15)
1184+
p5.push();
1185+
p5.translate(0, 15);
1186+
p5.fill('blue');
1187+
p5.circle(0, 0, 10);
1188+
p5.pop();
1189+
1190+
screenshot();
1191+
});
1192+
1193+
visualTest('rotate() rotates shapes around z-axis', function(p5, screenshot) {
1194+
p5.createCanvas(50, 50, p5.WEBGL);
1195+
p5.background(200);
1196+
p5.noStroke();
1197+
p5.fill('red');
1198+
p5.rectMode(p5.CENTER);
1199+
p5.rotate(p5.PI / 4);
1200+
p5.rect(0, 0, 30, 30);
1201+
screenshot();
1202+
});
1203+
1204+
visualTest('scale() uniformly scales shapes', function(p5, screenshot) {
1205+
p5.createCanvas(50, 50, p5.WEBGL);
1206+
p5.background(200);
1207+
p5.noStroke();
1208+
p5.fill('red');
1209+
1210+
// Unscaled circle
1211+
p5.circle(-12, 0, 20);
1212+
1213+
// Scaled circle (half size)
1214+
p5.push();
1215+
p5.translate(12, 0);
1216+
p5.scale(0.5);
1217+
p5.circle(0, 0, 20);
1218+
p5.pop();
1219+
1220+
screenshot();
1221+
});
1222+
});
1223+
1224+
visualSuite('media assets', function() {
1225+
visualTest('drawing gifs', async function(p5, screenshot) {
1226+
p5.createCanvas(50, 50, p5.WEBGL);
1227+
const gif = await p5.loadImage('/test/unit/assets/nyan_cat.gif');
1228+
p5.imageMode(p5.CENTER);
1229+
p5.image(gif, 0, 0);
1230+
screenshot();
1231+
});
1232+
1233+
visualTest('drawing gifs after a time delay', async function(p5, screenshot) {
1234+
p5.createCanvas(50, 50, p5.WEBGL);
1235+
const gif = await p5.loadImage('/test/unit/assets/nyan_cat.gif');
1236+
p5.imageMode(p5.CENTER);
1237+
p5.image(gif, 0, 0);
1238+
p5.clear()
1239+
// Simulate waiting for successive draw calls
1240+
p5._lastRealFrameTime += 300;
1241+
p5.image(gif, 0, 0);
1242+
screenshot();
1243+
});
1244+
});
11661245
});

‎test/unit/visual/screenshots/WebGL/Transforms/rotate() rotates shapes around z-axis/000.png‎

680 Bytes
Loading

‎test/unit/visual/screenshots/WebGL/Transforms/rotate() rotates shapes around z-axis/metadata.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"numScreenshots": 1
3+
}

‎test/unit/visual/screenshots/WebGL/Transforms/scale() uniformly scales shapes/000.png‎

552 Bytes
Loading

‎test/unit/visual/screenshots/WebGL/Transforms/scale() uniformly scales shapes/metadata.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"numScreenshots": 1
3+
}

0 commit comments

Comments
 (0)