Fix Color.toString() hex format support for issue #8451

Author: Anshumancanrock

src/color/p5.Color.js

@@ -336,6 +336,7 @@ class Color {
    * @param {String} [format] how the color string will be formatted.
    * Leaving this empty formats the string as rgba(r, g, b, a).
    * '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.
+   * 'hex' is an alias for hexadecimal format.
    * 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.
    * 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
    * 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
@@ -369,12 +370,23 @@ class Color {
       return this._defaultStringValue;
     }
 
+    // Map p5.js format strings to colorjs.io format strings
+    let colorjsFormat = format;
+    if (format === 'hex') {
+      // 'hex' is a common alias for '#rrggbb'
+      colorjsFormat = 'hex';
+    } else if (format === '#rrggbb' || format === '#rrggbbaa' || 
+               format === '#rgb' || format === '#rgba') {
+      // colorjs.io uses 'hex' for all hex formats
+      colorjsFormat = 'hex';
+    }
+
     const key = `${this._color.space.id}-${this._color.coords.join(',')}-${this._color.alpha}-${format}`;
     let colorString = serializationMap.get(key);
 
     if(!colorString){
       colorString = serialize(this._color, {
-        format
+        format: colorjsFormat
       });
       if (serializationMap.size > 1000) {
         serializationMap.delete(serializationMap.keys().next().value)

test/unit/color/p5.Color.js

@@ -791,15 +791,29 @@ suite('p5.Color', function() {
     });
   });
 
-  suite.todo('p5.Color.prototype.toString', function() {
-    // var colorStr;
+  suite('p5.Color.prototype.toString', function() {
+    test('should format as #rrggbb hex string', function() {
+      const testColor = mockP5Prototype.color(153, 50, 204); // darkorchid
+      const result = testColor.toString('#rrggbb');
+      assert.equal(result, '#9932cc');
+    });
 
-    // beforeEach(function() {
-    //   mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255);
-    //   c = mockP5Prototype.color(128, 0, 128, 128);
-    //   colorStr = c.toString();
-    // });
+    test('should format as hex string with "hex" alias', function() {
+      const testColor = mockP5Prototype.color(153, 50, 204); // darkorchid
+      const result = testColor.toString('hex');
+      assert.equal(result, '#9932cc');
+    });
 
-    // NOTE: need some tests here
+    test('should handle single digit hex values with padding', function() {
+      const testColor = mockP5Prototype.color(10, 5, 15);
+      const result = testColor.toString('#rrggbb');
+      assert.equal(result, '#0a050f');
+    });
+
+    test('should format hex with alpha channel', function() {
+      const testColor = mockP5Prototype.color(153, 50, 204, 128);
+      const result = testColor.toString('hex');
+      assert.match(result, /^#[0-9a-f]{8}$/i);
+    });
   });
 });