From 87eb52595089b0b522cf64e42a19e0785ff2cfd9 Mon Sep 17 00:00:00 2001 From: Filippo Scognamiglio Date: Thu, 3 Apr 2014 15:06:16 +0200 Subject: [PATCH] Improved scanlines (I'm finally happy with them) and added pixelated effect. Design improvements in the setting window. --- app/SettingComponent.qml | 2 +- app/SettingsWindow.qml | 177 +++++++++++++++++++++++++-------------- app/ShaderManager.qml | 30 +++++-- app/ShaderSettings.qml | 22 +++-- app/SimpleSlider.qml | 5 -- app/Terminal.qml | 10 --- app/app.qmlproject.user | 2 +- 7 files changed, 153 insertions(+), 95 deletions(-) diff --git a/app/SettingComponent.qml b/app/SettingComponent.qml index 79c4417..7fc7cd0 100644 --- a/app/SettingComponent.qml +++ b/app/SettingComponent.qml @@ -33,7 +33,7 @@ RowLayout { id: setting_component anchors.left: parent.left anchors.right: parent.right - spacing: 10 + spacing: 25 CheckBox{ id: check diff --git a/app/SettingsWindow.qml b/app/SettingsWindow.qml index f11210f..d664f5a 100644 --- a/app/SettingsWindow.qml +++ b/app/SettingsWindow.qml @@ -28,24 +28,24 @@ ApplicationWindow { id: settings_window title: qsTr("Settings") width: 640 - height: 400 + height: 460 - //modality: Qt.ApplicationModal + modality: Qt.ApplicationModal TabView{ anchors.fill: parent - + anchors.margins: 10 Tab{ title: qsTr("Appearance") - anchors.margins: 20 - anchors.top: parent.top - + anchors.fill: parent + anchors.margins: 15 GridLayout{ anchors.fill: parent columns: 2 GroupBox{ + anchors.left: parent.left + anchors.right: parent.right Layout.columnSpan: 2 - Layout.fillWidth: true title: qsTr("Profile") ComboBox{ anchors.fill: parent @@ -58,8 +58,8 @@ ApplicationWindow { GroupBox{ id: fontbox title: qsTr("Font") + Layout.fillHeight: true Layout.fillWidth: true - Layout.fillHeight:true GridLayout{ anchors.fill: parent columns: 2 @@ -92,8 +92,8 @@ ApplicationWindow { } GroupBox{ title: qsTr("Background") + Layout.fillHeight: true Layout.fillWidth: true - Layout.fillHeight:true GridLayout{ anchors.fill: parent columns: 2 @@ -105,7 +105,6 @@ ApplicationWindow { onCurrentIndexChanged: shadersettings.frames_index = currentIndex } Item{Layout.fillHeight: true} - ColorButton{ height: 50 Layout.fillWidth: true @@ -117,25 +116,38 @@ ApplicationWindow { } } GroupBox{ - title: qsTr("Background") + title: qsTr("Lights") Layout.fillWidth: true Layout.columnSpan: 2 anchors.left: parent.left anchors.right: parent.right - ColumnLayout{ + GridLayout{ Layout.columnSpan: 2 + columns: 2 + rows: 2 anchors.left: parent.left anchors.right: parent.right + Text{text: qsTr("Contrast")} SimpleSlider{ - name: "Contrast" onValueChanged: shadersettings.contrast = value value: shadersettings.contrast } + Text{text: qsTr("Brightness")} SimpleSlider{ - name: "Brightness" onValueChanged: shadersettings.brightness = value value: shadersettings.brightness } + //TODO decide later what to do with scaling + // SimpleSlider{ + // name: "Terminal Scaling" + // onValueChanged: shadersettings.terminal_scaling = value + // value: shadersettings.terminal_scaling + // } + // SimpleSlider{ + // name: "Window Scaling" + // onValueChanged: shadersettings.window_scaling = value + // value: shadersettings.window_scaling + // } } } } @@ -144,59 +156,96 @@ ApplicationWindow { Tab{ title: qsTr("Eye-candy") anchors.fill: parent - anchors.margins: 20 + anchors.margins: 15 - GroupBox{ - title: qsTr("Effects") + ColumnLayout{ anchors.fill: parent - - ColumnLayout{ - anchors.fill: parent - - SettingComponent{ - name: "Scanlines" - onValueChanged: shadersettings.scanlines = value - _value: shadersettings.scanlines + GroupBox{ + title: qsTr("Rasterization") + anchors.left: parent.left + anchors.right: parent.right + ColumnLayout{ + anchors.left: parent.left + anchors.right: parent.right + RowLayout{ + anchors.left: parent.left + anchors.right: parent.right + ExclusiveGroup { id: rasterizationgroup } + RadioButton { + text: qsTr("No Rasterization") + exclusiveGroup: rasterizationgroup + checked: shadersettings.rasterization === shadersettings.no_rasterization + onCheckedChanged: if(checked) + shadersettings.rasterization = shadersettings.no_rasterization + } + RadioButton { + text: qsTr("Scanlines") + exclusiveGroup: rasterizationgroup + checked: shadersettings.rasterization === shadersettings.scanline_rasterization + onCheckedChanged: if(checked) + shadersettings.rasterization = shadersettings.scanline_rasterization + } + RadioButton { + text: qsTr("Pixels") + exclusiveGroup: rasterizationgroup + checked: shadersettings.rasterization === shadersettings.pixel_rasterization + onCheckedChanged: if(checked) + shadersettings.rasterization = shadersettings.pixel_rasterization + } + } + SimpleSlider{ + Layout.fillWidth: true + value: shadersettings.rasterization_strength + onValueChanged: shadersettings.rasterization_strength = value + } } - SettingComponent{ - name: "Bloom" - onValueChanged: shadersettings.bloom_strength = value - _value: shadersettings.bloom_strength - } - SettingComponent{ - name: "Motion Blur" - onValueChanged: shadersettings.motion_blur = value - _value: shadersettings.motion_blur - } - SettingComponent{ - name: "Noise" - onValueChanged: shadersettings.noise_strength = value - _value: shadersettings.noise_strength - } - SettingComponent{ - name: "Glow" - onValueChanged: shadersettings.glowing_line_strength = value; - _value: shadersettings.glowing_line_strength - } - SettingComponent{ - name: "Ambient light" - onValueChanged: shadersettings.ambient_light = value; - _value: shadersettings.ambient_light - } - SettingComponent{ - name: "Screen distortion" - onValueChanged: shadersettings.screen_distortion = value; - _value: shadersettings.screen_distortion; - } - SettingComponent{ - name: "Brightness flickering" - onValueChanged: shadersettings.brightness_flickering= value; - _value: shadersettings.brightness_flickering; - } - SettingComponent{ - name: "Horizontal flickering" - onValueChanged: shadersettings.horizontal_sincronization = value; - _value: shadersettings.horizontal_sincronization; + } + GroupBox{ + title: qsTr("Effects") + anchors.left: parent.left + anchors.right: parent.right + ColumnLayout{ + anchors.fill: parent + SettingComponent{ + name: "Bloom" + onValueChanged: shadersettings.bloom_strength = value + _value: shadersettings.bloom_strength + } + SettingComponent{ + name: "Motion Blur" + onValueChanged: shadersettings.motion_blur = value + _value: shadersettings.motion_blur + } + SettingComponent{ + name: "Noise" + onValueChanged: shadersettings.noise_strength = value + _value: shadersettings.noise_strength + } + SettingComponent{ + name: "Glow" + onValueChanged: shadersettings.glowing_line_strength = value; + _value: shadersettings.glowing_line_strength + } + SettingComponent{ + name: "Ambient light" + onValueChanged: shadersettings.ambient_light = value; + _value: shadersettings.ambient_light + } + SettingComponent{ + name: "Screen distortion" + onValueChanged: shadersettings.screen_distortion = value; + _value: shadersettings.screen_distortion; + } + SettingComponent{ + name: "Brightness flickering" + onValueChanged: shadersettings.brightness_flickering= value; + _value: shadersettings.brightness_flickering; + } + SettingComponent{ + name: "Horizontal flickering" + onValueChanged: shadersettings.horizontal_sincronization = value; + _value: shadersettings.horizontal_sincronization; + } } } } diff --git a/app/ShaderManager.qml b/app/ShaderManager.qml index 438d39c..7441fa8 100644 --- a/app/ShaderManager.qml +++ b/app/ShaderManager.qml @@ -26,10 +26,13 @@ ShaderEffect { property color background_color: shadersettings.background_color property variant source: theSource property variant bloomSource: bloomSource - property size txt_Size: Qt.size(terminal.width, terminal.height) + property size txt_Size: Qt.size(width, height) property real bloom: shadersettings.bloom_strength + property int rasterization: shadersettings.rasterization + property real rasterization_strength: shadersettings.rasterization_strength + property real noise_strength: shadersettings.noise_strength property real screen_distorsion: shadersettings.screen_distortion property real glowing_line_strength: shadersettings.glowing_line_strength @@ -39,8 +42,8 @@ ShaderEffect { property real brightness: shadersettings.brightness * 1.5 + 0.5 - property real deltay: 3 / terminal.height - property real deltax: 3 / terminal.width + property real deltay: 3 / parent.height + property real deltax: 3 / parent.width property real time: timetimer.time property variant randomFunctionSource: randfuncsource @@ -116,6 +119,14 @@ ShaderEffect { (horizontal_sincronization !== 0 ? " varying lowp float horizontal_distortion;" : "") + + (rasterization !== shadersettings.no_rasterization ? " + float getScanlineIntensity(vec2 coord){ + float result = step(0.4, fract(coord.y * txt_Size.y * 0.5));" + + (rasterization === shadersettings.pixel_rasterization ? " + result *= step(0.4, fract(coord.x * txt_Size.x * 0.5));" : "") + + "return result; + }" : "") + + " highp float rand(vec2 co) { @@ -159,22 +170,25 @@ ShaderEffect { "float color = texture2D(source, coords).r;" + - (bloom !== 0 ? " - color += texture2D(bloomSource, coords).r *" + 2.5 * bloom + ";" : "") + - (noise_strength !== 0 ? " color += stepNoise(coords) * noise_strength * (1.0 - distance * distance * 2.0);" : "") + (glowing_line_strength !== 0 ? " color += randomPass(coords) * glowing_line_strength;" : "") + + (rasterization !== shadersettings.no_rasterization ? " + color = mix(color, color * getScanlineIntensity(qt_TexCoord0), "+ rasterization_strength +");" + : "") + + + (bloom !== 0 ? " + color += texture2D(bloomSource, coords).r *" + 2.5 * bloom + ";" : "") + + "vec3 finalColor = mix(background_color, font_color, color).rgb;" + "finalColor = mix(finalColor * 1.1, vec3(0.0), 1.2 * distance * distance);" + (brightness_flickering !== 0 ? " finalColor = mix(finalColor, vec3(0.0), brightness);" : "") + - " - gl_FragColor = vec4(finalColor *"+brightness+", 1.0); + "gl_FragColor = vec4(finalColor *"+brightness+", 1.0); }" } diff --git a/app/ShaderSettings.qml b/app/ShaderSettings.qml index b36b255..006e31d 100644 --- a/app/ShaderSettings.qml +++ b/app/ShaderSettings.qml @@ -29,10 +29,10 @@ Item{ //Scaling of the preprocessed terminal with respect to the window. property real terminal_scaling: 1.0 + onTerminal_scalingChanged: handleFontChanged(); //Scaling of the whole window property real window_scaling: 1.0 - property real total_scaling: terminal_scaling * window_scaling function mix(c1, c2, alpha){ @@ -63,7 +63,12 @@ Item{ property real horizontal_sincronization: 0.1 property real brightness_flickering: 0.12 - property real scanlines: 0.0 + readonly property int no_rasterization: 0 + readonly property int scanline_rasterization: 1 + readonly property int pixel_rasterization: 2 + + property int rasterization: no_rasterization + property real rasterization_strength: 0.5 property string frame_source: frames_list.get(frames_index).source property int frames_index: 1 @@ -115,7 +120,7 @@ Item{ text: "Commodore PET (1977)" source: "fonts/1977-commodore-pet/COMMODORE_PET.ttf" pixelSize: 15 - lineSpacing: 2 + lineSpacing: 3 } ListElement{ text: "Apple ][ (1977)" @@ -164,11 +169,11 @@ Item{ _background_color = settings.background_color ? settings.background_color : _background_color; _font_color = settings.font_color ? settings.font_color : _font_color; + horizontal_sincronization = settings.horizontal_sincronization ? settings.horizontal_sincronization : horizontal_sincronization brightness_flickering = settings.brightness_flickering ? settings.brightness_flickering : brightness_flickering; noise_strength = settings.noise_strength ? settings.noise_strength : noise_strength; screen_distortion = settings.screen_distortion ? settings.screen_distortion : screen_distortion; glowing_line_strength = settings.glowing_line_strength ? settings.glowing_line_strength : glowing_line_strength; - scanlines = settings.scanlines ? settings.scanlines : scanlines; motion_blur = settings.motion_blur ? settings.motion_blur : motion_blur bloom_strength = settings.bloom_strength ? settings.bloom_strength : bloom_strength @@ -177,6 +182,9 @@ Item{ font_index = settings.font_index ? settings.font_index : font_index; font_scaling = settings.font_scaling ? settings.font_scaling: font_scaling; + + rasterization_strength = settings.rasterization_strength ? settings.rasterization_strength : rasterization_strength; + rasterization = settings.rasterization ? settings.rasterization : rasterization; } function storeCurrentSettings(){ @@ -187,15 +195,17 @@ Item{ background_color: _background_color, font_color: _font_color, brightness_flickering: brightness_flickering, + horizontal_sincronization: horizontal_sincronization, noise_strength: noise_strength, screen_distortion: screen_distortion, glowing_line_strength: glowing_line_strength, - scanlines: scanlines, frames_index: frames_index, font_index: font_index, font_scaling: font_scaling, motion_blur: motion_blur, - bloom_strength: bloom_strength + bloom_strength: bloom_strength, + rasterization_strength: rasterization_strength, + rasterization: rasterization } console.log(JSON.stringify(settings)); diff --git a/app/SimpleSlider.qml b/app/SimpleSlider.qml index 2028a1d..e2c7d55 100644 --- a/app/SimpleSlider.qml +++ b/app/SimpleSlider.qml @@ -28,12 +28,7 @@ RowLayout { property double stepSize: 0.01 id: setting_component - anchors.left: parent.left - anchors.right: parent.right spacing: 10 - Text{ - text: name - } Slider{ id: slider stepSize: parent.stepSize diff --git a/app/Terminal.qml b/app/Terminal.qml index b7919cf..87f2b5d 100644 --- a/app/Terminal.qml +++ b/app/Terminal.qml @@ -27,13 +27,11 @@ Item{ id: terminalContainer property real mBloom: shadersettings.bloom_strength property real mBlur: shadersettings.motion_blur - property real scanlines: shadersettings.scanlines property real motionBlurCoefficient: (_minBlurCoefficient)*mBlur + (_maxBlurCoefficient)*(1.0-mBlur) property real _minBlurCoefficient: 0.015 property real _maxBlurCoefficient: 0.10 //Force reload of the blursource when settings change - onScanlinesChanged: restartBlurredSource() onMBloomChanged: restartBlurredSource() function restartBlurredSource(){ @@ -124,11 +122,6 @@ Item{ "varying highp vec2 qt_TexCoord0;" + - "float getScanlineIntensity(vec2 coord){ - float h = coord.y * txt_size.y * 0.5; - return step(0.5, fract(h)); - }" + - (mBlur !== 0 ? "uniform lowp sampler2D blurredSource;" : "") + @@ -141,9 +134,6 @@ Item{ "color = mix(blurredSourceColor, color, " + motionBlurCoefficient + ");" : "") + - (scanlines !== 0 ? " - color = mix(color, 1.0 * color*getScanlineIntensity(qt_TexCoord0), "+scanlines+");" - : "") + "gl_FragColor = vec4(vec3(floor(color) / 512.0), 1.0);" + "}" diff --git a/app/app.qmlproject.user b/app/app.qmlproject.user index 6e1302e..bdd6b1b 100644 --- a/app/app.qmlproject.user +++ b/app/app.qmlproject.user @@ -1,6 +1,6 @@ - + ProjectExplorer.Project.ActiveTarget