using schemes

[simogeo]

Hi @ProjectCleverWeb

thanks for that library. It appears to be great. Is it possible to get an example of using scheme / yiq_scheme / color range ? Wiki pages are empty.

Basically, I'd like to set a color ramp as I can easily do it with chroma.js (see below) and get back values in an array, using predefined values.

var viz_color = chroma.scale("RdYlGn").colors('.count($a).');

Thanks for your reply

[ProjectCleverWeb]

Yes, I will give you some examples below. However, you should understand that right now this library only uses the Y from the YIQ spectrum, and can only convert to/from that part of the spectrum. (Which is all you need to account for how humans actually see)

After v1.0.0, either v1.1.0 or v1.2.0 will have an "extended" conversion class which will fully support YIQ, LUV, LAB, and more spectrum conversions.

---

Normal & YIQ Schemes

The methods for generating normal and YIQ schemes work identically. (The only difference is the underlying algorithms, which are handled automatically). YIQ schemes cannot affect monochromatic or shades schemes because those schemes do not change the hue of the base color.

Here is a quick sample of how to use the scheme() and yiq_scheme() methods:

<?php
use \projectcleverweb\color\main as color;

$color = new color('FF0000');

// Normal Schemes
$hex_scheme  = $color->scheme('analogous');
$rgb_scheme  = $color->scheme('complementary', 'rgb');
$hsl_scheme  = $color->scheme('compound', 'hsl');
$hsb_scheme  = $color->scheme('monochromatic', 'hsb');
$cmyk_scheme = $color->scheme('shades', 'cmyk');

// YIQ Schemes
$hex_yiq_scheme  = $color->yiq_scheme('tetrad');
$rgb_yiq_scheme  = $color->yiq_scheme('weighted_tetrad', 'rgb');
$hsl_yiq_scheme  = $color->yiq_scheme('triad', 'hsl');
$hsb_yiq_scheme  = $color->yiq_scheme('weighted_triad', 'hsb');
$cmyk_yiq_scheme = $color->yiq_scheme('rectangular', 'cmyk');

And here are the code docs for the functions:

/**
 * Generate a color scheme based on the current color.
 * 
 * Available scheme algorithms:
 *   - analogous
 *   - complementary
 *   - compound
 *   - monochromatic
 *   - shades
 *   - tetrad
 *   - weighted_tetrad
 *   - triad
 *   - weighted_triad
 *   - rectangular
 * 
 * @param  string $scheme_name The scheme algorithm to use
 * @param  string $return_type The type of values the scheme will have (hex, rgb, hsl, hsb, cmyk)
 * @return array               The resulting scheme, where offset 0 is the original color
 */

[simogeo]

Thanks.

Is it possible to scale it ... I mean to specify the desired number of returned colors ? all these calls return 5 values. What can I do if I want 10 ? Something like :

$hex_scheme  = $color->scheme('analogous', 10);

Havn't seen any option in source code. Thanks again.

[ProjectCleverWeb]

Not really, at least not directly from the scheme methods. However, you could create a scheme, and then loop through every color in that scheme, and create either shades or monochromatic schemes for each color within that scheme. Like so:

<?php
use \projectcleverweb\color\main as color;

$color = new color('FF0000');

$base_scheme = $color->scheme('analogous', 'rgb');

$large_scheme = array();
foreach ($base_scheme as $key => $scheme_color) {
    $sub_color = new color($scheme_color);
    $large_scheme = array_merge($large_scheme, $sub_color->scheme('shades', 'rgb'));
}

[simogeo]

I will try that. No hope to get something similar to this soon ?

[ProjectCleverWeb]

I can't give you code samples at the moment, but check out the gradient() and blend() methods in the main class. I am pretty sure that is what you're looking for.

[ProjectCleverWeb]

Also to fully answer your question, yes the library will be able to do everything on that page except predefined gradients. Predefined gradients are outside of the scope of this project (at least for now).

Currently, you can create gradients/scales (with a custom number of steps) and blend 2 colors (in custom amounts). See examples below:

<?php
use \projectcleverweb\color\main as color;

$color1 = new color('FF0000'); // Red
$color2 = new color('00FF00'); // Green
$color3 = new color('0000FF'); // Blue

/*** GRADIENTS/SCALES ***/

// Gradient array with a custom number of colors (offset 0 is $color1 and offset 9 is $color2)
$gradient_array_1 = $color1->gradient($color2, 10);

// Gradient array with exactly enough non-duplicate colors
$gradient_array_2 = $color1->gradient($color2);

// You can't currently create a gradient with more than 2 colors, but you can merge 2+ gradient arrays
$gradient_array_3 = $color2->gradient($color3, 10);
array_shift($gradient_array_3);

$gradient_array_4 = array_merge($gradient_array_1, $gradient_array_3);

/*** BLENDING COLORS ***/

// Blend 2 colors evenly
$color4 = $color1->blend($color3);
echo $color4->css(); // #7F007F (Purple)

// Blend 75% of $color1 with 25% of $color2
$color5 = $color1->blend($color2, 25);
echo $color5->css(); // #BF4000 (Dark Orange)

However, you currently cannot (yet) create gradients with more than 2 colors, create gradients with values other than RGB, or interpret non-hexadecimal strings as colors. These are all planned features, and will both be in v1.0.0. You will be able to use these features like so:

<?php
use \projectcleverweb\color\main as color;

$color1 = new color('FF0000'); // Red
$color2 = new color('00FF00'); // Green
$color3 = new color('0000FF'); // Blue

/*** GRADIENTS/SCALES ***/

// Gradient array with 3+ colors and a total of 20 RGB values
$gradient_array_1 = $color1->gradient(array($color2, $color3), 'rgb', 20);

// Gradient array where the values are in HSL (RGB is the default)
$gradient_array_2 = $color1->gradient($color3, 'hsl');

/*** IMPORTING NON-HEXADECIMAL STRINGS ***/

// X11 Colors
$color = new color('Palegoldenrod'); // Capitalization doesn't matter

// RGB/RGBA
$color = new color('rgba(255,0,0,0.5)'); // Alpha is ok

// HSL/HSLA
$color = new color('hsl(325, 100,   50)  '); // Extra spacing will be ignored

[simogeo]

Thanks for providing all these examples. They are precious to me ! I've made some tests, it works well.

When v1.0.0 will be released ? just to know if I need to work on the first or second syntax

[ProjectCleverWeb]

For now I would say use the first syntax for gradients. I do expect v1.0.0 to be released in about the next 3 weeks; however, yesterday I started working on the multi-gradient functions and ran into some unexpected issues. These issues may end up changing the final syntax if I cannot come up with a work-around.

While the second version may change in syntax, the first version will still work after v1.0.0 is released.

Additionally, X11 colors and formatted color strings now work as shown in the second example.

[simogeo]

Got it. By the way, the following code returns 19 colors and not 20 (because one is common to both gradients :

$color1 = new color('FF0000'); // Red
$color2 = new color('00FF00'); // Green
$color3 = new color('0000FF'); // Blue

/*** GRADIENTS/SCALES ***/

// Gradient array with a custom number of colors (offset 0 is $color1 and offset 9 is $color2)
$gradient_array_1 = $color1->gradient($color2, 10);

// Gradient array with exactly enough non-duplicate colors
$gradient_array_2 = $color1->gradient($color2);

// You can't currently create a gradient with more than 2 colors, but you can merge 2+ gradient arrays
$gradient_array_3 = $color2->gradient($color3, 10);
array_shift($gradient_array_3);

$gradient_array_4 = array_merge($gradient_array_1, $gradient_array_3);