🔧 Tweak matrix shader
This commit is contained in:
Simon Schneegans
+123
-12
@@ -27,9 +27,9 @@
|
||||
inkscape:document-units="mm"
|
||||
showgrid="true"
|
||||
units="px"
|
||||
inkscape:zoom="7.2071955"
|
||||
inkscape:cx="45.163199"
|
||||
inkscape:cy="43.428821"
|
||||
inkscape:zoom="3.2650549"
|
||||
inkscape:cx="194.33058"
|
||||
inkscape:cy="126.49098"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1131"
|
||||
inkscape:window-x="0"
|
||||
@@ -41,28 +41,139 @@
|
||||
id="grid8183"
|
||||
empspacing="2"
|
||||
spacingx="4.2333333"
|
||||
spacingy="4.2333333" />
|
||||
spacingy="4.2333333"
|
||||
color="#cbcbff"
|
||||
opacity="0.1254902"
|
||||
empcolor="#ffffff"
|
||||
empopacity="0.25098039" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs2">
|
||||
<filter
|
||||
inkscape:collect="always"
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter94388"
|
||||
x="-0.022532737"
|
||||
y="-0.022056037"
|
||||
width="1.0450655"
|
||||
height="1.0441121">
|
||||
id="filter972"
|
||||
x="-0.014295474"
|
||||
y="-0.01399304"
|
||||
width="1.0285909"
|
||||
height="1.0279861">
|
||||
<feGaussianBlur
|
||||
inkscape:collect="always"
|
||||
stdDeviation="1.2355019"
|
||||
id="feGaussianBlur94390" />
|
||||
stdDeviation="0.78384108"
|
||||
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>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
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">ЩщЬьЭэЮюЯя!"#$%&</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">()*+,-/:;<=>?@©§</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
|
||||
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"
|
||||
@@ -156,7 +267,7 @@
|
||||
id="tspan94442" /></text>
|
||||
<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: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"
|
||||
y="6.4795361"
|
||||
id="text3003"
|
||||
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 230 KiB |
@@ -27,6 +27,8 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
||||
_init(settings) {
|
||||
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');
|
||||
this._fontTexture = new Clutter.Image();
|
||||
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.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(`
|
||||
|
||||
// Inject some common shader snippets.
|
||||
@@ -45,68 +47,73 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
||||
|
||||
// These may be configurable in the future.
|
||||
const float EDGE_FADE = 30;
|
||||
const float FADE_WIDTH = 50;
|
||||
const float FADE_WIDTH = 150;
|
||||
const float TRAIL_LENGTH = 0.2;
|
||||
const float FINAL_FADE_START_TIME = 0.8;
|
||||
const float LETTER_TILES = 16.0;
|
||||
const float LETTER_SIZE = 16.0;
|
||||
const float BRIGHTNESS_BOOST = 2;
|
||||
const float LETTER_SIZE = 20.0;
|
||||
const float LETTER_FLICKER_SPEED = 2.0;
|
||||
const float RANDOMNESS = 1.0;
|
||||
|
||||
// This returns a flickering grid of random letters.
|
||||
float getText(vec2 fragCoord) {
|
||||
vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
|
||||
vec2 uv = mod(coords.xy, LETTER_SIZE)/LETTER_SIZE;
|
||||
vec2 block = coords/LETTER_SIZE - uv;
|
||||
vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
|
||||
vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
|
||||
vec2 block = pixelCoords/LETTER_SIZE - uv;
|
||||
|
||||
// scale the letters up a bit
|
||||
uv = uv*.8+.1;
|
||||
// Choose random letter.
|
||||
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
|
||||
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;
|
||||
return texture2D(uFontTexture, uv/LETTER_TILES).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 coords = fragCoord * vec2(uSizeX, uSizeY);
|
||||
coords.x -= mod(coords.x, LETTER_SIZE);
|
||||
|
||||
float delay = abs(sin(coords.x * 3.0)) * mix(0.0, 1.0, RANDOMNESS);
|
||||
float speed = cos(coords.x * 7.0) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
|
||||
float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
|
||||
float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
|
||||
|
||||
float distToDrop = (uProgress*2-delay)*speed - fragCoord.y;
|
||||
return vec2(distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0,
|
||||
clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH);
|
||||
float distToDrop = (uProgress*2-delay)*speed - fragCoord.y;
|
||||
float rainAlpha = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
|
||||
float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
|
||||
return vec2(rainAlpha, windowAlpha);
|
||||
}
|
||||
|
||||
void main() {
|
||||
|
||||
vec3 color = vec3(0.1,1,0.35);
|
||||
|
||||
// Get a cool matrix effect.
|
||||
// Get a cool matrix effect. See comments for those methods above.
|
||||
vec2 rain = getRain(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.
|
||||
float windowAlpha = 1 - 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;
|
||||
cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
|
||||
|
||||
// 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.
|
||||
vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
|
||||
textAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
|
||||
textAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
|
||||
textAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
|
||||
textAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
|
||||
|
||||
// Add the fire to the window.
|
||||
cogl_color_out.rgb += color * textAlpha * text;
|
||||
// Add the matrix effect to the window.
|
||||
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);
|
||||
}
|
||||
`);
|
||||
};
|
||||
|
||||
@@ -37,7 +37,7 @@ function standardUniforms() {
|
||||
function noise() {
|
||||
return `
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user