Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Colors (v7)

AnatolyAnatoly Mod
edited November 10 in Code Sharing Posts: 870

Releases:
- (1) https://pastebin.com/raw/EnZR7cQe
- (2) https://pastebin.com/raw/KsWa9eLD
- (3) https://pastebin.com/raw/dWJcEg3f
- (3b) https://pastebin.com/raw/9SC7i4W1
- (4) https://pastebin.com/raw/n5G55URd
- (4b) https://pastebin.com/raw/QhRcu6x6
- (5) https://pastebin.com/raw/aJPCr10Y
- (5b) https://pastebin.com/raw/cjRGWRVG
- (6) https://pastebin.com/3TxexkDG
- (7) https://pastebin.com/wUFF5YSG
- (7b) https://pastebin.com/Mz5eiCqu

Colors is a small library, that you can use for easier use of Colors. It adds the new Color() function that is able to respond to #RRGGBB hex codes, and colors. Version 4 came out with more than 400 unique colors.

--[[

Name:        Colors
Author:      Anatoly
License:     ISC
Description: Color()s is a function that helps you accessing all the colors very easily.
Thread:      https://codea.io/talk/discussion/10043/colors
Release:     5

INCLUDE WHEN COPYING
]]

How to generate a color using the default way?

Start with the direction of the color you want to use.
- You can use Fill(‘red’) instead of fill(Color(‘red’)), same as Stroke() and Tint()

Colors

Origins

  • red
  • green
  • blue
  • cyan
  • magenta
  • yellow
  • orange
  • grassgreen
  • forestgreen
  • turquoise
  • skyblue
  • rosa
  • purple
  • violet
  • pink
  • seablue
  • bronze
  • silver
  • gold
  • diamondblue
  • brown
  • darkbrown
  • white
  • warm-white
  • cold-white
  • black
  • neon-green
  • strawberry-red
  • darkviolet

Prefices

  • dark- makes the color darker
  • light- makes the color lighter
  • middle- makes the color more medium (and less saturated)
  • reddish- makes the color more a shade of red
  • blueish- makes the color more a shade of blue
  • greenish- makes the color more a shade of green
  • reduced- makes the color less saturated.
  • saturated- makes the color more saturated.

  • slightly- with reddish- (slightly-reddish-), greenish and blueish, light and dark

Hue

Instead of having to specify a color by the ways mentioned above, you can very fast elect a color by its’ hue. Color(‘hue-250’) and `Hue(200)’ for example.

Grayscale

  • white-10
  • white-20
  • ...
  • white-90
  • gray/grey (=white-50)

SVG and X11

SVG and X11 colors are supported. Example: Color(‘svg-AliceBlue’) and Color(‘x11-AntiqueWhite1’). The string is case insensitive.

How to use?

Once you selected the color you wish to use, insert it in the Color() function as the first argument, and there you go. For using hex codes, in Color() start the string with the hashtag (Color('#RRGGBB')) or use the Hex('RRGGBB') function instead.

How to generate a color using a table?

First define the origin, or use black as default.

Color {
    origin = 'red'
}

You could also use color() and any other value that is supported by Color()

Optional: Define a shade.

Color {
    origin = 'red',
    shade = 'greenish'
}

Shades

light, dark, middle, reddish, greenish, blueish, slightly-reddish, slightly-greenish, slightly-blueish

Optional: Desaturate

Color {
    origin = 'red',
    shade = 'greenish',
    desaturate = 'avg'
}

Options

avg, hsv, hsl, lum, red, green, blue

Optional: Invert

Color {
    origin = 'red',
    shade = 'greenish',
    desaturate = 'avg',
    invert = true
}

Optional: Filter

Color {
    origin = 'red',
    shade = 'greenish',
    desaturate = 'avg',
    invert = true,
    filter = {r = false}
}

What is a filter?

Using filters you can redefine what colors you want to use. Basically, filter is a table {r = .., g = .., b = ..}. Whatever colors you set to false will be automatically 0.

How to generate a color using svg?

If you know all svg colors well, you can use them in the form of Color('svg-SVG_COLOR_HERE')

Examples

background(Color(‘black’))

Fill('light-green')
rect(200, 100, 400, 200)

Fill{
    origin = 'svg-lightsalmon',
    shade = 'greenish',
    filter = {r = false}
}
rect(200, 300, 400, 200)

Fill(‘svg-aliceblue’)
rect(200, 500, 400, 200)

Fill('#ff00ff')
rect(200, 700, 400, 200)

Notes

Note! A preview is included in the App, just copy the code and run it in a new project. This project can be selected as a dependency in another project and you can use the Color() function there. How it looks like is attached.

Note! Also the colors variable is reserved.

Note! colors is a direct table (colors[color_name]will directly output the color). _colors is collection of all colors (sorted alphabetically). Every item is an object with the attributes n (name) and c color.

Note! The colors don't always mean what they show up, it's the way the project calculates them.

My opinion on it: I have enjoyed creating graphics in the past, but this is not a color class made using graphics skills, hardcoding every color. It’s an algorithm, that creates many different colors. You can also fastly change from light- to the dark-theme! Personally I like the colors.

I am open for suggestions and improvements.

https://codea.io/talk/uploads/editor/wj/mysi0djnb2bw.png

Comments

  • Posts: 443

    Not sure if this will be of use to you, but a while back I wrote an extension to the color userdata which added a slew of functions including various ways to specify a colour. I didn't include hex, but did include hsl, hsv, svg, x11. You can find the code at https://github.com/loopspace/Codea-Library-Base/blob/master/ColourExt.lua

  • AnatolyAnatoly Mod
    edited October 25 Posts: 870

    Released a second build of the class, which includes:

    • A total of 128 colors (65 more)
    • New prefixes! reddish-, greenish-, blueish-
    • Added Tertiary colors.
    • Color() function is now case-insensitive.
    • Improved screen performance of the colors screen (AVG FPS back at 60 on default device)

    Note! colors is a direct table (colors[color_name]will directly output the color). _colors is collection of all colors (sorted alphabetically). Every item is an object with the attributes n (name) and c color.

    Note! The colors don't always mean what they show up, it's the way the project calculates them.

    Some little easter eggs await you in both versions (WARNING, SECRET REVEALED: If try scrolling up, the credits appear.)

    @LoopSpace, thank you very much, I'll look into it as soon as possible!

  • AnatolyAnatoly Mod
    edited October 27 Posts: 870

    Are there any colors you'll wish to have for fast access, @LoopSpace, or do you want any new prefix, based on what it should do?

    E: In the third and probably last versions I'll have bronze, silver, gold, diamondblue, and seablue. I couldn't fix the damn search engine, but I guess I'll leave it for those who enjoy it.

    .. and I've calculated - there are more than 200 unique colors in (3).

  • AnatolyAnatoly Mod
    edited October 29 Posts: 870

    https://pastebin.com/raw/dWJcEg3f (Full App)

    https://pastebin.com/raw/9SC7i4W1 (Class Version)

    3rd version is out!

    Changes:
    * warm-white
    * cold-white
    * white-10 to white-90 now support prerixes. e.g. reddish-white-10 to reddish-white-90 are shades of red
    * first version of the search box out! open in the output panel to searc for colors. Not working yet, but some values can be already searched through!
    * Fast access functions Fill(), Stroke(), Tint()
    * New color instances: "seablue", "bronze", "silver", "gold", "diamondblue", "gray" and "grey" (= white-50)
    

    Now over 200 unique beautiful colors!

    My opinion on it: I have enjoyed creating graphics in the past, but this is not a color class made using graphics skills, hardcoding every color. It’s an algorithm, that creates many different colors. You can also fastly change from light- to the dark-theme! Personally I like the colors.

  • Posts: 443

    @Anatoly Depends on how far you're intending to go with this.

    I wanted hsl/hsv colours so that I could select a set of strong colours that spanned the colour range and hsl/hsv are better suited to this than rgb. I then wanted to be able to modify existing colours with shading and tinting. So although I did load in all the SVG and X11 colours, that was more of an afterthought and was easy to do because I could find a file with all the colour definitions in it (from the LaTeX distribution as it happened).

    So if you want to add any more functionality and there's anything in my code that you can use, please feel free to do so. Your goal at the moment appears to be more defining families of colours, which isn't where I went, so it may be that there's little overlap.

  • AnatolyAnatoly Mod
    Posts: 870

    Version 4 is out!

    API

    • Better Code!
    • RandomColor(), Color('random') and Color() all do the same - output a random color. Color('random-grey') outputs a random greyscale number.
    • New way to use Color(). Earlier you could only use string as input. Now you can use numbers up to 16777215 (tonumber('ffffff', 16)). Mentioned below.
    • Color('svg-...') - You can now use sag colors. Thanks to @LoopSpace here.
    • Moved code into a do ... end, now colors1, -2 and -3 are no longer reserved variables.
    • NOTE CHANGED VALUE OF warm-white. It is not the same as in previous versions, but the difference is hardly noticeable.
    • New origins: brown, darkbrown

    Project

    • Tried fixing the search engine. (Works better, but still buggy).

    Color() in the new face!

    Color() is the main function you can access this code with. It now supports as an input (anything: define the color here, number from 0 to 255: alpha value). Now the color can be defined with multiple ways. Examples:

    • Color('svg-aliceblue') - SVG
    • Color('dark-forestgreen') - DEFAULT
    • Color{origin="light-red", shade="greenish"} - TABLE
    • Color('#ff00ff')- HEX CODE
    • Color(16739095) - NUMERIC (is the same as tonumber('ff5f5f', 16))
  • AnatolyAnatoly Mod
    edited November 6 Posts: 870

    Version 5

    2 Warnings!
    - violet and purple colors slightly changed.
    - avg-, no-%%, invert- prefixes removed, where %% are all 3 primary colors. Note. This is still easy to reproduce (read the header in v5 (not b) release)

    New!
    - transparent color
    - Alpha now also supports strings. Color(‘red’, ‘slightly-opaque’), Color(‘white’, ‘slightly-visible’)
    - new function Colors(c1, c2, Operator) Current Operators: max, min, dif, avg, sqrt, screen, multiply
    - Hex() now supports: RRGGBB, RGB, DD, D (RGB - red green blue, D - grey)
    - X11 Support!
    - Prefixes: saturated-, slightly-dark-, slightly-light-
    - 360 new auto generated beautiful colors! hue-%% where %% is any numeric value. You can also use Hue(%%)
    - Colors: "neon-green", "strawberry-red", "darkviolet"

    Main!
    * Improved Scroll Engine
    * Rewrote the Credits code
    * They now show up for the first five seconds automatically.

  • AnatolyAnatoly Mod
    edited November 9 Posts: 870

    V6 https://pastebin.com/3TxexkDG

    Minor update so I can continue with removing all the code.

    Fix! redish has been changed to the correct reddish where it hasn't been yet.

    Warning! In Colors{}, "transparency" renamed to "alpha"

  • AnatolyAnatoly Mod
    Posts: 870

    7 is a huge transformation.

    • _colors is no longer reserved!
    • Take a look at the project (not b version), you’ll see great new experience! Have up to 30 different placeholders, where you can put different colors! No more annoying scrolling bar! All colors are on one view!
    • orangered slightly changed
    • All origins support the -10 to -90 suffix!
    • Gray colors do not generate some prefixes anymore, which you shouldn’t use.
  • Posts: 1,351

    @Anatoly - Wow, your colour projects just gets better and better, very polished presentation throughout. This may be a dumb question, but thought you might know, is there any algorithm for deriving web friendly colour palettes? Might come in handy for anyone who works on web design.

  • AnatolyAnatoly Mod
    Posts: 870

    I’m not quite sure what you are asking for, maybe you can clarify?

    In general, html safe colors the same as the SVG safe, but since HEX is supported, all colors are safe. If i’m not wrong, html 5, or even earlier included alpha values (#RRGGBBAA). But I can guarantee you that my work moves from the colors project to a bigger one, which will allow you to do much more. Stay patient!

  • Posts: 1,351

    Thanks for the reply. My knowledge on the colour spectrum is limited, used to make dyes and was familiar with 3D colour space - but that’s way different to today’s light colour map. On the web friendly colours I thought there was a subset of colours optimised for web use - but I am probably ten years out of date on that. Patience is not my strong point so I’ll keep checking your thread.

    One idea cropped up, I tend to set up dependency projects to hold commonly used data. Maybe you could set a colour library in one - that might minimise your project sizes. Noticed you changed the colour definition format - which is the most useful?

  • AnatolyAnatoly Mod
    Posts: 870
    You can keep the color class in a page in your project, but yeah, I’m working on a larger library of the size similar to soda. But it will be focused on other things.
Sign In or Register to comment.