[
{
"path": ".eslintrc",
"content": "{\n \"root\": true,\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\"@typescript-eslint\"],\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/eslint-recommended\",\n \"plugin:@typescript-eslint/recommended\"\n ]\n}\n"
},
{
"path": ".github/workflows/main.yml",
"content": "name: Build and Deploy\non: [push]\njobs:\n build-and-deploy:\n concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.\n runs-on: ubuntu-latest\n steps:\n - name: Checkout 🛎️\n uses: actions/checkout@v3\n\n - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.\n run: |\n npm ci\n npm run build\n \n - name: Test 🔍 \n run: |\n npm ci\n npm run test\n\n - name: Deploy 🚀\n uses: JamesIves/github-pages-deploy-action@v4.3.3\n with:\n branch: gh-pages # The branch the action should deploy to.\n folder: dist # The folder the action should deploy.\n"
},
{
"path": ".gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n.env.test\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# Next.js build output\n.next\n\n# Nuxt.js build / generate output\n.nuxt\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and *not* Next.js\n# https://nextjs.org/blog/next-9-1#public-directory-support\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n"
},
{
"path": ".prettierrc.json",
"content": "{}\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2021 David Aerne\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# RampenSau 🎢🐷🎨\n\n**RampenSau** is a color palette generation library that utilizes **hue cycling** and\n**easing functions** to generate color ramps. It can generate a sequence of hues, or use a list of hues to generate a color ramp.\n\nPerfect for generating color palettes for data visualizations, visual design, generative art, or just for fun.\n\n\n\n## Demos\n\n- [Official Docs & Demo](https://meodai.github.io/rampensau/)\n Interactive Documentation with example function calls\n- [1000 Generative Samples](https://codepen.io/meodai/pen/ExQWwar?editors=0010)\n Generating a 1000 palettes using similar settings in with lch\n- [p5.js Example](https://editor.p5js.org/meodai/sketches/dzEX_4wTN)\n 3d example using p5.js's `color()` function\n- [Syntax Highlighting](https://meodai.github.io/rampensau/highlighter.html)\n Generative syntax highlighting themes using RampenSau\n- [Mini HDR Posters](https://codepen.io/meodai/pen/zYeXEyw)\n Generative posters using lCH (p3+ gamut)\n- [Color Ratios](https://codepen.io/meodai/full/vYbwbym)\n Generative rectangles\n- [p5.js Stamps](https://openprocessing.org/sketch/2628160)\n Fork of a sketch originally made by [Okazz](https://openprocessing.org/user/128718/?view=sketches).\n- [Farbvelo Color Generator](https://farbvelo.elastiq.ch/).\n Project this code is based on\n\n## Installation\n\n**Rampensau** is bundled as both UMD and ES on npm. Install it using your package manager of choice:\n\n```bash\nnpm install rampensau\n```\n\nYou can then import RampenSau into your project:\n\n```js\n// ES style: import individual methods\nimport { generateColorRamp } from \"rampensau\";\n\n// Depending on your setup, you might need to import the MJS version directly\nimport { generateColorRamp } from \"rampensau/dist/index.mjs\";\n\n// CJS style\nlet generateColorRamp = require(\"rampensau\");\n```\n\nOr include it directly in your HTML:\n\n```html\n\n\n\n```\n\n## Basic Usage\n\n```js\nimport { generateColorRamp } from 'rampensau';\n\nconst hslColorValues = generateColorRamp({\n // hue generation options\n total: 9, // number of colors in the ramp\n hStart: Math.random() * 360, // hue at the start of the ramp\n hCycles: 1, // number of full hue cycles \n // (.5 = 180°, 1 = 360°, 2 = 720°, etc.)\n hStartCenter: 0.5, // where in the ramp the hue should be centered\n hEasing: (x, fr) => x, // hue easing function x is a value between 0 and 1 \n // fr is the size of each fraction of the ramp: (1 / total)\n\n // if you want to use a specific list of hues, you can pass an array of hues to the hueList option\n // all other hue options will be ignored\n\n // hueList: [...], // list of hues to use\n\n // saturation\n sRange: [0.4, 0.35], // saturation range\n sEasing: (x, fr) => Math.pow(x, 2), // saturation easing function\n\n // lightness\n lRange: [Math.random() * 0.1, 0.9], // lightness range\n lEasing: (x, fr) => Math.pow(x, 1.5), // lightness easing function\n\n transformFn: (color, i) => color; // function to adjust/convert the color after generation\n}); // => [[0…360,0…1,0…1], …]\n```\n\n### generateColorRamp(Options{})\n\n**generateColorRamp** is the core function of **RampenSau**. It returns an array of colors in **HSL** format (`[0…360, 0…1, 0…1]`). To get a better understanding of the options, it might be helpful to familiarize yourself with the [HSL color model](https://en.wikipedia.org/wiki/HSL_and_HSV) or to play with the interactive [Demo / Documentation](https://meodai.github.io/rampensau/).\n\nThe function returns an array of colors, each represented as an array of three values: `[Hue, Saturation, Lightness]`. Hue is in degrees `(0-360)`, while Saturation and Lightness are normalized values between `0 and 1`. We use the term \"HXX\" loosely because while the structure is similar to HSL, these base values can be mapped to various polar color models like HSL, HSV, LCH, or OKLCH.\n\n**Important**: When converting to a specific model, map these values appropriately. For HSL, Saturation and Lightness map directly (usually scaled to percentages). For models like LCH or OKLCH, the library's Saturation value needs to be mapped and potentially scaled to represent Chroma, and Lightness maps to the corresponding Lightness component. The examples using CSS (`hsl()`, `oklch()`) and the Culori library demonstrate this mapping and scaling. The provided colorToCSS helper function handles this conversion automatically for common CSS formats.\n\n#### Options\n\nEvery single option has a default value, so you can just call the function without any arguments.\nIt will generate a color ramp with 9 colors, starting at a random hue, with a single hue cycle.\n\nWhile the function always generates some sort of color ramp, there are two main ways to generate hues independently of saturation and lightness: **Let the function generate a sequence of hues**, or **pass a list of hues** to use.\n\n##### Hue sequence generation\n\nIf you want to generate a sequence of hues, you can use the following options:\n\n- `total` int 3…∞ → Amount of colors the function will generate.\n- `hStart` float 0…360 → Starting point of the hue ramp. 0 Red, 180 Teal etc..\n- `hStartCenter`: float 0…1 → Center the hue in the color ramp. 0 = start, 0.5 = middle, 1 = end.\n- `hCycles` float -∞…0…+∞ → Number of hue cycles. (.5 = 180°, 1 = 360°, 2 = 720°, etc.)\n- `hEasing` function(x) → Hue easing function\n\nThe `hStart` sets the starting point of the hue ramp. The `hStartCenter` sets where in the ramp the hue should be centered. If your ramp starts with a high or low lightness, you might want to center the hue in the middle of the ramp. That is why the default value for `hStartCenter` is `0.5`. (In the center of a given ramp).\n\nThe `hStartCenter` option tells the function where the start hue should be in your ramp. A value of `0` will generate a ramp that starts with the hue at the beginning of the ramp. A value of `0.5` will generate a ramp that starts with the hue in the middle of the ramp. A value of `1` will generate a ramp that starts with the hue at the end of the ramp.\n\nThe `hCycles` option sets the number of hue cycles. A value of `1` will generate a ramp with a single hue cycle. Meaning they will go around the color wheel once. A value of `0.5` will generate a ramp with 180° hue cycle (starting from hStart to its complementary hue). A value of `2` will rotate around the color wheel twice. A value of `-1` will generate a ramp with a reversed hue cycle. A value of `-0.5` will generate a ramp with a reversed 180° hue cycle. A value of `-2` will generate a ramp with a reversed 720° hue cycle.\n\n**Note:** The further away `hCycles` is from `0`, the more hue variation you will get in the ramp. \n\n##### Hue List\n\nIf you want to use a specific list of hues, you can pass an array of hues to the `hueList` option. All other hue options will be ignored. For example, if you want to generate a ramp with 3 colors, but you want to use random unique hues, you can do this:\n\n- `hueList` array [0…360] → List of hues to use. All other hue options will be ignored.\n\n**Example:**\n\n```js\nimport {\n generateColorRamp,\n colorUtils,\n} from \"rampensau\";\n\nconst { uniqueRandomHues } = colorUtils;\n\n\ngenerateColorRamp({\n hueList: uniqueRandomHues({\n startHue: Math.random() * 360, \n total: 5, \n minHueDiffAngle: 90,\n })\n})\n```\n\nThe `uniqueRandomHues` function will generate a list of unique hues with a minimum distance of 90° between each hue. This list is then passed to the `hueList` option of `generateColorRamp`. `uniqueRandomHues` is also exported by RampenSau, so you can use it directly.\n\n##### Saturation & Lightness\n\n- `sRange` array [0…1,0…1] → Saturation Range\n- `lRange` array [0…1,0…1] → Lightness Range\n\n##### Easing Functions\n\nEach of the color dimensions can be eased using a custom function.\nThe function takes an input value `x` and returns a value between 0 and 1:\n\n- `hEasing` function(x) → Hue easing function\n- `sEasing` function(x) → Saturation easing function\n- `lEasing` function(x) → Lightness easing function\n\n##### Transform Function\n\n- `transformFn` function(color, i) → Function to adjust/transform or convert the color after generation. The function takes the generated color and its index as arguments. You can use this function to apply any adjustments you want to the generated colors.\n\n**Example:**\n\n```js\nconst hslColorValues = generateColorRamp({\n transformFn: ([h, s, l], i) => {\n // Adjust the color to be more saturated\n return [h, s, .2 + l * .8];\n }\n});\n```\n\nIt could also be used to get a CSS String instead of the array. Just use the `colorToCSS` function from the color utility functions:\n\n```js\nconst hslColorValues = generateColorRamp({\n transformFn: ([h, s, l]) => colorToCSS(color, 'oklch')\n});\n```\n\n**TypeScript Node** `transformFn` is typed as `(color: number[], i: number) => number[] | string`. If you need to return anything else, you can use a type assertion to cast the return value to whatever you need.\n\n### generateColorRampWithCurve(Options{})\n\n**generateColorRampWithCurve** is a convenience function that uses pre-defined curve methods for easing functions. It accepts all the same options as `generateColorRamp` plus two additional options:\n\n- `curveMethod` string → The curve method to use for easing. One of `'lamé'`, `'sine'`, `'power'`, or `'linear'`.\n- `curveAccent` float 0…5 → The accent of the curve, affecting how pronounced the curve's effect is.\n\n**Note:** It is recommended to use `HSV` as the color space for the `curveMethod` option. It produces nicer looking ramps and is easier to work with, because the lightness and saturation are both 100% at the upper right corner of the the `HSV` slice.\n\n**Example:**\n\n```js\nimport { generateColorRampWithCurve } from 'rampensau';\n\nconst hslColorValues = generateColorRampWithCurve({\n total: 9,\n hStart: 180,\n curveMethod: 'lamé',\n curveAccent: 0.5,\n sRange: [0.4, 0.8],\n lRange: [0.2, 0.8],\n}); // => [[0…360,0…1,0…1], …]\n```\n\n## Hue Generation Functions\n\n### uniqueRandomHues(Options{})\n\nFunction returns an array of unique random hues. Mostly useful for generating a list of hues to use with `hueList`. Alternatively you can use `(x) => Math.random()` as the `hEasing` function in `generateColorRamp` but this will not guarantee unique hues.\n\n- `startHue` float 0…360 → Starting point of the hue ramp. 0 Red, 180 Teal etc..\n- `total` int 3…∞ → Amount of base colors.\n- `minHueDiffAngle` float 0…360 → Minimum angle between hues.\n- `rndFn` function() → Random function. Defaults to `Math.random`.\n\n### colorHarmonies.colorHarmony(Options{})\n\nFunction returns an array of hues based on color harmony theory.\n\nAvailable harmonies:\n- `complementary` - Base hue and its complement (180° opposite)\n- `splitComplementary` - Base hue and two hues on either side of its complement\n- `triadic` - Three hues evenly spaced around the color wheel\n- `tetradic` - Four hues evenly spaced around the color wheel\n- `monochromatic` - Just the base hue\n- `doubleComplementary` - Two complementary pairs\n- `compound` - A mix of complementary and analogous\n- `analogous` - A series of adjacent hues\n\n**Example:**\n\n```js\nimport {\n generateColorRamp,\n colorUtils,\n} from \"rampensau\";\n\nconst { colorHarmonies } = colorUtils;\n\ngenerateColorRamp({\n hueList: colorHarmonies.splitComplementary(Math.random() * 360),\n sRange: [0.4, 0.35],\n lRange: [Math.random() * 0.1, 0.9],\n});\n```\n\n## Color Utility Functions\n\nTo keep the library small, RampenSau does not include any color conversion functions. \nHowever, it does provide a few utility functions to help you work with **RampenSau** or\nits generated colors.\n\n### colorToCSS(color, mode)\n\nIn order to use the colors generated by **RampenSau** in CSS or Canvas, you need to convert them to a CSS color format. This helper function does just that. It returns a CSS string from a color in the format generated from **generateColorRamp** (`[0…360,0…1,0…1]`).\n\n- `color` array [0…360,0…1,0…1] → Color in format generated from **generateColorRamp** (`[0…360,0…1,0…1]`).\n- `mode` string → Color mode to use. One of `hsl`, `hsv`, `lch` or `oklch`. Defaults to `oklch`. (Note that `hsl` is clamped to the sRGB gamut, while `lch` and `oklch` will make use of the full gamut supported by the target monitor / device.)\n\n**Example**:\n \n```js\nimport {\n colorUtils\n} from \"rampensau\";\n\nconst { colorToCSS } = colorUtils;\n\nconsole.log( \n generateColorRamp().map(color => colorToCSS(color, 'oklch')) \n); // ['oklch(5.57% 40% 348.39)', 'oklch(14.59% 38.72% 314.74)', …]\n```\n\n### harveyHue(h)\n\nTransforms a hue to create a more evenly distributed spectrum without the over-abundance of green and ultramarine in the standard HSL/HSV color wheel. Originally written by [@harvey](https://twitter.com/harvey_rayner/status/1748159440010809665) and adapted for use in RampenSau.\n\n- `h` float 0…360 → Hue value to transform, normalized to 0-360 range.\n\n**Example**:\n\n```js\nimport { colorUtils } from \"rampensau\";\nconst { harveyHue } = colorUtils;\n\nconst transformedHue = harveyHue(0.5); // Returns a transformed hue value\n```\n\n## Using RampenSau with a color library\n\nIf you are already using a color library like [culori](https://culorijs.org/api/) you can use its\n`formatCSS` function instead. Just don't forget to scale the chroma value to the [adequate range](https://culorijs.org/color-spaces/).\n\n```js\nculori.formatCss({ mode: 'oklch', \n l: color[2],\n c: color[1] * 0.4,\n h: color[0],\n})\n\nculori.formatCss({ mode: 'lch', \n l: color[2] * 100,\n c: color[1] * 150,\n h: color[0],\n});\n```\n\n## Other Utility Functions\n\nRampenSau also provides several utility functions for working with arrays and curves:\n\n### Usage\n\n```js\nimport { utils } from 'rampensau';\nconst { shuffleArray, scaleSpreadArray, lerp, pointOnCurve, makeCurveEasings } = utils;\n```\n\n### shuffleArray(array, rndFn)\n\nReturns a new shuffled array based on the input array.\n\n- `array` array → The array to shuffle\n- `rndFn` function() → Random function. Defaults to `Math.random`\n\n### scaleSpreadArray(valuesToFill, targetSize, padding, fillFunction)\n\nScales and spreads an array to the target size using interpolation.\nIn the context of RampenSau, this is used to create a smooth transition between colors.\nLet's say you have an array of 3 colors and you want to create a ramp of 10 colors.\nYou can use this function to fill the gaps between the colors and create a smooth transition.\n\n- `valuesToFill` array → Initial array of values\n- `targetSize` int → Desired size of the resulting array\n- `padding` float 0…1 → Optional padding value (defaults to 0)\n- `fillFunction` function → Interpolation function (defaults to lerp)\n\n### lerp(amt, from, to)\n\nLinearly interpolates between two values. \nMainly used for the `fillFunction` in `scaleSpreadArray`.\n\n- `amt` float 0…1 → The interpolation amount\n- `from` number → The starting value\n- `to` number → The ending value\n\n### pointOnCurve(curveMethod, curveAccent)\n\nReturns a function that calculates the point on a curve at a given t value.\n\n- `curveMethod` string or function → The curve method to use\n- `curveAccent` float → The accent of the curve\n\n### makeCurveEasings(curveMethod, curveAccent)\n\nGenerates saturation and lightness easing functions based on a curve method.\n\n- `curveMethod` string or function → The curve method to use\n- `curveAccent` float → The accent of the curve\n\n## About the Name\n\nFor non-German speakers, \"Rampe\" in German means both a ramp (or gradient) and a theatrical stage. A \"RampenSau\" (literally \"stage-sow/pig\") is a German expression for someone who thrives in the spotlight - a natural performer. The name playfully combines this concept with the library's purpose of creating color ramps and gradients.\n\n## License\n\nRampensau is distributed under the [MIT License](./LICENSE).\nFeel free to use it in your projects, but please give credit where it's due. If you find this library useful, consider starring the repository on GitHub or sharing it with your friends and colleagues.\n"
},
{
"path": "build.js",
"content": "import { build } from \"esbuild\";\n\n// Bundled CJS\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n format: \"cjs\",\n outfile: \"dist/index.cjs\",\n});\n\n// Bundled CJS, minified\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n minify: true,\n format: \"cjs\",\n outfile: \"dist/index.min.cjs\",\n});\n\n// Bundled ESM\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n format: \"esm\",\n target: \"es2019\",\n outfile: \"dist/index.mjs\",\n});\n\n// Bundled ESM, minified\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n minify: true,\n format: \"esm\",\n target: \"es2019\",\n outfile: \"dist/index.min.mjs\",\n});\n\n// Bundled IIFE\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n format: \"iife\",\n target: \"node14\",\n globalName: \"rampensau\",\n outfile: \"dist/index.js\",\n});\n\n// Bundled IIFE, minified\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n minify: true,\n format: \"iife\",\n target: \"es6\",\n globalName: \"rampensau\",\n outfile: \"dist/index.min.js\",\n});\n\n// Bundled UMD\n// Adapted from: https://github.com/umdjs/umd/blob/master/templates/returnExports.js\nbuild({\n entryPoints: [\"./src/index.ts\"],\n logLevel: \"info\",\n bundle: true,\n format: \"iife\",\n target: \"es6\",\n globalName: \"rampensau\",\n banner: {\n js: `(function(root, factory) {\n if (typeof define === 'function' && define.amd) {\n \tdefine([], factory);\n } else if (typeof module === 'object' && module.exports) {\n \tmodule.exports = factory();\n } else {\n \troot.rampensau = factory();\n }\n }\n (typeof self !== 'undefined' ? self : this, function() {`,\n },\n footer: {\n js: `return rampensau; }));`,\n },\n outfile: \"dist/index.umd.js\",\n});\n"
},
{
"path": "dist/colorUtils.d.ts",
"content": "export declare type Vector2 = [number, number];\nexport declare type Vector3 = [...Vector2, number];\n/**\n * Converts a color from HSL to HSV.\n * @param {Array} hsl - The HSL color values.\n * @returns {Array} - The HSV color values.\n */\nexport declare function normalizeHue(h: number): number;\n/**\n * Get a more evenly distributed spectrum without the over abundance of green and ultramarine\n * https://twitter.com/harvey_rayner/status/1748159440010809665\n * @param h - The hue value to be converted 0-360\n * @returns h\n */\nexport declare function harveyHue(h: number): number;\nexport declare type colorHarmony = \"complementary\" | \"splitComplementary\" | \"triadic\" | \"tetradic\" | \"pentadic\" | \"hexadic\" | \"monochromatic\" | \"doubleComplementary\" | \"compound\" | \"analogous\";\nexport declare type colorHarmonyFn = (h: number) => number[];\n/**\n * Generates a list of hues based on a color harmony.\n * @param {number} h - The base hue.\n * @param {colorHarmony} harmony - The color harmony.\n * @returns {Array} - The list of hues.\n */\nexport declare const colorHarmonies: {\n [key in colorHarmony]: colorHarmonyFn;\n};\nexport declare type uniqueRandomHuesArguments = {\n startHue?: number;\n total?: number;\n minHueDiffAngle?: number;\n rndFn?: () => number;\n};\n/**\n * Generates a list of unique hues.\n * @param {uniqueRandomHuesArguments} args - The arguments to generate the hues.\n * @returns {Array} - The list of hues.\n */\nexport declare function uniqueRandomHues({ startHue, total, minHueDiffAngle, rndFn, }?: {\n startHue?: number | undefined;\n total?: number | undefined;\n minHueDiffAngle?: number | undefined;\n rndFn?: (() => number) | undefined;\n}): number[];\n/**\n * Converts a color from HSV to HSL.\n * @param {Array} hsv - The HSV color values.\n * @returns {Array} - The HSL color values.\n */\nexport declare const hsv2hsl: ([h, s, v]: [number, number, number]) => [number, number, number];\nexport declare type colorToCSSMode = \"oklch\" | \"lch\" | \"hsl\" | \"hsv\";\n/**\n * Converts color values to a CSS color function string.\n *\n * @param {Vector3} color - Array of three color values based on the color mode.\n * @param {colorToCSSMode} mode - The color mode to use (oklch, lch, hsl, or hsv).\n * @returns {string} - The CSS color function string in the appropriate format.\n */\nexport declare const colorToCSS: (color: [number, number, number], mode?: colorToCSSMode) => string;\n"
},
{
"path": "dist/core.d.ts",
"content": "import type { Vector2, Vector3 } from \"./colorUtils\";\nimport type { CurveMethod } from \"./utils\";\nexport declare type ModifiedEasingFn = (x: number, fr?: number) => number;\nexport declare type hueArguments = {\n hStart?: number;\n hStartCenter?: number;\n hCycles?: number;\n hEasing?: ModifiedEasingFn;\n};\nexport declare type presetHues = {\n hueList: number[];\n};\nexport declare type saturationArguments = {\n sRange?: Vector2;\n sEasing?: ModifiedEasingFn;\n};\nexport declare type lightnessArguments = {\n lRange?: Vector2;\n lEasing?: ModifiedEasingFn;\n};\ndeclare type BaseGenerateColorRampArgument = {\n total?: number;\n transformFn?: (hsl: Vector3, i?: number) => Vector3 | string;\n} & hueArguments & saturationArguments & lightnessArguments;\nexport declare type GenerateColorRampArgument = BaseGenerateColorRampArgument & {\n hueList?: never;\n};\nexport declare type GenerateColorRampArgumentFixedHues = BaseGenerateColorRampArgument & presetHues;\n/**\n * Generates a color ramp based on the HSL color space.\n * @param {GenerateColorRampArgument} args - The arguments to generate the ramp.\n * @returns {Array} - The color ramp.\n */\nexport declare function generateColorRamp({ total, hStart, hStartCenter, hEasing, hCycles, sRange, sEasing, lRange, lEasing, transformFn, hueList, }?: GenerateColorRampArgument | GenerateColorRampArgumentFixedHues): Vector3[];\nexport declare const generateColorRampWithCurve: ({ total, hStart, hStartCenter, hCycles, sRange, lRange, hueList, curveMethod, curveAccent, transformFn, }?: (GenerateColorRampArgument | GenerateColorRampArgumentFixedHues) & {\n curveMethod?: CurveMethod | undefined;\n curveAccent?: number | undefined;\n}) => Vector3[];\nexport {};\n"
},
{
"path": "dist/highlighter.html",
"content": "\n\n \n \n RampenSau Syntax Highlighter Demo\n \n \n \n \n \n \n \n\n"
},
{
"path": "dist/index.cjs",
"content": "\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\n\n// src/index.ts\nvar index_exports = {};\n__export(index_exports, {\n colorUtils: () => colorUtils_exports,\n generateColorRamp: () => generateColorRamp,\n generateColorRampParams: () => generateColorRampParams,\n generateColorRampWithCurve: () => generateColorRampWithCurve,\n utils: () => utils_exports\n});\nmodule.exports = __toCommonJS(index_exports);\n\n// src/utils.ts\nvar utils_exports = {};\n__export(utils_exports, {\n lerp: () => lerp,\n makeCurveEasings: () => makeCurveEasings,\n pointOnCurve: () => pointOnCurve,\n scaleSpreadArray: () => scaleSpreadArray,\n shuffleArray: () => shuffleArray\n});\nfunction shuffleArray(array, rndFn = Math.random) {\n const copy = [...array];\n let currentIndex = copy.length, randomIndex;\n while (currentIndex != 0) {\n randomIndex = Math.floor(rndFn() * currentIndex);\n currentIndex--;\n [copy[currentIndex], copy[randomIndex]] = [\n copy[randomIndex],\n copy[currentIndex]\n ];\n }\n return copy;\n}\nvar lerp = (amt, from, to) => from + amt * (to - from);\nvar scaleSpreadArray = (valuesToFill, targetSize, padding = 0, fillFunction = lerp) => {\n if (!valuesToFill || valuesToFill.length < 2) {\n throw new Error(\"valuesToFill array must have at least two values.\");\n }\n if (targetSize < 1 && padding > 0) {\n throw new Error(\"Target size must be at least 1\");\n }\n if (targetSize < valuesToFill.length && padding === 0) {\n throw new Error(\n \"Target size must be greater than or equal to the valuesToFill array length.\"\n );\n }\n const result = new Array(targetSize);\n if (padding <= 0) {\n const len = valuesToFill.length;\n const lastIdx = len - 1;\n const totalAdded = targetSize - len;\n const baseAdds = Math.floor(totalAdded / lastIdx);\n const remainder = totalAdded % lastIdx;\n let currentResultIdx = 0;\n for (let i = 0; i < lastIdx; i++) {\n const startVal = valuesToFill[i];\n const endVal = valuesToFill[i + 1];\n const segmentLen = 1 + baseAdds + (i < remainder ? 1 : 0);\n for (let j = 0; j < segmentLen; j++) {\n const t = j / segmentLen;\n result[currentResultIdx++] = fillFunction(t, startVal, endVal);\n }\n }\n result[currentResultIdx] = valuesToFill[lastIdx];\n return result;\n }\n const domainStart = padding;\n const domainEnd = 1 - padding;\n const lenMinus1 = valuesToFill.length - 1;\n const normalizedPositions = new Float64Array(valuesToFill.length);\n for (let i = 0; i < valuesToFill.length; i++) {\n normalizedPositions[i] = i / lenMinus1;\n }\n let segmentIndex = 0;\n for (let i = 0; i < targetSize; i++) {\n const t = targetSize === 1 ? 0.5 : i / (targetSize - 1);\n const adjustedT = domainStart + t * (domainEnd - domainStart);\n while (segmentIndex < lenMinus1 && adjustedT > normalizedPositions[segmentIndex + 1]) {\n segmentIndex++;\n }\n const segmentStart = normalizedPositions[segmentIndex];\n const segmentEnd = normalizedPositions[segmentIndex + 1];\n let segmentT = 0;\n if (segmentEnd > segmentStart) {\n segmentT = (adjustedT - segmentStart) / (segmentEnd - segmentStart);\n }\n const fromValue = valuesToFill[segmentIndex];\n const toValue = valuesToFill[segmentIndex + 1];\n result[i] = fillFunction(segmentT, fromValue, toValue);\n }\n return result;\n};\nvar pointOnCurve = (curveMethod, curveAccent) => {\n return (t) => {\n const limit = Math.PI / 2;\n const slice = limit / 1;\n const percentile = t;\n let x = 0, y = 0;\n if (curveMethod === \"lam\\xE9\") {\n const t2 = percentile * limit;\n const exp = 2 / (2 + 20 * curveAccent);\n const cosT = Math.cos(t2);\n const sinT = Math.sin(t2);\n x = Math.sign(cosT) * Math.abs(cosT) ** exp;\n y = Math.sign(sinT) * Math.abs(sinT) ** exp;\n } else if (curveMethod === \"arc\") {\n y = Math.cos(-Math.PI / 2 + t * slice + curveAccent);\n x = Math.sin(Math.PI / 2 + t * slice - curveAccent);\n } else if (curveMethod === \"pow\") {\n x = Math.pow(1 - percentile, 1 - curveAccent);\n y = Math.pow(percentile, 1 - curveAccent);\n } else if (curveMethod === \"powY\") {\n x = Math.pow(1 - percentile, curveAccent);\n y = Math.pow(percentile, 1 - curveAccent);\n } else if (curveMethod === \"powX\") {\n x = Math.pow(percentile, curveAccent);\n y = Math.pow(percentile, 1 - curveAccent);\n } else if (typeof curveMethod === \"function\") {\n const [xFunc, yFunc] = curveMethod(t, curveAccent);\n x = xFunc;\n y = yFunc;\n } else {\n throw new Error(\n `pointOnCurve() curveMethod parameter is expected to be \"lam\\xE9\" | \"arc\" | \"pow\" | \"powY\" | \"powX\" or a function but \\`${curveMethod}\\` given.`\n );\n }\n return { x, y };\n };\n};\nvar makeCurveEasings = (curveMethod, curveAccent) => {\n const point = pointOnCurve(curveMethod, curveAccent);\n return {\n sEasing: (t) => point(t).x,\n lEasing: (t) => point(t).y\n };\n};\n\n// src/colorUtils.ts\nvar colorUtils_exports = {};\n__export(colorUtils_exports, {\n colorHarmonies: () => colorHarmonies,\n colorToCSS: () => colorToCSS,\n harveyHue: () => harveyHue,\n hsv2hsl: () => hsv2hsl,\n normalizeHue: () => normalizeHue,\n uniqueRandomHues: () => uniqueRandomHues\n});\nfunction normalizeHue(h) {\n return (h % 360 + 360) % 360;\n}\nfunction harveyHue(h) {\n h = normalizeHue(h) / 360;\n if (h === 1 || h === 0) return h;\n h = 1 + h % 1;\n const seg = 1 / 6;\n const a = h % seg / seg * Math.PI / 2;\n const [b, c] = [seg * Math.cos(a), seg * Math.sin(a)];\n const i = Math.floor(h * 6);\n const cases = [c, 1 / 3 - b, 1 / 3 + c, 2 / 3 - b, 2 / 3 + c, 1 - b];\n return cases[i % 6] * 360;\n}\nvar colorHarmonies = {\n complementary: (h) => [normalizeHue(h), normalizeHue(h + 180)],\n splitComplementary: (h) => [\n normalizeHue(h),\n normalizeHue(h + 150),\n normalizeHue(h - 150)\n ],\n triadic: (h) => [\n normalizeHue(h),\n normalizeHue(h + 120),\n normalizeHue(h + 240)\n ],\n tetradic: (h) => [\n normalizeHue(h),\n normalizeHue(h + 90),\n normalizeHue(h + 180),\n normalizeHue(h + 270)\n ],\n pentadic: (h) => [\n normalizeHue(h),\n normalizeHue(h + 72),\n normalizeHue(h + 144),\n normalizeHue(h + 216),\n normalizeHue(h + 288)\n ],\n hexadic: (h) => [\n normalizeHue(h),\n normalizeHue(h + 60),\n normalizeHue(h + 120),\n normalizeHue(h + 180),\n normalizeHue(h + 240),\n normalizeHue(h + 300)\n ],\n monochromatic: (h) => [normalizeHue(h), normalizeHue(h)],\n // min 2 for RampenSau\n doubleComplementary: (h) => [\n normalizeHue(h),\n normalizeHue(h + 180),\n normalizeHue(h + 30),\n normalizeHue(h + 210)\n ],\n compound: (h) => [\n normalizeHue(h),\n normalizeHue(h + 180),\n normalizeHue(h + 60),\n normalizeHue(h + 240)\n ],\n analogous: (h) => [\n normalizeHue(h),\n normalizeHue(h + 30),\n normalizeHue(h + 60),\n normalizeHue(h + 90),\n normalizeHue(h + 120),\n normalizeHue(h + 150)\n ]\n};\nfunction uniqueRandomHues({\n startHue = 0,\n total = 9,\n minHueDiffAngle = 60,\n rndFn = Math.random\n} = {}) {\n minHueDiffAngle = Math.min(minHueDiffAngle, 360 / total);\n const baseHue = startHue ?? rndFn() * 360;\n const huesToPickFrom = Array.from(\n {\n length: Math.round(360 / minHueDiffAngle)\n },\n (_, i) => (baseHue + i * minHueDiffAngle) % 360\n );\n let randomizedHues = shuffleArray(huesToPickFrom, rndFn);\n if (randomizedHues.length > total) {\n randomizedHues = randomizedHues.slice(0, total);\n }\n return randomizedHues;\n}\nvar hsv2hsl = ([h, s, v]) => {\n const l = v - v * s / 2;\n const m = Math.min(l, 1 - l);\n const s_hsl = m === 0 ? 0 : (v - l) / m;\n return [h, s_hsl, l];\n};\nvar colorModsCSS = {\n oklch: (color) => [\n color[2] * 100 + \"%\",\n color[1] * 100 + \"%\",\n color[0]\n ],\n lch: (color) => [\n color[2] * 100 + \"%\",\n color[1] * 100 + \"%\",\n color[0]\n ],\n hsl: (color) => [\n color[0],\n color[1] * 100 + \"%\",\n color[2] * 100 + \"%\"\n ],\n hsv: (color) => {\n const [h, s, l] = hsv2hsl(color);\n return [h, s * 100 + \"%\", l * 100 + \"%\"];\n }\n};\nvar colorToCSS = (color, mode = \"oklch\") => {\n const cssMode = mode === \"hsv\" ? \"hsl\" : mode;\n return `${cssMode}(${colorModsCSS[mode](color).join(\" \")})`;\n};\n\n// src/core.ts\nfunction generateColorRamp({\n total = 9,\n hStart = Math.random() * 360,\n hStartCenter = 0.5,\n hEasing = (x) => x,\n hCycles = 1,\n sRange = [0.4, 0.35],\n sEasing = (x) => Math.pow(x, 2),\n lRange = [Math.random() * 0.1, 0.9],\n lEasing = (x) => Math.pow(x, 1.5),\n transformFn = ([h, s, l]) => [h, s, l],\n hueList\n} = {}) {\n const lDiff = lRange[1] - lRange[0];\n const sDiff = sRange[1] - sRange[0];\n const length = hueList && hueList.length > 0 ? hueList.length : total;\n return Array.from({ length }, (_, i) => {\n const relI = length > 1 ? i / (length - 1) : 0;\n const fraction = 1 / length;\n const hue = hueList ? hueList[i] : normalizeHue(\n hStart + // Add the starting hue\n (1 - hEasing(relI, fraction) - hStartCenter) * (360 * hCycles)\n // Calculate the hue based on the easing function\n );\n const saturation = sRange[0] + sDiff * sEasing(relI, fraction);\n const lightness = lRange[0] + lDiff * lEasing(relI, fraction);\n return transformFn([hue, saturation, lightness], i);\n });\n}\nvar generateColorRampWithCurve = ({\n total = 9,\n hStart = Math.random() * 360,\n hStartCenter = 0.5,\n hCycles = 1,\n sRange = [0.4, 0.35],\n lRange = [Math.random() * 0.1, 0.9],\n hueList,\n curveMethod = \"lam\\xE9\",\n curveAccent = 0.5,\n transformFn = ([h, s, l]) => [h, s, l]\n} = {}) => {\n const { sEasing, lEasing } = makeCurveEasings(curveMethod, curveAccent);\n return generateColorRamp({\n total,\n hStart,\n hStartCenter,\n hCycles,\n sRange,\n lRange,\n sEasing,\n lEasing,\n transformFn,\n hueList\n });\n};\n\n// src/index.ts\nvar generateColorRampParams = {\n total: {\n default: 5,\n props: { min: 4, max: 50, step: 1 }\n },\n hStart: {\n default: 0,\n props: { min: 0, max: 360, step: 0.1 }\n },\n hCycles: {\n default: 1,\n props: { min: -2, max: 2, step: 1e-3 }\n },\n hStartCenter: {\n default: 0.5,\n props: { min: 0, max: 1, step: 1e-3 }\n },\n minLight: {\n default: Math.random() * 0.2,\n props: { min: 0, max: 1, step: 1e-3 }\n },\n maxLight: {\n default: 0.89 + Math.random() * 0.11,\n props: { min: 0, max: 1, step: 1e-3 }\n },\n minSaturation: {\n default: Math.random() < 0.5 ? 0.4 : 0.8 + Math.random() * 0.2,\n props: { min: 0, max: 1, step: 1e-3 }\n },\n maxSaturation: {\n default: Math.random() < 0.5 ? 0.35 : 0.9 + Math.random() * 0.1,\n props: { min: 0, max: 1, step: 1e-3 }\n },\n curveMethod: {\n default: \"lam\\xE9\",\n props: { options: [\"lam\\xE9\", \"sine\", \"power\", \"linear\"] }\n },\n curveAccent: {\n default: 0.5,\n props: { min: 0, max: 5, step: 0.01 }\n }\n};\n"
},
{
"path": "dist/index.d.ts",
"content": "export * as utils from \"./utils\";\nexport * as colorUtils from \"./colorUtils\";\nexport { generateColorRamp, generateColorRampWithCurve } from \"./core\";\n/**\n * A set of default parameters and sane ranges to use with `generateColorRamp`\n * when coming up with random color ramps.\n */\nexport declare const generateColorRampParams: {\n total: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n hStart: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n hCycles: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n hStartCenter: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n minLight: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n maxLight: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n minSaturation: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n maxSaturation: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n curveMethod: {\n default: string;\n props: {\n options: string[];\n };\n };\n curveAccent: {\n default: number;\n props: {\n min: number;\n max: number;\n step: number;\n };\n };\n};\n"
},
{
"path": "dist/index.html",
"content": "\n\n\n \n \n \n \n RampenSau — Color ramp generator using curves within the HSL color model\n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n\n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n