Colour helper functions about habitat HOT 5 CLOSED

I know I replied to you elsewhere, but just to keep a paper-trail, I'll respond here too:

I think having properties for HSL would be good! I'll make a new issue for that.

CMYK sounds interesting! I'm not sure I would ever need to use it though, as I don't usually print stuff off! But I have been thinking about making some TodePond stickers, so maybe this would be useful! I'll make a new issue for it too.

I would like to avoid using new and introducing new objects into this library - basically to stop myself from adding more complicated features. We already have the Colour.make function though that can make a simple colour object. The colour objects that it makes are intended to be immutable really. So I think it would be best to avoid using setters/getters to edit them and stuff. Instead, I think it would be good to make new colours from other colours. Not sure what the best syntax would be.

Is this really messy?

const lightBlue = Colour.add(Colour.Blue, {lightness: 0.5})

from habitat.

Ok, I'm currently revisiting this in preparation for the next video.

Basically, the purpose I have in mind for the Colour stuff, is for it to be an easily accessible colour theme (ie: the TodePond colours). The library could be used to make another theme though. It's not really intended for on-the-fly editing and manipulating of colours. The Colour.make function does a lot of extra stuff, that could technically be calculated in a more lazy way. However, I intend for all Colour.make functions to be called when the page loads, so that all the 'legwork' gets done ahead of time. This means that manipulating them on the fly is not so useful.

What I WOULD like to do though, is to be able to make a bunch of variants at load-time. eg: Maybe you could make DarkGreen at page load and then use it later on.

const DarkGreen = Colour.add(Colour.Green, {lightness: -0.2})

from habitat.

Would it work if there was a Colour object, that has lots of functions and things that change its colour, perhaps something like:

var my_col = new Colour(Colour.Grey) // give it a colour that's already been made
my_col.red = 255 // change the red channel, keeping the green and blue the same
// or you could even do something like
my_col.hue = 0 // to keep the saturation and brightness

That would also help with #15, as you can get the .rgb values, while also being able to understand the .hsl values

Just thinking of the different getters and setters, these could be viable options:

• .red, .green and .blue [perhaps also .r, .g, and .b]
• .hue, .saturation and .lightness [and also, .h, .s and .l]
• .rgb and .hsl could also be used and set it to an array, like

  my_col.rgb = [255, 128, 204]

• just thinking; .cyan, .magenta, .yellow and .key are also possible, but I'm not sure if it'd be helpful lmao, but printers use it, and it might be interesting to play around with [.c, .m, .y and .k don't conflict with anything already funnily enough]
• and if you wanted to include .alpha [.a], that's also a possibility, and it'd work with the lists too [.rgba, .hsla, etc.]

from habitat.

Perhaps it could be something like

const lightBlue = Colour.templateFrom(Colour.Blue, {lightness: 0.8}) // setting the lightness, rather than adding to it

But if you wanted to add colours together, you could use .add() instead? Not really sure, modifying Colours doesn't really make sense if they're intended to be immutable. At least not to me anyway.

from habitat.

I've now refactored colour.js!

You now make colours by specifying a CSS style instead of (r, g, b). So you can make colours in various ways. Behind the scenes, this is done by drawing on a tiny canvas, so didn't require too much code.

const blue = Colour.make("rgb(0, 128, 255)")
const pink = Colour.make("hotpink")
const red = Colour.make("hsl(120, 100%, 50%)")

Colours also now have hue, saturation and lightness values that I calculate based on what this wiki page says: https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB

And you can add or multiply different colours together to make new colours.

const darkBlue = Colour.add(Colour.Blue, {lightness: -20})
const lightBlue = Colour.multiply(Colour.Blue, {lightness: 1.3})

Full documentation here: https://todepond.gitbook.io/habitat/libraries/colour

from habitat.