Colors and gradients

[cristianvogel]

Hi,

I am spending too long trying to get the cosine gradients to actually work in my context. I am not an experience Thi.ng user, but I like the depth I see and wish I could get results going quicker.

For example
I have reverted to cutting and pasting this example.

Only 0 values come out, and Typescript error on srgb which I can't resolve the error itself is too complicated for me to read!

What is srgb ? it doesn't seem to be in the Color package.

If it try the .map(css) version which is also in the docs, seems to just put out single characters as colour values and also causes a huge type error. CoPilot tries to resolve it like this, but it still doesn't validate...

  const palette = cosineGradient(36, gradient).map((src: string | number | ReadonlyVec, cssTarget?: Partial<Record<ColorMode, Fn<any, string>>> | undefined) => css(src, cssTarget));

❓❓❓

OK, I just ignore the ts error on css and am getting a result i can use from

const gradient: CosGradientSpec = COSINE_GRADIENTS["blue-cyan"];
const palette = cosineGradient(22, gradient).map(css);

I am not getting the correct Types import for using with thi.ng or something? Is there anything special I needed to do to get Type annotations for everything ( like that css function )

I am trying to plug into a Three.js object color.

[cdaein]

This seems to work:

import { css, multiCosineGradient, srgb } from "@thi.ng/color";

const grad = multiCosineGradient({
  num: 10,
  stops: [
    [0.0, [0.8, 0.2, 0.4, 1]],
    [0.7, [0, 0.5, 1, 1]],
    [1.0, [0, 0.8, 1, 1]],
  ],
  tx: srgb,
});

console.log(grad);
console.log(css(grad[0]));

[postspectacular]

Hi @cristianvogel - welcome & nice to see you here!

I'm sorry about this issue you're having, there're a few things going on here, but mainly it's because I somehow forgot to update these code snippets in the readme (and that seemingly for at least a few years). I've just gone through all the readme examples and fixed several of them. Also pushing a new release in a few minutes (incl. a minor bug fix I uncovered just too now...)

To your actual example:

1. The srgba is a typo (or rather ancient naming) and should be srgb instead (without the a). For your use case (WebGL) that transform is also not really required...
2. The .map(css) part is also needing a minor update to .map((x) => css(x)). The reason for this that css() takes more than one argument, but for use with .map() we only need the first one...

The fully working example looks like this (also updated in the readme now):

import { css, multiCosineGradient, srgb } from "@thi.ng/color";

const gradient = multiCosineGradient({
	num: 10,
	// gradient stops (normalized positions)
	stops: [
		[0.1, [1, 0, 0, 1]],
		[0.5, [0, 1, 0, 1]],
		[0.9, [0, 0, 1, 1]],
	],
	// optional color transform/coercion
	tx: srgb
});

console.log(gradient);
// [
// 	[1, 0, 0, 1],
// 	[1, 0, 0, 1],
// 	[0.854, 0.146, 0, 1],
// 	[0.5, 0.5, 0, 1],
// 	[0.146, 0.854, 0, 1],
// 	[0, 1, 0, 1],
// 	[0, 0.854, 0.146, 1],
// 	[0, 0.5, 0.5, 1],
// 	[0, 0.146, 0.853, 1],
// 	[0, 0, 1, 1],
// 	[0, 0, 1, 1]
// ]

// convert to CSS
console.log(gradient.map((x) => css(x)));
// [
//   "#ff0000",
//   "#ff0000",
//   "#da2500",
//   "#807f00",
//   "#25da00",
//   "#00ff00",
//   "#00da25",
//   "#00807f",
//   "#0025da",
//   "#0000ff",
//   "#0000ff",
// ]

Hope that helps & please let me know if anything else is unclear... 👍

[cristianvogel]

Oh hi Karsten... and thankyou! I am sorry to made some extra work. It is odd how little mis-prints become important sometimes. I have been flowing ok today, now working with some color and array thi.ngs

[postspectacular]

Btw. Re: running examples from various readme files, you might find this recent toot relevant as well:

https://mastodon.thi.ng/@toxi/111959275083112668

If you've got a local clone of the Git repo[1] and have everything built (via yarn build), you can then run: yarn doc:readme to re-generate the readme files of all packages and extract various code examples[2] into runnable TypeScript source files.

In #LiterateProgramming parlance this process is called "tangling" and here is handled by thi.ng/tangle, which you can of course use for your own projects/documentation/literate programming too! The tangled source files are written in the export folder of each eligible package and can then be (usually) directly run from the terminal using bun (bun.sh), e.g. like so:

bun packages/text-canvas/export/readme-barplot.ts

Just thought this might be useful for some of you...

[1] github.com/thi-ng/umbrella/blo

[2] So far there're only ~28 packages (15% of the total) for which I've updated the readmes with this mechanism. I'm hoping by end of the year all of them will be ready...