From 3c196c48d8e38b98f92aeacee26336450b2c6546 Mon Sep 17 00:00:00 2001 From: Damocles Date: Mon, 13 Apr 2026 09:31:32 +0200 Subject: [PATCH] overview backdrop: full GPU shader with hex tiling, wave animation, spinners --- modules/OverviewBackdrop.qml | 236 +++++++++++++++++------------------ modules/hex_wave.frag | 104 +++++++++++++++ nix/package.nix | 11 +- 3 files changed, 232 insertions(+), 119 deletions(-) create mode 100644 modules/hex_wave.frag diff --git a/modules/OverviewBackdrop.qml b/modules/OverviewBackdrop.qml index 7805daa..0e37d01 100644 --- a/modules/OverviewBackdrop.qml +++ b/modules/OverviewBackdrop.qml @@ -20,143 +20,143 @@ PanelWindow { anchors.right: true anchors.bottom: true - // Solid dark background — base01 is darker than base00 + // Solid dark background Rectangle { anchors.fill: parent color: M.Theme.base01 } - // Hex grid with gradient-filled cells, no outlines - Canvas { + ShaderEffect { + id: fx anchors.fill: parent + fragmentShader: "hex_wave.frag.qsb" - onPaint: { - const ctx = getContext("2d"); - const w = width, h = height; - ctx.clearRect(0, 0, w, h); + // Uniforms + property size uResolution: Qt.size(width, height) + property real uSize: 50.0 + property real uWavePhase: -200 + property vector3d uC0: Qt.vector3d(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b) + property vector3d uC1: Qt.vector3d(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b) + property vector3d uC2: Qt.vector3d(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b) - const size = 50; - const dx = size * 1.5; - const dy = size * Math.sqrt(3); + // 12 spinner uniforms + property vector4d uSpinners0: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners1: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners2: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners3: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners4: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners5: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners6: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners7: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners8: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners9: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners10: Qt.vector4d(0, 0, 0, 0) + property vector4d uSpinners11: Qt.vector4d(0, 0, 0, 0) - const c0 = M.Theme.base0C; - const c1 = M.Theme.base0E; - const c2 = M.Theme.base09; + // Spinner angle properties (animated individually) + property real _a0: 0 + property real _a1: 0 + property real _a2: 0 + property real _a3: 0 + property real _a4: 0 + property real _a5: 0 + property real _a6: 0 + property real _a7: 0 + property real _a8: 0 + property real _a9: 0 + property real _a10: 0 + property real _a11: 0 - for (let col = -1; col < w / dx + 2; col++) { - for (let row = -1; row < h / dy + 2; row++) { - const cx = col * dx; - const cy = row * dy + (col % 2 ? dy / 2 : 0); + // Spinner center coordinates (set once at startup) + property var _centers: [] - // Position-based color interpolation across the screen - const fx = Math.max(0, Math.min(1, cx / w)); - const fy = Math.max(0, Math.min(1, cy / h)); + // Pack angle into spinner vec4 + on_A0Changed: uSpinners0 = Qt.vector4d(_centers[0]?.x ?? 0, _centers[0]?.y ?? 0, _a0, 0) + on_A1Changed: uSpinners1 = Qt.vector4d(_centers[1]?.x ?? 0, _centers[1]?.y ?? 0, _a1, 0) + on_A2Changed: uSpinners2 = Qt.vector4d(_centers[2]?.x ?? 0, _centers[2]?.y ?? 0, _a2, 0) + on_A3Changed: uSpinners3 = Qt.vector4d(_centers[3]?.x ?? 0, _centers[3]?.y ?? 0, _a3, 0) + on_A4Changed: uSpinners4 = Qt.vector4d(_centers[4]?.x ?? 0, _centers[4]?.y ?? 0, _a4, 0) + on_A5Changed: uSpinners5 = Qt.vector4d(_centers[5]?.x ?? 0, _centers[5]?.y ?? 0, _a5, 0) + on_A6Changed: uSpinners6 = Qt.vector4d(_centers[6]?.x ?? 0, _centers[6]?.y ?? 0, _a6, 0) + on_A7Changed: uSpinners7 = Qt.vector4d(_centers[7]?.x ?? 0, _centers[7]?.y ?? 0, _a7, 0) + on_A8Changed: uSpinners8 = Qt.vector4d(_centers[8]?.x ?? 0, _centers[8]?.y ?? 0, _a8, 0) + on_A9Changed: uSpinners9 = Qt.vector4d(_centers[9]?.x ?? 0, _centers[9]?.y ?? 0, _a9, 0) + on_A10Changed: uSpinners10 = Qt.vector4d(_centers[10]?.x ?? 0, _centers[10]?.y ?? 0, _a10, 0) + on_A11Changed: uSpinners11 = Qt.vector4d(_centers[11]?.x ?? 0, _centers[11]?.y ?? 0, _a11, 0) - // Blend: left=base0C, center=base0E, right=base09, modulated by y - const t = fx; - const r = t < 0.5 ? c0.r + (c1.r - c0.r) * (t * 2) : c1.r + (c2.r - c1.r) * ((t - 0.5) * 2); - const g = t < 0.5 ? c0.g + (c1.g - c0.g) * (t * 2) : c1.g + (c2.g - c1.g) * ((t - 0.5) * 2); - const b = t < 0.5 ? c0.b + (c1.b - c0.b) * (t * 2) : c1.b + (c2.b - c1.b) * ((t - 0.5) * 2); - - // Opacity varies: brighter near edges, dimmer in center - const distFromCenter = Math.sqrt(Math.pow(fx - 0.5, 2) + Math.pow(fy - 0.5, 2)); - const alpha = 0.03 + distFromCenter * 0.06; - - ctx.fillStyle = "rgba(" + Math.round(r * 255) + "," + Math.round(g * 255) + "," + Math.round(b * 255) + "," + alpha + ")"; - - ctx.beginPath(); - for (let i = 0; i < 6; i++) { - const angle = Math.PI / 3 * i - Math.PI / 6; - const px = cx + size * 0.48 * Math.cos(angle); - const py = cy + size * 0.48 * Math.sin(angle); - if (i === 0) - ctx.moveTo(px, py); - else - ctx.lineTo(px, py); - } - ctx.closePath(); - ctx.fill(); - } + // Wave animation: 6s sweep + 8s pause + SequentialAnimation on uWavePhase { + loops: Animation.Infinite + running: true + NumberAnimation { + from: -200 + to: fx.width + 200 + duration: 6000 + easing.type: Easing.InOutSine + } + PauseAnimation { + duration: 8000 } } - } - // Randomly spinning hexagons overlaid on the grid - Repeater { - model: 12 + // Initialize spinner centers + Component.onCompleted: { + const dx = uSize * 1.5; + const dy = uSize * Math.sqrt(3); + const used = {}; + const centers = []; + for (let i = 0; i < 12; i++) { + let col, row, key; + do { + col = Math.floor(Math.random() * (width / dx)); + row = Math.floor(Math.random() * (height / dy)); + key = col + "," + row; + } while (used[key]) + used[key] = true; + const cx = col * dx; + const cy = row * dy + ((col % 2) ? dy / 2 : 0); + centers.push({ + x: cx, + y: cy + }); + } + _centers = centers; + // Initialize all spinner vec4s with center coords + for (let i = 0; i < 12; i++) { + const prop = "uSpinners" + i; + fx[prop] = Qt.vector4d(centers[i].x, centers[i].y, 0, 0); + } + } - Item { - id: spinHex - required property int index - - readonly property real _size: 50 - readonly property real _dx: _size * 1.5 - readonly property real _dy: _size * Math.sqrt(3) - - // Pick a random grid position - readonly property int _col: Math.floor(Math.random() * (root.width / _dx)) - readonly property int _row: Math.floor(Math.random() * (root.height / _dy)) - - x: _col * _dx - _size * 0.48 - y: _row * _dy + (_col % 2 ? _dy / 2 : 0) - _size * 0.48 - width: _size - height: _size - - // Color from position (matching the canvas gradient) - readonly property real _fx: Math.max(0, Math.min(1, (_col * _dx) / root.width)) - readonly property color _c0: M.Theme.base0C - readonly property color _c1: M.Theme.base0E - readonly property color _c2: M.Theme.base09 - readonly property color _hexColor: Qt.rgba(_fx < 0.5 ? _c0.r + (_c1.r - _c0.r) * _fx * 2 : _c1.r + (_c2.r - _c1.r) * (_fx - 0.5) * 2, _fx < 0.5 ? _c0.g + (_c1.g - _c0.g) * _fx * 2 : _c1.g + (_c2.g - _c1.g) * (_fx - 0.5) * 2, _fx < 0.5 ? _c0.b + (_c1.b - _c0.b) * _fx * 2 : _c1.b + (_c2.b - _c1.b) * (_fx - 0.5) * 2, 1) - - readonly property real _distFromCenter: Math.sqrt(Math.pow(_fx - 0.5, 2) + Math.pow(Math.max(0, Math.min(1, (_row * _dy) / root.height)) - 0.5, 2)) - opacity: 0.03 + _distFromCenter * 0.06 - - rotation: 0 - transformOrigin: Item.Center - - Canvas { - anchors.fill: parent - onPaint: { - const ctx = getContext("2d"); - const s = spinHex._size; - const cx = s / 2, cy = s / 2; - ctx.clearRect(0, 0, s, s); - ctx.fillStyle = spinHex._hexColor.toString(); - ctx.beginPath(); - for (let i = 0; i < 6; i++) { - const angle = Math.PI / 3 * i - Math.PI / 6; - const px = cx + s * 0.48 * Math.cos(angle); - const py = cy + s * 0.48 * Math.sin(angle); - if (i === 0) - ctx.moveTo(px, py); - else - ctx.lineTo(px, py); + // 12 independent spinner animations + Repeater { + model: 12 + Item { + required property int index + SequentialAnimation { + loops: Animation.Infinite + running: true + PauseAnimation { + id: _pause + duration: 3000 + Math.random() * 12000 + } + NumberAnimation { + id: _spin + target: fx + property: "_a" + parent.index + from: 0 + to: 2 * Math.PI + duration: 1000 + Math.random() * 2000 + easing.type: Easing.InOutCubic + } + ScriptAction { + script: { + _pause.duration = 3000 + Math.random() * 12000; + _spin.duration = 1000 + Math.random() * 2000; + } } - ctx.closePath(); - ctx.fill(); } } - - Timer { - interval: 3000 + Math.random() * 12000 - running: true - repeat: true - onTriggered: { - interval = 3000 + Math.random() * 12000; - spinAnim.duration = 1000 + Math.random() * 2000; - spinAnim.start(); - } - } - - RotationAnimation { - id: spinAnim - target: spinHex - from: 0 - to: 360 - duration: 2000 - easing.type: Easing.InOutCubic - } } } } diff --git a/modules/hex_wave.frag b/modules/hex_wave.frag new file mode 100644 index 0000000..a74fbb4 --- /dev/null +++ b/modules/hex_wave.frag @@ -0,0 +1,104 @@ +#version 440 + +layout(location = 0) in vec2 qt_TexCoord0; +layout(location = 0) out vec4 fragColor; + +layout(std140, binding = 0) uniform buf { + mat4 qt_Matrix; + float qt_Opacity; + + vec2 uResolution; + float uSize; + float uWavePhase; + vec3 uC0; + vec3 uC1; + vec3 uC2; + + vec4 uSpinners0; + vec4 uSpinners1; + vec4 uSpinners2; + vec4 uSpinners3; + vec4 uSpinners4; + vec4 uSpinners5; + vec4 uSpinners6; + vec4 uSpinners7; + vec4 uSpinners8; + vec4 uSpinners9; + vec4 uSpinners10; + vec4 uSpinners11; +}; + +float sdHexFlat(vec2 p, float r) { + const vec3 k = vec3(0.5, 0.8660254, 0.5773503); + p = abs(p); + p -= 2.0 * min(dot(k.yx, p), 0.0) * k.yx; + p -= vec2(clamp(p.x, -k.z * r, k.z * r), r); + return length(p) * sign(p.y); +} + +void main() { + vec2 frag = qt_TexCoord0 * uResolution; + + float dx = uSize * 1.5; + float dy = uSize * 1.7320508; + + float col = round(frag.x / dx); + float yoff = mod(col, 2.0) != 0.0 ? dy * 0.5 : 0.0; + float row = round((frag.y - yoff) / dy); + vec2 center = vec2(col * dx, row * dy + yoff); + + // Wave factor + float dist = center.x - uWavePhase; + float wf = exp(-dist * dist / 9000.0); + + float baseR = uSize * 0.48; + float inradius = baseR * (1.0 + 0.35 * wf); + + // Check spinners + float spinAngle = 0.0; + vec4 spinners[12] = vec4[12]( + uSpinners0, uSpinners1, uSpinners2, uSpinners3, + uSpinners4, uSpinners5, uSpinners6, uSpinners7, + uSpinners8, uSpinners9, uSpinners10, uSpinners11 + ); + for (int i = 0; i < 12; i++) { + if (distance(center, spinners[i].xy) < 1.0) { + spinAngle = spinners[i].z; + break; + } + } + + vec2 p = frag - center; + if (spinAngle != 0.0) { + float ca = cos(spinAngle); + float sa = sin(spinAngle); + p = mat2(ca, -sa, sa, ca) * p; + } + + float d = sdHexFlat(p, inradius); + if (d > 0.0) { + fragColor = vec4(0.0); + return; + } + + // Gradient color + float fx = clamp(center.x / uResolution.x, 0.0, 1.0); + vec3 rgb = fx < 0.5 + ? mix(uC0, uC1, fx * 2.0) + : mix(uC1, uC2, (fx - 0.5) * 2.0); + + // Alpha from distance to center + float fy = clamp(center.y / uResolution.y, 0.0, 1.0); + float dc = length(vec2(fx - 0.5, fy - 0.5)); + float a = 0.03 + dc * 0.06; + + // Wave brighten + rgb = min(rgb + vec3(0.3 * wf), vec3(1.0)); + a += 0.12 * wf; + + // Anti-alias + float aa = 1.0 - smoothstep(-1.0, 0.0, d); + a *= aa; + + fragColor = vec4(rgb * a, a) * qt_Opacity; +} diff --git a/nix/package.nix b/nix/package.nix index 3fc5a20..9ed6edc 100644 --- a/nix/package.nix +++ b/nix/package.nix @@ -3,6 +3,7 @@ stdenvNoCC, makeWrapper, quickshell, + qt6, }: stdenvNoCC.mkDerivation { pname = "nova-shell"; @@ -10,7 +11,10 @@ stdenvNoCC.mkDerivation { src = lib.cleanSource ../.; - nativeBuildInputs = [ makeWrapper ]; + nativeBuildInputs = [ + makeWrapper + qt6.qtshadertools + ]; dontBuild = true; @@ -20,6 +24,11 @@ stdenvNoCC.mkDerivation { mkdir -p $out/share/nova-shell cp -r shell.qml modules $out/share/nova-shell/ + # Compile fragment shader to Qt RHI format + qsb --qt6 \ + -o $out/share/nova-shell/modules/hex_wave.frag.qsb \ + modules/hex_wave.frag + mkdir -p $out/bin makeWrapper ${lib.getExe quickshell} $out/bin/nova-shell \ --add-flags "-p $out/share/nova-shell/shell.qml"