diff --git a/modules/OverviewBackdrop.qml b/modules/OverviewBackdrop.qml index e369b0a..7805daa 100644 --- a/modules/OverviewBackdrop.qml +++ b/modules/OverviewBackdrop.qml @@ -20,145 +20,143 @@ PanelWindow { anchors.right: true anchors.bottom: true - // Solid dark background + // Solid dark background — base01 is darker than base00 Rectangle { anchors.fill: parent color: M.Theme.base01 } - ShaderEffect { - id: fx + // Hex grid with gradient-filled cells, no outlines + Canvas { anchors.fill: parent - fragmentShader: Qt.resolvedUrl("hex_wave.frag.qsb") - // Uniforms — order must match shader std140 layout - property real uSize: 50.0 - property real uWavePhase: -200 - property real _pad0: 0 - property vector4d uResolution: Qt.vector4d(width, height, 0, 0) - property color uC0: M.Theme.base0C - property color uC1: M.Theme.base0E - property color uC2: M.Theme.base09 + onPaint: { + const ctx = getContext("2d"); + const w = width, h = height; + ctx.clearRect(0, 0, w, h); - // 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 size = 50; + const dx = size * 1.5; + const dy = size * Math.sqrt(3); - // 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 + const c0 = M.Theme.base0C; + const c1 = M.Theme.base0E; + const c2 = M.Theme.base09; - // Spinner center coordinates (set once at startup) - property var _centers: [] + 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); - // 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) + // 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)); - // 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 - } - } + // 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); - // 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); - } - } + // 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; - // 12 independent spinner animations - Repeater { - model: 12 - Item { - id: spinDelegate - 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" + spinDelegate.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.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(); } } } } + + // Randomly spinning hexagons overlaid on the grid + Repeater { + model: 12 + + 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); + } + 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 + } + } + } }