mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 07:05:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #92 from schlagmichdoch/optimize_animation

Browse source 
Optimize background animation to drastically reduce CPU/GPU resources
This commit is contained in:
schlagmichdoch 2023-03-27 02:19:19 +02:00 • committed by GitHub
commit 7d581ca858
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

88
public/scripts/ui.js
View file

@ -1943,68 +1943,84 @@ Events.on('load', () => {
style.zIndex = -1; style.zIndex = -1;
style.top = 0; style.top = 0;
style.left = 0; style.left = 0;
let ctx = c.getContext('2d'); let cCtx = c.getContext('2d');
let x0, y0, w, h, dw, offset; let x0, y0, w, h, dw, offset;
let offscreenCanvases = [];
function init() { function init() {
let oldW = w;
let oldH = h;
let oldOffset = offset
w = document.documentElement.clientWidth; w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight; h = document.documentElement.clientHeight;
c.width = w;
c.height = h;
offset = $$('footer').offsetHeight - 32; offset = $$('footer').offsetHeight - 32;
if (h > 800) offset += 16; if (h > 800) offset += 16;
if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
c.width = w;
c.height = h;
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.max(w, h, 1000) / 13; dw = Math.round(Math.max(w, h, 1000) / 13);
drawCircles(); drawCircles(cCtx, 0);
// enforce redrawing of frames
offscreenCanvases = [];
} }
Events.on('bg-resize', _ => init()); Events.on('bg-resize', _ => init());
window.onresize = _ => Events.fire('bg-resize'); window.onresize = _ => Events.fire('bg-resize');
function drawCircle(radius) { function drawCircle(ctx, radius) {
ctx.beginPath(); ctx.beginPath();
let color = Math.round(255 * (1 - radius / Math.max(w, h))); ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)'; let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();
ctx.lineWidth = 2;
} }
let step = 0; function drawCircles(ctx, frame) {
for (let i = 0; i < 13; i++) {
function drawCircles() { drawCircle(ctx, dw * i + frame);
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < 8; i++) {
drawCircle(dw * i + step % dw);
}
step += 1;
}
let loading = true;
function animate() {
if (loading || !finished()) {
requestAnimationFrame(function() {
drawCircles();
animate();
});
} }
} }
function finished() { function createOffscreenCanvas(frame) {
return step % dw >= dw - 5; let canvas = document.createElement("canvas");
canvas.width = c.width;
canvas.height = c.height;
offscreenCanvases[frame] = canvas;
let ctx = canvas.getContext('2d');
drawCircles(ctx, frame);
}
function drawFrame(frame) {
cCtx.clearRect(0, 0, w, h);
if (!offscreenCanvases[frame]) {
createOffscreenCanvas(frame);
}
cCtx.drawImage(offscreenCanvases[frame], 0, 0);
}
let animate = true;
let currentFrame = 0;
function animateBg() {
if (currentFrame + 1 < dw || animate) {
currentFrame = (currentFrame + 1) % dw;
drawFrame(currentFrame);
}
setTimeout(_ => animateBg(), 3000 / dw);
} }
window.animateBackground = function(l) { window.animateBackground = function(l) {
if (!l) { animate = l;
loading = false;
} else if (!loading) {
loading = true;
if (finished()) animate();
}
}; };
init(); init();
animate(); animateBg();
}); });
document.changeFavicon = function (src) { document.changeFavicon = function (src) {

87
public_included_ws_fallback/scripts/ui.js
View file

@ -1944,67 +1944,84 @@ Events.on('load', () => {
style.zIndex = -1; style.zIndex = -1;
style.top = 0; style.top = 0;
style.left = 0; style.left = 0;
let ctx = c.getContext('2d'); let cCtx = c.getContext('2d');
let x0, y0, w, h, dw, offset; let x0, y0, w, h, dw, offset;
let offscreenCanvases = [];
function init() { function init() {
let oldW = w;
let oldH = h;
let oldOffset = offset
w = document.documentElement.clientWidth; w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight; h = document.documentElement.clientHeight;
offset = $$('footer').offsetHeight - 32;
if (h > 800) offset += 16;
if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
c.width = w; c.width = w;
c.height = h; c.height = h;
offset = $$('footer').offsetHeight - 32;
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.max(w, h, 1000) / 13; dw = Math.round(Math.max(w, h, 1000) / 13);
drawCircles(); drawCircles(cCtx, 0);
// enforce redrawing of frames
offscreenCanvases = [];
} }
Events.on('bg-resize', _ => init()); Events.on('bg-resize', _ => init());
window.onresize = _ => Events.fire('bg-resize'); window.onresize = _ => Events.fire('bg-resize');
function drawCircle(radius) { function drawCircle(ctx, radius) {
ctx.beginPath(); ctx.beginPath();
let color = Math.round(255 * (1 - radius / Math.max(w, h))); ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)'; let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();
ctx.lineWidth = 2;
} }
let step = 0; function drawCircles(ctx, frame) {
for (let i = 0; i < 13; i++) {
function drawCircles() { drawCircle(ctx, dw * i + frame);
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < 8; i++) {
drawCircle(dw * i + step % dw);
}
step += 1;
}
let loading = true;
function animate() {
if (loading || !finished()) {
requestAnimationFrame(function() {
drawCircles();
animate();
});
} }
} }
function finished() { function createOffscreenCanvas(frame) {
return step % dw >= dw - 5; let canvas = document.createElement("canvas");
canvas.width = c.width;
canvas.height = c.height;
offscreenCanvases[frame] = canvas;
let ctx = canvas.getContext('2d');
drawCircles(ctx, frame);
}
function drawFrame(frame) {
cCtx.clearRect(0, 0, w, h);
if (!offscreenCanvases[frame]) {
createOffscreenCanvas(frame);
}
cCtx.drawImage(offscreenCanvases[frame], 0, 0);
}
let animate = true;
let currentFrame = 0;
function animateBg() {
if (currentFrame + 1 < dw || animate) {
currentFrame = (currentFrame + 1) % dw;
drawFrame(currentFrame);
}
setTimeout(_ => animateBg(), 3000 / dw);
} }
window.animateBackground = function(l) { window.animateBackground = function(l) {
if (!l) { animate = l;
loading = false;
} else if (!loading) {
loading = true;
if (finished()) animate();
}
}; };
init(); init();
animate(); animateBg();
}); });
document.changeFavicon = function (src) { document.changeFavicon = function (src) {