daddy32/Physilinks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes, various

Browse Source
This commit is contained in:
Daddy32
2025-12-26 21:11:08 +01:00
parent 7a025ce68d
commit b2ffe3413b
3 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/config.js
View File

@@ -67,11 +67,11 @@
backdrop: { backdrop: {
enabled: true, enabled: true,
colors: null, // optional array; defaults derived from palette colors: null, // optional array; defaults derived from palette
opacity: 0.19, opacity: 0.35,
blur: 24, blur: 24,
speedSec: 30, speedSec: 30,
}, },
showFps: true, showFps: false,
}; };
return { return {

9
src/scenes/scene-lavalamp.js
View File

@@ -14,7 +14,7 @@
const x = cx + Math.sin(t * Math.PI * 1.5) * amp; const x = cx + Math.sin(t * Math.PI * 1.5) * amp;
const dx = x - prevX; const dx = x - prevX;
const dy = y - prevY; const dy = y - prevY;
const len = Math.max(1, Math.sqrt(dx * dx + dy * dy)); const len = 0.8 * Math.max(1, Math.sqrt(dx * dx + dy * dy));
const angle = Math.atan2(dy, dx); const angle = Math.atan2(dy, dx);
segs.push( segs.push(
Bodies.rectangle((prevX + x) / 2, (prevY + y) / 2, thickness, len, { Bodies.rectangle((prevX + x) / 2, (prevY + y) / 2, thickness, len, {
@@ -40,7 +40,7 @@
autoSpawn: true, autoSpawn: true,
minChain: 3, minChain: 3,
palette: ["#f472b6", "#38bdf8", "#fbbf24", "#a855f7", "#22c55e"], palette: ["#f472b6", "#38bdf8", "#fbbf24", "#a855f7", "#22c55e"],
ballRadius: 26, ballRadius: 36,
blobBalls: "jagged", blobBalls: "jagged",
winCondition: { winCondition: {
type: "score", type: "score",
@@ -63,8 +63,9 @@
}, },
}, },
createBodies: (w, h) => { createBodies: (w, h) => {
const wallThickness = Math.max(24, w * 0.05); const thicknessScale = Math.min(0.04, 0.03 + (w / 1200) * 0.02);
const amp = Math.max(40, w * 0.08); const wallThickness = Math.max(16, w * thicknessScale);
const amp = Math.min(15, w * 0.08);
const segments = 12; const segments = 12;
const curves = [ const curves = [
...makeCurveSegments(w * 0.33, h, amp, wallThickness, segments), ...makeCurveSegments(w * 0.33, h, amp, wallThickness, segments),

18
styles.css
View File

@@ -139,21 +139,21 @@ header .pill {
background: background:
radial-gradient( radial-gradient(
circle at 30% 30%, circle at 30% 30%,
var(--backdrop-color-a, rgba(56, 189, 248, 0.045)), var(--backdrop-color-a, rgba(56, 189, 248, 0.12)),
transparent 50% transparent 50%
), ),
radial-gradient( radial-gradient(
circle at 70% 60%, circle at 70% 60%,
var(--backdrop-color-b, rgba(167, 139, 250, 0.04)), var(--backdrop-color-b, rgba(167, 139, 250, 0.1)),
transparent 48% transparent 48%
), ),
radial-gradient( radial-gradient(
circle at 50% 20%, circle at 50% 20%,
var(--backdrop-color-c, rgba(52, 211, 153, 0.035)), var(--backdrop-color-c, rgba(52, 211, 153, 0.09)),
transparent 45% transparent 45%
); );
filter: blur(var(--backdrop-blur, 24px)); filter: blur(var(--backdrop-blur, 24px));
opacity: var(--backdrop-opacity, 0.24); opacity: var(--backdrop-opacity, 0.35);
pointer-events: none; pointer-events: none;
transform: scale(1.05); transform: scale(1.05);
z-index: 0; z-index: 0;
@@ -165,15 +165,15 @@ header .pill {
background: background:
radial-gradient( radial-gradient(
circle at 20% 60%, circle at 20% 60%,
var(--backdrop-color-a, rgba(14, 165, 233, 0.032)), var(--backdrop-color-a, rgba(14, 165, 233, 0.08)),
transparent 50% transparent 50%
), ),
radial-gradient( radial-gradient(
circle at 80% 30%, circle at 80% 30%,
var(--backdrop-color-b, rgba(244, 114, 182, 0.032)), var(--backdrop-color-b, rgba(244, 114, 182, 0.08)),
transparent 50% transparent 50%
); );
opacity: calc(var(--backdrop-opacity, 0.24) * 0.7); opacity: calc(var(--backdrop-opacity, 0.35) * 0.7);
animation: floatBackdropAlt calc(var(--backdrop-speed, 28s) * 1.1) animation: floatBackdropAlt calc(var(--backdrop-speed, 28s) * 1.1)
ease-in-out infinite alternate; ease-in-out infinite alternate;
} }
@@ -575,7 +575,7 @@ canvas {
} }
#scene-wrapper::before, #scene-wrapper::before,
#scene-wrapper::after { #scene-wrapper::after {
filter: blur(18px); filter: blur(22px);
opacity: 0.6; opacity: 0.4;
} }
} }