I don't actually know how to program I just ask @FransAris
// matrix = [
// [1, 0, 0, 0, 0],
// [0, 1, 0, 0, 0],
// [0, 0, 1, 0, 0],
// [0, 0, 0, 1, 0]
// ]
// matrix = [
// [c.r / 3, c.g / 3, c.b / 3, 0, 0],
// [c.r / 3, c.g / 3, c.b / 3, 0, 0],
// [c.r / 3, c.g / 3, c.b / 3, 0, 0],
// [0, 0, 0, 1, 0]
// ]
// matrix = [
// [c.r / 3, c.r / 3, c.r / 3, 0, 0],
// [c.g / 3, c.g / 3, c.g / 3, 0, 0],
// [c.b / 3, c.b / 3, c.b / 3, 0, 0],
// [0, 0, 0, 1, 0]
// ]
// matrix = [
// [0, 0, 0, d.r * K, 0],
// [0, 0, 0, d.g * K, 0],
// [0, 0, 0, d.b * K, 0],
// [0, 0, 0, 1, 0]
// ]
// matrix = [
// [0, 0, 0, 0, c.r],
// [0, 0, 0, 0, c.g],
// [0, 0, 0, 0, c.b],
// [0, 0, 0, 1, 0]
// ]
// matrix = [
// [0, 0, 0, 1, 0],
// [0, 0, 0, 1, 0],
// [0, 0, 0, 1, 0],
// [0, 0, 0, 1, 0]
// ]
matrix = [
[0, 0, 0, d.r, 0],
[0, 0, 0, d.g, 0],
[0, 0, 0, d.b, 0],
[0, 0, 0, 1, 0]
]
// matrix = [
// [0, 0, 0, 203 / 255, 0],
// [0, 0, 0, 75 / 255, 0],
// [0, 0, 0, 22 / 255, 0],
// [0, 0, 0, 1, 0]
// ]
22 / 255
c.b * 255
c.p3
d = ({
// r: c.r,
// g: c.g,
// b: c.b
// r: c.srgb_linear[0],
// g: c.srgb_linear[1],
// b: c.srgb_linear[2]
r: c.p3[0],
g: c.p3[1],
b: c.p3[2]
})
255 * 0.08627450980392157
c.srgb
c.srgb_linear
K = 1
htl.html`
<div style=${{
width: "200px",
height: "200px",
backgroundColor: "white",
filter: `url('data:image/svg+xml,
<filter id="filter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" >
<feFlood flood-color="#ff0000" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood"/>
<feComposite in="flood" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite"/>
</filter>#filter')`.replaceAll("\n", "")
}}></div>
`
c.r + c.g + c.b
c.r
c.g
c.b
p = matrix.map((x) => x.join(" ")).join(" ")
hmmmm = `url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\
<feColorMatrix\
type = "matrix"\
rgbaToFeColorMatrix = "255, 0, 0, 1"\
values="${p}"/>\
</filter>\
</svg>#waves')`
g = new Color(rgb[0], rgb[1], rgb[2])
color_block(hex_to_color(input_color))
hue = 90
color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))
Colors = import("https://colorjs.io/dist/color.js").then((x) => x.default)
c = new Colors(input_color)
c.lch.h
c.sepia
new Colors("#000").lch.h
hue_rotate_box(hue, color_block(hex_to_color(input_color)))
htl.html`
<div style="display: flex; flex-direction: row">
${color_block(
multiply_color(hex_to_color(input_color), firefox_hue_rotate_matrix(hue))
)}
${color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))}
${color_block(
multiply_color(hex_to_color(input_color), hue_rotate_color_chrome(hue))
)}
${hue_rotate_box(hue, color_block(hex_to_color(input_color)))}
${color_block(hex_to_color(input_color))}
</div>
`
identity = (x) => x
hue_rotate_color_chrome(hue)
firefox_hue_rotate_matrix(hue)
result
rgb = hexToRgb(input_color)
multiply_color
md`
`
filters_to_color = (filters) => {
// Argument is array of percentages.
const color = new Color();
color.set(0, 0, 0);
color.invert(filters[0] / 100);
color.sepia(filters[1] / 100);
color.saturate(filters[2] / 100);
color.hueRotate(filters[3] * 3.6);
color.brightness(filters[4] / 100);
color.contrast(filters[5] / 100);
return color;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
