@batpb/genart - generative art library

Logo

A TypeScript compatible library built on p5.js for creating responsive generative art projects.

view the project on github brittni-and-the-polar-bear/genart

How to Add a New Color to the Library (Developer Instructions)

Table of Contents

Step 1: Categorize the Color

Step 2: Add the File For the Color

Step 3: Create the PaletteColor Object

Step 4: Export the Color from the index.ts File

Step 5: Add the Color to the PaletteColor Maps

Step 6: Add the Color to the ColorNameManager

Step 7: Add the New Color to the PaletteColor Unit Tests

Step 8: Add Documentation

Step 9: Add the New Color to the Palette Colors Jekyll Collection

Step 10: Add Color to the Release Notes

Full PaletteColor File Example

Step 1: Categorize the Color

Valid Categories:

Table of Contents

Step 2: Add the File For the Color

The directory of the color file will be /src/main/color/palette/palette-colors/<category>.

The filename of the color file will be pc- followed by the hex value of the color, with all lowercase letters.

If there is already a file with that hex value name, the color already exists in the library and does not need to be added.

Example: /src/main/color/palette/palette-colors/red/pc-bc010a.ts

Table of Contents

Step 3: Create the PaletteColor Object

The object will be a const object.

The object name will be PC_ followed by the color hex value with all uppercase letters.
Example: PC_BC010A

The object type will be PaletteColor.

The HEX property should be in all uppercase letters and prepended with a # symbol.
Example: HEX: '#BC010A'

The NAME property should be in all lowercase letters.
Example: NAME: "bird's eye"

If you do not have a name in mind for your color, you can find a name on the Color namer website.

The DISCRIMINATOR property should be Discriminators.PALETTE_COLOR.
Example: DISCRIMINATOR: Discriminators.PALETTE_COLOR

Table of Contents

Step 4: Export the Color from the index.ts File

In the index.ts file in the same category directory, add a statement to export the color.
Example: export * from './bc010a';

Table of Contents

Step 5: Add the Color to the PaletteColor Maps

Add the color to the PaletteColor map matching its category, using the setUndefinedKey method. The key will be the HEX property, and the value will be the PaletteColor object.

Add the color to the PaletteColor map for all palette colors, using the setUndefinedKey method. The key will be the HEX property, and the value will be the PaletteColor object.

Table of Contents

Step 6: Add the Color to the ColorNameManager

Pass the PaletteColor object into the ColorNameManager.addColor method.

Table of Contents

Step 7: Add the New Color to the PaletteColor Unit Tests

In the /src/test/shared/palette-colors.ts file, add the hex value of the color to the proper category collection.

Run the unit tests for all palette colors (/src/test/color/palette/palette-colors/all-palette-colors.test.ts).

Run the unit tests for all palette color categories (/src/test/color/palette/palette-colors/palette-colors.test.ts).

For any failing tests, be sure that the PaletteColor object is being properly exported and added to any required maps.

If the “all colors are unique” test fails, the color you have added may be too similar to a different color in the library. Compare your color with the color that caused the collision to determine if two colors are needed. You may choose to use the color that already exists in the library.

If the “consistent color” test fails, the colors created by the HEX, HSL, and RGB properties of your PaletteColor object are not creating the same color. Examine these properties closely and make the necessary updates in your object so the test passes.

If the “successful addition of color” test fails, the PaletteColor object may not have been added to the proper map, or the key of the object in the map does not match the HEX property of the object.

If the “valid color” test fails, the PaletteColor object may not be configured properly. The RGB, HSL, HEX, and NAME properties should all be truthy. The HEX property should be properly formatted, and the NAME property should be in all lowercase letters.

Table of Contents

Step 8: Add Documentation

Step 8, Part A: Add The Color Block div

Determine if the color has a greater contrast with black (#000000) or white (#FFFFFF) on the WebAIM Contrast Checker website.

Add the color block div to the documentation. The class of the div should be color-block. The background of the div should be the new color.

The link should go to the corresponding coolors page for the new color.

The h2 element should have a class of color-block.

The h2 element should also have a class of black-pass, if the color has a higher contrast with black, or white-pass if the color has a higher contrast with white.

The content of the h2 element should be the color name and hex value.

Color Block div Example

<div class="color-block" style="background: #BC010A;">
    <a href="https://coolors.co/bc010a" target="_blank" rel="noopener noreferrer">
        <h2 class="color-block white-pass">bird's eye (#BC010A)</h2>
    </a>
</div>

Table of Contents

Step 8, Part B: Add the @category Annotations

Add @category annotations for the Palette Colors (All) category and the Palette Colors category for the new color (e.g. @category Palette Colors (Red)).

Table of Contents

Step 9: Add the New Color to the Palette Colors Jekyll Collection

Add a file for the new color to the correct color category in the _palette_colors Jekyll collection. This file will include the name, hex value, and luminance of the color.

Palette Colors Collection Example; white-pass contrast

---
layout: "palette_color"
title: "dark tone ink (#121212)"
name: "dark tone ink"
hex: "121212"
luminance: 0.006048833
contrast: "white-pass"
color_category: "black"
---

```typescript
import { PC_ } from 'palette-colors';

let name: string = PC_.NAME;
```

Palette Colors Collection Example; black-pass contrast

---
layout: "palette_color"
title: "enoki (#FAFBEF)"
name: "enoki"
hex: "FAFBEF"
luminance: 0.9555034902
contrast: "black-pass"
color_category: "white"
---

```typescript
import { PC_ } from 'palette-colors';

let name: string = PC_.NAME;
```

Table of Contents

Step 10: Add Color to the Release Notes

Add the color as a new constant to the release notes draft markdown file.

Release Notes Entry Example

## `PC_BC010A` (bird's eye) [red]

<div class="color-block" style="background: #BC010A;">
  <a href="https://coolors.co/bc010a" target="_blank" rel="noopener noreferrer">
    <h2 class="color-block white-pass">bird's eye (#BC010A)</h2>
  </a>
</div>
<br/>

```typescript
/**
 * <div class="color-block" style="background: #BC010A;">
 *     <a href="https://coolors.co/bc010a" target="_blank" rel="noopener noreferrer">
 *         <h2 class="color-block white-pass">bird's eye (#BC010A)</h2>
 *     </a>
 * </div>
 *
 * @category Palette Colors (All)
 * @category Palette Colors (Red)
 */
declare const PC_BC010A: PaletteColor;
```

[Table of Contents](#table-of-contents)

Table of Contents

Full PaletteColor File Example

import {ColorNameManager} from 'color';
import {Discriminators} from 'discriminator';
import {PaletteColor} from 'palette';

import {ALL_PALETTE_COLORS, RED_PALETTE_COLORS} from '../palette-color-maps';

/**
 * <div class="color-block" style="background: #BC010A;">
 *     <a href="https://coolors.co/bc010a" target="_blank" rel="noopener noreferrer">
 *         <h2 class="color-block white-pass">bird's eye (#BC010A)</h2>
 *     </a>
 * </div>
 *
 * @category Palette Colors (All)
 * @category Palette Colors (Red)
 */
export const PC_BC010A: PaletteColor = {
    HEX: '#BC010A',
    RGB: {R: 188, G: 1, B: 10},
    HSL: {H: 357, S: 99, L: 37},
    NAME: "bird's eye",
    DISCRIMINATOR: Discriminators.PALETTE_COLOR
}

RED_PALETTE_COLORS.setUndefinedKey(PC_BC010A.HEX, PC_BC010A);
ALL_PALETTE_COLORS.setUndefinedKey(PC_BC010A.HEX, PC_BC010A);
ColorNameManager.addColor(PC_BC010A);

Table of Contents