added color gradient in p5.Color.js file

README.md

@@ -1074,6 +1074,8 @@ We recognize all types of contributions. This project follows the [all-contribut
       <td align="center" valign="top" width="16.66%"><a href="http://alexhennings.dev"><img src="https://avatars.githubusercontent.com/u/31355456?v=4?s=120" width="120px;" alt="blackboxlogic"/><br /><sub><b>blackboxlogic</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=blackboxlogic" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/zs-5"><img src="https://avatars.githubusercontent.com/u/177980470?v=4?s=120" width="120px;" alt="ℤ"/><br /><sub><b>ℤ</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=zs-5" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/Dhanush111"><img src="https://avatars.githubusercontent.com/u/51503598?v=4?s=120" width="120px;" alt="dhanush"/><br /><sub><b>dhanush</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=Dhanush111" title="Documentation">📖</a></td>
+       <td align="center" valign="top" width="16.66%"><a href="https://github.com/NalinDalal"><img src="" width="120px;" alt="Nalin Dalal"/><br /><sub><b>Nalin Dalal</b></sub></a><br /><a href="https://github.com/processing/p5.js/issues?q=author%3Amartinleopold" title="Bug reports">🐛</a> <a href="https://github.com/processing/p5.js/commits?author=nalindalal" title="Code">💻</a></td>
+
     </tr>
   </tbody>
 </table>

package.json

@@ -143,5 +143,6 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  }
+  },
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
 }

src/color/p5.Color.js

@@ -835,6 +835,31 @@ p5.Color = class Color {
       return this.hsla[1] * this.maxes[constants.HSL][1];
     }
   }
+
+  //Added the gradients for color
+  _generateGradient() {
+    const hue = this._getHue(); // Fetch hue
+    const lightness = this._getLightness(); // Fetch lightness
+
+    // Adjust properties for variation
+    const startLightness = Math.max(0, lightness - 20); // Darker start
+    const endLightness = Math.min(100, lightness + 20); // Lighter end
+
+    // Generate color stops
+    const startColor = `hsl(${hue}, 80%, ${startLightness}%)`;
+    const endColor = `hsl(${hue}, 80%, ${endLightness}%)`;
+
+    // Create linear gradient
+    return `linear-gradient(90deg, ${startColor}, ${endColor})`;
+  }
+
+  // Usage: Apply the gradient to an element
+  applyGradient(element) {
+    const gradient = this._generateGradient();
+    element.style.background = gradient;
+  }
+
+  //end of gradient logic
   /**
  * For a number of different inputs, returns a color formatted as [r, g, b, a]
  * arrays, with each component normalized between 0 and 1.