✨ Fix formatting

This commit is contained in:
Simon Schneegans
2025-02-09 08:00:26 +01:00
parent 3602f07dae
commit 00d6f9089d
+112 -131
View File
@@ -185,53 +185,52 @@ vec3 darken(vec3 color, float fac) { return color * (1.0 - fac); }
// color will be white. // color will be white.
vec3 lighten(vec3 color, float fac) { return color + (vec3(1.0) - color) * fac; } vec3 lighten(vec3 color, float fac) { return color + (vec3(1.0) - color) * fac; }
// change the color based on an offset amount
//change the color based on an offset amount
vec3 offsetHue(vec3 color, float hueOffset) { vec3 offsetHue(vec3 color, float hueOffset) {
// Convert RGB to HSV // Convert RGB to HSV
float maxC = max(max(color.r, color.g), color.b); float maxC = max(max(color.r, color.g), color.b);
float minC = min(min(color.r, color.g), color.b); float minC = min(min(color.r, color.g), color.b);
float delta = maxC - minC; float delta = maxC - minC;
float hue = 0.0; float hue = 0.0;
if (delta > 0.0) { if (delta > 0.0) {
if (maxC == color.r) { if (maxC == color.r) {
hue = mod((color.g - color.b) / delta, 6.0); hue = mod((color.g - color.b) / delta, 6.0);
} else if (maxC == color.g) { } else if (maxC == color.g) {
hue = (color.b - color.r) / delta + 2.0; hue = (color.b - color.r) / delta + 2.0;
} else {
hue = (color.r - color.g) / delta + 4.0;
}
}
hue /= 6.0;
float saturation = (maxC > 0.0) ? (delta / maxC) : 0.0;
float value = maxC;
// Offset the hue
hue = mod(hue + hueOffset, 1.0);
// Convert HSV back to RGB
float c = value * saturation;
float x = c * (1.0 - abs(mod(hue * 6.0, 2.0) - 1.0));
float m = value - c;
vec3 rgb;
if (hue < 1.0 / 6.0) {
rgb = vec3(c, x, 0.0);
} else if (hue < 2.0 / 6.0) {
rgb = vec3(x, c, 0.0);
} else if (hue < 3.0 / 6.0) {
rgb = vec3(0.0, c, x);
} else if (hue < 4.0 / 6.0) {
rgb = vec3(0.0, x, c);
} else if (hue < 5.0 / 6.0) {
rgb = vec3(x, 0.0, c);
} else { } else {
rgb = vec3(c, 0.0, x); hue = (color.r - color.g) / delta + 4.0;
} }
}
hue /= 6.0;
return rgb + m; float saturation = (maxC > 0.0) ? (delta / maxC) : 0.0;
float value = maxC;
// Offset the hue
hue = mod(hue + hueOffset, 1.0);
// Convert HSV back to RGB
float c = value * saturation;
float x = c * (1.0 - abs(mod(hue * 6.0, 2.0) - 1.0));
float m = value - c;
vec3 rgb;
if (hue < 1.0 / 6.0) {
rgb = vec3(c, x, 0.0);
} else if (hue < 2.0 / 6.0) {
rgb = vec3(x, c, 0.0);
} else if (hue < 3.0 / 6.0) {
rgb = vec3(0.0, c, x);
} else if (hue < 4.0 / 6.0) {
rgb = vec3(0.0, x, c);
} else if (hue < 5.0 / 6.0) {
rgb = vec3(x, 0.0, c);
} else {
rgb = vec3(c, 0.0, x);
}
return rgb + m;
} }
// ---------------------------------------------------------------------- easing functions // ---------------------------------------------------------------------- easing functions
@@ -251,119 +250,121 @@ float easeOutBack(float x, float e) {
return p * p * ((e + 1.0) * p + e) + 1.0; return p * p * ((e + 1.0) * p + e) + 1.0;
} }
// https://easings.net/ // https://easings.net/
/* /*
Easing functions define the rate of change of a parameter over time, commonly used in animations, UI transitions, and game development. They provide a way to make movements more natural or visually appealing rather than linear and mechanical. Popular categories of easing functions include: Easing functions define the rate of change of a parameter over time, commonly used in
animations, UI transitions, and game development. They provide a way to make movements
more natural or visually appealing rather than linear and mechanical. Popular categories
of easing functions include:
Linear: Constant speed from start to finish. Linear: Constant speed from start to finish.
Quadratic (Ease In, Ease Out, Ease In Out): Changes at varying rates, with smoother starts or stops. Quadratic (Ease In, Ease Out, Ease In Out): Changes at varying rates, with smoother starts
Cubic: Similar to quadratic but allows for even more nuanced transitions. or stops. Cubic: Similar to quadratic but allows for even more nuanced transitions.
Exponential: Drastic changes at the start or end, often used for dramatic effects. Exponential: Drastic changes at the start or end, often used for dramatic effects.
Bounce: Mimics a bouncing object with oscillations. Bounce: Mimics a bouncing object with oscillations.
Elastic: Simulates the behavior of a spring, with overshooting and oscillations. Elastic: Simulates the behavior of a spring, with overshooting and oscillations.
Below are text-based "graphs" of some easing functions, where the horizontal axis represents time and the vertical axis represents progress. Below are text-based "graphs" of some easing functions, where the horizontal axis
represents time and the vertical axis represents progress.
*/ */
// Quadratic Easing // Quadratic Easing
// Smooth acceleration and deceleration using quadratic (t^2) curves. // Smooth acceleration and deceleration using quadratic (t^2) curves.
float easeInOutQuad(float t) { float easeInOutQuad(float t) {
// Accelerates for the first half, decelerates for the second half. // Accelerates for the first half, decelerates for the second half.
return t < 0.5 ? 2.0 * t * t : -1.0 + (4.0 - 2.0 * t) * t; return t < 0.5 ? 2.0 * t * t : -1.0 + (4.0 - 2.0 * t) * t;
} }
// Cubic Easing // Cubic Easing
// Smoother transitions compared to quadratic easing using cubic (t^3) curves. // Smoother transitions compared to quadratic easing using cubic (t^3) curves.
float easeInCubic(float t) { float easeInCubic(float t) {
// Starts slow and accelerates as t increases. // Starts slow and accelerates as t increases.
return t * t * t; return t * t * t;
} }
float easeOutCubic(float t) { float easeOutCubic(float t) {
// Starts fast and decelerates as t approaches 1.0. // Starts fast and decelerates as t approaches 1.0.
float f = t - 1.0; float f = t - 1.0;
return f * f * f + 1.0; return f * f * f + 1.0;
} }
float easeInOutCubic(float t) { float easeInOutCubic(float t) {
// Combines easeIn and easeOut cubic behavior for smooth transitions. // Combines easeIn and easeOut cubic behavior for smooth transitions.
return t < 0.5 ? 4.0 * t * t * t : (t - 1.0) * (2.0 * t - 2.0) * (2.0 * t - 2.0) + 1.0; return t < 0.5 ? 4.0 * t * t * t : (t - 1.0) * (2.0 * t - 2.0) * (2.0 * t - 2.0) + 1.0;
} }
// Quartic Easing // Quartic Easing
// Even smoother transitions than cubic, using quartic (t^4) curves. // Even smoother transitions than cubic, using quartic (t^4) curves.
float easeInQuart(float t) { float easeInQuart(float t) {
// Starts very slow and accelerates steeply. // Starts very slow and accelerates steeply.
return t * t * t * t; return t * t * t * t;
} }
float easeOutQuart(float t) { float easeOutQuart(float t) {
// Starts steeply and slows down dramatically. // Starts steeply and slows down dramatically.
float f = t - 1.0; float f = t - 1.0;
return 1.0 - f * f * f * f; return 1.0 - f * f * f * f;
} }
float easeInOutQuart(float t) { float easeInOutQuart(float t) {
// Combines easeIn and easeOut quartic behavior for very smooth transitions. // Combines easeIn and easeOut quartic behavior for very smooth transitions.
return t < 0.5 ? 8.0 * t * t * t * t : 1.0 - 8.0 * (t - 1.0) * (t - 1.0) * (t - 1.0) * (t - 1.0); return t < 0.5 ? 8.0 * t * t * t * t
: 1.0 - 8.0 * (t - 1.0) * (t - 1.0) * (t - 1.0) * (t - 1.0);
} }
// Sine Easing // Sine Easing
// Smooth, wave-like acceleration and deceleration using sine curves. // Smooth, wave-like acceleration and deceleration using sine curves.
float easeInSine(float t) { float easeInSine(float t) {
// Starts very slow, following a sine wave curve. // Starts very slow, following a sine wave curve.
return 1.0 - cos((t * 3.141592653589793) / 2.0); return 1.0 - cos((t * 3.141592653589793) / 2.0);
} }
float easeOutSine(float t) { float easeOutSine(float t) {
// Starts fast and slows down following a sine wave curve. // Starts fast and slows down following a sine wave curve.
return sin((t * 3.141592653589793) / 2.0); return sin((t * 3.141592653589793) / 2.0);
} }
float easeInOutSine(float t) { float easeInOutSine(float t) {
// Smooth start and end, mimicking half a sine wave. // Smooth start and end, mimicking half a sine wave.
return -0.5 * (cos(3.141592653589793 * t) - 1.0); return -0.5 * (cos(3.141592653589793 * t) - 1.0);
} }
// Exponential Easing // Exponential Easing
// Sharp transitions with rapid acceleration and deceleration. // Sharp transitions with rapid acceleration and deceleration.
float easeInExpo(float t) { float easeInExpo(float t) {
// Very slow start, accelerates exponentially. // Very slow start, accelerates exponentially.
return t == 0.0 ? 0.0 : pow(2.0, 10.0 * (t - 1.0)); return t == 0.0 ? 0.0 : pow(2.0, 10.0 * (t - 1.0));
} }
float easeOutExpo(float t) { float easeOutExpo(float t) {
// Starts fast and slows down exponentially. // Starts fast and slows down exponentially.
return t == 1.0 ? 1.0 : 1.0 - pow(2.0, -10.0 * t); return t == 1.0 ? 1.0 : 1.0 - pow(2.0, -10.0 * t);
} }
float easeInOutExpo(float t) { float easeInOutExpo(float t) {
// Combines easeIn and easeOut exponential for sharp transitions. // Combines easeIn and easeOut exponential for sharp transitions.
if (t == 0.0) return 0.0; if (t == 0.0) return 0.0;
if (t == 1.0) return 1.0; if (t == 1.0) return 1.0;
return t < 0.5 ? 0.5 * pow(2.0, 20.0 * t - 10.0) : 1.0 - 0.5 * pow(2.0, -20.0 * t + 10.0); return t < 0.5 ? 0.5 * pow(2.0, 20.0 * t - 10.0)
: 1.0 - 0.5 * pow(2.0, -20.0 * t + 10.0);
} }
// Back Easing // Back Easing
// Creates an overshooting effect for more dynamic animations. // Creates an overshooting effect for more dynamic animations.
float easeInOutBack(float t) { float easeInOutBack(float t) {
// Uses constants to define the overshooting magnitude. // Uses constants to define the overshooting magnitude.
const float c1 = 1.70158; const float c1 = 1.70158;
const float c2 = c1 * 1.525; const float c2 = c1 * 1.525;
return t < 0.5 return t < 0.5
? (pow(2.0 * t, 2.0) * ((c2 + 1.0) * 2.0 * t - c2)) / 2.0 ? (pow(2.0 * t, 2.0) * ((c2 + 1.0) * 2.0 * t - c2)) / 2.0
: (pow(2.0 * t - 2.0, 2.0) * ((c2 + 1.0) * (t * 2.0 - 2.0) + c2) + 2.0) / 2.0; : (pow(2.0 * t - 2.0, 2.0) * ((c2 + 1.0) * (t * 2.0 - 2.0) + c2) + 2.0) / 2.0;
} }
// --------------------------------------------------------------------- edge mask helpers // --------------------------------------------------------------------- edge mask helpers
// This method returns a mask which smoothly transitions towards zero when approaching // This method returns a mask which smoothly transitions towards zero when approaching
@@ -387,7 +388,7 @@ float getEdgeMask(vec2 uv, vec2 maxUV, float fadeWidth) {
// the fade zone is given in pixels. This uses the standard uniforms uSize and uPadding. // the fade zone is given in pixels. This uses the standard uniforms uSize and uPadding.
// This means that the fading zone is not actually at the actors boundaries but at the // This means that the fading zone is not actually at the actors boundaries but at the
// position of the window border in the texture. // position of the window border in the texture.
// The offset paramter controls whether the fading is placed inside the window borders // The offset parameter controls whether the fading is placed inside the window borders
// (offset = 0), ontop the window borders (offset = 0.5) or outside the window borders // (offset = 0), ontop the window borders (offset = 0.5) or outside the window borders
// (offset = 1). // (offset = 1).
float getAbsoluteEdgeMask(float fadePixels, float offset) { float getAbsoluteEdgeMask(float fadePixels, float offset) {
@@ -428,19 +429,13 @@ float getWinding(vec2 a, vec2 b) { return cross(vec3(a, 0.0), vec3(b, 0.0)).z; }
// Rotates the given 2D vector a clockwise by the angle alpha (given in radians). // Rotates the given 2D vector a clockwise by the angle alpha (given in radians).
vec2 rotate(vec2 a, float angle) { vec2 rotate(vec2 a, float angle) {
return vec2( return vec2(a.x * cos(angle) - a.y * sin(angle), a.x * sin(angle) + a.y * cos(angle));
a.x * cos(angle) - a.y * sin(angle),
a.x * sin(angle) + a.y * cos(angle)
);
} }
//rotates a given 2d vector, around a given center (angle is in radians) // rotates a given 2d vector, around a given center (angle is in radians)
vec2 rotate(vec2 a, float angle, vec2 center) vec2 rotate(vec2 a, float angle, vec2 center) {
{ return vec2(cos(angle) * (a.x - center.x) + sin(angle) * (a.y - center.y) + center.x,
return vec2( cos(angle) * (a.y - center.y) - sin(angle) * (a.x - center.x) + center.y);
cos(angle) * (a.x - center.x) + sin(angle) * (a.y - center.y) + center.x,
cos(angle) * (a.y - center.y) - sin(angle) * (a.x - center.x) + center.y
);
} }
// --------------------------------------------------------------------------------- noise // --------------------------------------------------------------------------------- noise
@@ -645,15 +640,13 @@ float simplex3DFractal(vec3 m) {
0.1333333 * simplex3D(4.0 * m * rot3) + 0.0666667 * simplex3D(8.0 * m); 0.1333333 * simplex3D(4.0 * m * rot3) + 0.0666667 * simplex3D(8.0 * m);
} }
// --------------------------------------------------------------------------------- remap
// --------------------------------------------------------------------------------- remap
/* /*
These functions remap a given value from one range to another. These functions remap a given value from one range to another.
The remap operation is particularly useful in shader programming The remap operation is particularly useful in shader programming
to scale or normalize data, ensuring compatibility across various to scale or normalize data, ensuring compatibility across various
input ranges. Each version of the remap function supports a input ranges. Each version of the remap function supports a
different data type: different data type:
1. float: Remap a single scalar value. 1. float: Remap a single scalar value.
@@ -671,42 +664,30 @@ This ensures a linear transformation from the old range to the new range.
// Maps a float value from one range [oldMin, oldMax] to another range [newMin, newMax]. // Maps a float value from one range [oldMin, oldMax] to another range [newMin, newMax].
// This is useful for normalizing or scaling scalar values to fit within a desired range. // This is useful for normalizing or scaling scalar values to fit within a desired range.
float remap(float value, float oldMin, float oldMax, float newMin, float newMax) { float remap(float value, float oldMin, float oldMax, float newMin, float newMax) {
return clamp( return clamp(newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMin,
newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMax);
newMin,
newMax
);
} }
// Remap for vec2 // Remap for vec2
// Maps a 2D vector (vec2) from one range [oldMin, oldMax] to another range [newMin, newMax]. // Maps a 2D vector (vec2) from one range [oldMin, oldMax] to another range [newMin,
// Each component of the vec2 is individually scaled and transformed. // newMax]. Each component of the vec2 is individually scaled and transformed.
vec2 remap(vec2 value, vec2 oldMin, vec2 oldMax, vec2 newMin, vec2 newMax) { vec2 remap(vec2 value, vec2 oldMin, vec2 oldMax, vec2 newMin, vec2 newMax) {
return clamp( return clamp(newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMin,
newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMax);
newMin,
newMax
);
} }
// Remap for vec3 // Remap for vec3
// Maps a 3D vector (vec3) from one range [oldMin, oldMax] to another range [newMin, newMax]. // Maps a 3D vector (vec3) from one range [oldMin, oldMax] to another range [newMin,
// Each component of the vec3 is individually scaled and transformed. // newMax]. Each component of the vec3 is individually scaled and transformed.
vec3 remap(vec3 value, vec3 oldMin, vec3 oldMax, vec3 newMin, vec3 newMax) { vec3 remap(vec3 value, vec3 oldMin, vec3 oldMax, vec3 newMin, vec3 newMax) {
return clamp( return clamp(newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMin,
newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMax);
newMin,
newMax
);
} }
// Remap for vec4 // Remap for vec4
// Maps a 4D vector (vec4) from one range [oldMin, oldMax] to another range [newMin, newMax]. // Maps a 4D vector (vec4) from one range [oldMin, oldMax] to another range [newMin,
// Each component of the vec4 is individually scaled and transformed. // newMax]. Each component of the vec4 is individually scaled and transformed.
vec4 remap(vec4 value, vec4 oldMin, vec4 oldMax, vec4 newMin, vec4 newMax) { vec4 remap(vec4 value, vec4 oldMin, vec4 oldMax, vec4 newMin, vec4 newMax) {
return clamp( return clamp(newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMin,
newMin + (value - oldMin) * (newMax - newMin) / (oldMax - oldMin), newMax);
newMin,
newMax
);
} }