{"id":17969594,"url":"https://github.com/meodai/rybitten","last_synced_at":"2025-04-05T02:12:19.761Z","repository":{"id":237930458,"uuid":"795512235","full_name":"meodai/RYBitten","owner":"meodai","description":"Implementation of pseudo RYB color conversions derived from Johannes Itten's color wheel.","archived":false,"fork":false,"pushed_at":"2024-12-17T13:06:03.000Z","size":21316,"stargazers_count":109,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T01:14:50.554Z","etag":null,"topics":["color","colors","colour","colours","generative-art","palette","palettes"],"latest_commit_sha":null,"homepage":"https://rybitten.space/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meodai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-03T12:51:32.000Z","updated_at":"2025-01-29T00:59:06.000Z","dependencies_parsed_at":"2024-06-22T21:57:47.131Z","dependency_job_id":"8e0d0aa0-e05c-47b6-97d0-4f500fcb409e","html_url":"https://github.com/meodai/RYBitten","commit_stats":{"total_commits":159,"total_committers":2,"mean_commits":79.5,"dds":"0.012578616352201255","last_synced_commit":"e4ea5e6561a08196f3fcf7741426577b2df5c4a2"},"previous_names":["meodai/rybitten"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2FRYBitten","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2FRYBitten/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2FRYBitten/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2FRYBitten/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meodai","download_url":"https://codeload.github.com/meodai/RYBitten/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","colors","colour","colours","generative-art","palette","palettes"],"created_at":"2024-10-29T15:00:35.142Z","updated_at":"2025-04-05T02:12:19.744Z","avatar_url":"https://github.com/meodai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RYBitten 👄\n\nA color space conversion library for transforming between RGB and RYB (Red-Yellow-Blue) colors.\n\n[![npm version](https://badge.fury.io/js/rybitten.svg)](https://badge.fury.io/js/rybitten)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\u003cimg src=\"screenshots/colorcloth.png\" alt=\"Cloth particles using RYBitten\" /\u003e\n\n## What is RYBitten?\n\n**RYBitten** is a lightweight library for translating colors between RGB and a custom RYB (Red-Yellow-Blue) color space. It’s designed for developers, generative artists, and designers who want to create harmonious, consistent, or randomized color palettes effortlessly. The library emulates Johannes Itten's chromatic circle using trilinear interpolation and customizable options, making it a versatile tool for creative projects.\n\n\u003e \"Play becomes joy, joy becomes work, work becomes play.\"\n\u003e **Johannes Itten, Bauhaus**\n\n## Features ✨\n\n- **Color Conversion**: Effortlessly translate between RGB and a custom RYB space.\n- **Easy Integration**: A tiny library with no dependencies.\n- **Customizable Gamuts**: Experiment with historical color spaces or create your own.\n- **Subtractive Color Model**: Emulates subtractive color.\n\n## Installation 📦\n\nInstall RYBitten with your favorite package manager:\n\n```bash\nnpm install rybitten\n```\n\nOr include it directly in your HTML:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { ryb2rgb, rybHsl2rgb } from \"https://esm.sh/rybitten/\";\n  import { cubes } from \"https://esm.sh/rybitten/cubes\"; // Optional gamut presets\n\u003c/script\u003e\n```\n\n### Include RYBitten in your project\n  \n```javascript\n// ES6 style\nimport { ryb2rgb } from 'rybitten';\n\n// CommonJS style\nconst { ryb2rgb } = require('rybitten');\n```\n\n## Quick Start 🚀\n\n**All RGB and RYB values are in the range `[0, 1]`.**\n\n```javascript\nimport { ryb2rgb } from 'rybitten';\n\nconst rgbColor = ryb2rgb([1, 0, 0.5]);\n\nconsole.log(rgbColor); // Outputs the RGB equivalent\n```\n\n## API Reference 📖\n\n### ryb2rgb(coords: ColorCoords, {cube?: ColorCube = RYB_ITTEN, easingFn? = easingSmoothstep}): ColorCoords\n\nConvert RYB to RGB using trilinear interpolation.\n\n- `coords`: `[0…1, 0…1, 0…1]` RYB coordinates\n- `options`: (*optional*) An object with the following properties:\n  - `cube`: (*optional*): [See the note on the color cube below](#cube) defaults to `RYB_ITTEN`\n  - `easingFn`: (*optional*) Custom easing function used for the interpolation, defaults to `smoothstep`\n- `@return`: `[0…1, 0…1, 0…1]` RGB coordinates\n\n**Note**: RYB uses a subtractive color model where black = all colors, white = no colors. **white will turn to black, and black will turn to white.**\n\n### rybHsl2rgb(hsl: [h: number, s: number, l: number], options?): ColorCoords\n\nConvert HSL to RGB, then apply the RYB space.\n\n- `hsl`: Array of `[hue (0…360), saturation (0…1), lightness (0…1)]`\n- `options`: (*optional*) An object with the following properties:\n  - `cube`: (*optional*) [See the note on the color cube below](#interpolation-color-cube,\n  - `easingFn`: (*optional*) A custom easing function for the interpolation, defaults to `smoothstep`\n  - `invertLightness`: (*optional*) Inverts the lightness value, defaults to `true` (0 is black, 1 is white), if set to `false` l:0 is white, l:1 is black\n- `@return`: `[0…1, 0…1, 0…1]` RGB coordinates\n\nConverts HSL coordinates to RGB, then translates them to the custom RYB color space using ryb2rgb. The HSL coordinates are in the range `[0,360], [0, 1], [0, 1]`. Lightness is inverted to match the RYB color space.\n\n## Interpolation Color Cube 🎛️\n\nThe default RYB color cube used for interpolation in `RYBitten` is tuned to mimic Johannes Itten's chromatic circle. By adjusting the cube, you can achieve different effects and customize the RYB to RGB conversion.\n\nThe cube is inverted to match the subtractive color model, where white is the absence of color and black is the presence of all colors.\n\n```javascript\nconst RYB_CUBE = [\n  // White\n  [253 / 255, 246 / 255, 237 / 255],\n  \n  // Red\n  [227 / 255, 36 / 255, 33 / 255],\n  \n  // Yellow\n  [243 / 255, 230 / 255, 0],\n  \n  // Orange\n  [240 / 255, 142 / 255, 28 / 255],\n  \n  // Blue\n  [22 / 255, 153 / 255, 218 / 255],\n  \n  // Violet\n  [120 / 255, 34 / 255, 170 / 255],\n  \n  // Green\n  [0, 142 / 255, 91 / 255],\n\n  // Black\n  [29 / 255, 28 / 255, 28 / 255],\n];\n```\n\n## Custom Gamuts Presets 🧊\n\nThe library ships with a curated list of color gamuts that you can use to experiment with different color spaces. The default gamut is based on the work of Johannes Itten. But you can access other gamuts by importing the `CUBES` map.\n\nEach gamut is an object with the following properties:\n\n- `title`: The name of the color space\n- `reference`: A reference image used to pick the edges of the custom color gamut\n- `year`: The year the color space was introduced\n- `cube`: The color cube used for interpolation\n\n```javascript\nimport { rybHsl2rgb } from 'rybitten';\nimport { cubes } from 'rybitten/cubes';\n\nconst cube = cubes.get('munsell');\n\nconsole.log(cube); \n/**\n * {\n *  title: 'Munsell',\n *  reference: 'munsell.jpg',\n *  year: 1905,\n *  cube: [\n *  ...cube data\n *  ]\n * }\n */\n\nrybHsl2rgb([0, 1, 0.5], {cube});\n```\n\n## TypeScript Support 📝\n\nRYBitten is written in TypeScript and includes type definitions out of the box:\n\n```typescript\nimport type { ColorCoords, ColorCube } from 'rybitten';\n```\n\n### Available Color Gamuts\n\nThe library provides a collection of historical and modern color gamuts through the `cubes` Map. Import and use them like this:\n\n```javascript\nimport { rybHsl2rgb } from 'rybitten';\nimport { cubes } from 'rybitten/cubes';\n\n// Access any gamut by its key\nconst munsellCube = cubes.get('munsell').cube;\nconst albersCube = cubes.get('albers').cube;\n\n// Use it in color conversion\nconst rgbColor = rybHsl2rgb([0, 1, 0.5], { cube: munsellCube });\n\n// Get metadata about the color space\nconst { title, author, year, reference } = cubes.get('munsell');\n```\n\n#### Historical Color Spaces\n\n| Key | Title | Year | Reference |\n| --- | --- | --- | --- |\n| itten | Johannes Itten: Chromatic Circle | 1961 | [reference](references/farbkreis_extended.png) |\n| itten-normalized | Johannes Itten: Chromatic Circle (Paper-white) | 1961 | [reference](references/Johannes-Itten-The-chromatic-circle-some-exercises-on-the-contrast-of-pure-colors.webp) |\n| bezold | Wilhelm von Bezold: Farbentafel | 1874 | [reference](references/Bezold_Farbentafel_1874.jpg) |\n| boutet | Claude Boutet: Twelve-color color circles | 1708 | [reference](references/Boutet_1708_color_circles.jpg) |\n| hett | J. A. H. Hett: RGV Color Wheel | 1908 | [reference](references/RGV_color_wheel_1908.png) |\n| schiffermueller | Ignaz Schiffermüller: Versuch eines Farbensystems | 1772 | [reference](references/020_schiffermueller1.jpg) |\n| harris | Harris: The Natural System of Colours | 1766 | [reference](references/Moses_Harris_The_Natural_System_of_Colours.jpg) |\n| goethe | Goethe: Farbenkreis | 1809 | [reference](references/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-_und_Seelenlebens_1809.jpg) |\n| munsell | Munsell Color System | 1905 | [reference](references/munsell-atlas-11.jpg) |\n| hayer | Charles Hayter: New Practical Treatise on the Three Primitive Colours | 1826 | [reference](references/Color_diagram_Charles_Hayter.jpg) |\n| bormann | Heinrich-Siegfried Bormann: Gouache tint study for Josef Alber's Preliminary Course\" | 1931 | [reference](references/bormann.png) |\n| chevreul | Michel Eugène Chevreul: Chromatic Circle | 1839 | |\n| maycock | Mark M. Maycock's \"Scale of Normal Colors and their Hues\" | 1895 | |\n| colorprinter | John Earhart's \"The Color Printer\" | 1892 | |\n| japschool | Japanese School Textbook  | 1930 | [reference](references/textbook-3.jpg) |\n| kindergarten1890 | Milton Bradley's Kindergarten Occupation Material | 1890 | [reference](references/kindergarten-1890.jpg) |\n| albers | Josef Albers: Interaction of Color | 1942 | [reference](references/albers-color-harmony.jpg) |\n| lohse |  Richard Paul Lohse's \"Kunsthalle Bern Poster\"  | 1970 | [reference](references/lohse.png) |\n| rgb | James Clerk Maxwell's \"Inverted RGB\" | 1860 | |\n\n#### Featured Artist Spectrum\n\nThe following color spaces were provided by artists and designers who have contributed to the project.\n\n| Key | Title | Year | Reference |\n| --- | --- | --- | --- |\n| [ippsketch](https://ippsketch.com/) | Ippsketch: imposter syndrome | 2022 | [reference](references/ippsketch.png) |\n| ten | Roni Kaufman's \"Ten\" | 2022 | [reference](references/ten.png) |\n\n## Utility Functions 🛠️\n\nThe library exports several utility functions that are used internally for color interpolation.\nBut if you are anything like me, you might find them useful for other purposes when working with this library.\n\n### lerp(a: number, b: number, t: number): number\n\nLinear interpolation between two values.\n\n```javascript\nimport { lerp } from 'rybitten';\n\nlerp(0, 100, 0.5); // returns 50\n```\n\n\n### blerp(a00: number, a01: number, a10: number, a11: number, tx: number, ty: number): number\n\nBilinear interpolation between four points in a 2D space. Useful for interpolating values on a rectangular grid.\n\n```javascript\nimport { blerp } from 'rybitten';\n\n// Interpolate between four corners of a unit square\nblerp(0, 1, 1, 2, 0.5, 0.5); // returns center value\n```\n\n### trilerp(a000: number, a010: number, a100: number, a110: number, a001: number, a011: number, a101: number, a111: number, tx: number, ty: number, tz: number): number\n\nTrilinear interpolation between eight points in a 3D space. This is the core interpolation function used for the color cube conversion.\n\n```javascript\nimport { trilerp } from 'rybitten';\n\n// Interpolate within a color cube\nconst value = trilerp(\n  0, 1, 1, 1,  // front face values\n  0, 1, 1, 1,  // back face values\n  0.5, 0.5, 0.5 // position in cube\n);\n```\n\n## License 📄\n\nRYBitten is distributed under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeodai%2Frybitten","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeodai%2Frybitten","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeodai%2Frybitten/lists"}