biipadmin/Burn-My-Windows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 Tweak matrix shader

Browse Source
This commit is contained in:
Simon Schneegans
2021-12-23 20:56:54 +01:00
parent 547db3a2b8
commit ca024872db
4 changed files with 166 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/matrixFont.svg
+123 -12
View File
@@ -27,9 +27,9 @@
inkscape:document-units="mm" inkscape:document-units="mm"
showgrid="true" showgrid="true"
units="px" units="px"
inkscape:zoom="7.2071955" inkscape:zoom="3.2650549"
inkscape:cx="45.163199" inkscape:cx="194.33058"
inkscape:cy="43.428821" inkscape:cy="126.49098"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1131" inkscape:window-height="1131"
inkscape:window-x="0" inkscape:window-x="0"
@@ -41,28 +41,139 @@
id="grid8183" id="grid8183"
empspacing="2" empspacing="2"
spacingx="4.2333333" spacingx="4.2333333"
spacingy="4.2333333" /> spacingy="4.2333333"
color="#cbcbff"
opacity="0.1254902"
empcolor="#ffffff"
empopacity="0.25098039" />
</sodipodi:namedview> </sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<filter <filter
inkscape:collect="always" inkscape:collect="always"
style="color-interpolation-filters:sRGB" style="color-interpolation-filters:sRGB"
id="filter94388" id="filter972"
x="-0.022532737" x="-0.014295474"
y="-0.022056037" y="-0.01399304"
width="1.0450655" width="1.0285909"
height="1.0441121"> height="1.0279861">
<feGaussianBlur <feGaussianBlur
inkscape:collect="always" inkscape:collect="always"
stdDeviation="1.2355019" stdDeviation="0.78384108"
id="feGaussianBlur94390" /> id="feGaussianBlur970" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter974"
x="-0.024387008"
y="-0.023871079"
width="1.048774"
height="1.0477422">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="1.3371742"
id="feGaussianBlur976" />
</filter> </filter>
</defs> </defs>
<g <g
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer1"> id="layer1">
<text
xml:space="preserve"
style="font-weight:300;font-size:7.60522px;line-height:1.112;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Light';letter-spacing:3.89202px;opacity:1;mix-blend-mode:normal;stroke-width:0.190131;filter:url(#filter972)"
x="1.7241572"
y="6.4795361"
id="text968"
inkscape:export-filename="/home/simon/Linux-Projects/Burn-My-Windows/resources/img/text3003.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="6.4795361"
id="tspan934">ABCDEFGHIJKLMNOP</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="14.946301"
id="tspan936">QRSTUVWXYZabcdef</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="23.413067"
id="tspan938">ghijklmnopqrstuv</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="31.879831"
id="tspan940">wxyzÀÁÂÃÄÅÆÇÈÉÊË</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="40.346596"
id="tspan942">ÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜ</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="48.813362"
id="tspan944">ÝÞßàáâãäåæçèéêëì</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="57.280125"
id="tspan946">íîïðΑαΒβΓγΔδΕεΖζ</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="65.746887"
id="tspan948">ΗηΘθΙιΚκΛλΜμΝνΞξ</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="74.213654"
id="tspan950">ΟοΠπΡρΣσΤτΥυΦφΧχ</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="82.68042"
id="tspan952">ΨψΩω1234567890Аа</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="91.147186"
id="tspan954">БбВвГгДдЕеЖжЗзИи</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="99.613953"
id="tspan956">ЙйКкЛлМмНнОоПпРр</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="108.08072"
id="tspan958">СсТтУуФфХхЦцЧчШш</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="116.54748"
id="tspan960">ЩщЬьЭэЮюЯя!&quot;#$%&amp;</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="125.01424"
id="tspan962">()*+,-/:;&lt;=&gt;?@©§</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="133.48102"
id="tspan964">[\]{|}~ªº¿®¬½¼¡¶</tspan><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#ffffff;fill-opacity:1;stroke-width:0.190131"
x="1.7241572"
y="141.94777"
id="tspan966" /></text>
<text <text
xml:space="preserve" xml:space="preserve"
style="font-weight:300;font-size:7.60522px;line-height:1.112;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Light';letter-spacing:3.89202px;opacity:1;stroke-width:0.190131" style="font-weight:300;font-size:7.60522px;line-height:1.112;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Light';letter-spacing:3.89202px;opacity:1;stroke-width:0.190131"
@@ -156,7 +267,7 @@
id="tspan94442" /></text> id="tspan94442" /></text>
<text <text
xml:space="preserve" xml:space="preserve"
style="font-weight:300;font-size:7.60522px;line-height:1.112;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Light';letter-spacing:3.89202px;opacity:0.87766207;mix-blend-mode:normal;stroke-width:0.190131;filter:url(#filter94388)" style="font-weight:300;font-size:7.60522px;line-height:1.112;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Light';letter-spacing:3.89202px;opacity:1;mix-blend-mode:normal;stroke-width:0.190131;filter:url(#filter974)"
x="1.7241572" x="1.7241572"
y="6.4795361" y="6.4795361"
id="text3003" id="text3003"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 21 KiB

resources/img/matrixFont.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 KiB

After

Width:  |  Height:  |  Size: 230 KiB

src/extension/MatrixShader.js
+41 -34
View File
@@ -27,6 +27,8 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
_init(settings) { _init(settings) {
super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER}); super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
// Load the font texture. As the shader is re-created for each window animation, this
// texture is also re-created each time. This could be improved in the future!
const fontData = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png'); const fontData = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png');
this._fontTexture = new Clutter.Image(); this._fontTexture = new Clutter.Image();
this._fontTexture.set_data( this._fontTexture.set_data(
@@ -34,7 +36,7 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888, fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
fontData.width, fontData.height, fontData.rowstride); fontData.width, fontData.height, fontData.rowstride);
// This is roughly based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA). // This is partially based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA).
this.set_shader_source(` this.set_shader_source(`
// Inject some common shader snippets. // Inject some common shader snippets.
@@ -45,68 +47,73 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
// These may be configurable in the future. // These may be configurable in the future.
const float EDGE_FADE = 30; const float EDGE_FADE = 30;
const float FADE_WIDTH = 50; const float FADE_WIDTH = 150;
const float TRAIL_LENGTH = 0.2; const float TRAIL_LENGTH = 0.2;
const float FINAL_FADE_START_TIME = 0.8; const float FINAL_FADE_START_TIME = 0.8;
const float LETTER_TILES = 16.0; const float LETTER_TILES = 16.0;
const float LETTER_SIZE = 16.0; const float LETTER_SIZE = 20.0;
const float BRIGHTNESS_BOOST = 2; const float LETTER_FLICKER_SPEED = 2.0;
const float RANDOMNESS = 1.0; const float RANDOMNESS = 1.0;
// This returns a flickering grid of random letters.
float getText(vec2 fragCoord) { float getText(vec2 fragCoord) {
vec2 coords = fragCoord * vec2(uSizeX, uSizeY); vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
vec2 uv = mod(coords.xy, LETTER_SIZE)/LETTER_SIZE; vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
vec2 block = coords/LETTER_SIZE - uv; vec2 block = pixelCoords/LETTER_SIZE - uv;
// scale the letters up a bit // Choose random letter.
uv = uv*.8+.1; uv += floor(rand2(floor(rand(block)*vec2(12.9898,78.233) + LETTER_FLICKER_SPEED*uTime + 42.254))*LETTER_TILES);
// bring back into 0-1 range return texture2D(uFontTexture, uv/LETTER_TILES).r;
uv += floor(rand2(block/512 + uTime*.0000001)*LETTER_TILES);
uv /= LETTER_TILES;
// flip letters horizontally
uv.x = -uv.x+1.0;
return texture2D(uFontTexture, uv).r;
} }
// This returns two values: The first are gradients for the "raindrops" which move
// from top to bottom. This is used for fading the letters. The second value is set
// to one below each drop and to zero above it. This second value is used for fading
// the window texture.
vec2 getRain(vec2 fragCoord) { vec2 getRain(vec2 fragCoord) {
vec2 coords = fragCoord * vec2(uSizeX, uSizeY); vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
coords.x -= mod(coords.x, LETTER_SIZE); coords.x -= mod(coords.x, LETTER_SIZE);
float delay = abs(sin(coords.x * 3.0)) * mix(0.0, 1.0, RANDOMNESS); float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
float speed = cos(coords.x * 7.0) * mix(0.0, 0.3, RANDOMNESS) + 1.5; float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
float distToDrop = (uProgress*2-delay)*speed - fragCoord.y; float distToDrop = (uProgress*2-delay)*speed - fragCoord.y;
return vec2(distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0, float rainAlpha = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH); float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
return vec2(rainAlpha, windowAlpha);
} }
void main() { void main() {
vec3 color = vec3(0.1,1,0.35); // Get a cool matrix effect. See comments for those methods above.
// Get a cool matrix effect.
vec2 rain = getRain(cogl_tex_coord_in[0].st); vec2 rain = getRain(cogl_tex_coord_in[0].st);
float text = getText(cogl_tex_coord_in[0].st); float text = getText(cogl_tex_coord_in[0].st);
// Get the window texture and fade it according to the effect mask. // Get the window texture and fade it according to the effect mask.
float windowAlpha = 1 - rain.y; cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * windowAlpha;
float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/(1-FINAL_FADE_START_TIME), 0, 1);
float textAlpha = finalFade * rain.x * BRIGHTNESS_BOOST;
// This is used to fade out the remaining trails in the end.
float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
(1-FINAL_FADE_START_TIME), 0, 1);
float rainAlpha = finalFade * rain.x;
// Fade at window borders. // Fade at window borders.
vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY); vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
textAlpha *= clamp(pos.x / EDGE_FADE, 0, 1); rainAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
textAlpha *= clamp(pos.y / EDGE_FADE, 0, 1); rainAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
textAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1); rainAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
textAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1); rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
// Add the fire to the window. // Add the matrix effect to the window.
cogl_color_out.rgb += color * textAlpha * text; vec3 trailColor = vec3(0.1,1,0.35);
vec3 tipColor = vec3(1,1,1);
cogl_color_out.rgb += mix(trailColor, tipColor, pow(rainAlpha, 5)) * rainAlpha * text;
// These are pretty useful for understanding how this works.
// cogl_color_out = vec4(vec3(text), 1);
// cogl_color_out = vec4(vec3(rain.x), 1);
// cogl_color_out = vec4(vec3(rain.y), 1);
} }
`); `);
}; };
src/extension/shaderSnippets.js
+1 -1
View File
@@ -37,7 +37,7 @@ function standardUniforms() {
function noise() { function noise() {
return ` return `
float rand(vec2 co) { float rand(vec2 co) {
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
} }
vec2 rand2(vec2 co) { vec2 rand2(vec2 co) {