search

Rezmason / matrix

matrix (web-based green code rain, made with love)
https://rezmason.github.io/matrix
MIT License
3.29k stars 212 forks source link

Custom colours? #14

Closed tetsujin1979 closed 2 years ago

tetsujin1979 commented 2 years ago

How can the colours of the glyphs and background be customised? I've tried changing the backgroundColor value on line 56 of config.js - https://github.com/Rezmason/matrix/blob/a4a0406826c599b44cb77dfe6d05593e0bff017e/js/config.js#L56 - to 9, 9, 9 for a white background, but this changes the font colour to white so I can't see anything! What else needs to be changed for the glyph colour?

Rezmason commented 2 years ago

Sorry for the late reply!

Check out the paletteEntries field on the "palimpsest" version:

https://github.com/Rezmason/matrix/blob/a4a0406826c599b44cb77dfe6d05593e0bff017e/js/config.js#L200-L203

See how the "lowest" color is brighter than the "highest" color?

You can imagine that the values in paletteEntries are like values in a Photoshop gradient— they have a color, and a number between zero and one that represents where they fall along the spectrum.

image

So, for instance, if you want a white background with amber glyphs that turn aquamarine, you could try:

tetsujin1979: {
    bloomStrength: 0,
    paletteEntries: [
        { hsl: [0, 1, 1], at: 0.0 },      // red saturated white
        { hsl: [0.15, 1, 0.4], at: 0.8 }, // amber saturated slightly dark
        { hsl: [0.5, 1, 0.4], at: 1.0 },  // cyan saturated slightly dark
    ],
},

Result:

image

I know the options are a bit confusing, hopefully soon I'll have the time to improve things one way or another. Thanks for taking an interest in the project!