Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

README.md

impact-color-picker

color-picker.js Plugin for ImpactJS that quickly generates gradient fades between multiple input colors.

Using this plugin (especially the genMultiHexarray) has greatly improved my content pipeline and overall game performance. The genMultiHexarray is fantastic for generating more complex color gradients like the Matlab Jet gradient which is very useful.

DEMOS

Simple canvas demo

PiSpace

How to Use

To use just include the plugin as 'plugins.color-picker' and instantiate a new ColorPicker object:

var picker = new ColorPicker;

This will provide methods for generating custom colormaps and gradient fills. There are generation functions and utility functions included:

Generators

  • genMultiHexArray
    • INPUTS: Array with any number of hex colors, number of steps
    • OUTPUT: Array with 'steps' entries between each sequential pair of colors in the input array. Each entry is a unique color.
var lots_o_colors = picker.genMultiHexArray( [0xFF0000, 0x00FF00, 0x0000FF], 1000 );
  • genHexArray
    • INPUTS: 2 hex colors as color1 and color2, number of steps
    • OUTPUT: Array with 'steps' entries between the two colors. Each entry is a unique color.
var two_color_fade = picker.genHexArray( 0xFF8C00, 0x8400FF, 40 );
  • pickHex
    • INPUTS: 2 hex colors as color1 and color2, ratio equivalent to a position between the two colors
    • OUTPUT: A single color representing that point in the gradient
var single_color = picker.pickHex( 0xFF8C00, 0x8400FF, 0.63 );

###Utilities

  • hexToRGBstr
    • INPUT: Single hex color
    • OUTPUT: "rgb( r, g, b )" string for the INPUT color
var rgb_color = picker.hexToRGBstr( 0xFF8C00 );
  • hexToRGBA
    • INPUT: Single hex color
    • OUTPUT: Array with [ r, g, b, a ], where a = 255
var rgba_color_array = picker.hexToRGBA( 0xFF8C00 );
  • frontPad While str.length < 6, prepend 0's
    • INPUT: Single hex srting
    • OUTPUT: front padded hex value up to 6 characters

Cheers!

About

color-picker.js Plugin for ImpactJS that quickly generates gradient fades between multiple input colors.

Resources

Releases

No releases published
You can’t perform that action at this time.