From 9a8638976d7c2cb1cadead61b7eece5fce3e5b36 Mon Sep 17 00:00:00 2001 From: Rezmason Date: Sun, 26 Jan 2020 09:55:37 -0800 Subject: [PATCH] Consolidating the version presets --- js/config.js | 248 ++++++++++++++++++++++++--------------------------- 1 file changed, 116 insertions(+), 132 deletions(-) diff --git a/js/config.js b/js/config.js index 7bb1894..4b13c3a 100644 --- a/js/config.js +++ b/js/config.js @@ -17,123 +17,54 @@ const fonts = { }; const defaults = { - // TODO + bloomRadius: 0.5, + bloomStrength: 1, + highPassThreshold: 0.3, + cycleSpeed: 1, + cycleStyleName: "cycleFasterWhenDimmed", + cursorEffectThreshold: 1, + brightnessOffset: 0.0, + brightnessMultiplier: 1.0, + brightnessMix: 1.0, + brightnessMinimum: 0, + fallSpeed: 1, + glyphEdgeCrop: 0.0, + glyphHeightToWidth: 1, + hasSun: false, + hasThunder: false, + isPolar: false, + rippleTypeName: null, + rippleThickness: 0.2, + rippleScale: 30, + rippleSpeed: 0.2, + numColumns: 80, + paletteEntries: [ + { rgb: [0.0, 0.0, 0.0], at: 0.0 }, + { rgb: [0.023, 0.062, 0.031], at: 0.0625 }, + { rgb: [0.043, 0.109, 0.058], at: 0.125 }, + { rgb: [0.066, 0.16, 0.09], at: 0.1875 }, + { rgb: [0.078, 0.227, 0.121], at: 0.25 }, + { rgb: [0.09, 0.329, 0.152], at: 0.3125 }, + { rgb: [0.117, 0.443, 0.188], at: 0.375 }, + { rgb: [0.168, 0.556, 0.235], at: 0.4375 }, + { rgb: [0.223, 0.627, 0.282], at: 0.5 }, + { rgb: [0.274, 0.686, 0.317], at: 0.5625 }, + { rgb: [0.294, 0.733, 0.333], at: 0.625 }, + { rgb: [0.305, 0.768, 0.356], at: 0.6875 }, + { rgb: [0.325, 0.796, 0.4], at: 0.75 }, + { rgb: [0.36, 0.831, 0.447], at: 0.8125 }, + { rgb: [0.427, 0.874, 0.509], at: 0.875 }, + { rgb: [0.505, 0.909, 0.58], at: 0.9375 }, + { rgb: [0.549, 0.921, 0.615], at: 1.0 } + ], + raindropLength: 1, + slant: 0 }; const versions = { - paradise: { - ...defaults, - ...fonts.coptic, - bloomRadius: 1.15, - bloomStrength: 1.75, - highPassThreshold: 0, - cycleSpeed: 0.1, - cycleStyleName: "cycleFasterWhenDimmed", - cursorEffectThreshold: 1, - brightnessOffset: 0.0, - brightnessMultiplier: 1.0, - brightnessMix: 0.05, - brightnessMinimum: 0, - fallSpeed: 0.08, - glyphEdgeCrop: 0.0, - glyphHeightToWidth: 1, - hasSun: true, - hasThunder: false, - isPolar: true, - rippleTypeName: "circle", - rippleThickness: 0.2, - rippleScale: 30, - rippleSpeed: 0.1, - numColumns: 30, - paletteEntries: [ - { rgb: [0.0, 0.0, 0.0], at: 0.0 }, - { rgb: [0.52, 0.17, 0.05], at: 0.4 }, - { rgb: [0.82, 0.37, 0.12], at: 0.7 }, - { rgb: [1.0, 0.74, 0.29], at: 0.9 }, - { rgb: [1.0, 0.9, 0.8], at: 1.0 } - ], - raindropLength: 0.4, - slant: 0 - }, - nightmare: { - ...defaults, - ...fonts.gothic, - bloomRadius: 0.8, - bloomStrength: 1, - highPassThreshold: 0.7, - cycleSpeed: 1, - cycleStyleName: "cycleFasterWhenDimmed", - cursorEffectThreshold: 1, - brightnessOffset: 0.0, - brightnessMultiplier: 1.0, - brightnessMix: 0.75, - brightnessMinimum: 0, - fallSpeed: 2.0, - glyphEdgeCrop: 0.0, - glyphHeightToWidth: 1, - hasSun: false, - hasThunder: true, - isPolar: false, - rippleTypeName: null, - rippleThickness: 0.2, - rippleScale: 30, - rippleSpeed: 0.2, - numColumns: 60, - paletteEntries: [ - { rgb: [0.0, 0.0, 0.0], at: 0.0 }, - { rgb: [0.32, 0.06, 0.0], at: 0.2 }, - { rgb: [0.82, 0.06, 0.05], at: 0.4 }, - { rgb: [1.0, 0.6, 0.3], at: 0.8 }, - { rgb: [1.0, 1.0, 0.9], at: 1.0 } - ], - raindropLength: 0.6, - slant: 360 / 16 - }, classic: { ...defaults, - ...fonts.matrixcode, - bloomRadius: 0.5, - bloomStrength: 1, - highPassThreshold: 0.3, - cycleSpeed: 1, - cycleStyleName: "cycleFasterWhenDimmed", - cursorEffectThreshold: 1, - brightnessOffset: 0.0, - brightnessMultiplier: 1.0, - brightnessMix: 1.0, - brightnessMinimum: 0, - fallSpeed: 1, - glyphEdgeCrop: 0.0, - glyphHeightToWidth: 1, - hasSun: false, - hasThunder: false, - isPolar: false, - rippleTypeName: null, - rippleThickness: 0.2, - rippleScale: 30, - rippleSpeed: 0.2, - numColumns: 80, - paletteEntries: [ - { rgb: [0 / 255, 0 / 255, 0 / 255], at: 0 / 16 }, - { rgb: [6 / 255, 16 / 255, 8 / 255], at: 1 / 16 }, - { rgb: [11 / 255, 28 / 255, 15 / 255], at: 2 / 16 }, - { rgb: [17 / 255, 41 / 255, 23 / 255], at: 3 / 16 }, - { rgb: [20 / 255, 58 / 255, 31 / 255], at: 4 / 16 }, - { rgb: [23 / 255, 84 / 255, 39 / 255], at: 5 / 16 }, - { rgb: [30 / 255, 113 / 255, 48 / 255], at: 6 / 16 }, - { rgb: [43 / 255, 142 / 255, 60 / 255], at: 7 / 16 }, - { rgb: [57 / 255, 160 / 255, 72 / 255], at: 8 / 16 }, - { rgb: [70 / 255, 175 / 255, 81 / 255], at: 9 / 16 }, - { rgb: [75 / 255, 187 / 255, 85 / 255], at: 10 / 16 }, - { rgb: [78 / 255, 196 / 255, 91 / 255], at: 11 / 16 }, - { rgb: [83 / 255, 203 / 255, 102 / 255], at: 12 / 16 }, - { rgb: [92 / 255, 212 / 255, 114 / 255], at: 13 / 16 }, - { rgb: [109 / 255, 223 / 255, 130 / 255], at: 14 / 16 }, - { rgb: [129 / 255, 232 / 255, 148 / 255], at: 15 / 16 }, - { rgb: [140 / 255, 235 / 255, 157 / 255], at: 16 / 16 } - ], - raindropLength: 1, - slant: 0 + ...fonts.matrixcode }, operator: { ...defaults, @@ -146,33 +77,65 @@ const versions = { cursorEffectThreshold: 0.64, brightnessOffset: 0.25, brightnessMultiplier: 0.0, - brightnessMix: 1.0, brightnessMinimum: -1.0, fallSpeed: 0.65, glyphEdgeCrop: 0.15, glyphHeightToWidth: 1.35, - hasSun: false, - hasThunder: false, - isPolar: false, rippleTypeName: "box", - rippleThickness: 0.2, - rippleScale: 30, - rippleSpeed: 0.2, numColumns: 108, paletteEntries: [ { rgb: [0.0, 0.0, 0.0], at: 0.0 }, { rgb: [0.18, 0.9, 0.35], at: 0.6 }, { rgb: [0.9, 1.0, 0.9], at: 1.0 } ], - raindropLength: 1.5, - slant: 0 + raindropLength: 1.5 + }, + nightmare: { + ...defaults, + ...fonts.gothic, + bloomRadius: 0.8, + highPassThreshold: 0.7, + brightnessMix: 0.75, + fallSpeed: 2.0, + hasThunder: true, + numColumns: 60, + paletteEntries: [ + { rgb: [0.0, 0.0, 0.0], at: 0.0 }, + { rgb: [0.32, 0.06, 0.0], at: 0.2 }, + { rgb: [0.82, 0.06, 0.05], at: 0.4 }, + { rgb: [1.0, 0.6, 0.3], at: 0.8 }, + { rgb: [1.0, 1.0, 0.9], at: 1.0 } + ], + raindropLength: 0.6, + slant: 360 / 16 + }, + paradise: { + ...defaults, + ...fonts.coptic, + bloomRadius: 1.15, + bloomStrength: 1.75, + highPassThreshold: 0, + cycleSpeed: 0.1, + brightnessMix: 0.05, + fallSpeed: 0.08, + hasSun: true, + isPolar: true, + rippleTypeName: "circle", + rippleSpeed: 0.1, + numColumns: 30, + paletteEntries: [ + { rgb: [0.0, 0.0, 0.0], at: 0.0 }, + { rgb: [0.52, 0.17, 0.05], at: 0.4 }, + { rgb: [0.82, 0.37, 0.12], at: 0.7 }, + { rgb: [1.0, 0.74, 0.29], at: 0.9 }, + { rgb: [1.0, 0.9, 0.8], at: 1.0 } + ], + raindropLength: 0.4 } }; versions.throwback = versions.operator; versions["1999"] = versions.classic; -// Start here - export default (searchString, make1DTexture) => { const urlParams = new URLSearchParams(searchString); const getParam = (keyOrKeys, defaultValue) => { @@ -187,7 +150,8 @@ export default (searchString, make1DTexture) => { }; const versionName = getParam("version", "classic"); - const version = versions[versionName] == null ? versions.classic : versions[versionName]; + const version = + versions[versionName] == null ? versions.classic : versions[versionName]; const config = { ...version }; @@ -195,18 +159,38 @@ export default (searchString, make1DTexture) => { config.fallSpeed *= parseFloat(getParam("fallSpeed", 1)); config.cycleSpeed *= parseFloat(getParam("cycleSpeed", 1)); config.numColumns = parseInt(getParam("width", config.numColumns)); - config.raindropLength = parseFloat(getParam(["raindropLength", "dropLength"], config.raindropLength)); + config.raindropLength = parseFloat( + getParam(["raindropLength", "dropLength"], config.raindropLength) + ); config.glyphSequenceLength = config.glyphSequenceLength; - config.slant = (parseFloat(getParam(["slant", "angle"], config.slant)) * Math.PI) / 180; + config.slant = + (parseFloat(getParam(["slant", "angle"], config.slant)) * Math.PI) / 180; config.slantVec = [Math.cos(config.slant), Math.sin(config.slant)]; - config.slantScale = 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1); + config.slantScale = + 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1); config.glyphEdgeCrop = parseFloat(getParam("encroach", config.glyphEdgeCrop)); - config.glyphHeightToWidth = parseFloat(getParam("stretch", config.glyphHeightToWidth)); - config.cursorEffectThreshold = getParam("cursorEffectThreshold", config.cursorEffectThreshold); - config.bloomSize = Math.max(0.01, Math.min(1, parseFloat(getParam("bloomSize", 0.5)))); + config.glyphHeightToWidth = parseFloat( + getParam("stretch", config.glyphHeightToWidth) + ); + config.cursorEffectThreshold = getParam( + "cursorEffectThreshold", + config.cursorEffectThreshold + ); + config.bloomSize = Math.max( + 0.01, + Math.min(1, parseFloat(getParam("bloomSize", 0.5))) + ); config.effect = getParam("effect", "plain"); - config.bgURL = getParam("url", "https://upload.wikimedia.org/wikipedia/commons/0/0a/Flammarion_Colored.jpg"); - config.customStripes = getParam("colors", "0.4,0.15,0.1,0.4,0.15,0.1,0.8,0.8,0.6,0.8,0.8,0.6,1.0,0.7,0.8,1.0,0.7,0.8,").split(",").map(parseFloat); + config.bgURL = getParam( + "url", + "https://upload.wikimedia.org/wikipedia/commons/0/0a/Flammarion_Colored.jpg" + ); + config.customStripes = getParam( + "colors", + "0.4,0.15,0.1,0.4,0.15,0.1,0.8,0.8,0.6,0.8,0.8,0.6,1.0,0.7,0.8,1.0,0.7,0.8," + ) + .split(",") + .map(parseFloat); config.showComputationTexture = config.effect === "none"; switch (config.cycleStyleName) {