From 38282038763a594134e0a52dc9358fd30ac8b26d Mon Sep 17 00:00:00 2001 From: Rezmason Date: Wed, 28 Sep 2022 09:57:42 -0700 Subject: [PATCH] All colors are now color objects --- js/config.js | 49 ++++++++++++++++++++++++---------------- js/regl/palettePass.js | 8 +++---- js/regl/stripePass.js | 10 ++++---- js/webgpu/palettePass.js | 6 ++--- js/webgpu/stripePass.js | 31 +++++++++++++------------ 5 files changed, 58 insertions(+), 46 deletions(-) diff --git a/js/config.js b/js/config.js index 4ff73b1..66d3ea1 100644 --- a/js/config.js +++ b/js/config.js @@ -68,11 +68,11 @@ const defaults = { baseTexture: null, // The name of the texture to apply to the base layer of the glyphs glintTexture: null, // The name of the texture to apply to the glint layer of the glyphs useCamera: false, - backgroundColor: [0, 0, 0], // The color "behind" the glyphs + backgroundColor: { space: "rgb", values: [0, 0, 0] }, // The color "behind" the glyphs isolateCursor: true, // Whether the "cursor"— the brightest glyph at the bottom of a raindrop— has its own color - cursorColor: [1.5, 2, 0.9], // The color of the cursor + cursorColor: { space: "rgb", values: [1.5, 2, 0.9] }, // The color of the cursor isolateGlint: false, // Whether the "glint"— highlights on certain symbols in the font— should appear - glintColor: [1, 1, 1], // The color of the glint + glintColor: { space: "rgb", values: [1, 1, 1] }, // The color of the glint volumetric: false, // A mode where the raindrops appear in perspective animationSpeed: 1, // The global rate that all animations progress forwardSpeed: 0.25, // The speed volumetric rain approaches the eye @@ -127,7 +127,7 @@ const versions = { width: 40, }, operator: { - cursorColor: [1.0, 3, 1.5], + cursorColor: { space: "rgb", values: [1.0, 3, 1.5] }, bloomSize: 0.6, bloomStrength: 0.75, highPassThreshold: 0.0, @@ -193,7 +193,7 @@ const versions = { resurrections: { font: "resurrections", glyphEdgeCrop: 0.1, - cursorColor: [1.4, 2, 1.2], + cursorColor: { space: "rgb", values: [1.4, 2, 1.2] }, baseBrightness: -0.7, baseContrast: 1.17, highPassThreshold: 0, @@ -212,9 +212,9 @@ const versions = { glintTexture: "metal", baseTexture: "pixels", glyphEdgeCrop: 0.1, - cursorColor: [1.4, 2, 1.2], + cursorColor: { space: "rgb", values: [1.4, 2, 1.2] }, isolateGlint: true, - glintColor: [3, 2.5, 0.6], + glintColor: { space: "rgb", values: [3, 2.5, 0.6] }, glintBrightness: -0.5, glintContrast: 1.5, baseBrightness: -0.4, @@ -239,9 +239,9 @@ const versions = { glintTexture: "mesh", baseTexture: "metal", glyphEdgeCrop: 0.1, - cursorColor: [1.4, 2, 1.4], + cursorColor: { space: "rgb", values: [1.4, 2, 1.4] }, isolateGlint: true, - glintColor: [0, 2, 0.8], + glintColor: { space: "rgb", values: [0, 2, 0.8] }, glintBrightness: -1.5, glintContrast: 3, baseBrightness: -0.3, @@ -266,9 +266,9 @@ const versions = { glintTexture: "sand", baseTexture: "metal", glyphEdgeCrop: 0.1, - cursorColor: [0.6, 1, 2], + cursorColor: { space: "rgb", values: [0.6, 1, 2] }, isolateGlint: true, - glintColor: [0.6, 1.2, 3], + glintColor: { space: "rgb", values: [0.6, 1.2, 3] }, glintBrightness: -1, glintContrast: 3, baseBrightness: -0.3, @@ -304,7 +304,7 @@ const versions = { }, twilight: { font: "huberfishD", - cursorColor: [1.5, 1, 0.9], + cursorColor: { space: "rgb", values: [1.5, 1, 0.9] }, bloomStrength: 0.1, numColumns: 50, raindropLength: 0.9, @@ -323,9 +323,9 @@ const versions = { font: "resurrections", glintTexture: "metal", glyphEdgeCrop: 0.1, - cursorColor: [1.4, 2, 1.2], + cursorColor: { space: "rgb", values: [1.4, 2, 1.2] }, isolateGlint: true, - glintColor: [3, 2.5, 0.6], + glintColor: { space: "rgb", values: [3, 2.5, 0.6] }, glintBrightness: -0.5, glintContrast: 1.5, baseBrightness: -0.4, @@ -371,11 +371,20 @@ const nullNaN = (f) => (isNaN(f) ? null : f); const parseColors = (isHSL) => (s) => { const values = s.split(",").map(parseFloat); + const space = isHSL ? "hsl" : "rgb"; return Array(Math.floor(values.length / 3)) .fill() - .map((_, index) => values.slice(index * 3, (index + 1) * 3)); + .map((_, index) => ({ + space, + values: values.slice(index * 3, (index + 1) * 3), + })); }; +const parseColor = (isHSL) => (s) => ({ + space: isHSL ? "hsl" : "rgb", + values: s.split(",").map(parseFloat), +}); + const paramMapping = { version: { key: "version", parser: (s) => s }, font: { key: "font", parser: (s) => s }, @@ -417,9 +426,9 @@ const paramMapping = { }, url: { key: "bgURL", parser: (s) => s }, stripeColors: { key: "stripeColors", parser: parseColors(false) }, - backgroundColor: { key: "backgroundColor", parser: parseColors(false) }, - cursorColor: { key: "cursorColor", parser: parseColors(false) }, - glintColor: { key: "glintColor", parser: parseColors(false) }, + backgroundColor: { key: "backgroundColor", parser: parseColor(false) }, + cursorColor: { key: "cursorColor", parser: parseColor(false) }, + glintColor: { key: "glintColor", parser: parseColor(false) }, 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") }, @@ -441,11 +450,11 @@ export default (urlParams) => { if (validParams.effect != null) { if (validParams.cursorColor == null) { - validParams.cursorColor = [2, 2, 2]; + validParams.cursorColor = { space: "rgb", values: [2, 2, 2] }; } if (validParams.glintColor == null) { - validParams.glintColor = [1, 1, 1]; + validParams.glintColor = { space: "rgb", values: [1, 1, 1] }; } } diff --git a/js/regl/palettePass.js b/js/regl/palettePass.js index 385134a..ab967e1 100644 --- a/js/regl/palettePass.js +++ b/js/regl/palettePass.js @@ -44,7 +44,7 @@ const makePalette = (regl, entries) => { return make1DTexture( regl, - paletteColors.flat().map((i) => i * 0xff) + paletteColors.map((rgb) => [...rgb, 1]) ); }; @@ -65,9 +65,9 @@ export default ({ regl, config }, inputs) => { frag: regl.prop("frag"), uniforms: { - backgroundColor, - cursorColor, - glintColor, + backgroundColor: colorToRGB(backgroundColor), + cursorColor: colorToRGB(cursorColor), + glintColor: colorToRGB(glintColor), ditherMagnitude, bloomStrength, tex: inputs.primary, diff --git a/js/regl/stripePass.js b/js/regl/stripePass.js index 6c43ddb..420be6e 100644 --- a/js/regl/stripePass.js +++ b/js/regl/stripePass.js @@ -1,3 +1,4 @@ +import colorToRGB from "../colorToRGB.js"; import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js"; // Multiplies the rendered rain and bloom by a 1D gradient texture @@ -33,9 +34,10 @@ export default ({ regl, config }, inputs) => { // Expand and convert stripe colors into 1D texture data const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors; + console.log(stripeColors); const stripeTex = make1DTexture( regl, - stripeColors.map((rgb) => [...rgb, 1]) + stripeColors.map((color) => [...colorToRGB(color), 1]) ); const stripePassFrag = loadText("shaders/glsl/stripePass.frag.glsl"); @@ -44,9 +46,9 @@ export default ({ regl, config }, inputs) => { frag: regl.prop("frag"), uniforms: { - backgroundColor, - cursorColor, - glintColor, + backgroundColor: colorToRGB(backgroundColor), + cursorColor: colorToRGB(cursorColor), + glintColor: colorToRGB(glintColor), ditherMagnitude, bloomStrength, tex: inputs.primary, diff --git a/js/webgpu/palettePass.js b/js/webgpu/palettePass.js index c1984f6..6861e87 100644 --- a/js/webgpu/palettePass.js +++ b/js/webgpu/palettePass.js @@ -98,9 +98,9 @@ export default ({ config, device, timeBuffer }) => { configBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength: config.bloomStrength, ditherMagnitude: config.ditherMagnitude, - backgroundColor: config.backgroundColor, - cursorColor: config.cursorColor, - glintColor: config.glintColor, + backgroundColor: colorToRGB(config.backgroundColor), + cursorColor: colorToRGB(config.cursorColor), + glintColor: colorToRGB(config.glintColor), }); const paletteUniforms = paletteShaderUniforms.Palette; diff --git a/js/webgpu/stripePass.js b/js/webgpu/stripePass.js index 831b761..c0f3aaf 100644 --- a/js/webgpu/stripePass.js +++ b/js/webgpu/stripePass.js @@ -1,3 +1,4 @@ +import colorToRGB from "../colorToRGB.js"; import { structs } from "../../lib/gpu-buffer.js"; import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js"; @@ -7,22 +8,22 @@ import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makeComput // This shader introduces noise into the renders, to avoid banding const transPrideStripeColors = [ - [0.36, 0.81, 0.98], - [0.96, 0.66, 0.72], - [1.0, 1.0, 1.0], - [0.96, 0.66, 0.72], - [0.36, 0.81, 0.98], + { space: "rgb", values: [0.36, 0.81, 0.98] }, + { space: "rgb", values: [0.96, 0.66, 0.72] }, + { space: "rgb", values: [1.0, 1.0, 1.0] }, + { space: "rgb", values: [0.96, 0.66, 0.72] }, + { space: "rgb", values: [0.36, 0.81, 0.98] }, ] .map((color) => Array(3).fill(color)) .flat(1); const prideStripeColors = [ - [0.89, 0.01, 0.01], - [1.0, 0.55, 0.0], - [1.0, 0.93, 0.0], - [0.0, 0.5, 0.15], - [0.0, 0.3, 1.0], - [0.46, 0.03, 0.53], + { space: "rgb", values: [0.89, 0.01, 0.01] }, + { space: "rgb", values: [1.0, 0.55, 0.0] }, + { space: "rgb", values: [1.0, 0.93, 0.0] }, + { space: "rgb", values: [0.0, 0.5, 0.15] }, + { space: "rgb", values: [0.0, 0.3, 1.0] }, + { space: "rgb", values: [0.46, 0.03, 0.53] }, ] .map((color) => Array(2).fill(color)) .flat(1); @@ -40,7 +41,7 @@ export default ({ config, device, timeBuffer }) => { const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors; const stripeTex = make1DTexture( device, - stripeColors.map((rgb) => [...rgb, 1]) + stripeColors.map((color) => [...colorToRGB(color), 1]) ); const linearSampler = device.createSampler({ @@ -72,9 +73,9 @@ export default ({ config, device, timeBuffer }) => { configBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength: config.bloomStrength, ditherMagnitude: config.ditherMagnitude, - backgroundColor: config.backgroundColor, - cursorColor: config.cursorColor, - glintColor: config.glintColor, + backgroundColor: colorToRGB(config.backgroundColor), + cursorColor: colorToRGB(config.cursorColor), + glintColor: colorToRGB(config.glintColor), }); })();