奥秘调色板生成器 Mico-Lib 在笛卡尔空间中插值 HSL 颜色
"poline" is an enigmatic color palette generator, that harnesses the mystical witchcraft of polar coordinates. Its methodology, defying conventional color science, is steeped in the esoteric knowledge of the early 20th century. This magical technology defies explanation, drawing lines between anchors to produce visually striking and otherworldly palettes. It is an indispensable tool for the modern generative sorcerer, and a delight for the eye.
"poline" is available as an npm package. Alternatively you can clone it on GitHub.
npm install poline
You can also use the unpkg CDN to include the library in your project. I recommend using the mjs version of the library. This will allow you to use the import syntax. But you can also use the umd version if you prefer to use the script tag.
Begin your journey with poline by following this simple incantation:
// Import the magical construct
import { Poline } from "poline";
// Summon a new palette with default settings (random anchor colors)
const poline = new Poline();
// Behold the colors in HSL format
console.log(poline.colors);
// Or as CSS strings ready for your spells
console.log(poline.colorsCSS);
The use of "Poline" begins with the invocation of its command, which can be performed with or without arguments. If called without, the tool will generate a mesmerizing palette featuring two randomly selected anchors. On the other hand, one can choose to provide their own anchor points, represented as a list of hsl values, for a more personal touch. The power to shape and mold the colors lies in your hands."
new Poline({
anchorColors: [
[309, 0.72, 0.8],
[67, 0.32, 0.08],
//...
],
});
The magic of "Poline" is revealed through its technique of drawing lines between anchor points. The richness of the palette is determined by the number of points, with each connection producing a unique color.
Increasing the number of points will yield an even greater array of colors. By default, four points are used, but this can easily be adjusted through the 'numPoints' property on your Poline instance, as demonstrated in the code example.
new Poline({
numPoints: 6,
});
The resulting palette is a product of points multiplied by the number of anchor pairs. It can be changed after initialization by setting the numPoints property on your "Poline" instance.
At the heart of "Poline" lies the concept of anchors, the fixed points that serve as the foundation for the creation of color palettes. Anchors are represented as a list of hsl values, which consist of three components: hue [0…360], saturation [0…1], and lightness [0…1].
The choice is yours, whether to provide your own anchor points during initialization or to allow "Poline" to generate a random selection for you by omitting the 'anchorColors' argument. The versatility of Poline extends "Poline" its initial setup, as you can also add anchors to your palette at any time using the 'addAnchorPoint' method. This method accepts either a color as HSL array values or an array of X, Y, Z coordinates, further expanding the possibilities of your color creation.
poline.addAnchorPoint({
color: [100, 0.91, 0.8],
});
// or
poline.addAnchorPoint({
xyz: [0.43, 0.89, 0.91],
});
You can also specify where to insert the new anchor by providing an insertAtIndex parameter:
poline.addAnchorPoint({
color: [200, 0.5, 0.6],
insertAtIndex: 1, // Insert after the first anchor
});
When working with XYZ coordinates, you may want to ensure anchor points stay within the valid color wheel (a circle of radius 0.5 centered at 0.5, 0.5). The clampToCircle option constrains coordinates to remain inside this boundary. Note: this only affects future addAnchorPoint and updateAnchorPoint calls — existing anchor points are not retroactively clamped.
You can set a default behavior for all anchor operations:
// During initialization
const poline = new Poline({
anchorColors: [...],
clampToCircle: true // All anchor operations will clamp by default
});
// Or change it later
poline.clampToCircle = true;
You can also override the default on a per-call basis:
// Clamp this specific anchor point
poline.addAnchorPoint({
xyz: [0.9, 0.9, 0.5],
clamp: true, // Will be clamped to stay within color wheel
});
// Override the default to disable clamping for this call
poline.updateAnchorPoint({
pointIndex: 0,
xyz: [1.0, 1.0, 0.5],
clamp: false, // Explicitly disable clamping
});
The clampToCircle helper function is also exported for use in your own code:
import { clampToCircle } from "poline";
const [clampedX, clampedY] = clampToCircle(0.9, 0.9);
// Returns coordinates clamped to circle boundary
With this feature, you have the power to fine-tune your palette and make adjustments as your creative vision evolves. So whether you are looking to make subtle changes or bold alterations, "Poline" is always ready to help you achieve your desired result.
The ability to update existing anchors is made possible through the 'updateAnchorPoint' method. This method accepts the reference to the anchor you wish to modify and either a color in the form of HSL representation or an XYZ position array.
poline.updateAnchorPoint({
point: poline.anchorPoints[0],
color: [286, 0.22, 0.22],
});
You can also update an anchor by its index:
poline.updateAnchorPoint({
pointIndex: 1,
color: [120, 0.8, 0.5],
});
The position function in "Poline" plays a crucial role in determining the distribution of colors between the anchors. It works similar to easing functions and can be imported from the "Poline" module.
A position function is a mathematical function that maps a value between 0 and 1 to another value between 0 and 1. By definition the same position function for all axes "Poline" will draw a straight line between the anchors. The chosen function will determine the distribution of colors between the anchors.
import { Poline, positionFunctions } from "poline";
new Poline({
positionFunction: positionFunctions.linearPosition,
});
If none is provided, "Poline" will use the default function, which is a sinusoidal function. The following position functions are available and can be included by importing the positionFunctions object from the "Poline" module:
Here's a visual representation of how these functions affect the distribution:
| Function Name | Effect on Color Distribution |
|---|---|
| linearPosition | Even distribution of colors along the path |
| exponentialPosition | Colors cluster near one end, spreading out toward the other |
| sinusoidalPosition | Smooth acceleration and deceleration of colors |
| arcPosition | Colors follow an arc-like distribution |
By defining different position functions for each axis, you can control the distribution of colors along each axis (positionFunctionX, positionFunctionY, positionFunctionZ). This will draw different arcs and create a diverse range of color palettes.
new Poline({
positionFunctionX: positionFunctions.sinusoidalPosition,
positionFunctionY: positionFunctions.quadraticPosition,
positionFunctionZ: positionFunctions.linearPosition,
});
By default, the palette is not a closed loop. This means that the last color generated is not the same as the first color. If you want the palette to be a closed loop, you can set the closedLoop argument to true.
poline.closedLoop = true;
It is also possible to close the loop after the fact by setting poline.closedLoop = true|false.
With the power of hue shifting, "Poline" provides yet another level of customization. This feature allows you to shift the hue of the colors generated by a certain amount, giving you the ability to animate your palette or create similar color combinations with different hues."
"poline" supports hue shifting. This means that the hue of the colors will be shifted by a certain amount. This can be useful if you want to animate the palette or generate a palette that looks similar to your current palette but using different hues.
poline.shiftHue(1);
The amount is a int or float between -Infinity and Infinity. It will permanently shift the hue of all colors in the palette.
The getColorAt method allows you to sample any color along the entire color journey by providing a position between 0 and 1. This treats all segments as one continuous path, respecting the easing functions for each axis.
Position 0 returns the color at the very beginning, 0.5 returns the color at the middle of the entire journey, and 1 returns the color at the very end. The method accounts for all easing functions and segment transitions.
// Get color at the start of the palette
const startColor = poline.getColorAt(0);
// Get color at the middle of the palette
const middleColor = poline.getColorAt(0.5);
// Get color at the end of the palette
const endColor = poline.getColorAt(1);
// Get color at any position (e.g., 25% through)
const quarterColor = poline.getColorAt(0.25);
// Access the color values
console.log(middleColor.hsl); // HSL array [h, s, l]
console.log(middleColor.hslCSS); // CSS string "hsl(120, 80%, 60%)"
This method is particularly useful for:
In some situations, you might want to know which anchor is closest to a certain position or color. This method is used in the visualizer to highlight to select the closest anchor on click.
poline.getClosestAnchorPoint({ xyz: [x, y, null], maxDistance: 0.1 });
The maxDistance argument is optional and will return null if the closest anchor is further away than the maxDistance. Any of the xyz or hsl components can be null. If they are null, they will be ignored.
The 'poline' instance returns all colors as an array of hsl, lch or oklch arrays or alternatively as an array of CSS strings.
poline.colors; // Array of HSL values [[h, s, l], [h, s, l], ...]
poline.colorsCSS; // Array of CSS HSL strings ['hsl(h, s%, l%)', ...]
poline.colorsCSSlch; // Array of CSS LCH strings ['lch(l% c h)', ...]
poline.colorsCSSoklch; // Array of CSS OKLCH strings ['oklch(l% c h)', ...]
To remove an anchor, you can use the removeAnchorPoint method. It either takes an anchor reference or an index as an argument.
poline.removeAnchorPoint({
point: poline.anchorPoints[poline.anchorPoints.length - 1],
});
// or
poline.removeAnchorPoint({
index: poline.anchorPoints.length - 1,
});
The magical construct of "poline" offers the power to invert the lightness calculation, creating palettes with different visual characteristics. You can toggle this option during initialization or later thr
暂无开放 Issues，或尚未同步最近议题。