1float getSdfRectangle(in vec2 p, in vec2 xy, in vec2 b)
2{
3 vec2 d = abs(p - xy) - b;
4 return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
5}
6
7// Based on Inigo Quilez's 2D distance functions article: https://iquilezles.org/articles/distfunctions2d/
8// Potencially optimized by eliminating conditionals and loops to enhance performance and reduce branching
9
10float seg(in vec2 p, in vec2 a, in vec2 b, inout float s, float d) {
11 vec2 e = b - a;
12 vec2 w = p - a;
13 vec2 proj = a + e * clamp(dot(w, e) / dot(e, e), 0.0, 1.0);
14 float segd = dot(p - proj, p - proj);
15 d = min(d, segd);
16
17 float c0 = step(0.0, p.y - a.y);
18 float c1 = 1.0 - step(0.0, p.y - b.y);
19 float c2 = 1.0 - step(0.0, e.x * w.y - e.y * w.x);
20 float allCond = c0 * c1 * c2;
21 float noneCond = (1.0 - c0) * (1.0 - c1) * (1.0 - c2);
22 float flip = mix(1.0, -1.0, step(0.5, allCond + noneCond));
23 s *= flip;
24 return d;
25}
26
27float getSdfParallelogram(in vec2 p, in vec2 v0, in vec2 v1, in vec2 v2, in vec2 v3) {
28 float s = 1.0;
29 float d = dot(p - v0, p - v0);
30
31 d = seg(p, v0, v3, s, d);
32 d = seg(p, v1, v0, s, d);
33 d = seg(p, v2, v1, s, d);
34 d = seg(p, v3, v2, s, d);
35
36 return s * sqrt(d);
37}
38
39vec2 normalize(vec2 value, float isPosition) {
40 return (value * 2.0 - (iResolution.xy * isPosition)) / iResolution.y;
41}
42
43float antialising(float distance) {
44 return 1. - smoothstep(0., normalize(vec2(2., 2.), 0.).x, distance);
45}
46
47float determineStartVertexFactor(vec2 a, vec2 b) {
48 // Conditions using step
49 float condition1 = step(b.x, a.x) * step(a.y, b.y); // a.x < b.x && a.y > b.y
50 float condition2 = step(a.x, b.x) * step(b.y, a.y); // a.x > b.x && a.y < b.y
51
52 // If neither condition is met, return 1 (else case)
53 return 1.0 - max(condition1, condition2);
54}
55
56vec2 getRectangleCenter(vec4 rectangle) {
57 return vec2(rectangle.x + (rectangle.z / 2.), rectangle.y - (rectangle.w / 2.));
58}
59float ease(float x) {
60 return pow(1.0 - x, 3.0);
61}
62
63const vec4 TRAIL_COLOR = vec4(0.0, 0.2, 0.5, 0.1);
64const float DURATION = 0.15; //IN SECONDS
65
66void mainImage(out vec4 fragColor, in vec2 fragCoord)
67{
68 #if !defined(WEB)
69 fragColor = texture(iChannel0, fragCoord.xy / iResolution.xy);
70 #endif
71 // Normalization for fragCoord to a space of -1 to 1;
72 vec2 vu = normalize(fragCoord, 1.);
73 vec2 offsetFactor = vec2(-.5, 0.5);
74
75 // Normalization for cursor position and size;
76 // cursor xy has the postion in a space of -1 to 1;
77 // zw has the width and height
78 vec4 currentCursor = vec4(normalize(iCurrentCursor.xy, 1.), normalize(iCurrentCursor.zw, 0.));
79 vec4 previousCursor = vec4(normalize(iPreviousCursor.xy, 1.), normalize(iPreviousCursor.zw, 0.));
80
81 // When drawing a parellelogram between cursors for the trail i need to determine where to start at the top-left or top-right vertex of the cursor
82 float vertexFactor = determineStartVertexFactor(currentCursor.xy, previousCursor.xy);
83 float invertedVertexFactor = 1.0 - vertexFactor;
84
85 // Set every vertex of my parellogram
86 vec2 v0 = vec2(currentCursor.x + currentCursor.z * vertexFactor, currentCursor.y - currentCursor.w);
87 vec2 v1 = vec2(currentCursor.x + currentCursor.z * invertedVertexFactor, currentCursor.y);
88 vec2 v2 = vec2(previousCursor.x + currentCursor.z * invertedVertexFactor, previousCursor.y);
89 vec2 v3 = vec2(previousCursor.x + currentCursor.z * vertexFactor, previousCursor.y - previousCursor.w);
90
91 float sdfCurrentCursor = getSdfRectangle(vu, currentCursor.xy - (currentCursor.zw * offsetFactor), currentCursor.zw * 0.5);
92 float sdfTrail = getSdfParallelogram(vu, v0, v1, v2, v3);
93
94 float progress = clamp((iTime - iTimeCursorChange) / DURATION, 0.0, 1.0);
95 float easedProgress = ease(progress);
96 // Distance between cursors determine the total length of the parallelogram;
97 vec2 centerCC = getRectangleCenter(currentCursor);
98 vec2 centerCP = getRectangleCenter(previousCursor);
99 float lineLength = distance(centerCC, centerCP);
100
101 vec4 newColor = vec4(fragColor);
102 // Compute fade factor based on distance along the trail
103 float fadeFactor = 1.0 - smoothstep(lineLength, sdfCurrentCursor, easedProgress * lineLength);
104
105 // Apply fading effect to trail color
106 vec4 fadedTrailColor = TRAIL_COLOR * fadeFactor;
107
108 // Blend trail with fade effect
109 newColor = mix(newColor, fadedTrailColor, antialising(sdfTrail));
110 // Draw current cursor
111 newColor = mix(newColor, TRAIL_COLOR, antialising(sdfCurrentCursor));
112 newColor = mix(newColor, fragColor, step(sdfCurrentCursor, 0.));
113 fragColor = mix(fragColor, newColor, step(sdfCurrentCursor, easedProgress * lineLength));
114}