🎉 Make matrix effect configurable
This commit is contained in:
@@ -51,6 +51,10 @@ var PreferencesDialog = class PreferencesDialog {
|
|||||||
this._bindColorButton('fire-color-3');
|
this._bindColorButton('fire-color-3');
|
||||||
this._bindColorButton('fire-color-4');
|
this._bindColorButton('fire-color-4');
|
||||||
this._bindColorButton('fire-color-5');
|
this._bindColorButton('fire-color-5');
|
||||||
|
this._bindAdjustment('matrix-scale');
|
||||||
|
this._bindAdjustment('matrix-randomness');
|
||||||
|
this._bindColorButton('matrix-trail-color');
|
||||||
|
this._bindColorButton('matrix-tip-color');
|
||||||
|
|
||||||
// The fire-gradient-reset button needs to by bound explicitly.
|
// The fire-gradient-reset button needs to by bound explicitly.
|
||||||
this._builder.get_object('reset-fire-colors').connect('clicked', () => {
|
this._builder.get_object('reset-fire-colors').connect('clicked', () => {
|
||||||
@@ -99,7 +103,8 @@ var PreferencesDialog = class PreferencesDialog {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Colors are stored as strings like 'rgb(1, 0.5, 0)'. As Gio.Settings.bind_with_mapping
|
// Colors are stored as strings like 'rgb(1, 0.5, 0)'. As Gio.Settings.bind_with_mapping
|
||||||
// is not available yet, we need to do the color conversion manually.
|
// is not available yet, we need to do the color conversion manually. It also binds the
|
||||||
|
// corresponding reset button.
|
||||||
_bindColorButton(settingsKey) {
|
_bindColorButton(settingsKey) {
|
||||||
|
|
||||||
const button = this._builder.get_object(settingsKey);
|
const button = this._builder.get_object(settingsKey);
|
||||||
@@ -120,6 +125,8 @@ var PreferencesDialog = class PreferencesDialog {
|
|||||||
|
|
||||||
// Initialize the button with the state in the settings.
|
// Initialize the button with the state in the settings.
|
||||||
settingSignalHandler();
|
settingSignalHandler();
|
||||||
|
|
||||||
|
this._bindResetButton(settingsKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Connects any widget's property to a settings key. The widget must have the same ID as
|
// Connects any widget's property to a settings key. The widget must have the same ID as
|
||||||
@@ -129,6 +136,12 @@ var PreferencesDialog = class PreferencesDialog {
|
|||||||
settingsKey, this._builder.get_object(settingsKey), property,
|
settingsKey, this._builder.get_object(settingsKey), property,
|
||||||
Gio.SettingsBindFlags.DEFAULT);
|
Gio.SettingsBindFlags.DEFAULT);
|
||||||
|
|
||||||
|
this._bindResetButton(settingsKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Searches for a reset button for the given settings key and make it reset the settings
|
||||||
|
// key when clicked.
|
||||||
|
_bindResetButton(settingsKey) {
|
||||||
const resetButton = this._builder.get_object('reset-' + settingsKey);
|
const resetButton = this._builder.get_object('reset-' + settingsKey);
|
||||||
if (resetButton) {
|
if (resetButton) {
|
||||||
resetButton.connect('clicked', () => {
|
resetButton.connect('clicked', () => {
|
||||||
|
|||||||
@@ -283,6 +283,199 @@
|
|||||||
</object>
|
</object>
|
||||||
</child>
|
</child>
|
||||||
|
|
||||||
|
<child>
|
||||||
|
<object class="GtkBox">
|
||||||
|
<property name="margin-top">30</property>
|
||||||
|
<property name="margin-bottom">10</property>
|
||||||
|
<child>
|
||||||
|
<object class="GtkLabel">
|
||||||
|
<property name="label">Matrix Options</property>
|
||||||
|
<property name="xalign">0</property>
|
||||||
|
<property name="hexpand">1</property>
|
||||||
|
<style>
|
||||||
|
<class name="title-4" />
|
||||||
|
</style>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
|
||||||
|
<child>
|
||||||
|
<object class="GtkFrame">
|
||||||
|
<child>
|
||||||
|
<object class="GtkListBox">
|
||||||
|
<property name="selection-mode">none</property>
|
||||||
|
<property name="show-separators">1</property>
|
||||||
|
<style>
|
||||||
|
<class name="rich-list" />
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<child>
|
||||||
|
<object class="GtkListBoxRow">
|
||||||
|
<property name="activatable">0</property>
|
||||||
|
<child>
|
||||||
|
<object class="GtkBox">
|
||||||
|
<child>
|
||||||
|
<object class="GtkLabel">
|
||||||
|
<property name="label" translatable="yes">Matrix Scale</property>
|
||||||
|
<property name="xalign">0</property>
|
||||||
|
<property name="halign">start</property>
|
||||||
|
<property name="valign">center</property>
|
||||||
|
<property name="hexpand">1</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkScale">
|
||||||
|
<property name="halign">end</property>
|
||||||
|
<property name="valign">center</property>
|
||||||
|
<property name="draw-value">1</property>
|
||||||
|
<property name="digits">0</property>
|
||||||
|
<property name="value-pos">left</property>
|
||||||
|
<property name="width-request">300</property>
|
||||||
|
<property name="adjustment">
|
||||||
|
<object class="GtkAdjustment" id="matrix-scale">
|
||||||
|
<property name="upper">50</property>
|
||||||
|
<property name="lower">5</property>
|
||||||
|
<property name="step-increment">1</property>
|
||||||
|
<property name="page-increment">4</property>
|
||||||
|
</object>
|
||||||
|
</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkButton" id="reset-matrix-scale">
|
||||||
|
<property name="icon-name">edit-clear-symbolic</property>
|
||||||
|
<property name="tooltip-text">Reset to Default Value</property>
|
||||||
|
<style>
|
||||||
|
<class name="flat" />
|
||||||
|
</style>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
|
||||||
|
<child>
|
||||||
|
<object class="GtkListBoxRow">
|
||||||
|
<property name="activatable">0</property>
|
||||||
|
<child>
|
||||||
|
<object class="GtkBox">
|
||||||
|
<child>
|
||||||
|
<object class="GtkLabel">
|
||||||
|
<property name="label" translatable="yes">Matrix Randomness</property>
|
||||||
|
<property name="xalign">0</property>
|
||||||
|
<property name="halign">start</property>
|
||||||
|
<property name="valign">center</property>
|
||||||
|
<property name="hexpand">1</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkScale">
|
||||||
|
<property name="halign">end</property>
|
||||||
|
<property name="valign">center</property>
|
||||||
|
<property name="draw-value">1</property>
|
||||||
|
<property name="digits">2</property>
|
||||||
|
<property name="value-pos">left</property>
|
||||||
|
<property name="width-request">300</property>
|
||||||
|
<property name="adjustment">
|
||||||
|
<object class="GtkAdjustment" id="matrix-randomness">
|
||||||
|
<property name="upper">1.0</property>
|
||||||
|
<property name="lower">0.0</property>
|
||||||
|
<property name="step-increment">0.01</property>
|
||||||
|
<property name="page-increment">0.1</property>
|
||||||
|
</object>
|
||||||
|
</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkButton" id="reset-matrix-randomness">
|
||||||
|
<property name="icon-name">edit-clear-symbolic</property>
|
||||||
|
<property name="tooltip-text">Reset to Default Value</property>
|
||||||
|
<style>
|
||||||
|
<class name="flat" />
|
||||||
|
</style>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
|
||||||
|
<child>
|
||||||
|
<object class="GtkListBoxRow">
|
||||||
|
<property name="activatable">0</property>
|
||||||
|
<child>
|
||||||
|
<object class="GtkBox">
|
||||||
|
<child>
|
||||||
|
<object class="GtkLabel">
|
||||||
|
<property name="label" translatable="yes">Trail Color</property>
|
||||||
|
<property name="xalign">0</property>
|
||||||
|
<property name="halign">start</property>
|
||||||
|
<property name="valign">center</property>
|
||||||
|
<property name="hexpand">1</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkColorButton" id="matrix-trail-color">
|
||||||
|
<property name="use_alpha">0</property>
|
||||||
|
<property name="show_editor">1</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkButton" id="reset-matrix-trail-colors">
|
||||||
|
<property name="icon-name">edit-clear-symbolic</property>
|
||||||
|
<property name="tooltip-text">Reset to Default Value</property>
|
||||||
|
<style>
|
||||||
|
<class name="flat" />
|
||||||
|
</style>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
|
||||||
|
<child>
|
||||||
|
<object class="GtkListBoxRow">
|
||||||
|
<property name="activatable">0</property>
|
||||||
|
<child>
|
||||||
|
<object class="GtkBox">
|
||||||
|
<child>
|
||||||
|
<object class="GtkLabel">
|
||||||
|
<property name="label" translatable="yes">Tip Color</property>
|
||||||
|
<property name="xalign">0</property>
|
||||||
|
<property name="halign">start</property>
|
||||||
|
<property name="valign">center</property>
|
||||||
|
<property name="hexpand">1</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkColorButton" id="matrix-tip-color">
|
||||||
|
<property name="use_alpha">0</property>
|
||||||
|
<property name="show_editor">1</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="GtkButton" id="reset-matrix-tip-colors">
|
||||||
|
<property name="icon-name">edit-clear-symbolic</property>
|
||||||
|
<property name="tooltip-text">Reset to Default Value</property>
|
||||||
|
<style>
|
||||||
|
<class name="flat" />
|
||||||
|
</style>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
|
||||||
|
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
|
||||||
|
|
||||||
</object>
|
</object>
|
||||||
</child>
|
</child>
|
||||||
|
|||||||
@@ -51,6 +51,31 @@
|
|||||||
<description>The fifth color of the fire gradient.</description>
|
<description>The fifth color of the fire gradient.</description>
|
||||||
</key>
|
</key>
|
||||||
|
|
||||||
|
|
||||||
|
<key name="matrix-scale" type="i">
|
||||||
|
<default>20</default>
|
||||||
|
<summary>Matrix Scale</summary>
|
||||||
|
<description>The size of the matrix letters.</description>
|
||||||
|
</key>
|
||||||
|
|
||||||
|
<key name="matrix-randomness" type="d">
|
||||||
|
<default>1.0</default>
|
||||||
|
<summary>Matrix Randomness</summary>
|
||||||
|
<description>The randomness of the matrix effect.</description>
|
||||||
|
</key>
|
||||||
|
|
||||||
|
<key name="matrix-tip-color" type="s">
|
||||||
|
<default>"rgb(255, 255, 255)"</default>
|
||||||
|
<summary>Matrix Tip Color</summary>
|
||||||
|
<description>The color of the matrix trail tips.</description>
|
||||||
|
</key>
|
||||||
|
|
||||||
|
<key name="matrix-trail-color" type="s">
|
||||||
|
<default>"rgb(25, 255, 89)"</default>
|
||||||
|
<summary>Matrix Trail Color</summary>
|
||||||
|
<description>The color matrix trails.</description>
|
||||||
|
</key>
|
||||||
|
|
||||||
</schema>
|
</schema>
|
||||||
|
|
||||||
</schemalist>
|
</schemalist>
|
||||||
@@ -36,6 +36,11 @@ 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);
|
||||||
|
|
||||||
|
const trailColor =
|
||||||
|
Clutter.Color.from_string(settings.get_string('matrix-trail-color'))[1];
|
||||||
|
const tipColor =
|
||||||
|
Clutter.Color.from_string(settings.get_string('matrix-tip-color'))[1];
|
||||||
|
|
||||||
// This is partially 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(`
|
||||||
|
|
||||||
@@ -51,9 +56,9 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
|||||||
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 = 20.0;
|
const float LETTER_SIZE = ${settings.get_int('matrix-scale')};
|
||||||
const float LETTER_FLICKER_SPEED = 2.0;
|
const float LETTER_FLICKER_SPEED = 2.0;
|
||||||
const float RANDOMNESS = 1.0;
|
const float RANDOMNESS = ${settings.get_double('matrix-randomness')};
|
||||||
|
|
||||||
// This returns a flickering grid of random letters.
|
// This returns a flickering grid of random letters.
|
||||||
float getText(vec2 fragCoord) {
|
float getText(vec2 fragCoord) {
|
||||||
@@ -106,8 +111,12 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
|||||||
rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
|
rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
|
||||||
|
|
||||||
// Add the matrix effect to the window.
|
// Add the matrix effect to the window.
|
||||||
vec3 trailColor = vec3(0.1,1,0.35);
|
vec3 trailColor = vec3(${trailColor.red / 255},
|
||||||
vec3 tipColor = vec3(1,1,1);
|
${trailColor.green / 255},
|
||||||
|
${trailColor.blue / 255});
|
||||||
|
vec3 tipColor = vec3(${tipColor.red / 255},
|
||||||
|
${tipColor.green / 255},
|
||||||
|
${tipColor.blue / 255});
|
||||||
cogl_color_out.rgb += mix(trailColor, tipColor, pow(rainAlpha, 5)) * rainAlpha * text;
|
cogl_color_out.rgb += mix(trailColor, tipColor, pow(rainAlpha, 5)) * rainAlpha * text;
|
||||||
|
|
||||||
// These are pretty useful for understanding how this works.
|
// These are pretty useful for understanding how this works.
|
||||||
|
|||||||
Reference in New Issue
Block a user