shader debug step 1: minimal red shader with Quickshell.shellPath
This commit is contained in:
Damocles
parent
b4a132c8eb
commit
b42c470287
2 changed files with 4 additions and 218 deletions
|
|
@ -20,143 +20,14 @@ PanelWindow {
|
|||
anchors.right: true
|
||||
anchors.bottom: true
|
||||
|
||||
// Solid dark background — base01 is darker than base00
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: M.Theme.base01
|
||||
}
|
||||
|
||||
// Hex grid with gradient-filled cells, no outlines
|
||||
Canvas {
|
||||
// Step 1: minimal shader test — should show solid red
|
||||
ShaderEffect {
|
||||
anchors.fill: parent
|
||||
|
||||
onPaint: {
|
||||
const ctx = getContext("2d");
|
||||
const w = width, h = height;
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
const size = 50;
|
||||
const dx = size * 1.5;
|
||||
const dy = size * Math.sqrt(3);
|
||||
|
||||
const c0 = M.Theme.base0C;
|
||||
const c1 = M.Theme.base0E;
|
||||
const c2 = M.Theme.base09;
|
||||
|
||||
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);
|
||||
|
||||
// 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));
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
fragmentShader: Quickshell.shellPath("modules/hex_wave.frag.qsb")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue