moth11.net
frontend for xcvr appview
added trails maybe
+176
-1
src/app.html
+176
-1
src/app.html
···
74
74
</filter>
75
75
</defs>
76
76
</svg>
77
-
<div style="display: flex; flex-direction:column; justify-content: space-between; height:100vh; height: 100dvh;">%sveltekit.body%</div>
77
+
<div style="display: flex; flex-direction:column; justify-content: space-between; height:100vh; height: 100dvh;">%sveltekit.body%</div><script type="module">
78
+
import {
79
+
Polyline,
80
+
Renderer,
81
+
Transform,
82
+
Geometry,
83
+
Program,
84
+
Mesh,
85
+
Vec3,
86
+
Vec2,
87
+
Color,
88
+
} from "https://cdn.jsdelivr.net/npm/ogl@0.0.32/dist/ogl.mjs";
89
+
90
+
const vertex = `
91
+
attribute vec3 position;
92
+
attribute vec3 next;
93
+
attribute vec3 prev;
94
+
attribute vec2 uv;
95
+
attribute float side;
96
+
97
+
uniform vec2 uResolution;
98
+
uniform float uDPR;
99
+
uniform float uThickness;
100
+
101
+
vec4 getPosition() {
102
+
vec2 aspect = vec2(uResolution.x / uResolution.y, 1);
103
+
vec2 nextScreen = next.xy * aspect;
104
+
vec2 prevScreen = prev.xy * aspect;
105
+
106
+
vec2 tangent = normalize(nextScreen - prevScreen);
107
+
vec2 normal = vec2(-tangent.y, tangent.x);
108
+
normal /= aspect;
109
+
normal *= 1.0 - pow(abs(uv.y - 0.5) * 1.9, 2.0);
110
+
111
+
float pixelWidth = 1.0 / (uResolution.y / uDPR);
112
+
normal *= pixelWidth * uThickness;
113
+
114
+
// When the points are on top of each other, shrink the line to avoid artifacts.
115
+
float dist = length(nextScreen - prevScreen);
116
+
normal *= smoothstep(0.0, 0.02, dist);
117
+
118
+
vec4 current = vec4(position, 1);
119
+
current.xy -= normal * side;
120
+
return current;
121
+
}
122
+
123
+
void main() {
124
+
gl_Position = getPosition();
125
+
}
126
+
`;
127
+
128
+
{
129
+
const renderer = new Renderer({ dpr: 2 });
130
+
const gl = renderer.gl;
131
+
document.body.appendChild(gl.canvas);
132
+
gl.clearColor(0.9, 0.9, 0.9, 1);
133
+
134
+
const scene = new Transform();
135
+
136
+
const lines = [];
137
+
138
+
function resize() {
139
+
renderer.setSize(window.innerWidth, window.innerHeight);
140
+
141
+
// We call resize on the polylines to update their resolution uniforms
142
+
lines.forEach((line) => line.polyline.resize());
143
+
}
144
+
window.addEventListener("resize", resize, false);
145
+
146
+
// If you're interested in learning about drawing lines with geometry,
147
+
// go through this detailed article by Matt DesLauriers
148
+
// https://mattdesl.svbtle.com/drawing-lines-is-hard
149
+
// It's an excellent breakdown of the approaches and their pitfalls.
150
+
151
+
// In this example, we're making screen-space polylines. Basically it
152
+
// involves creating a geometry of vertices along a path - with two vertices
153
+
// at each point. Then in the vertex shader, we push each pair apart to
154
+
// give the line some width.
155
+
156
+
// Just a helper function to make the code neater
157
+
function random(a, b) {
158
+
const alpha = Math.random();
159
+
return a * (1.0 - alpha) + b * alpha;
160
+
}
161
+
162
+
// We're going to make a number of different coloured lines for fun.
163
+
["#e18f39", "#c5c042", "#387f4d", "#1d4633", "#000000"].forEach(
164
+
(color, i) => {
165
+
// Store a few values for each lines' randomised spring movement
166
+
const line = {
167
+
spring: random(0.02, 0.1),
168
+
friction: random(0.7, 0.95),
169
+
mouseVelocity: new Vec3(),
170
+
mouseOffset: new Vec3(random(-1, 1) * 0.02),
171
+
};
172
+
173
+
// Create an array of Vec3s (eg [[0, 0, 0], ...])
174
+
const count = 20;
175
+
const points = (line.points = []);
176
+
for (let i = 0; i < count; i++) points.push(new Vec3());
177
+
178
+
line.polyline = new Polyline(gl, {
179
+
points,
180
+
vertex,
181
+
uniforms: {
182
+
uColor: { value: new Color(color) },
183
+
uThickness: { value: random(20, 50) },
184
+
},
185
+
});
186
+
187
+
line.polyline.mesh.setParent(scene);
188
+
189
+
lines.push(line);
190
+
}
191
+
);
192
+
193
+
// Call initial resize after creating the polylines
194
+
resize();
195
+
196
+
// Add handlers to get mouse position
197
+
const mouse = new Vec3();
198
+
if ("ontouchstart" in window) {
199
+
window.addEventListener("touchstart", updateMouse, false);
200
+
window.addEventListener("touchmove", updateMouse, false);
201
+
} else {
202
+
window.addEventListener("mousemove", updateMouse, false);
203
+
}
204
+
205
+
function updateMouse(e) {
206
+
if (e.changedTouches && e.changedTouches.length) {
207
+
e.x = e.changedTouches[0].pageX;
208
+
e.y = e.changedTouches[0].pageY;
209
+
}
210
+
if (e.x === undefined) {
211
+
e.x = e.pageX;
212
+
e.y = e.pageY;
213
+
}
214
+
215
+
// Get mouse value in -1 to 1 range, with y flipped
216
+
mouse.set(
217
+
(e.x / gl.renderer.width) * 2 - 1,
218
+
(e.y / gl.renderer.height) * -2 + 1,
219
+
0
220
+
);
221
+
}
222
+
223
+
const tmp = new Vec3();
224
+
225
+
requestAnimationFrame(update);
226
+
function update(t) {
227
+
requestAnimationFrame(update);
228
+
229
+
lines.forEach((line) => {
230
+
// Update polyline input points
231
+
for (let i = line.points.length - 1; i >= 0; i--) {
232
+
if (!i) {
233
+
// For the first point, spring ease it to the mouse position
234
+
tmp
235
+
.copy(mouse)
236
+
.add(line.mouseOffset)
237
+
.sub(line.points[i])
238
+
.multiply(line.spring);
239
+
line.mouseVelocity.add(tmp).multiply(line.friction);
240
+
line.points[i].add(line.mouseVelocity);
241
+
} else {
242
+
// The rest of the points ease to the point in front of them, making a line
243
+
line.points[i].lerp(line.points[i - 1], 0.9);
244
+
}
245
+
}
246
+
line.polyline.updateGeometry();
247
+
});
248
+
249
+
renderer.render({ scene });
250
+
}
251
+
}
252
+
</script>
78
253
</body>
79
254
</html>
-2
src/lib/components/AutoGrowTextArea.svelte
-2
src/lib/components/AutoGrowTextArea.svelte
···
26
26
let inputEl: HTMLTextAreaElement;
27
27
function adjust(event: Event) {
28
28
onInput?.(event as InputEvent);
29
-
console.log("next message is emoji check: ");
30
-
console.log(inputEl.selectionStart, inputEl.selectionEnd);
31
29
console.log(checkEmoji(inputEl.selectionStart, inputEl.selectionEnd));
32
30
}
33
31