meowshapes

COLOR

The COLOR object defines a set of semantic colors that react to the current theme.

sphere(16)
    .color(COLOR.FOREGROUND)
    .pos([0, 0, 16]);
    
sphere(16)
    .color(COLOR.SECONDARY)
    .pos([0, 0, 48]);

sphere(16)
    .color(COLOR.BACKGROUND)
    .pos([0, 0, -16]);

sphere(16)
    .color(COLOR.MUTED)
    .pos([0, 0, -48]);

Color gradients

In addition to static colors, some "gradients" are available to create smooth transitions between colors.

const txt = textElement("");

update((_, elapsed) => {
    const t = Math.sin(elapsed) * 0.5 + 0.5;
    txt.textContent = `Value: ${t.toFixed(2)}`;

    sphere(16)
        .pos([-32, 0, 0])
        .color(COLOR.gray(t));
    
    sphere(16)
        .pos([32, 0, 0])
        .color(COLOR.heatmap(t));
});

COLOR

field 
FOREGROUND: THREE.Color
Returns the current theme's foreground color as a THREE.Color instance.
field 
BACKGROUND: THREE.Color
Returns the current theme's background color as a THREE.Color instance.
field 
MUTED: THREE.Color
Returns the current theme's muted color as a THREE.Color instance.
field 
SECONDARY: THREE.Color
Returns the current theme's secondary color as a THREE.Color instance.
method 
gray(value: number): THREE.Color
Returns a color between BACKGROUND and FOREGROUND, where 0 is BACKGROUND and 1 is FOREGROUND.
method 
heatmap(value: number): THREE.Color
Returns a piecewise gradient color from blue to green to red, where 0 is blue, 0.5 is green, and 1 is red.
meowshapes