meodai / fettepalette Goto Github PK

Color ramp generator using curves within the HSV color model

Home Page: https://meodai.github.io/fettepalette/

License: MIT License

TypeScript 88.33% JavaScript 11.67%

color colour palette-generation generative-art generative

fettepalette's Introduction

Introducing FettePalette — a color palette generator that takes inspiration from the world of pixel art and illustration. Using curves and hue shifting within the HSV color model, the function creates beautiful and unique color palettes. Check out the demo and docs and elevate your generative color game today!"

Installation

FettePalette is bundled as both UMD and ES on npm. Install it using npm:

npm install fettepalette

You can then import FettePalette into your project:

// CJS style
let generateRandomColorRamp = require("fettepalette");

// ES style: import individual methods
import { generateRandomColorRamp } from "fettepalette";

Usage

import { generateRandomColorRamp } from 'fettepalette';

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, also takes a function 

  curveAccent:          0,     // how accentuated is the curve
                               // (depends heavily on curveMethod)

  tintShadeHueShift:    0.1,   // defines how shifted the hue is
                               // 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
  
  colorModel:          'hsl',  // defines the color model of the returned colors
                               // hsv and hsl are supported
});

generateRandomColorRamp(Options{})

Function returns an object containing 4 arrays:

{
    light: [], // tints
    dark: [], // shades
    base: [], // medium colors
    all: [], // all colors
 }

Each array contains every color as an array of HSL coordinates [h,s,l/b] [0…360,0…1,0…1]

Options

total int 3… → Amount of base colors.
centerHue float 0…1 → 0 Red, 180 Teal etc..
hueCycle float 0…1 → How much the color changes over the curve 0: not at all, 1: full rainbow
offsetTint float 0…1 → Tint curve difference
offsetShade float 0…1 → Shade curve difference
curveAccent float 0…1 → How pronounced should the curve be, depends a lot on the curve method
tintShadeHueShift float 0…1 → Shifts the colors for the shades and tints
curveMethod string 'lamé'|'arc'|'pow'|'powY'|'powX' → method used to generate the curve. It also takes a function (Number(0…1)) => [x,y]
offsetCurveModTint float 0…1 → amplifies the curveAccent of the tint colors
offsetCurveModShade float 0…1 → amplifies the curveAccent of the shade colors
minSaturationLight array [0…1, 0…1] → minium saturation and light of the generated colors
maxSaturationLight array [0…1, 0…1] → maximum saturation and light of the generated colors
colorModel string 'hsl'|'hsv' → defines the color model of the returned colors hsv might be easier to convert into something else.

Saint Options

To make it easy to integrate with your favourite settings panel (dat.gui, tweakpane …), the script exports generateRandomColorRampParams, an object that contains default and saint options to feed to the main function.

{
  curveMethod: {
    default: 'lamé',
    props: { options: [
      'lamé', 'arc', 'pow', 'powY', 'powX',
      // or +/- standard easing functions 
      'linear', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'random'
    ] },
  },
  curveAccent: {
    default: 0,
    props: { min: -0.095, max: 1, step: 0.001 },
  },
  total: {
    default: 9,
    props: { min: 3, max: 35, step: 1 },
  },
  centerHue: {
    default: 0,
    props: { min: 0, max: 360, step: 0.1 },
  },
  hueCycle: {
    default: 0.3,
    props: { min: -1.5, max: 1.5, step: 0.001 },
  },
  offsetTint: {
    default: 0.01,
    props: { min: 0, max: 0.4, step: 0.001 },
  },
  offsetShade: {
    default: 0.01,
    props: { min: 0, max: 0.4, step: 0.001 },
  },
  tintShadeHueShift: {
    default: 0.01,
    props: { min: 0, max: 1, step: 0.001 },
  },
  offsetCurveModTint: {
    default: 0.03,
    props: { min: 0, max: 0.4, step: 0.0001  },
  },
  offsetCurveModShade: {
    default: 0.03,
    props: { min: 0, max: 0.4, step: 0.0001  },
  },
  minSaturation: {
    default: 0,
    props: { min: 0, max: 1, step: 0.001  },
  },
  minLight: {
    default: 0,
    props: { min: 0, max: 1, step: 0.001  },
  },
  maxSaturation: {
    default: 1,
    props: { min: 0, max: 1, step: 0.001  },
  },
  maxLight: {
    default: 1,
    props: { min: 0, max: 1, step: 0.001  },
  },
}

Integration with tweakpane

import { generateRandomColorRampParams } from "fettepalette";

const PARAMS = {};

Object.keys(generateRandomColorRampParams).forEach((key) => {
  const param = generateRandomColorRampParams[key];
  PARAMS[key] = param.default;
  pane.addInput(PARAMS, key, param.props);
});

Reading and Inspiration

Video: Hue Shifting in Pixel Art by Brandon James Greer
Article: How to make your own color palettes by Greg Gunn
Tweet: Hue Shifting by ENDESGA

fettepalette's People

Contributors

Stargazers

Watchers

Forkers

whjvenyl teacherstrange lihbr victor-lkmx heyzoish strtmack

fettepalette's Issues

Use an object for generateRandomColorRamp argument

As of now, generateRandomColorRamp has many default values:

export default function generateRandomColorRamp  (
  total:number,
  centerHue:number           = 0,
  hueCycle:number            = 0.3,
  offsetTint:number          = 0.1,
  offsetShade:number         = 0.1,
  curveAccent:number         = 0,
  tintShadeHueShift:number   = 0.1,
  curveMethod:curveMethod    = 'arc', 
  offsetCurveModTint:number  = 0.03,
  offsetCurveModShade:number = 0.03,
  minSaturationLight:vector2 = [0, 0],
  maxSaturationLight:vector2 = [1, 1]
):{
  light: hsx[],
  dark: hsx[],
  base: hsx[],
  all: hsx[]
} {}

If I want to modify just one of the default arguments, I need to list all the arguments prior to it, e.g. if I want a different value for offsetShade, I will have to call the function as follows:

generateRandomColorRamp(2, 0, .3, .1, .2)

Also, it is not obvious, what these values stand for, when reading the code.

The following API would be much more intuitive:

generateRandomColorRamp(2, {
  offsetShade: .2
})

pre-built, minifed version

Could you provide a pre-built, minifed version, for folks who do not use npm in their projects? this would make everything more easily accessible.

Consider exporting all types

You do not export the MainFunctionArguments type.

While it is possible to retrieve the type of a function argument (c.f. https://stackoverflow.com/questions/51299555/is-there-argumentstypet-like-returntypet-in-typescript) it is cumbersome.

Incidentally, I would use a different naming for the types, something like GenerateRandomColorRampArgument.

Add types to your package.json

{
  "types": "dist/index.d.ts",
}

Consider using an enum for CurveMethod

Reduce module size

As of now, these are the contents of the package:

fettepalette
├── .eslintrc
├── .github
│   └── workflows
│       └── main.yml
├── LICENSE
├── README.md
├── dist
│   ├── index.d.ts
│   ├── index.esm.js
│   ├── index.html
│   ├── index.iife.js
│   ├── index.js
│   └── index.js.map
├── fp.png
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

Most of these files are not needed. Could you reduce them to the minimum?

To see what files will be included when publishing to npm, you can run npx npm-packlist.

In terms of code, all you need in the package is one js file and one d.ts file. You should leave the minifying, browser, esm and other builds to the users of your package. This being said, I might be wrong here.

Consider not exploring default

C.f. https://basarat.gitbook.io/typescript/main-1/defaultisbad

Avoid tracking build artefacts

Add the following to the .gitignore file and remove the files from the repository:

dist

Strict TSConfig

I would recommend setting the following in your tsconfig:

  noUncheckedIndexedAccess: true
  strict: true

Validate your input ranges and throw errors

For example:

type HSX = [number, number, number];

/**
 * function hsv2hsl
 * @param h {Number} hue value 0...360
 * @param s {Number} saturation 0...1
 * @param v {Number} value 0...1
 * @returns {Array} h:0...360 s:0...1 l:0...1
 */
export const hsv2hsl = (
  h: number,
  s: number,
  v: number,
  l: number = v - (v * s) / 2,
  m = Math.min(l, 1 - l)
): HSX => {
  if (h < 0 || h > 360) {
    throw new Error(
      `hsv2hsl() hue parameter is expected to be a number between 0 and 360, \`${h}\` given.`
    );
  }
  // ...
  return [h, m ? (v - l) / m : 0, l];
};

Capitalize types

In typescript, it is common to capitalize types, e.g. Vector2 v.s. vector2.

Ideally, you would have a eslint rule for this.

Consider adding prettier

When contributing to a project, having both eslint and prettier reduces a lot of friction.

Edit: Do not forget to fix the prettier version, c.f. https://prettier.io/docs/en/install.html

Note: If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

Import and require not working

I installed it via npm and wether i import or require the module I always get errors.
I tried it via the „Try on runkit“ button on npm. It fails there aswell. Is there something I‘m missing?

Fix index.js mess in package.json

in parcel 1.x I have to

import {
  generateRandomColorRamp
} from 'fettepalette/dist/index';

to make it work.

in vanilla node it works fine:

import {
  generateRandomColorRamp
} from 'fettepalette'

canvas-sketch uses browserify
const {generateRandomColorRamp} = require('fettepalette');

only returns an empty object

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.