eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-21 07:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added backgroundColor support and improved stripe colors handling in config.

Browse Source
This commit is contained in:
Rezmason
2021-09-12 00:50:51 -07:00
parent 51f1b6ebf5
commit 7910ca0553
3 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/config.js
View File

@@ -17,6 +17,7 @@ const fonts = {
}; };
const defaults = { const defaults = {
backgroundColor: [0, 0, 0],
volumetric: false, volumetric: false,
animationSpeed: 1, animationSpeed: 1,
forwardSpeed: 0.25, forwardSpeed: 0.25,
@@ -160,11 +161,13 @@ const paramMapping = {
parser: s => nullNaN(range(parseFloat(s), 0, 1)) parser: s => nullNaN(range(parseFloat(s), 0, 1))
}, },
url: { key: "bgURL", parser: s => s }, url: { key: "bgURL", parser: s => s },
colors: { key: "stripeColors", parser: s => s }, stripeColors: { key: "stripeColors", parser: s => s },
backgroundColor: { key: "backgroundColor", parser: s => s.split(",").map(parseFloat) },
volumetric: { key: "volumetric", parser: s => s.toLowerCase().includes("true") } volumetric: { key: "volumetric", parser: s => s.toLowerCase().includes("true") }
}; };
paramMapping.dropLength = paramMapping.raindropLength; paramMapping.dropLength = paramMapping.raindropLength;
paramMapping.angle = paramMapping.slant; paramMapping.angle = paramMapping.slant;
paramMapping.colors = paramMapping.stripeColors;
export default (searchString, make1DTexture) => { export default (searchString, make1DTexture) => {
const urlParams = Object.fromEntries( const urlParams = Object.fromEntries(

8
js/palettePass.js
View File

@@ -1,4 +1,4 @@
import { make1DTexture, makePassFBO, makePass } from "./utils.js"; import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
const makePalette = (regl, entries) => { const makePalette = (regl, entries) => {
const PALETTE_SIZE = 2048; const PALETTE_SIZE = 2048;
@@ -63,6 +63,7 @@ export default (regl, config, inputs) => {
uniform sampler2D palette; uniform sampler2D palette;
uniform float ditherMagnitude; uniform float ditherMagnitude;
uniform float time; uniform float time;
uniform vec3 backgroundColor;
varying vec2 vUV; varying vec2 vUV;
highp float rand( const in vec2 uv, const in float t ) { highp float rand( const in vec2 uv, const in float t ) {
@@ -74,11 +75,14 @@ export default (regl, config, inputs) => {
void main() { void main() {
float brightness = texture2D( tex, vUV ).r + texture2D( bloomTex, vUV ).r; float brightness = texture2D( tex, vUV ).r + texture2D( bloomTex, vUV ).r;
float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude; float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
gl_FragColor = texture2D( palette, vec2(at, 0.0)); gl_FragColor = texture2D( palette, vec2(at, 0.0)) + vec4(backgroundColor, 0.0);
} }
`, `,
uniforms: { uniforms: {
...extractEntries(config, [
"backgroundColor",
]),
tex: inputs.primary, tex: inputs.primary,
bloomTex: inputs.bloom, bloomTex: inputs.bloom,
palette, palette,

8
js/stripePass.js
View File

@@ -1,4 +1,4 @@
import { make1DTexture, makePassFBO, makePass } from "./utils.js"; import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
const neapolitanStripeColors = [ const neapolitanStripeColors = [
[0.4, 0.15, 0.1], [0.4, 0.15, 0.1],
@@ -47,6 +47,7 @@ export default (regl, config, inputs) => {
uniform sampler2D stripes; uniform sampler2D stripes;
uniform float ditherMagnitude; uniform float ditherMagnitude;
uniform float time; uniform float time;
uniform vec3 backgroundColor;
varying vec2 vUV; varying vec2 vUV;
highp float rand( const in vec2 uv, const in float t ) { highp float rand( const in vec2 uv, const in float t ) {
@@ -59,11 +60,14 @@ export default (regl, config, inputs) => {
vec3 color = texture2D(stripes, vUV).rgb; vec3 color = texture2D(stripes, vUV).rgb;
float brightness = min(1., texture2D(tex, vUV).r * 2.) + texture2D(bloomTex, vUV).r; float brightness = min(1., texture2D(tex, vUV).r * 2.) + texture2D(bloomTex, vUV).r;
float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude; float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
gl_FragColor = vec4(color * at, 1.0); gl_FragColor = vec4(color * at + backgroundColor, 1.0);
} }
`, `,
uniforms: { uniforms: {
...extractEntries(config, [
"backgroundColor",
]),
tex: inputs.primary, tex: inputs.primary,
bloomTex: inputs.bloom, bloomTex: inputs.bloom,
stripes, stripes,