Permalink
Browse files

Init some basic transforms

  • Loading branch information...
dy committed Jun 10, 2015
1 parent 8997e8e commit ab740968e176c5af4ff499fdfa2e10c9d9ec29bb
Showing with 750 additions and 836 deletions.
  1. +0 −42 Gruntfile.js
  2. +0 −21 LICENSE
  3. +36 −100 README.md
  4. +0 −3 browser.js
  5. +420 −463 color.js
  6. +66 −0 index.js
  7. +13 −9 package.json
  8. +215 −0 test.js
  9. +0 −198 test/basic.js
View
@@ -1,42 +0,0 @@
-/*
- * To run this file:
- * `npm install --dev`
- * `npm install -g grunt`
- *
- * `grunt --help`
- */
-
-var fs = require("fs"),
- browserify = require("browserify"),
- pkg = require("./package.json");
-
-module.exports = function(grunt) {
- grunt.initConfig({
- pkg: grunt.file.readJSON('package.json'),
- uglify: {
- options: {
- banner: "/*\n" + grunt.file.read('LICENSE') + "\n*/"
- },
- dist: {
- files: {
- '<%=pkg.name%>-<%=pkg.version%>.min.js': ['<%=pkg.name%>-<%=pkg.version%>.js']
- }
- }
- }
- });
-
- grunt.registerTask('build', 'build a browser file', function() {
- var done = this.async();
-
- var outfile = './color-' + pkg.version + '.js';
-
- var bundle = browserify('./browser.js').bundle(function(err, src) {
- console.log("> " + outfile);
- // write sync instead of piping to get around event bug
- fs.writeFileSync(outfile, src);
- done();
- });
- });
-
- grunt.loadNpmTasks('grunt-contrib-uglify');
-};
View
21 LICENSE
@@ -1,21 +0,0 @@
-Copyright (c) 2012 Heather Arthur
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
View
136 README.md
@@ -1,127 +1,63 @@
-# color
-`color` is a JavaScript library for color conversion and manipulation with support for CSS color strings.
+# color2 [![Build Status](https://travis-ci.org/dfcreative/color2.svg?branch=master)](https://travis-ci.org/dfcreative/color2) [![Code Climate](https://codeclimate.com/github/dfcreative/color2/badges/gpa.svg)](https://codeclimate.com/github/dfcreative/color2)
-```javascript
-var color = Color("#7743CE");
-
-color.alpha(0.5).lighten(0.5);
+A stateful implementation of [color](http://npmjs.org/package/color).
-console.log(color.hslString()); // "hsla(262, 59%, 81%, 0.5)"
-```
+Basically:
-## Install
+* new color spaces
+* new manipulation & measurement functions
+* better parsing of input values
+* increased performance
+* normalized API
-### browser
-Download the latest [color.js](https://github.com/harthur/color/tree/gh-pages). The `Color` object is exported.
-### node
-For [node](http://nodejs.org) with [npm](http://npmjs.org):
+## Usage
```bash
-npm install color
-```
-
-And use with `var Color = require("color")`
-
-## API
-
-### Setters
-
-```javascript
-var color = Color("rgb(255, 255, 255)")
-var color = Color({r: 255, g: 255, b: 255})
-var color = Color().rgb(255, 255, 255)
-var color = Color().rgb([255, 255, 255])
-```
-Pass any valid CSS color string into `Color()` or a hash of values. Also load in color values with `rgb()`, `hsl()`, `hsv()`, `hwb()`, and `cmyk()`.
-
-```javascript
-color.red(120)
-```
-Set the values for individual channels with `alpha`, `red`, `green`, `blue`, `hue`, `saturation` (hsl), `saturationv` (hsv), `lightness`, `whiteness`, `blackness`, `cyan`, `magenta`, `yellow`, `black`
-
-### Getters
-
-
-```javascript
-color.rgb() // {r: 255, g: 255, b: 255}
-```
-Get a hash of the rgb values with `rgb()`, similarly for `hsl()`, `hsv()`, and `cmyk()`
-
-```javascript
-color.rgbArray() // [255, 255, 255]
-```
-Get an array of the values with `rgbArray()`, `hslArray()`, `hsvArray()`, and `cmykArray()`.
-
-```javascript
-color.red() // 255
+npm install color2
```
-Get the value for an individual channel.
-
-### CSS Strings
```javascript
-color.hslString() // "hsl(320, 50%, 100%)"
-```
+var Color = require('color2');
-Different CSS String formats for the color are on `hexString`, `rgbString`, `percentString`, `hslString`, `hwbString`, and `keyword` (undefined if it's not a keyword color). `"rgba"` and `"hsla"` are used if the current alpha value of the color isn't `1`.
+var color = new Color("#7743CE");
-### Luminosity
-
-```javascript
-color.luminosity(); // 0.412
-```
-The [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.
-
-```javascript
-color.contrast(Color("blue")) // 12
-```
-The [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) to another color, from 1 (same color) to 21 (contrast b/w white and black).
+color.alpha(0.5).lighten(0.5);
-```javascript
-color.light(); // true
-color.dark(); // false
+console.log(color.hslString()); // "hsla(262, 59%, 81%, 0.5)"
```
-Get whether the color is "light" or "dark", useful for deciding text color.
-
-### Manipulation
-
-```javascript
-color.negate() // rgb(0, 100, 255) -> rgb(255, 155, 0)
-color.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
-color.darken(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
+## API
-color.saturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
-color.desaturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
-color.greyscale() // #5CBF54 -> #969696
+### Setters
-color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
-color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
+### Getters
-color.clearer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
-color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
+### Measures
-color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
-color.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
+### Manipulations
-color.mix(Color("yellow")) // cyan -> rgb(128, 255, 128)
-color.mix(Color("yellow"), 0.3) // cyan -> rgb(77, 255, 179)
-// chaining
-color.green(100).greyscale().lighten(0.6)
-```
-### Clone
-You can can create a copy of an existing color object using `clone()`:
+## Why not [color](https://github.com/harthur/color)?
+//TODO: remove this
-```javascript
-color.clone() // -> New color object
-```
+_Color_ is great for basic color manipulations, but in practice it’s API might be confusing.
-And more to come...
+* `new Color([0,10,20])` - a natural way to create color from rgb array is not supported.
+* `.setSpace()` with no arguments is factually a `.getSpace()`.
+* `.setChannel()` with no arguments is factually a `.getChannel()`, but there’s no `.getChannel()` method.
+* `.rgb()` can both get and set, but `.rgbArray()` can only get.
+* `.rgbString()` - the same as `.rgbArray()`.
+* `.mix()` cannot mix in HSL or any other space but rgb, so mixed colors may look unnatural.
+* No `.toString`, `.fromString` methods.
+* No `.toJSON`, `.fromJSON` methods.
+* No `.toArray`, `.fromArray` methods.
+* No `Color.parse` and `Color.stringify` methods.
+* Quite slow `.clone()`.
+* Limited set of spaces.
+* Slow due to expensive operations. _Color_ recalculates the whole cache of spaces each time value is updated. Meantime, the common practice for color space conversions is to use XYZ as a basis, so for the most part it is enough to store only rgb/xyz caches.
-## Propers
-The API was inspired by [color-js](https://github.com/brehaut/color-js). Manipulation functions by CSS tools like Sass, LESS, and Stylus.
+[![NPM](https://nodei.co/npm/color2.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/color2/)
View
@@ -1,3 +0,0 @@
-// this file is the entrypoint for building a browser file with browserify
-
-Color = require("./color");
Oops, something went wrong.

0 comments on commit ab74096

Please sign in to comment.