Poline

Summoning

When summoning a "poline" without providing any arguments. It will generate a palette with two random anchors. However, you can also provide a list of anchors to the function. The anchors are represented as a list of hsl values.

Points

As demonstrated on the illustration, "Poline" works by drawing lines between the anchors. The number of points determines the number of colors generated between each pair of anchors. The more points you have, the more colors you will get.

So the total amount of colors generated is points * pair of anchors. If omitted, the default value is 4. It can be changed after initialization by setting the numPoints property on your "Poline" instance.

Steps

Anchors

The anchors are the points that the lines are drawn between. The anchors are represented as a list of hsl values. The hsl values are represented as an array of hue, saturation and lightness. The hue[0…360], the saturation[0…1] and the lightness[0…1].

Either provide a list of anchors on initialization as in the examples above or let "poline" generate a random palette for you. (by omitting the anchorColors argument)

You can add anchors after initialization by calling the addAnchor method. Either provide a list of hsl values or X,Y,Z coordinates.

Updating Anchors

You can update the anchors by calling the updateAnchorPoint method. The method takes the anchor reference and either a color as a HSL representation or an XYZ position array.

Randomize Positions

Position Functions

The position functions are used to determine the position of the points between the anchors. The position functions can be the same for XYZ (positionFunction) or different for each axis (positionFunctionX, positionFunctionY, positionFunctionZ).

They function a lot like an easing function can be imported from the poline module.

Any function that takes a number between 0 and 1 and returns a number between 0 and 1 can be used as a position function. The second argument is called `reverse`. It is a boolean set to true on every second connection between anchors.

Position fn X(Hue / Light) Position fn Y(Hue / Light) Position fn Z (Saturation)

Looping Palette

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.

It is also possible to close the loop after the fact by setting poline.closedLoop = true|false.

Closed Loop

Hue Shifting

"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.

The amount is a int or float between -Infinity and Infinity. It will permanently shift the hue of all colors in the palette.

Closest Anchor

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: .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.

Color List

The 'poline' instance returns all colors as an array of hsl arrays or alternatively as an array of CSS strings.

poline.colors
poline.colorsCSS

Color Model

To keep the library as lightweight as possible, "poline" only supports the hsl color model out of the box. However, it is easily possible to use other color models by using a library like culori.

Color Model