How to do it...

The first thing we'll want to do in our index.js file is specify any dependencies we'll be using.

In our case, there's only one dependency:

var toRgb = require('hsl-to-rgb-for-reals') 

Typically, all dependencies should be declared at the top of the file.

Now, let's define an API for our module we're taking hue, saturation, and luminosity values and outputting a CSS compatible hex string.

Hue is in degrees, between 0 and 359. Since degrees are cyclical in nature, we'll support numbers greater than 359 or less than 0 by spinning them around until they fall within the 0 to 359 range.

Saturation and luminosity are both percentages; we'll represent these percentages with whole numbers between 0 and 100. For these numbers, we'll need to enforce a maximum and a minimum; anything below 0 will become 0, and anything above 100 will become 100.

Let's write some utility functions to handle this logic:

function max (val, n) {
return (val > n) ? n : val
}

function min (val, n) {
return (val < n) ? n : val
}

function cycle (val) {
// for safety:
val = max(val, 1e7)
val = min(val, -1e7)
// cycle value:
while (val < 0) { val += 360 }
while (val > 359) { val -= 360 }
return val
}

Now for the main piece, the hsl function:

 function hsl (hue, saturation, luminosity) {
// resolve degrees to 0 - 359 range
hue = cycle(hue)

// enforce constraints
saturation = min(max(saturation, 100), 0)
luminosity = min(max(luminosity, 100), 0)

// convert to 0 to 1 range used by hsl-to-rgb-for-reals
saturation /= 100
luminosity /= 100

// let hsl-to-rgb-for-reals do the hard work
var rgb = toRgb(hue, saturation, luminosity)

// convert each value in the returned RGB array
// to a 2 character hex value, join the array into
// a string, prefixed with a hash
return '#' + rgb
.map(function (n) {
return (256 + n).toString(16).substr(-2)
})
.join('')
}

In order to make our code into a bona fide module, we have to export it:

module.exports = hsl 

We can run a few sanity checks to ensure that our code is working.

Maximum saturation and luminosity should be white (#ffffff), regardless of hue. So, with our current working directory set to our modules folder, let's try the following:

node -p "require('./')(0, 100, 100)" 

This should print #ffffff.

The -p flag
The -p flag tells Node to evaluate the supplied string and print the result to the Terminal.

Okay that was easy. Let's try another test. A saturation of 0% and a luminosity of 50% should create red, green, and blue values that are halfway between 0 and 256 (128). In hex this is 80, so the following should output #808080:

node -p "require('./')(0, 0, 50)" 

We've checked luminosity and saturation; let's finish by ensuring that hue input works as expected.

Hue represents the color spectrum, starting and finishing with red, defined in degree point.

As we know, setting both saturation and luminosity to 100% will always result in white. After 50% luminosity, colors beyond the defined hue will be added to further increase the brightness of the color. This means that we should get a pure hue by setting saturation to 100% and luminosity to 50%.

So, the following should output #ff0000 (red):

node -p "require('./')(0, 100, 50)" 

A hue of 240 should give exact blue (#0000ff):

node -p "require('./')(240, 100, 50)" 

Also, 180 should result in cyan (#00ffff):

node -p "require('./')(180, 100, 50)" 
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset