From 2ab9699b4e7173d9c48b6d3d54645946f34cbbcc Mon Sep 17 00:00:00 2001 From: Rezmason Date: Thu, 29 Sep 2022 21:04:16 -0700 Subject: [PATCH] Adding palette URL variable support, HSL URL variables, and RGB aliases for the existing color URL variables. --- README.md | 10 +++++++--- js/config.js | 40 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d101373..33ec06e 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,8 @@ - [Megacity Mode, as seen in Revolutions](https://rezmason.github.io/matrix?version=megacity) - [Pride flag colors](https://rezmason.github.io/matrix/?effect=pride) - [Trans flag colors](https://rezmason.github.io/matrix/?effect=trans) -- [Custom stripes (`colors=R,G,B,R,G,B,R,G,B, etc`)](https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0) +- [Custom stripes (`effect=stripes&stripeColors=R,G,B,R,G,B,R,G,B, etc`)](https://rezmason.github.io/matrix/?effect=stripes&stripeColors=1,0,0,1,1,0,0,1,0) +- [Custom palette (`palette=R,G,B,%,R,G,B,%,R,G,B,%, etc`)](https://rezmason.github.io/matrix/?palette=0.1,0,0.2,0,0.2,0.5,0,0.5,1,0.7,0,1) - [Custom image (`url=www.website.com/picture.jpg`)](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) - [Debug view (`effect=none`)](https://rezmason.github.io/matrix/?effect=none) (*epilepsy warning*: this once had lots of flickering) - [Starting from a blank screen (`skipIntro=false`)](https://rezmason.github.io/matrix/?skipIntro=false) (which some people really like, but isn't the default mode) @@ -103,10 +104,13 @@ Now you know link fu. Here's a list of customization options: - `animationSpeed` - the overall speed of the animation. Can be any number. - `fallSpeed` - the speed of the rain's descent. Can be any number. - `cycleSpeed` - the speed that the glyphs change their symbol. Can be any number. -- `effect` - alternatives to the default post-processing effect. Can be "plain", "pride", "customStripes", "none", "image" or "mirror". +- `effect` - alternatives to the default post-processing effect. Can be "plain", "pride", "stripes", "none", "image" or "mirror". - ("none" displays the 'debug view', a behind-the-scenes look at the anatomy of the effect.) - `camera` - some effects, ie. the mirror effect, optionally support webcam input. Can be "true" or "false". Default is false. -- `colors` - if you set the effect to "customStripes", you can specify the colors of vertical stripes as alternating *R,G,B* numeric values, like so: [https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0](https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0) +- `stripeColors` - if you set the effect to "stripes", you can specify the colors of vertical stripes as alternating *R,G,B* numeric values, like so: [https://rezmason.github.io/matrix/?effect=stripes&stripeColors=1,0,0,1,1,0,0,1,0](https://rezmason.github.io/matrix/?effect=stripes&stripeColors=1,0,0,1,1,0,0,1,0) +- `palette` — with the normal "palette" effect, you can specify the colors and placement of the colors along the color grade as alternating *R,G,B,%* numeric values, like so: [https://rezmason.github.io/matrix/?palette=0.1,0,0.2,0,0.2,0.5,0,0.5,1,0.7,0,1](https://rezmason.github.io/matrix/?palette=0.1,0,0.2,0,0.2,0.5,0,0.5,1,0.7,0,1) +- `backgroundColor`, `cursorColor`, `glintColor` — other *R,G,B* values that apply to the corresponding parts of the effect. +- `paletteHSL`, `stripeHSL`, `backgroundHSL`, `cursorHSL`, and `glintHSL` — the same as the above, except they use *H,S,L* (hue, saturation, lightness) instead of *R,G,B*. - `url` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video. diff --git a/js/config.js b/js/config.js index 66d3ea1..12096cf 100644 --- a/js/config.js +++ b/js/config.js @@ -369,6 +369,11 @@ versions["2021"] = versions.resurrections; const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f)); const nullNaN = (f) => (isNaN(f) ? null : f); +const parseColor = (isHSL) => (s) => ({ + space: isHSL ? "hsl" : "rgb", + values: s.split(",").map(parseFloat), +}); + const parseColors = (isHSL) => (s) => { const values = s.split(",").map(parseFloat); const space = isHSL ? "hsl" : "rgb"; @@ -380,10 +385,22 @@ const parseColors = (isHSL) => (s) => { })); }; -const parseColor = (isHSL) => (s) => ({ - space: isHSL ? "hsl" : "rgb", - values: s.split(",").map(parseFloat), -}); +const parsePalette = (isHSL) => (s) => { + const values = s.split(",").map(parseFloat); + const space = isHSL ? "hsl" : "rgb"; + return Array(Math.floor(values.length / 4)) + .fill() + .map((_, index) => { + const colorValues = values.slice(index * 4, (index + 1) * 4); + return { + color: { + space, + values: colorValues.slice(0, 3), + }, + at: colorValues[3], + }; + }); +}; const paramMapping = { version: { key: "version", parser: (s) => s }, @@ -425,10 +442,18 @@ const paramMapping = { parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), }, url: { key: "bgURL", parser: (s) => s }, + palette: { key: "palette", parser: parsePalette(false) }, stripeColors: { key: "stripeColors", parser: parseColors(false) }, backgroundColor: { key: "backgroundColor", parser: parseColor(false) }, cursorColor: { key: "cursorColor", parser: parseColor(false) }, glintColor: { key: "glintColor", parser: parseColor(false) }, + + paletteHSL: { key: "palette", parser: parsePalette(true) }, + stripeHSL: { key: "stripeColors", parser: parseColors(true) }, + backgroundHSL: { key: "backgroundColor", parser: parseColor(true) }, + cursorHSL: { key: "cursorColor", parser: parseColor(true) }, + glintHSL: { key: "glintColor", parser: parseColor(true) }, + volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") }, loops: { key: "loops", parser: (s) => s.toLowerCase().includes("true") }, skipIntro: { key: "skipIntro", parser: (s) => s.toLowerCase().includes("true") }, @@ -436,6 +461,13 @@ const paramMapping = { once: { key: "once", parser: (s) => s.toLowerCase().includes("true") }, isometric: { key: "isometric", parser: (s) => s.toLowerCase().includes("true") }, }; + +paramMapping.paletteRGB = paramMapping.palette; +paramMapping.stripeRGB = paramMapping.stripeColors; +paramMapping.backgroundRGB = paramMapping.backgroundColor; +paramMapping.cursorRGB = paramMapping.cursorColor; +paramMapping.glintRGB = paramMapping.glintColor; + paramMapping.dropLength = paramMapping.raindropLength; paramMapping.angle = paramMapping.slant; paramMapping.colors = paramMapping.stripeColors;