Renaming paletteEntries to palette

2026-04-14 04:19:29 -07:00 · 2022-09-27 22:30:50 -07:00
parent 22458dad93
commit cde709b044
8 changed files with 34 additions and 29 deletions
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,5 +1,7 @@
 TODO:

+All colors in config should be able to be RGB or HSL
+
 Bloom comparison: WebGPU vs REGL
  Why are they different?
  Create a project that tests them side-by-side
--- a/js/config.js
+++ b/js/config.js
@@ -61,6 +61,7 @@ const textureURLs = {

 const defaults = {
 	font: "matrixcode",
+	effect: "palette", // The name of the effect to apply at the end of the process— mainly handles coloration
 	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,
@@ -97,7 +98,7 @@ const defaults = {
 	rippleSpeed: 0.2, // The rate at which the ripple effect progresses
 	numColumns: 80, // The maximum dimension of the glyph grid
 	density: 1, // In volumetric mode, the number of actual columns compared to the grid
-	paletteEntries: [
+	palette: [
 		// The color palette that glyph brightness is color mapped to
 		{ hsl: [0.3, 0.9, 0.0], at: 0.0 },
 		{ hsl: [0.3, 0.9, 0.2], at: 0.2 },
@@ -136,7 +137,7 @@ const versions = {
 		glyphHeightToWidth: 1.35,
 		rippleTypeName: "box",
 		numColumns: 108,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.4, 0.8, 0.0], at: 0.0 },
 			{ hsl: [0.4, 0.8, 0.5], at: 0.5 },
 			{ hsl: [0.4, 0.8, 1.0], at: 1.0 },
@@ -153,7 +154,7 @@ const versions = {
 		hasThunder: true,
 		numColumns: 60,
 		cycleSpeed: 0.35,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.0, 1.0, 0.0], at: 0.0 },
 			{ hsl: [0.0, 1.0, 0.2], at: 0.2 },
 			{ hsl: [0.0, 1.0, 0.4], at: 0.4 },
@@ -177,7 +178,7 @@ const versions = {
 		rippleTypeName: "circle",
 		rippleSpeed: 0.1,
 		numColumns: 40,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.0, 0.0, 0.0], at: 0.0 },
 			{ hsl: [0.0, 0.8, 0.3], at: 0.3 },
 			{ hsl: [0.1, 0.8, 0.5], at: 0.5 },
@@ -197,7 +198,7 @@ const versions = {
 		cycleSpeed: 0.03,
 		bloomStrength: 0.7,
 		fallSpeed: 0.3,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.375, 0.9, 0.0], at: 0.0 },
 			{ hsl: [0.375, 1.0, 0.6], at: 0.92 },
 			{ hsl: [0.375, 1.0, 1.0], at: 1.0 },
@@ -220,7 +221,7 @@ const versions = {
 		cycleSpeed: 0.03,
 		bloomStrength: 0.7,
 		fallSpeed: 0.3,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.37, 0.6, 0.0], at: 0.0 },
 			{ hsl: [0.37, 0.6, 0.5], at: 1.0 },
 		],
@@ -247,7 +248,7 @@ const versions = {
 		cycleSpeed: 0.03,
 		bloomStrength: 0.7,
 		fallSpeed: 0.3,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.97, 0.6, 0.0], at: 0.0 },
 			{ hsl: [0.97, 0.6, 0.5], at: 1.0 },
 		],
@@ -274,7 +275,7 @@ const versions = {
 		cycleSpeed: 0.03,
 		bloomStrength: 0.7,
 		fallSpeed: 0.3,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.12, 0.6, 0.0], at: 0.0 },
 			{ hsl: [0.14, 0.6, 0.5], at: 1.0 },
 		],
@@ -293,7 +294,7 @@ const versions = {
 		cycleFrameSkip: 3,
 		fallSpeed: 0.5,
 		slant: Math.PI * -0.0625,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.15, 0.25, 0.9], at: 0.0 },
 			{ hsl: [0.6, 0.8, 0.1], at: 0.4 },
 		],
@@ -306,7 +307,7 @@ const versions = {
 		raindropLength: 0.9,
 		fallSpeed: 0.1,
 		highPassThreshold: 0.0,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.6, 1.0, 0.05], at: 0.0 },
 			{ hsl: [0.6, 0.8, 0.1], at: 0.1 },
 			{ hsl: [0.88, 0.8, 0.5], at: 0.5 },
@@ -330,7 +331,7 @@ const versions = {
 		cycleSpeed: 0.03,
 		bloomStrength: 0.7,
 		fallSpeed: 0.3,
-		paletteEntries: [
+		palette: [
 			{ hsl: [0.37, 0.6, 0.0], at: 0.0 },
 			{ hsl: [0.37, 0.6, 0.5], at: 1.0 },
 		],
--- a/js/regl/main.js
+++ b/js/regl/main.js
@@ -13,6 +13,7 @@ import getLKG from "./lkgHelper.js";
 const effects = {
 	none: null,
 	plain: makePalettePass,
+	palette: makePalettePass,
 	customStripes: makeStripePass,
 	stripes: makeStripePass,
 	pride: makeStripePass,
@@ -72,7 +73,7 @@ export default async (canvas, config) => {

 	// All this takes place in a full screen quad.
 	const fullScreenQuad = makeFullScreenQuad(regl);
-	const effectName = config.effect in effects ? config.effect : "plain";
+	const effectName = config.effect in effects ? config.effect : "palette";
 	const context = { regl, config, lkg, cameraTex, cameraAspectRatio };
 	const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeQuiltPass]);
 	const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
--- a/js/regl/palettePass.js
+++ b/js/regl/palettePass.js
@@ -64,7 +64,7 @@ const makePalette = (regl, entries) => {

 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
-	const palette = makePalette(regl, config.paletteEntries);
+	const paletteTex = makePalette(regl, config.palette);
 	const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config;

 	const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
@@ -80,7 +80,7 @@ export default ({ regl, config }, inputs) => {
 			bloomStrength,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
-			palette,
+			paletteTex,
 		},
 		framebuffer: output,
 	});
--- a/js/regl/stripePass.js
+++ b/js/regl/stripePass.js
@@ -12,9 +12,9 @@ const transPrideStripeColors = [
 	[0.96, 0.66, 0.72],
 	[0.96, 0.66, 0.72],
 	[0.96, 0.66, 0.72],
-	[1.00, 1.00, 1.00],
-	[1.00, 1.00, 1.00],
-	[1.00, 1.00, 1.00],
+	[1.0, 1.0, 1.0],
+	[1.0, 1.0, 1.0],
+	[1.0, 1.0, 1.0],
 	[0.96, 0.66, 0.72],
 	[0.96, 0.66, 0.72],
 	[0.96, 0.66, 0.72],
@@ -26,14 +26,14 @@ const transPrideStripeColors = [
 const prideStripeColors = [
 	[0.89, 0.01, 0.01],
 	[0.89, 0.01, 0.01],
-	[1.00, 0.55, 0.00],
-	[1.00, 0.55, 0.00],
-	[1.00, 0.93, 0.00],
-	[1.00, 0.93, 0.00],
-	[0.00, 0.50, 0.15],
-	[0.00, 0.50, 0.15],
-	[0.00, 0.30, 1.00],
-	[0.00, 0.30, 1.00],
+	[1.0, 0.55, 0.0],
+	[1.0, 0.55, 0.0],
+	[1.0, 0.93, 0.0],
+	[1.0, 0.93, 0.0],
+	[0.0, 0.5, 0.15],
+	[0.0, 0.5, 0.15],
+	[0.0, 0.3, 1.0],
+	[0.0, 0.3, 1.0],
 	[0.46, 0.03, 0.53],
 	[0.46, 0.03, 0.53],
 ].flat();
--- a/js/webgpu/main.js
+++ b/js/webgpu/main.js
@@ -22,6 +22,7 @@ const loadJS = (src) =>
 const effects = {
 	none: null,
 	plain: makePalettePass,
+	palette: makePalettePass,
 	customStripes: makeStripePass,
 	stripes: makeStripePass,
 	pride: makeStripePass,
@@ -88,7 +89,7 @@ export default async (canvas, config) => {
 		cameraSize,
 	};

-	const effectName = config.effect in effects ? config.effect : "plain";
+	const effectName = config.effect in effects ? config.effect : "palette";
 	const pipeline = await makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeEndPass]);

 	let frames = 0;
--- a/js/webgpu/palettePass.js
+++ b/js/webgpu/palettePass.js
@@ -112,7 +112,7 @@ export default ({ config, device, timeBuffer }) => {
 		});

 		const paletteUniforms = paletteShaderUniforms.Palette;
-		paletteBuffer = makePalette(device, paletteUniforms, config.paletteEntries);
+		paletteBuffer = makePalette(device, paletteUniforms, config.palette);
 	})();

 	const build = (size, inputs) => {
--- a/shaders/glsl/palettePass.frag.glsl
+++ b/shaders/glsl/palettePass.frag.glsl
@@ -3,7 +3,7 @@ precision mediump float;

 uniform sampler2D tex;
 uniform sampler2D bloomTex;
-uniform sampler2D palette;
+uniform sampler2D paletteTex;
 uniform float bloomStrength;
 uniform float ditherMagnitude;
 uniform float time;
@@ -30,7 +30,7 @@ void main() {

 	// Map the brightness to a position in the palette texture
 	gl_FragColor = vec4(
-		texture2D( palette, vec2(brightness.r, 0.0)).rgb
+		texture2D( paletteTex, vec2(brightness.r, 0.0)).rgb
 			+ min(cursorColor * brightness.g, vec3(1.0))
 			+ min(glintColor * brightness.b, vec3(1.0))
 			+ backgroundColor,