api(mainfunction): the function now takes a single object as argument

README.md

@@ -31,25 +31,43 @@ import generateRandomColorRamp from 'culori';
 ```js
 import generateRandomColorRamp from 'colordescription';
 
-function generateRandomColorRamp  (
-  10,  // total of base colors in the ramp
-  180, // at what hue should the generation start at
-  0.3, // hsl spins how much should the hue change over the curve, 0: not at all, 1: one full rainbow
-  0.1,  // offset for the tints
-  0.1, // offset of the shades
-  0, // how accentuated is the curve (depends heavely on curveMethod)
-  0.1, // defines how shifted the hue is in for the shades and the tints
-  'arc', // what method is used to draw the curve in the HSV color model 
-  0.03, // modifies the tint curve
-  0.03, //modifies the shade curve
-  [0, 0], // defines the min saturation and light of all the colors
-  [1, 1], // defines the max saturation and light of all the colors
-)
+function generateRandomColorRamp  ({
+  total:                10,   // total of base colors in the ramp
+
+  centerHue:            180,  // at what hue should the generation start at
+
+  hueCycle:             0.3,  // hsl spins how much should the hue change over 
+                              // the curve, 0: not at all, 1: one full rainbow
+
+  offsetTint:           0.1,  // offset for the tints
+
+  offsetShade:          0.1,  // offset of the shades
+
+  curveMethod:         'arc', // what method is used to draw the curve in the 
+                              // HSV color model 
+
+  curveAccent:          0,    // how accentuated is the curve 
+                              // (depends heavely on curveMethod)
+
+  tintShadeHueShift:    0.1,  // defines how shifted the hue is in 
+                              //for the shades and the tints
+
+  offsetCurveModTint:  0.03,  // modifies the tint curve
+
+  offsetCurveModShade: 0.03,  //modifies the shade curve
+
+  minSaturationLight:  [0, 0],// defines the min saturation and light of all 
+                              // the colors
+
+  maxSaturationLight:  [1, 1],// defines the max saturation and light of all 
+                              //the colors
+})
 ```
 
-### generateRandomColorRamp()
+### generateRandomColorRamp(Options{})
+
+Function returns an ob object containing 4 arrays:
 
-Function returns an ob object containing 4 arrays: 
 ```js
 {
     light: [], // tints 
@@ -58,10 +76,11 @@ Function returns an ob object containing 4 arrays:
     all: [], // all colors
  }
 ```
+
 Each array contains every color as an array of HSL coordinates `[h,s,l]` `[0...360,0...1,0...1]`
 
 
-#### Arguments
+#### Options
 
 1. `total` int 3... > Amount of base colors.
 2. `centerHue` float 0...1 > 0 Red, 180 Teal etc..

dist/index.d.ts

@@ -1,6 +1,20 @@
 export declare type curveMethod = 'lamé' | 'arc' | 'pow' | 'powY' | 'powX';
 declare type vector2 = [number, number];
 declare type hsx = [number, number, number];
+declare type mainFunctionArguments = {
+    total?: number;
+    centerHue?: number;
+    hueCycle?: number;
+    offsetTint?: number;
+    offsetShade?: number;
+    curveAccent?: number;
+    tintShadeHueShift?: number;
+    curveMethod?: curveMethod;
+    offsetCurveModTint?: number;
+    offsetCurveModShade?: number;
+    minSaturationLight?: vector2;
+    maxSaturationLight?: vector2;
+};
 /**
  * function hsv2hsl
  * @param h {Number} hue value 0...360
@@ -29,21 +43,26 @@ export declare const random: (min: number, max: number) => number;
 export declare const pointOnCurve: (curveMethod: curveMethod, i: number, total: number, curveAccent: number, min?: vector2, max?: vector2) => number[];
 /**
  * generateRandomColorRamp()
- * @param total
- * @param centerHue
- * @param hueCycle
- * @param offsetTint
- * @param offsetShade
- * @param curveAccent
- * @param tintShadeHueShift
- * @param curveMethod
- * @param offsetCurveModTint
- * @param offsetCurveModShade
- * @param minSaturationLight
- * @param maxSaturationLight
- * @returns
- */
-export default function generateRandomColorRamp(total: number, centerHue?: number, hueCycle?: number, offsetTint?: number, offsetShade?: number, curveAccent?: number, tintShadeHueShift?: number, curveMethod?: curveMethod, offsetCurveModTint?: number, offsetCurveModShade?: number, minSaturationLight?: vector2, maxSaturationLight?: vector2): {
+ * @param total: int 3... > Amount of base colors.
+ * @param centerHu: float 0...1 > 0 Red, 180 Teal etc..
+ * @param hueCycle: float 0...1 > How much the color changes over the curve 0: not at all, 1: full rainbow
+ * @param offsetTint: float  0...1 > Tint curve difference
+ * @param offsetShade: float  0...1 > Shade curve difference
+ * @param curveAccent: float  0...1 > How pronounced should the curve be, depends a lot on the curve method
+ * @param tintShadeHueShift: float 0...1 > Shifts the colors for the shades and tints
+ * @param curveMethod: string 'lamé'|'arc'|'pow'|'powY'|'powX' > method used to generate the curve
+ * @param offsetCurveModTint: float 0...1 > amplifies the curveAccent of for the tint colors
+ * @param offsetCurveModShade: float 0...1 > amplifies the curveAccent of for the shade colors
+ * @param minSaturationLight: array [0...1, 0...1] > minium saturation and light of the generated colors
+ * @param maxSaturationLight: array [0...1, 0...1] > maximum saturation and light of the generated colors
+ * @returns Object {
+    light: [[h,s,l]...], // tints
+    dark: [[h,s,l]...], // shades
+    base: [[h,s,l]...], // smedium colors
+    all: [[h,s,l]...], // all colors
+  }
+*/
+export default function generateRandomColorRamp({ total, centerHue, hueCycle, offsetTint, offsetShade, curveAccent, tintShadeHueShift, curveMethod, offsetCurveModTint, offsetCurveModShade, minSaturationLight, maxSaturationLight }?: mainFunctionArguments): {
     light: hsx[];
     dark: hsx[];
     base: hsx[];

dist/index.html

@@ -372,7 +372,7 @@ <h2>Example Use</h2>
     import generateRandomColorRamp ,{ hsv2hsl, random, pointOnCurve } from './index.js';
 
     console.clear();
-
+    
     const shuffleArray = array => {
       let arr = [...array];
       for (let i = arr.length - 1; i > 0; i--) {
@@ -647,35 +647,35 @@ <h2>Example Use</h2>
     }
 
     function bam() {
-      colors = generateRandomColorRamp(
-        PARAMS.colors,
-        PARAMS.centerHue,
-        PARAMS.hueCycle,
-        PARAMS.offsetTint,
-        PARAMS.offsetShade,
-        PARAMS.curveAccent,
-        PARAMS.tintShadeHueShift,
-        PARAMS.curveMethod,
-        PARAMS.offsetCurveModTint,
-        PARAMS.offsetCurveModShade,
-        [PARAMS.minSaturation, PARAMS.minLight],
-        [PARAMS.maxSaturation, PARAMS.maxLight]
-      );
+      colors = generateRandomColorRamp({
+        total: PARAMS.colors,
+        centerHue: PARAMS.centerHue,
+        hueCycle: PARAMS.hueCycle,
+        offsetTint: PARAMS.offsetTint,
+        offsetShade: PARAMS.offsetShade,
+        curveAccent: PARAMS.curveAccent,
+        tintShadeHueShift: PARAMS.tintShadeHueShift,
+        curveMethod: PARAMS.curveMethod,
+        offsetCurveModTint: PARAMS.offsetCurveModTint,
+        offsetCurveModShade: PARAMS.offsetCurveModShade,
+        minSaturationLight: [PARAMS.minSaturation, PARAMS.minLight],
+        maxSaturationLight: [PARAMS.maxSaturation, PARAMS.maxLight],
+      });
 
       document.querySelector('[data-code]').innerHTML = `
 generateRandomColorRamp(
-  ${PARAMS.colors},
-  ${PARAMS.centerHue},
-  ${PARAMS.hueCycle},
-  ${PARAMS.offsetTint},
-  ${PARAMS.offsetShade},
-  ${PARAMS.curveAccent},
-  ${PARAMS.tintShadeHueShift},
-  '${PARAMS.curveMethod}',
-  ${PARAMS.offsetCurveModTint},
-  ${PARAMS.offsetCurveModShade},
-  [${PARAMS.minSaturation}, ${PARAMS.minLight}],
-  [${PARAMS.maxSaturation}, ${PARAMS.maxLight}],
+  total: ${PARAMS.colors},
+  centerHue: ${PARAMS.centerHue},
+  hueCycle: ${PARAMS.hueCycle},
+  curveMethod: '${PARAMS.curveMethod}',
+  curveAccent: ${PARAMS.curveAccent},
+  offsetTint: ${PARAMS.offsetTint},
+  offsetShade: ${PARAMS.offsetShade},
+  tintShadeHueShift: ${PARAMS.tintShadeHueShift},
+  offsetCurveModTint: ${PARAMS.offsetCurveModTint},
+  offsetCurveModShade: ${PARAMS.offsetCurveModShade},
+  minSaturationLight: [${PARAMS.minSaturation}, ${PARAMS.minLight}],
+  maxSaturationLight: [${PARAMS.maxSaturation}, ${PARAMS.maxLight}],
 );
 `
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fettepalette",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Color ramp generator using curves within the HSV color model",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",