diff --git a/index.html b/index.html index 35e4163..51c1ec5 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ const versions = { paradise: { - fontTexture: './coptic_msdf.png', + fontTexture: "./coptic_msdf.png", raindropLength: 0.5, glyphSequenceLength: 32, bloom: { @@ -46,11 +46,15 @@ hasThunder: false, hasSun: true, slant: 0, + glyphEdgeCrop: 0.0, + glyphHeightToWidth:1, isPolar: true, - numColumns: 50 + numColumns: 50, + fade: true, + cycleStyle: "cycleFasterWhenDimmed" }, nightmare: { - fontTexture: './gothic_msdf.png', + fontTexture: "./gothic_msdf.png", raindropLength: 0.6, glyphSequenceLength: 27, bloom: { @@ -70,11 +74,15 @@ hasThunder: true, hasSun: false, slant: 360 / 16, + glyphEdgeCrop: 0.0, + glyphHeightToWidth:1, isPolar: false, - numColumns: 60 + numColumns: 60, + fade: true, + cycleStyle: "cycleFasterWhenDimmed" }, ["1999"]: { - fontTexture: './matrixcode_msdf.png', + fontTexture: "./matrixcode_msdf.png", raindropLength: 1, glyphSequenceLength: 57, bloom: { @@ -111,8 +119,12 @@ hasThunder: false, hasSun: false, slant: 0, + glyphEdgeCrop: 0.0, + glyphHeightToWidth:1, isPolar: false, - numColumns: 80 + numColumns: 80, + fade: true, + cycleStyle: "cycleFasterWhenDimmed" } }; @@ -139,6 +151,9 @@ const numFontColumns = 8; const glyphSequenceLength = version.glyphSequenceLength; const slant = parseFloat(getParam(["slant", "angle"], version.slant)) * Math.PI / 180; + const glyphEdgeCrop = parseFloat(getParam("encroach", version.glyphEdgeCrop)); + const glyphHeightToWidth = parseFloat(getParam("stretch", version.glyphHeightToWidth)); + const fade = getParam("fade", version.fade).toString() == "true"; const effect = getParam("effect", "plain"); @@ -164,8 +179,12 @@ hasSun: version.hasSun, isPolar: version.isPolar, slant, + glyphEdgeCrop, + glyphHeightToWidth, + fade, showComputationTexture: effect === "none", - raindropLength + raindropLength, + cycleStyle: version.cycleStyle }); matrixRenderer.pass.renderToScreen = false; diff --git a/js/MatrixRenderer.js b/js/MatrixRenderer.js index 1f3d1d9..007dc3b 100644 --- a/js/MatrixRenderer.js +++ b/js/MatrixRenderer.js @@ -8,8 +8,12 @@ const makeMatrixRenderer = (renderer, texture, { hasSun, isPolar, slant, + glyphHeightToWidth, + glyphEdgeCrop, + fade, showComputationTexture, - raindropLength + raindropLength, + cycleStyle }) => { const matrixRenderer = {}; const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 ); @@ -22,7 +26,7 @@ const makeMatrixRenderer = (renderer, texture, { for (let i = 0; i < numColumns * numColumns; i++) { pixels[i * 4 + 0] = 0; - pixels[i * 4 + 1] = showComputationTexture ? 0 : scramble(i); + pixels[i * 4 + 1] = scramble(i); pixels[i * 4 + 2] = 0; pixels[i * 4 + 3] = 0; } @@ -95,7 +99,13 @@ const glyphVariable = gpuCompute.addVariable( brightness = mix(brightness, newBrightness, brightnessChangeBias); #endif - float glyphCycleSpeed = (brightness <= 0.0) ? 0.0 : pow(1.0 - brightness, 4.0); + float glyphCycleSpeed = 0.0; + #ifdef cycleFasterWhenDimmed + if (brightness > 0.0) glyphCycleSpeed = pow(1.0 - brightness, 4.0); + #endif + #ifdef cycleRandomly + glyphCycleSpeed = 1.0; // TODO: should be similar to brightness + #endif glyphCycle = fract(glyphCycle + deltaTime * cycleSpeed * 0.2 * glyphCycleSpeed); float symbol = floor(glyphSequenceLength * glyphCycle); float symbolX = mod(symbol, numFontColumns); @@ -120,7 +130,8 @@ const glyphVariable = gpuCompute.addVariable( ); gpuCompute.setVariableDependencies( glyphVariable, [ glyphVariable ] ); - const brightnessChangeBias = (animationSpeed * fallSpeed) == 0 ? 1 : Math.min(1, Math.abs(animationSpeed * fallSpeed)); + // const brightnessChangeBias = (animationSpeed * fallSpeed) == 0 ? 1 : Math.min(1, Math.abs(animationSpeed * fallSpeed)); + const brightnessChangeBias = 1; Object.assign(glyphVariable.material.uniforms, { time: { type: "f", value: 0 }, deltaTime: { type: "f", value: 0.01 }, @@ -142,6 +153,17 @@ const glyphVariable = gpuCompute.addVariable( glyphVariable.material.defines.showComputationTexture = 1.0; } + switch (cycleStyle) { + case "cycleFasterWhenDimmed": + glyphVariable.material.defines.cycleFasterWhenDimmed = 1.0; + break; + case "cycleRandomly": + default: + glyphVariable.material.defines.cycleRandomly = 1.0; + break; + } + + const error = gpuCompute.init(); if ( error !== null ) { console.error( error ); @@ -159,7 +181,9 @@ const glyphVariable = gpuCompute.addVariable( sharpness: { type: "f", value: sharpness }, numFontColumns: {type: "f", value: numFontColumns}, resolution: {type: "v2", value: new THREE.Vector2() }, - slant: {type: "v2", value: new THREE.Vector2(Math.cos(slant), Math.sin(slant)) } + slant: {type: "v2", value: new THREE.Vector2(Math.cos(slant), Math.sin(slant)) }, + glyphHeightToWidth: {type: "f", value: glyphHeightToWidth}, + glyphEdgeCrop: {type: "f", value: glyphEdgeCrop}, }, vertexShader: ` attribute vec2 uv; @@ -185,6 +209,8 @@ const glyphVariable = gpuCompute.addVariable( uniform float numColumns; uniform float numFontColumns; uniform vec2 slant; + uniform float glyphHeightToWidth; + uniform float glyphEdgeCrop; varying vec2 vUV; float median(float r, float g, float b) { @@ -207,6 +233,8 @@ const glyphVariable = gpuCompute.addVariable( uv = vec2(angle / PI, 1.0 - pow(radius * 0.75, 0.6)); #endif + uv.y /= glyphHeightToWidth; + vec4 glyph = texture2D(glyphs, uv); #ifdef showComputationTexture @@ -216,8 +244,20 @@ const glyphVariable = gpuCompute.addVariable( // Unpack the values from the glyph texture float brightness = glyph.r; + #ifndef fade + if (brightness < -1.0) { discard; return; } + if (brightness > 0.55) { + brightness *= 2.0; + } else { + brightness = 0.25; + } + #endif vec2 symbolUV = glyph.ba; - vec4 sample = texture2D(msdf, fract(uv * numColumns) / numFontColumns + symbolUV); + vec2 glyphUV = fract(uv * numColumns); + glyphUV -= 0.5; + glyphUV *= clamp(1.0 - glyphEdgeCrop, 0.0, 1.0); + glyphUV += 0.5; + vec4 sample = texture2D(msdf, glyphUV / numFontColumns + symbolUV); // The rest is straight up MSDF float sigDist = median(sample.r, sample.g, sample.b) - 0.5; @@ -243,6 +283,11 @@ const glyphVariable = gpuCompute.addVariable( mesh.material.defines.isPolar = 1.0; } + console.log(fade); + if (fade) { + mesh.material.defines.fade = 1.0; + } + if (showComputationTexture) { mesh.material.defines.showComputationTexture = 1.0; }