Giter Site home page Giter Site logo

using schemes about php-color HOT 9 CLOSED

projectcleverweb avatar projectcleverweb commented on May 27, 2024
using schemes

from php-color.

Comments (9)

ProjectCleverWeb avatar ProjectCleverWeb commented on May 27, 2024

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
 */

from php-color.

simogeo avatar simogeo commented on May 27, 2024

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.

from php-color.

ProjectCleverWeb avatar ProjectCleverWeb commented on May 27, 2024

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'));
}

from php-color.

simogeo avatar simogeo commented on May 27, 2024

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

from php-color.

ProjectCleverWeb avatar ProjectCleverWeb commented on May 27, 2024

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.

from php-color.

ProjectCleverWeb avatar ProjectCleverWeb commented on May 27, 2024

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

from php-color.

simogeo avatar simogeo commented on May 27, 2024

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

from php-color.

ProjectCleverWeb avatar ProjectCleverWeb commented on May 27, 2024

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.

from php-color.

simogeo avatar simogeo commented on May 27, 2024

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);

from php-color.

Related Issues (7)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.