overview backdrop: full GPU shader with hex tiling, wave animation, spinners
This commit is contained in:
Damocles
parent
531e913238
commit
3c196c48d8
3 changed files with 232 additions and 119 deletions
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
104
modules/hex_wave.frag
Normal file
104
modules/hex_wave.frag
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue