+5 -1

.claude/settings.local.json

··· 4 4 "Bash(pnpm check:*)", 5 5 "mcp__ide__getDiagnostics", 6 6 "mcp__plugin_svelte_svelte__svelte-autofixer", 7 7 - "mcp__plugin_svelte_svelte__list-sections" 7 7 + "mcp__plugin_svelte_svelte__list-sections", 8 8 + "Bash(pkill:*)", 9 9 + "Bash(timeout 8 pnpm dev:*)", 10 10 + "Bash(git checkout:*)", 11 11 + "Bash(npx svelte-kit:*)" 8 12 ] 9 13 } 10 14 }

+34

src/lib/cards/FluidTextCard/CreateFluidTextCardModal.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { Button, Input, Modal, Subheading, Label } from '@foxui/core'; 3 3 + import type { CreationModalComponentProps } from '../types'; 4 4 + 5 5 + let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props(); 6 6 + 7 7 + let text = $state(item.cardData?.text || ''); 8 8 + 9 9 + function handleCreate() { 10 10 + if (!text.trim()) return; 11 11 + item.cardData.text = text.trim(); 12 12 + oncreate(); 13 13 + } 14 14 + </script> 15 15 + 16 16 + <Modal open={true} closeButton={false}> 17 17 + <Subheading>Enter text for fluid effect</Subheading> 18 18 + <div class="mt-2"> 19 19 + <Label class="mb-1 text-xs">Text</Label> 20 20 + <Input 21 21 + bind:value={text} 22 22 + placeholder="Enter your text..." 23 23 + autofocus 24 24 + onkeydown={(e) => { 25 25 + if (e.key === 'Enter') handleCreate(); 26 26 + }} 27 27 + /> 28 28 + </div> 29 29 + 30 30 + <div class="mt-4 flex justify-end gap-2"> 31 31 + <Button onclick={oncancel} variant="ghost">Cancel</Button> 32 32 + <Button onclick={handleCreate} disabled={!text.trim()}>Create</Button> 33 33 + </div> 34 34 + </Modal>

+58

src/lib/cards/FluidTextCard/EditingFluidTextCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Item } from '$lib/types'; 3 3 + import type { ContentComponentProps } from '../types'; 4 4 + import FluidTextCard from './FluidTextCard.svelte'; 5 5 + 6 6 + let { item = $bindable<Item>() }: ContentComponentProps = $props(); 7 7 + 8 8 + let isEditing = $state(false); 9 9 + let inputElement: HTMLInputElement | null = $state(null); 10 10 + 11 11 + function handleClick() { 12 12 + if (isEditing) return; 13 13 + isEditing = true; 14 14 + requestAnimationFrame(() => { 15 15 + inputElement?.focus(); 16 16 + inputElement?.select(); 17 17 + }); 18 18 + } 19 19 + 20 20 + function handleBlur() { 21 21 + isEditing = false; 22 22 + } 23 23 + 24 24 + function handleKeydown(e: KeyboardEvent) { 25 25 + if (e.key === 'Enter' || e.key === 'Escape') { 26 26 + isEditing = false; 27 27 + } 28 28 + } 29 29 + </script> 30 30 + 31 31 + <!-- svelte-ignore a11y_no_static_element_interactions --> 32 32 + <!-- svelte-ignore a11y_click_events_have_key_events --> 33 33 + <div 34 34 + class="relative h-full w-full cursor-text transition-colors duration-150 {isEditing ? 'ring-2 ring-white/30' : ''}" 35 35 + onclick={handleClick} 36 36 + > 37 37 + <FluidTextCard {item} /> 38 38 + 39 39 + {#if isEditing} 40 40 + <!-- svelte-ignore a11y_autofocus --> 41 41 + <!-- svelte-ignore a11y_no_static_element_interactions --> 42 42 + <!-- svelte-ignore a11y_click_events_have_key_events --> 43 43 + <div 44 44 + class="absolute inset-0 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm" 45 45 + onclick={(e) => e.stopPropagation()} 46 46 + > 47 47 + <input 48 48 + bind:this={inputElement} 49 49 + bind:value={item.cardData.text} 50 50 + onblur={handleBlur} 51 51 + onkeydown={handleKeydown} 52 52 + class="w-full max-w-md rounded-md border border-white/20 bg-white/10 px-4 py-3 text-center text-2xl font-bold text-white outline-none transition-colors focus:border-white/40 focus:bg-white/20" 53 53 + placeholder="Enter text" 54 54 + autofocus 55 55 + /> 56 56 + </div> 57 57 + {/if} 58 58 + </div>

+1619

src/lib/cards/FluidTextCard/FluidTextCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { ContentComponentProps } from '../types'; 3 3 + import { onMount, onDestroy, tick } from 'svelte'; 4 4 + import ditheringTextureUrl from './LDR_LLL1_0.png'; 5 5 + 6 6 + let { item }: ContentComponentProps = $props(); 7 7 + 8 8 + let container: HTMLDivElement; 9 9 + let fluidCanvas: HTMLCanvasElement; 10 10 + let maskCanvas: HTMLCanvasElement; 11 11 + let animationId: number; 12 12 + let splatIntervalId: ReturnType<typeof setInterval>; 13 13 + let maskDrawRaf = 0; 14 14 + let maskReady = false; 15 15 + let isInitialized = $state(false); 16 16 + let resizeObserver: ResizeObserver | null = null; 17 17 + 18 18 + // Get text from card data 19 19 + const text = $derived((item.cardData?.text as string) || 'hello'); 20 20 + const fontWeight = '900'; 21 21 + const fontFamily = 'Arial'; 22 22 + const fontSize = $derived((item.cardData?.fontSize as number) || 0.13); 23 23 + 24 24 + // Draw text mask on overlay canvas 25 25 + function drawOverlayCanvas() { 26 26 + if (!maskCanvas || !container) return; 27 27 + 28 28 + const width = container.clientWidth; 29 29 + const height = container.clientHeight; 30 30 + if (width === 0 || height === 0) return; 31 31 + 32 32 + const dpr = window.devicePixelRatio || 1; 33 33 + 34 34 + maskCanvas.width = width * dpr; 35 35 + maskCanvas.height = height * dpr; 36 36 + 37 37 + const ctx = maskCanvas.getContext('2d')!; 38 38 + ctx.setTransform(1, 0, 0, 1, 0, 0); 39 39 + ctx.globalCompositeOperation = 'source-over'; 40 40 + ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); 41 41 + ctx.scale(dpr, dpr); 42 42 + 43 43 + ctx.fillStyle = 'black'; 44 44 + ctx.fillRect(0, 0, width, height); 45 45 + 46 46 + // Font size as percentage of container width 47 47 + const textFontSize = Math.round(width * fontSize); 48 48 + ctx.font = `${fontWeight} ${textFontSize}px ${fontFamily}`; 49 49 + 50 50 + ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; 51 51 + ctx.lineWidth = 2; 52 52 + ctx.textAlign = 'center'; 53 53 + 54 54 + const metrics = ctx.measureText(text); 55 55 + let textY = height / 2; 56 56 + if ( 57 57 + metrics.actualBoundingBoxAscent !== undefined && 58 58 + metrics.actualBoundingBoxDescent !== undefined 59 59 + ) { 60 60 + ctx.textBaseline = 'alphabetic'; 61 61 + textY = (height + metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2; 62 62 + } else { 63 63 + ctx.textBaseline = 'middle'; 64 64 + } 65 65 + 66 66 + ctx.strokeText(text, width / 2, textY); 67 67 + ctx.globalCompositeOperation = 'destination-out'; 68 68 + ctx.fillText(text, width / 2, textY); 69 69 + ctx.globalCompositeOperation = 'source-over'; 70 70 + maskReady = true; 71 71 + } 72 72 + 73 73 + function scheduleMaskDraw() { 74 74 + const width = container?.clientWidth ?? 0; 75 75 + const height = container?.clientHeight ?? 0; 76 76 + if (width > 0 && height > 0) { 77 77 + drawOverlayCanvas(); 78 78 + return; 79 79 + } 80 80 + if (maskDrawRaf) return; 81 81 + maskDrawRaf = requestAnimationFrame(() => { 82 82 + maskDrawRaf = 0; 83 83 + const nextWidth = container?.clientWidth ?? 0; 84 84 + const nextHeight = container?.clientHeight ?? 0; 85 85 + if (nextWidth === 0 || nextHeight === 0) { 86 86 + scheduleMaskDraw(); 87 87 + return; 88 88 + } 89 89 + drawOverlayCanvas(); 90 90 + }); 91 91 + } 92 92 + 93 93 + // Redraw overlay when text settings change (only after initialization) 94 94 + $effect(() => { 95 95 + // Access all reactive values to track them 96 96 + text; 97 97 + fontSize; 98 98 + // Only redraw if already initialized 99 99 + if (isInitialized) { 100 100 + scheduleMaskDraw(); 101 101 + } 102 102 + }); 103 103 + 104 104 + onMount(async () => { 105 105 + // Wait for layout to settle 106 106 + await tick(); 107 107 + // Wait for a frame to ensure dimensions are set 108 108 + requestAnimationFrame(() => { 109 109 + initFluidSimulation(); 110 110 + }); 111 111 + 112 112 + if (document.fonts?.ready) { 113 113 + document.fonts.ready.then(() => { 114 114 + if (isInitialized) scheduleMaskDraw(); 115 115 + }); 116 116 + } 117 117 + }); 118 118 + 119 119 + onDestroy(() => { 120 120 + if (animationId) cancelAnimationFrame(animationId); 121 121 + if (splatIntervalId) clearInterval(splatIntervalId); 122 122 + if (maskDrawRaf) cancelAnimationFrame(maskDrawRaf); 123 123 + if (resizeObserver) resizeObserver.disconnect(); 124 124 + }); 125 125 + 126 126 + function initFluidSimulation() { 127 127 + if (!fluidCanvas || !maskCanvas || !container) return; 128 128 + 129 129 + maskReady = false; 130 130 + scheduleMaskDraw(); 131 131 + 132 132 + // Simulation config 133 133 + const config = { 134 134 + SIM_RESOLUTION: 128, 135 135 + DYE_RESOLUTION: 1024, 136 136 + CAPTURE_RESOLUTION: 512, 137 137 + DENSITY_DISSIPATION: 1.0, 138 138 + VELOCITY_DISSIPATION: 0.1, 139 139 + PRESSURE: 0.8, 140 140 + PRESSURE_ITERATIONS: 20, 141 141 + CURL: 30, 142 142 + SPLAT_RADIUS: 0.25, 143 143 + SPLAT_FORCE: 1000, 144 144 + SHADING: true, 145 145 + COLORFUL: true, 146 146 + COLOR_UPDATE_SPEED: 10, 147 147 + PAUSED: false, 148 148 + BACK_COLOR: { r: 0, g: 0, b: 0 }, 149 149 + TRANSPARENT: false, 150 150 + BLOOM: false, 151 151 + BLOOM_ITERATIONS: 8, 152 152 + BLOOM_RESOLUTION: 256, 153 153 + BLOOM_INTENSITY: 0.8, 154 154 + BLOOM_THRESHOLD: 0.8, 155 155 + BLOOM_SOFT_KNEE: 0.7, 156 156 + SUNRAYS: true, 157 157 + SUNRAYS_RESOLUTION: 196, 158 158 + SUNRAYS_WEIGHT: 1.0, 159 159 + START_HUE: 0.5, 160 160 + END_HUE: 1.0, 161 161 + RENDER_SPEED: 0.4 162 162 + }; 163 163 + 164 164 + function PointerPrototype() { 165 165 + return { 166 166 + id: -1, 167 167 + texcoordX: 0, 168 168 + texcoordY: 0, 169 169 + prevTexcoordX: 0, 170 170 + prevTexcoordY: 0, 171 171 + deltaX: 0, 172 172 + deltaY: 0, 173 173 + down: false, 174 174 + moved: false, 175 175 + color: [0, 0, 0] as [number, number, number] 176 176 + }; 177 177 + } 178 178 + 179 179 + type Pointer = ReturnType<typeof PointerPrototype>; 180 180 + let pointers: Pointer[] = [PointerPrototype()]; 181 181 + let splatStack: number[] = []; 182 182 + 183 183 + const { gl, ext } = getWebGLContext(fluidCanvas); 184 184 + if (!gl) return; 185 185 + 186 186 + if (isMobile()) { 187 187 + config.DYE_RESOLUTION = 512; 188 188 + } 189 189 + if (!ext.supportLinearFiltering) { 190 190 + config.DYE_RESOLUTION = 512; 191 191 + config.SHADING = false; 192 192 + config.BLOOM = false; 193 193 + config.SUNRAYS = false; 194 194 + } 195 195 + 196 196 + function getWebGLContext(canvas: HTMLCanvasElement) { 197 197 + const params = { 198 198 + alpha: true, 199 199 + depth: false, 200 200 + stencil: true, 201 201 + antialias: false, 202 202 + preserveDrawingBuffer: false 203 203 + }; 204 204 + 205 205 + let gl = canvas.getContext('webgl2', params) as WebGL2RenderingContext | null; 206 206 + const isWebGL2 = !!gl; 207 207 + if (!isWebGL2) { 208 208 + gl = (canvas.getContext('webgl', params) || 209 209 + canvas.getContext('experimental-webgl', params)) as WebGL2RenderingContext | null; 210 210 + } 211 211 + 212 212 + if (!gl) return { gl: null, ext: { supportLinearFiltering: false } as any }; 213 213 + 214 214 + let halfFloat: any; 215 215 + let supportLinearFiltering = false; 216 216 + if (isWebGL2) { 217 217 + gl.getExtension('EXT_color_buffer_float'); 218 218 + supportLinearFiltering = !!gl.getExtension('OES_texture_float_linear'); 219 219 + } else { 220 220 + halfFloat = gl.getExtension('OES_texture_half_float'); 221 221 + supportLinearFiltering = !!gl.getExtension('OES_texture_half_float_linear'); 222 222 + } 223 223 + 224 224 + gl.clearColor(0.0, 0.0, 0.0, 1.0); 225 225 + 226 226 + let halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat?.HALF_FLOAT_OES; 227 227 + let fallbackToUnsignedByte = false; 228 228 + if (!halfFloatTexType) { 229 229 + halfFloatTexType = gl.UNSIGNED_BYTE; 230 230 + supportLinearFiltering = true; 231 231 + fallbackToUnsignedByte = true; 232 232 + } 233 233 + let formatRGBA: any; 234 234 + let formatRG: any; 235 235 + let formatR: any; 236 236 + 237 237 + if (isWebGL2) { 238 238 + if (fallbackToUnsignedByte) { 239 239 + formatRGBA = { internalFormat: gl.RGBA8, format: gl.RGBA }; 240 240 + formatRG = { internalFormat: gl.RGBA8, format: gl.RGBA }; 241 241 + formatR = { internalFormat: gl.RGBA8, format: gl.RGBA }; 242 242 + } else { 243 243 + formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType); 244 244 + formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType); 245 245 + formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType); 246 246 + if (!formatRGBA) formatRGBA = { internalFormat: gl.RGBA8, format: gl.RGBA }; 247 247 + if (!formatRG) formatRG = { internalFormat: gl.RGBA8, format: gl.RGBA }; 248 248 + if (!formatR) formatR = { internalFormat: gl.RGBA8, format: gl.RGBA }; 249 249 + } 250 250 + } else { 251 251 + formatRGBA = { internalFormat: gl.RGBA, format: gl.RGBA }; 252 252 + formatRG = { internalFormat: gl.RGBA, format: gl.RGBA }; 253 253 + formatR = { internalFormat: gl.RGBA, format: gl.RGBA }; 254 254 + if (!fallbackToUnsignedByte) { 255 255 + formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType) ?? formatRGBA; 256 256 + formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType) ?? formatRG; 257 257 + formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType) ?? formatR; 258 258 + } 259 259 + } 260 260 + 261 261 + return { 262 262 + gl, 263 263 + ext: { 264 264 + formatRGBA, 265 265 + formatRG, 266 266 + formatR, 267 267 + halfFloatTexType, 268 268 + supportLinearFiltering 269 269 + } 270 270 + }; 271 271 + } 272 272 + 273 273 + function getSupportedFormat( 274 274 + gl: WebGL2RenderingContext, 275 275 + internalFormat: number, 276 276 + format: number, 277 277 + type: number 278 278 + ): { internalFormat: number; format: number } | null { 279 279 + if (!supportRenderTextureFormat(gl, internalFormat, format, type)) { 280 280 + switch (internalFormat) { 281 281 + case gl.R16F: 282 282 + return getSupportedFormat(gl, gl.RG16F, gl.RG, type); 283 283 + case gl.RG16F: 284 284 + return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type); 285 285 + default: 286 286 + return null; 287 287 + } 288 288 + } 289 289 + return { internalFormat, format }; 290 290 + } 291 291 + 292 292 + function supportRenderTextureFormat( 293 293 + gl: WebGL2RenderingContext, 294 294 + internalFormat: number, 295 295 + format: number, 296 296 + type: number 297 297 + ) { 298 298 + if (!type) return false; 299 299 + const texture = gl.createTexture(); 300 300 + gl.bindTexture(gl.TEXTURE_2D, texture); 301 301 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 302 302 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 303 303 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 304 304 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 305 305 + gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null); 306 306 + 307 307 + const fbo = gl.createFramebuffer(); 308 308 + gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 309 309 + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); 310 310 + 311 311 + const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); 312 312 + return status === gl.FRAMEBUFFER_COMPLETE; 313 313 + } 314 314 + 315 315 + function isMobile() { 316 316 + return /Mobi|Android/i.test(navigator.userAgent); 317 317 + } 318 318 + 319 319 + class Material { 320 320 + vertexShader: WebGLShader; 321 321 + fragmentShaderSource: string; 322 322 + programs: Record<number, WebGLProgram> = {}; 323 323 + activeProgram: WebGLProgram | null = null; 324 324 + uniforms: Record<string, WebGLUniformLocation | null> = {}; 325 325 + 326 326 + constructor(vertexShader: WebGLShader, fragmentShaderSource: string) { 327 327 + this.vertexShader = vertexShader; 328 328 + this.fragmentShaderSource = fragmentShaderSource; 329 329 + } 330 330 + 331 331 + setKeywords(keywords: string[]) { 332 332 + let hash = 0; 333 333 + for (let i = 0; i < keywords.length; i++) hash += hashCode(keywords[i]); 334 334 + 335 335 + let program = this.programs[hash]; 336 336 + if (!program) { 337 337 + const fragmentShader = compileShader( 338 338 + gl.FRAGMENT_SHADER, 339 339 + this.fragmentShaderSource, 340 340 + keywords 341 341 + ); 342 342 + program = createProgram(this.vertexShader, fragmentShader); 343 343 + this.programs[hash] = program; 344 344 + } 345 345 + 346 346 + if (program === this.activeProgram) return; 347 347 + 348 348 + this.uniforms = getUniforms(program); 349 349 + this.activeProgram = program; 350 350 + } 351 351 + 352 352 + bind() { 353 353 + gl.useProgram(this.activeProgram); 354 354 + } 355 355 + } 356 356 + 357 357 + class Program { 358 358 + uniforms: Record<string, WebGLUniformLocation | null> = {}; 359 359 + program: WebGLProgram; 360 360 + 361 361 + constructor(vertexShader: WebGLShader, fragmentShader: WebGLShader) { 362 362 + this.program = createProgram(vertexShader, fragmentShader); 363 363 + this.uniforms = getUniforms(this.program); 364 364 + } 365 365 + 366 366 + bind() { 367 367 + gl.useProgram(this.program); 368 368 + } 369 369 + } 370 370 + 371 371 + function createProgram(vertexShader: WebGLShader, fragmentShader: WebGLShader) { 372 372 + const program = gl.createProgram()!; 373 373 + gl.attachShader(program, vertexShader); 374 374 + gl.attachShader(program, fragmentShader); 375 375 + gl.linkProgram(program); 376 376 + 377 377 + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 378 378 + console.trace(gl.getProgramInfoLog(program)); 379 379 + } 380 380 + 381 381 + return program; 382 382 + } 383 383 + 384 384 + function getUniforms(program: WebGLProgram) { 385 385 + const uniforms: Record<string, WebGLUniformLocation | null> = {}; 386 386 + const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); 387 387 + for (let i = 0; i < uniformCount; i++) { 388 388 + const uniformName = gl.getActiveUniform(program, i)!.name; 389 389 + uniforms[uniformName] = gl.getUniformLocation(program, uniformName); 390 390 + } 391 391 + return uniforms; 392 392 + } 393 393 + 394 394 + function compileShader(type: number, source: string, keywords?: string[]) { 395 395 + source = addKeywords(source, keywords); 396 396 + 397 397 + const shader = gl.createShader(type)!; 398 398 + gl.shaderSource(shader, source); 399 399 + gl.compileShader(shader); 400 400 + 401 401 + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 402 402 + console.trace(gl.getShaderInfoLog(shader)); 403 403 + } 404 404 + 405 405 + return shader; 406 406 + } 407 407 + 408 408 + function addKeywords(source: string, keywords?: string[]) { 409 409 + if (!keywords) return source; 410 410 + let keywordsString = ''; 411 411 + keywords.forEach((keyword) => { 412 412 + keywordsString += '#define ' + keyword + '\n'; 413 413 + }); 414 414 + return keywordsString + source; 415 415 + } 416 416 + 417 417 + const baseVertexShader = compileShader( 418 418 + gl.VERTEX_SHADER, 419 419 + ` 420 420 + precision highp float; 421 421 + attribute vec2 aPosition; 422 422 + varying vec2 vUv; 423 423 + varying vec2 vL; 424 424 + varying vec2 vR; 425 425 + varying vec2 vT; 426 426 + varying vec2 vB; 427 427 + uniform vec2 texelSize; 428 428 + void main () { 429 429 + vUv = aPosition * 0.5 + 0.5; 430 430 + vL = vUv - vec2(texelSize.x, 0.0); 431 431 + vR = vUv + vec2(texelSize.x, 0.0); 432 432 + vT = vUv + vec2(0.0, texelSize.y); 433 433 + vB = vUv - vec2(0.0, texelSize.y); 434 434 + gl_Position = vec4(aPosition, 0.0, 1.0); 435 435 + } 436 436 + ` 437 437 + ); 438 438 + 439 439 + const blurVertexShader = compileShader( 440 440 + gl.VERTEX_SHADER, 441 441 + ` 442 442 + precision highp float; 443 443 + attribute vec2 aPosition; 444 444 + varying vec2 vUv; 445 445 + varying vec2 vL; 446 446 + varying vec2 vR; 447 447 + uniform vec2 texelSize; 448 448 + void main () { 449 449 + vUv = aPosition * 0.5 + 0.5; 450 450 + float offset = 1.33333333; 451 451 + vL = vUv - texelSize * offset; 452 452 + vR = vUv + texelSize * offset; 453 453 + gl_Position = vec4(aPosition, 0.0, 1.0); 454 454 + } 455 455 + ` 456 456 + ); 457 457 + 458 458 + const blurShader = compileShader( 459 459 + gl.FRAGMENT_SHADER, 460 460 + ` 461 461 + precision mediump float; 462 462 + precision mediump sampler2D; 463 463 + varying vec2 vUv; 464 464 + varying vec2 vL; 465 465 + varying vec2 vR; 466 466 + uniform sampler2D uTexture; 467 467 + void main () { 468 468 + vec4 sum = texture2D(uTexture, vUv) * 0.29411764; 469 469 + sum += texture2D(uTexture, vL) * 0.35294117; 470 470 + sum += texture2D(uTexture, vR) * 0.35294117; 471 471 + gl_FragColor = sum; 472 472 + } 473 473 + ` 474 474 + ); 475 475 + 476 476 + const copyShader = compileShader( 477 477 + gl.FRAGMENT_SHADER, 478 478 + ` 479 479 + precision mediump float; 480 480 + precision mediump sampler2D; 481 481 + varying highp vec2 vUv; 482 482 + uniform sampler2D uTexture; 483 483 + void main () { 484 484 + gl_FragColor = texture2D(uTexture, vUv); 485 485 + } 486 486 + ` 487 487 + ); 488 488 + 489 489 + const clearShader = compileShader( 490 490 + gl.FRAGMENT_SHADER, 491 491 + ` 492 492 + precision mediump float; 493 493 + precision mediump sampler2D; 494 494 + varying highp vec2 vUv; 495 495 + uniform sampler2D uTexture; 496 496 + uniform float value; 497 497 + void main () { 498 498 + gl_FragColor = value * texture2D(uTexture, vUv); 499 499 + } 500 500 + ` 501 501 + ); 502 502 + 503 503 + const colorShader = compileShader( 504 504 + gl.FRAGMENT_SHADER, 505 505 + ` 506 506 + precision mediump float; 507 507 + uniform vec4 color; 508 508 + void main () { 509 509 + gl_FragColor = color; 510 510 + } 511 511 + ` 512 512 + ); 513 513 + 514 514 + const displayShaderSource = ` 515 515 + precision highp float; 516 516 + precision highp sampler2D; 517 517 + varying vec2 vUv; 518 518 + varying vec2 vL; 519 519 + varying vec2 vR; 520 520 + varying vec2 vT; 521 521 + varying vec2 vB; 522 522 + uniform sampler2D uTexture; 523 523 + uniform sampler2D uBloom; 524 524 + uniform sampler2D uSunrays; 525 525 + uniform sampler2D uDithering; 526 526 + uniform vec2 ditherScale; 527 527 + uniform vec2 texelSize; 528 528 + vec3 linearToGamma (vec3 color) { 529 529 + color = max(color, vec3(0)); 530 530 + return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0)); 531 531 + } 532 532 + void main () { 533 533 + vec3 c = texture2D(uTexture, vUv).rgb; 534 534 + #ifdef SHADING 535 535 + vec3 lc = texture2D(uTexture, vL).rgb; 536 536 + vec3 rc = texture2D(uTexture, vR).rgb; 537 537 + vec3 tc = texture2D(uTexture, vT).rgb; 538 538 + vec3 bc = texture2D(uTexture, vB).rgb; 539 539 + float dx = length(rc) - length(lc); 540 540 + float dy = length(tc) - length(bc); 541 541 + vec3 n = normalize(vec3(dx, dy, length(texelSize))); 542 542 + vec3 l = vec3(0.0, 0.0, 1.0); 543 543 + float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0); 544 544 + c *= diffuse; 545 545 + #endif 546 546 + #ifdef BLOOM 547 547 + vec3 bloom = texture2D(uBloom, vUv).rgb; 548 548 + #endif 549 549 + #ifdef SUNRAYS 550 550 + float sunrays = texture2D(uSunrays, vUv).r; 551 551 + c *= sunrays; 552 552 + #ifdef BLOOM 553 553 + bloom *= sunrays; 554 554 + #endif 555 555 + #endif 556 556 + #ifdef BLOOM 557 557 + float noise = texture2D(uDithering, vUv * ditherScale).r; 558 558 + noise = noise * 2.0 - 1.0; 559 559 + bloom += noise / 255.0; 560 560 + bloom = linearToGamma(bloom); 561 561 + c += bloom; 562 562 + #endif 563 563 + float a = max(c.r, max(c.g, c.b)); 564 564 + gl_FragColor = vec4(c, a); 565 565 + } 566 566 + `; 567 567 + 568 568 + const splatShader = compileShader( 569 569 + gl.FRAGMENT_SHADER, 570 570 + ` 571 571 + precision highp float; 572 572 + precision highp sampler2D; 573 573 + varying vec2 vUv; 574 574 + uniform sampler2D uTarget; 575 575 + uniform float aspectRatio; 576 576 + uniform vec3 color; 577 577 + uniform vec2 point; 578 578 + uniform float radius; 579 579 + void main () { 580 580 + vec2 p = vUv - point.xy; 581 581 + p.x *= aspectRatio; 582 582 + vec3 splat = exp(-dot(p, p) / radius) * color; 583 583 + vec3 base = texture2D(uTarget, vUv).xyz; 584 584 + gl_FragColor = vec4(base + splat, 1.0); 585 585 + } 586 586 + ` 587 587 + ); 588 588 + 589 589 + const advectionShader = compileShader( 590 590 + gl.FRAGMENT_SHADER, 591 591 + ` 592 592 + precision highp float; 593 593 + precision highp sampler2D; 594 594 + varying vec2 vUv; 595 595 + uniform sampler2D uVelocity; 596 596 + uniform sampler2D uSource; 597 597 + uniform vec2 texelSize; 598 598 + uniform vec2 dyeTexelSize; 599 599 + uniform float dt; 600 600 + uniform float dissipation; 601 601 + vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) { 602 602 + vec2 st = uv / tsize - 0.5; 603 603 + vec2 iuv = floor(st); 604 604 + vec2 fuv = fract(st); 605 605 + vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize); 606 606 + vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize); 607 607 + vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize); 608 608 + vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize); 609 609 + return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y); 610 610 + } 611 611 + void main () { 612 612 + #ifdef MANUAL_FILTERING 613 613 + vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize; 614 614 + vec4 result = bilerp(uSource, coord, dyeTexelSize); 615 615 + #else 616 616 + vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; 617 617 + vec4 result = texture2D(uSource, coord); 618 618 + #endif 619 619 + float decay = 1.0 + dissipation * dt; 620 620 + gl_FragColor = result / decay; 621 621 + }`, 622 622 + ext.supportLinearFiltering ? undefined : ['MANUAL_FILTERING'] 623 623 + ); 624 624 + 625 625 + const divergenceShader = compileShader( 626 626 + gl.FRAGMENT_SHADER, 627 627 + ` 628 628 + precision mediump float; 629 629 + precision mediump sampler2D; 630 630 + varying highp vec2 vUv; 631 631 + varying highp vec2 vL; 632 632 + varying highp vec2 vR; 633 633 + varying highp vec2 vT; 634 634 + varying highp vec2 vB; 635 635 + uniform sampler2D uVelocity; 636 636 + void main () { 637 637 + float L = texture2D(uVelocity, vL).x; 638 638 + float R = texture2D(uVelocity, vR).x; 639 639 + float T = texture2D(uVelocity, vT).y; 640 640 + float B = texture2D(uVelocity, vB).y; 641 641 + vec2 C = texture2D(uVelocity, vUv).xy; 642 642 + if (vL.x < 0.0) { L = -C.x; } 643 643 + if (vR.x > 1.0) { R = -C.x; } 644 644 + if (vT.y > 1.0) { T = -C.y; } 645 645 + if (vB.y < 0.0) { B = -C.y; } 646 646 + float div = 0.5 * (R - L + T - B); 647 647 + gl_FragColor = vec4(div, 0.0, 0.0, 1.0); 648 648 + } 649 649 + ` 650 650 + ); 651 651 + 652 652 + const curlShader = compileShader( 653 653 + gl.FRAGMENT_SHADER, 654 654 + ` 655 655 + precision mediump float; 656 656 + precision mediump sampler2D; 657 657 + varying highp vec2 vUv; 658 658 + varying highp vec2 vL; 659 659 + varying highp vec2 vR; 660 660 + varying highp vec2 vT; 661 661 + varying highp vec2 vB; 662 662 + uniform sampler2D uVelocity; 663 663 + void main () { 664 664 + float L = texture2D(uVelocity, vL).y; 665 665 + float R = texture2D(uVelocity, vR).y; 666 666 + float T = texture2D(uVelocity, vT).x; 667 667 + float B = texture2D(uVelocity, vB).x; 668 668 + float vorticity = R - L - T + B; 669 669 + gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0); 670 670 + } 671 671 + ` 672 672 + ); 673 673 + 674 674 + const vorticityShader = compileShader( 675 675 + gl.FRAGMENT_SHADER, 676 676 + ` 677 677 + precision highp float; 678 678 + precision highp sampler2D; 679 679 + varying vec2 vUv; 680 680 + varying vec2 vL; 681 681 + varying vec2 vR; 682 682 + varying vec2 vT; 683 683 + varying vec2 vB; 684 684 + uniform sampler2D uVelocity; 685 685 + uniform sampler2D uCurl; 686 686 + uniform float curl; 687 687 + uniform float dt; 688 688 + void main () { 689 689 + float L = texture2D(uCurl, vL).x; 690 690 + float R = texture2D(uCurl, vR).x; 691 691 + float T = texture2D(uCurl, vT).x; 692 692 + float B = texture2D(uCurl, vB).x; 693 693 + float C = texture2D(uCurl, vUv).x; 694 694 + vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L)); 695 695 + force /= length(force) + 0.0001; 696 696 + force *= curl * C; 697 697 + force.y *= -1.0; 698 698 + vec2 velocity = texture2D(uVelocity, vUv).xy; 699 699 + velocity += force * dt; 700 700 + velocity = min(max(velocity, -1000.0), 1000.0); 701 701 + gl_FragColor = vec4(velocity, 0.0, 1.0); 702 702 + } 703 703 + ` 704 704 + ); 705 705 + 706 706 + const pressureShader = compileShader( 707 707 + gl.FRAGMENT_SHADER, 708 708 + ` 709 709 + precision mediump float; 710 710 + precision mediump sampler2D; 711 711 + varying highp vec2 vUv; 712 712 + varying highp vec2 vL; 713 713 + varying highp vec2 vR; 714 714 + varying highp vec2 vT; 715 715 + varying highp vec2 vB; 716 716 + uniform sampler2D uPressure; 717 717 + uniform sampler2D uDivergence; 718 718 + void main () { 719 719 + float L = texture2D(uPressure, vL).x; 720 720 + float R = texture2D(uPressure, vR).x; 721 721 + float T = texture2D(uPressure, vT).x; 722 722 + float B = texture2D(uPressure, vB).x; 723 723 + float C = texture2D(uPressure, vUv).x; 724 724 + float divergence = texture2D(uDivergence, vUv).x; 725 725 + float pressure = (L + R + B + T - divergence) * 0.25; 726 726 + gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); 727 727 + } 728 728 + ` 729 729 + ); 730 730 + 731 731 + const gradientSubtractShader = compileShader( 732 732 + gl.FRAGMENT_SHADER, 733 733 + ` 734 734 + precision mediump float; 735 735 + precision mediump sampler2D; 736 736 + varying highp vec2 vUv; 737 737 + varying highp vec2 vL; 738 738 + varying highp vec2 vR; 739 739 + varying highp vec2 vT; 740 740 + varying highp vec2 vB; 741 741 + uniform sampler2D uPressure; 742 742 + uniform sampler2D uVelocity; 743 743 + void main () { 744 744 + float L = texture2D(uPressure, vL).x; 745 745 + float R = texture2D(uPressure, vR).x; 746 746 + float T = texture2D(uPressure, vT).x; 747 747 + float B = texture2D(uPressure, vB).x; 748 748 + vec2 velocity = texture2D(uVelocity, vUv).xy; 749 749 + velocity.xy -= vec2(R - L, T - B); 750 750 + gl_FragColor = vec4(velocity, 0.0, 1.0); 751 751 + } 752 752 + ` 753 753 + ); 754 754 + 755 755 + const sunraysMaskShader = compileShader( 756 756 + gl.FRAGMENT_SHADER, 757 757 + ` 758 758 + precision highp float; 759 759 + precision highp sampler2D; 760 760 + varying vec2 vUv; 761 761 + uniform sampler2D uTexture; 762 762 + void main () { 763 763 + vec4 c = texture2D(uTexture, vUv); 764 764 + float br = max(c.r, max(c.g, c.b)); 765 765 + c.a = 1.0 - min(max(br * 20.0, 0.0), 0.8); 766 766 + gl_FragColor = c; 767 767 + } 768 768 + ` 769 769 + ); 770 770 + 771 771 + const sunraysShader = compileShader( 772 772 + gl.FRAGMENT_SHADER, 773 773 + ` 774 774 + precision highp float; 775 775 + precision highp sampler2D; 776 776 + varying vec2 vUv; 777 777 + uniform sampler2D uTexture; 778 778 + uniform float weight; 779 779 + #define ITERATIONS 16 780 780 + void main () { 781 781 + float Density = 0.3; 782 782 + float Decay = 0.95; 783 783 + float Exposure = 0.7; 784 784 + vec2 coord = vUv; 785 785 + vec2 dir = vUv - 0.5; 786 786 + dir *= 1.0 / float(ITERATIONS) * Density; 787 787 + float illuminationDecay = 1.0; 788 788 + float color = texture2D(uTexture, vUv).a; 789 789 + for (int i = 0; i < ITERATIONS; i++) { 790 790 + coord -= dir; 791 791 + float col = texture2D(uTexture, coord).a; 792 792 + color += col * illuminationDecay * weight; 793 793 + illuminationDecay *= Decay; 794 794 + } 795 795 + gl_FragColor = vec4(color * Exposure, 0.0, 0.0, 1.0); 796 796 + } 797 797 + ` 798 798 + ); 799 799 + 800 800 + // Setup blit 801 801 + gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); 802 802 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW); 803 803 + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); 804 804 + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW); 805 805 + gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 806 806 + gl.enableVertexAttribArray(0); 807 807 + 808 808 + type FBO = { 809 809 + texture: WebGLTexture; 810 810 + fbo: WebGLFramebuffer; 811 811 + width: number; 812 812 + height: number; 813 813 + texelSizeX: number; 814 814 + texelSizeY: number; 815 815 + attach: (id: number) => number; 816 816 + }; 817 817 + 818 818 + type DoubleFBO = { 819 819 + width: number; 820 820 + height: number; 821 821 + texelSizeX: number; 822 822 + texelSizeY: number; 823 823 + read: FBO; 824 824 + write: FBO; 825 825 + swap: () => void; 826 826 + }; 827 827 + 828 828 + function blit(target: FBO | null, clear = false) { 829 829 + if (target === null) { 830 830 + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); 831 831 + gl.bindFramebuffer(gl.FRAMEBUFFER, null); 832 832 + } else { 833 833 + gl.viewport(0, 0, target.width, target.height); 834 834 + gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo); 835 835 + } 836 836 + if (clear) { 837 837 + gl.clearColor(0.0, 0.0, 0.0, 1.0); 838 838 + gl.clear(gl.COLOR_BUFFER_BIT); 839 839 + } 840 840 + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 841 841 + } 842 842 + 843 843 + let dye: DoubleFBO; 844 844 + let velocity: DoubleFBO; 845 845 + let divergence: FBO; 846 846 + let curl: FBO; 847 847 + let pressure: DoubleFBO; 848 848 + let sunrays: FBO; 849 849 + let sunraysTemp: FBO; 850 850 + 851 851 + const ditheringTexture = createTextureAsync(ditheringTextureUrl); 852 852 + 853 853 + const blurProgram = new Program(blurVertexShader, blurShader); 854 854 + const copyProgram = new Program(baseVertexShader, copyShader); 855 855 + const clearProgram = new Program(baseVertexShader, clearShader); 856 856 + const colorProgram = new Program(baseVertexShader, colorShader); 857 857 + const splatProgram = new Program(baseVertexShader, splatShader); 858 858 + const advectionProgram = new Program(baseVertexShader, advectionShader); 859 859 + const divergenceProgram = new Program(baseVertexShader, divergenceShader); 860 860 + const curlProgram = new Program(baseVertexShader, curlShader); 861 861 + const vorticityProgram = new Program(baseVertexShader, vorticityShader); 862 862 + const pressureProgram = new Program(baseVertexShader, pressureShader); 863 863 + const gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader); 864 864 + const sunraysMaskProgram = new Program(baseVertexShader, sunraysMaskShader); 865 865 + const sunraysProgram = new Program(baseVertexShader, sunraysShader); 866 866 + 867 867 + const displayMaterial = new Material(baseVertexShader, displayShaderSource); 868 868 + 869 869 + function getResolution(resolution: number) { 870 870 + let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight; 871 871 + if (aspectRatio < 1) aspectRatio = 1.0 / aspectRatio; 872 872 + const min = Math.round(resolution); 873 873 + const max = Math.round(resolution * aspectRatio); 874 874 + if (gl.drawingBufferWidth > gl.drawingBufferHeight) return { width: max, height: min }; 875 875 + else return { width: min, height: max }; 876 876 + } 877 877 + 878 878 + function createFBO( 879 879 + w: number, 880 880 + h: number, 881 881 + internalFormat: number, 882 882 + format: number, 883 883 + type: number, 884 884 + param: number 885 885 + ): FBO { 886 886 + gl.activeTexture(gl.TEXTURE0); 887 887 + const texture = gl.createTexture()!; 888 888 + gl.bindTexture(gl.TEXTURE_2D, texture); 889 889 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param); 890 890 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param); 891 891 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 892 892 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 893 893 + gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null); 894 894 + 895 895 + const fbo = gl.createFramebuffer()!; 896 896 + gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 897 897 + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); 898 898 + gl.viewport(0, 0, w, h); 899 899 + gl.clear(gl.COLOR_BUFFER_BIT); 900 900 + 901 901 + const texelSizeX = 1.0 / w; 902 902 + const texelSizeY = 1.0 / h; 903 903 + 904 904 + return { 905 905 + texture, 906 906 + fbo, 907 907 + width: w, 908 908 + height: h, 909 909 + texelSizeX, 910 910 + texelSizeY, 911 911 + attach(id: number) { 912 912 + gl.activeTexture(gl.TEXTURE0 + id); 913 913 + gl.bindTexture(gl.TEXTURE_2D, texture); 914 914 + return id; 915 915 + } 916 916 + }; 917 917 + } 918 918 + 919 919 + function createDoubleFBO( 920 920 + w: number, 921 921 + h: number, 922 922 + internalFormat: number, 923 923 + format: number, 924 924 + type: number, 925 925 + param: number 926 926 + ): DoubleFBO { 927 927 + let fbo1 = createFBO(w, h, internalFormat, format, type, param); 928 928 + let fbo2 = createFBO(w, h, internalFormat, format, type, param); 929 929 + 930 930 + return { 931 931 + width: w, 932 932 + height: h, 933 933 + texelSizeX: fbo1.texelSizeX, 934 934 + texelSizeY: fbo1.texelSizeY, 935 935 + get read() { 936 936 + return fbo1; 937 937 + }, 938 938 + set read(value) { 939 939 + fbo1 = value; 940 940 + }, 941 941 + get write() { 942 942 + return fbo2; 943 943 + }, 944 944 + set write(value) { 945 945 + fbo2 = value; 946 946 + }, 947 947 + swap() { 948 948 + const temp = fbo1; 949 949 + fbo1 = fbo2; 950 950 + fbo2 = temp; 951 951 + } 952 952 + }; 953 953 + } 954 954 + 955 955 + function resizeFBO( 956 956 + target: FBO, 957 957 + w: number, 958 958 + h: number, 959 959 + internalFormat: number, 960 960 + format: number, 961 961 + type: number, 962 962 + param: number 963 963 + ) { 964 964 + const newFBO = createFBO(w, h, internalFormat, format, type, param); 965 965 + copyProgram.bind(); 966 966 + gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0)); 967 967 + blit(newFBO); 968 968 + return newFBO; 969 969 + } 970 970 + 971 971 + function resizeDoubleFBO( 972 972 + target: DoubleFBO, 973 973 + w: number, 974 974 + h: number, 975 975 + internalFormat: number, 976 976 + format: number, 977 977 + type: number, 978 978 + param: number 979 979 + ) { 980 980 + if (target.width === w && target.height === h) return target; 981 981 + target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param); 982 982 + target.write = createFBO(w, h, internalFormat, format, type, param); 983 983 + target.width = w; 984 984 + target.height = h; 985 985 + target.texelSizeX = 1.0 / w; 986 986 + target.texelSizeY = 1.0 / h; 987 987 + return target; 988 988 + } 989 989 + 990 990 + function createTextureAsync(url: string) { 991 991 + const texture = gl.createTexture()!; 992 992 + gl.bindTexture(gl.TEXTURE_2D, texture); 993 993 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 994 994 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 995 995 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 996 996 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 997 997 + gl.texImage2D( 998 998 + gl.TEXTURE_2D, 999 999 + 0, 1000 1000 + gl.RGB, 1001 1001 + 1, 1002 1002 + 1, 1003 1003 + 0, 1004 1004 + gl.RGB, 1005 1005 + gl.UNSIGNED_BYTE, 1006 1006 + new Uint8Array([255, 255, 255]) 1007 1007 + ); 1008 1008 + 1009 1009 + const obj = { 1010 1010 + texture, 1011 1011 + width: 1, 1012 1012 + height: 1, 1013 1013 + attach(id: number) { 1014 1014 + gl.activeTexture(gl.TEXTURE0 + id); 1015 1015 + gl.bindTexture(gl.TEXTURE_2D, texture); 1016 1016 + return id; 1017 1017 + } 1018 1018 + }; 1019 1019 + 1020 1020 + const image = new Image(); 1021 1021 + image.onload = () => { 1022 1022 + obj.width = image.width; 1023 1023 + obj.height = image.height; 1024 1024 + gl.bindTexture(gl.TEXTURE_2D, texture); 1025 1025 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 1026 1026 + }; 1027 1027 + image.src = url; 1028 1028 + 1029 1029 + return obj; 1030 1030 + } 1031 1031 + 1032 1032 + function initFramebuffers() { 1033 1033 + const simRes = getResolution(config.SIM_RESOLUTION); 1034 1034 + const dyeRes = getResolution(config.DYE_RESOLUTION); 1035 1035 + 1036 1036 + const texType = ext.halfFloatTexType; 1037 1037 + const rgba = ext.formatRGBA; 1038 1038 + const rg = ext.formatRG; 1039 1039 + const r = ext.formatR; 1040 1040 + const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; 1041 1041 + 1042 1042 + gl.disable(gl.BLEND); 1043 1043 + 1044 1044 + if (!dye) { 1045 1045 + dye = createDoubleFBO( 1046 1046 + dyeRes.width, 1047 1047 + dyeRes.height, 1048 1048 + rgba.internalFormat, 1049 1049 + rgba.format, 1050 1050 + texType, 1051 1051 + filtering 1052 1052 + ); 1053 1053 + } else { 1054 1054 + dye = resizeDoubleFBO( 1055 1055 + dye, 1056 1056 + dyeRes.width, 1057 1057 + dyeRes.height, 1058 1058 + rgba.internalFormat, 1059 1059 + rgba.format, 1060 1060 + texType, 1061 1061 + filtering 1062 1062 + ); 1063 1063 + } 1064 1064 + 1065 1065 + if (!velocity) { 1066 1066 + velocity = createDoubleFBO( 1067 1067 + simRes.width, 1068 1068 + simRes.height, 1069 1069 + rg.internalFormat, 1070 1070 + rg.format, 1071 1071 + texType, 1072 1072 + filtering 1073 1073 + ); 1074 1074 + } else { 1075 1075 + velocity = resizeDoubleFBO( 1076 1076 + velocity, 1077 1077 + simRes.width, 1078 1078 + simRes.height, 1079 1079 + rg.internalFormat, 1080 1080 + rg.format, 1081 1081 + texType, 1082 1082 + filtering 1083 1083 + ); 1084 1084 + } 1085 1085 + 1086 1086 + divergence = createFBO( 1087 1087 + simRes.width, 1088 1088 + simRes.height, 1089 1089 + r.internalFormat, 1090 1090 + r.format, 1091 1091 + texType, 1092 1092 + gl.NEAREST 1093 1093 + ); 1094 1094 + curl = createFBO( 1095 1095 + simRes.width, 1096 1096 + simRes.height, 1097 1097 + r.internalFormat, 1098 1098 + r.format, 1099 1099 + texType, 1100 1100 + gl.NEAREST 1101 1101 + ); 1102 1102 + pressure = createDoubleFBO( 1103 1103 + simRes.width, 1104 1104 + simRes.height, 1105 1105 + r.internalFormat, 1106 1106 + r.format, 1107 1107 + texType, 1108 1108 + gl.NEAREST 1109 1109 + ); 1110 1110 + 1111 1111 + initSunraysFramebuffers(); 1112 1112 + } 1113 1113 + 1114 1114 + function initSunraysFramebuffers() { 1115 1115 + const res = getResolution(config.SUNRAYS_RESOLUTION); 1116 1116 + const texType = ext.halfFloatTexType; 1117 1117 + const r = ext.formatR; 1118 1118 + const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; 1119 1119 + 1120 1120 + sunrays = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering); 1121 1121 + sunraysTemp = createFBO( 1122 1122 + res.width, 1123 1123 + res.height, 1124 1124 + r.internalFormat, 1125 1125 + r.format, 1126 1126 + texType, 1127 1127 + filtering 1128 1128 + ); 1129 1129 + } 1130 1130 + 1131 1131 + function updateKeywords() { 1132 1132 + const displayKeywords: string[] = []; 1133 1133 + if (config.SHADING) displayKeywords.push('SHADING'); 1134 1134 + if (config.SUNRAYS) displayKeywords.push('SUNRAYS'); 1135 1135 + displayMaterial.setKeywords(displayKeywords); 1136 1136 + } 1137 1137 + 1138 1138 + function scaleByPixelRatio(input: number) { 1139 1139 + const pixelRatio = window.devicePixelRatio || 1; 1140 1140 + return Math.floor(input * pixelRatio); 1141 1141 + } 1142 1142 + 1143 1143 + function resizeCanvas() { 1144 1144 + const width = scaleByPixelRatio(fluidCanvas.clientWidth); 1145 1145 + const height = scaleByPixelRatio(fluidCanvas.clientHeight); 1146 1146 + if (fluidCanvas.width !== width || fluidCanvas.height !== height) { 1147 1147 + fluidCanvas.width = width; 1148 1148 + fluidCanvas.height = height; 1149 1149 + scheduleMaskDraw(); 1150 1150 + return true; 1151 1151 + } 1152 1152 + return false; 1153 1153 + } 1154 1154 + 1155 1155 + function HSVtoRGB(h: number, s: number, v: number) { 1156 1156 + let r = 0, 1157 1157 + g = 0, 1158 1158 + b = 0; 1159 1159 + const i = Math.floor(h * 6); 1160 1160 + const f = h * 6 - i; 1161 1161 + const p = v * (1 - s); 1162 1162 + const q = v * (1 - f * s); 1163 1163 + const t = v * (1 - (1 - f) * s); 1164 1164 + 1165 1165 + switch (i % 6) { 1166 1166 + case 0: 1167 1167 + (r = v), (g = t), (b = p); 1168 1168 + break; 1169 1169 + case 1: 1170 1170 + (r = q), (g = v), (b = p); 1171 1171 + break; 1172 1172 + case 2: 1173 1173 + (r = p), (g = v), (b = t); 1174 1174 + break; 1175 1175 + case 3: 1176 1176 + (r = p), (g = q), (b = v); 1177 1177 + break; 1178 1178 + case 4: 1179 1179 + (r = t), (g = p), (b = v); 1180 1180 + break; 1181 1181 + case 5: 1182 1182 + (r = v), (g = p), (b = q); 1183 1183 + break; 1184 1184 + } 1185 1185 + 1186 1186 + return { r, g, b }; 1187 1187 + } 1188 1188 + 1189 1189 + function generateColor() { 1190 1190 + const c = HSVtoRGB( 1191 1191 + Math.random() * (config.END_HUE - config.START_HUE) + config.START_HUE, 1192 1192 + 1.0, 1193 1193 + 1.0 1194 1194 + ); 1195 1195 + c.r *= 0.15; 1196 1196 + c.g *= 0.15; 1197 1197 + c.b *= 0.15; 1198 1198 + return c; 1199 1199 + } 1200 1200 + 1201 1201 + function correctRadius(radius: number) { 1202 1202 + const aspectRatio = fluidCanvas.width / fluidCanvas.height; 1203 1203 + if (aspectRatio > 1) radius *= aspectRatio; 1204 1204 + return radius; 1205 1205 + } 1206 1206 + 1207 1207 + function splat( 1208 1208 + x: number, 1209 1209 + y: number, 1210 1210 + dx: number, 1211 1211 + dy: number, 1212 1212 + color: { r: number; g: number; b: number } 1213 1213 + ) { 1214 1214 + splatProgram.bind(); 1215 1215 + gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0)); 1216 1216 + gl.uniform1f(splatProgram.uniforms.aspectRatio, fluidCanvas.width / fluidCanvas.height); 1217 1217 + gl.uniform2f(splatProgram.uniforms.point, x, y); 1218 1218 + gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0.0); 1219 1219 + gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100.0)); 1220 1220 + blit(velocity.write); 1221 1221 + velocity.swap(); 1222 1222 + 1223 1223 + gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0)); 1224 1224 + gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b); 1225 1225 + blit(dye.write); 1226 1226 + dye.swap(); 1227 1227 + } 1228 1228 + 1229 1229 + function multipleSplats(amount: number) { 1230 1230 + for (let i = 0; i < amount; i++) { 1231 1231 + const color = generateColor(); 1232 1232 + color.r *= 10.0; 1233 1233 + color.g *= 10.0; 1234 1234 + color.b *= 10.0; 1235 1235 + const x = Math.random(); 1236 1236 + const y = Math.random() < 0.5 ? 0.95 : 0.05; 1237 1237 + const dx = 300 * (Math.random() - 0.5); 1238 1238 + const dy = 3000 * (Math.random() - 0.5); 1239 1239 + splat(x, y, dx, dy, color); 1240 1240 + } 1241 1241 + } 1242 1242 + 1243 1243 + function splatPointer(pointer: Pointer) { 1244 1244 + const dx = pointer.deltaX * config.SPLAT_FORCE * 12; 1245 1245 + const dy = pointer.deltaY * config.SPLAT_FORCE * 12; 1246 1246 + splat(pointer.texcoordX, pointer.texcoordY, dx, dy, { 1247 1247 + r: pointer.color[0], 1248 1248 + g: pointer.color[1], 1249 1249 + b: pointer.color[2] 1250 1250 + }); 1251 1251 + } 1252 1252 + 1253 1253 + function step(dt: number) { 1254 1254 + gl.disable(gl.BLEND); 1255 1255 + 1256 1256 + curlProgram.bind(); 1257 1257 + gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1258 1258 + gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0)); 1259 1259 + blit(curl); 1260 1260 + 1261 1261 + vorticityProgram.bind(); 1262 1262 + gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1263 1263 + gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0)); 1264 1264 + gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1)); 1265 1265 + gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL); 1266 1266 + gl.uniform1f(vorticityProgram.uniforms.dt, dt); 1267 1267 + blit(velocity.write); 1268 1268 + velocity.swap(); 1269 1269 + 1270 1270 + divergenceProgram.bind(); 1271 1271 + gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1272 1272 + gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0)); 1273 1273 + blit(divergence); 1274 1274 + 1275 1275 + clearProgram.bind(); 1276 1276 + gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0)); 1277 1277 + gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE); 1278 1278 + blit(pressure.write); 1279 1279 + pressure.swap(); 1280 1280 + 1281 1281 + pressureProgram.bind(); 1282 1282 + gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1283 1283 + gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0)); 1284 1284 + for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) { 1285 1285 + gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1)); 1286 1286 + blit(pressure.write); 1287 1287 + pressure.swap(); 1288 1288 + } 1289 1289 + 1290 1290 + gradienSubtractProgram.bind(); 1291 1291 + gl.uniform2f( 1292 1292 + gradienSubtractProgram.uniforms.texelSize, 1293 1293 + velocity.texelSizeX, 1294 1294 + velocity.texelSizeY 1295 1295 + ); 1296 1296 + gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0)); 1297 1297 + gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1)); 1298 1298 + blit(velocity.write); 1299 1299 + velocity.swap(); 1300 1300 + 1301 1301 + advectionProgram.bind(); 1302 1302 + gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1303 1303 + if (!ext.supportLinearFiltering) { 1304 1304 + gl.uniform2f( 1305 1305 + advectionProgram.uniforms.dyeTexelSize, 1306 1306 + velocity.texelSizeX, 1307 1307 + velocity.texelSizeY 1308 1308 + ); 1309 1309 + } 1310 1310 + const velocityId = velocity.read.attach(0); 1311 1311 + gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId); 1312 1312 + gl.uniform1i(advectionProgram.uniforms.uSource, velocityId); 1313 1313 + gl.uniform1f(advectionProgram.uniforms.dt, dt); 1314 1314 + gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION); 1315 1315 + blit(velocity.write); 1316 1316 + velocity.swap(); 1317 1317 + 1318 1318 + if (!ext.supportLinearFiltering) { 1319 1319 + gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY); 1320 1320 + } 1321 1321 + gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0)); 1322 1322 + gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1)); 1323 1323 + gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION); 1324 1324 + blit(dye.write); 1325 1325 + dye.swap(); 1326 1326 + } 1327 1327 + 1328 1328 + function blur(target: FBO, temp: FBO, iterations: number) { 1329 1329 + blurProgram.bind(); 1330 1330 + for (let i = 0; i < iterations; i++) { 1331 1331 + gl.uniform2f(blurProgram.uniforms.texelSize, target.texelSizeX, 0.0); 1332 1332 + gl.uniform1i(blurProgram.uniforms.uTexture, target.attach(0)); 1333 1333 + blit(temp); 1334 1334 + 1335 1335 + gl.uniform2f(blurProgram.uniforms.texelSize, 0.0, target.texelSizeY); 1336 1336 + gl.uniform1i(blurProgram.uniforms.uTexture, temp.attach(0)); 1337 1337 + blit(target); 1338 1338 + } 1339 1339 + } 1340 1340 + 1341 1341 + function applySunrays(source: FBO, mask: FBO, destination: FBO) { 1342 1342 + gl.disable(gl.BLEND); 1343 1343 + sunraysMaskProgram.bind(); 1344 1344 + gl.uniform1i(sunraysMaskProgram.uniforms.uTexture, source.attach(0)); 1345 1345 + blit(mask); 1346 1346 + 1347 1347 + sunraysProgram.bind(); 1348 1348 + gl.uniform1f(sunraysProgram.uniforms.weight, config.SUNRAYS_WEIGHT); 1349 1349 + gl.uniform1i(sunraysProgram.uniforms.uTexture, mask.attach(0)); 1350 1350 + blit(destination); 1351 1351 + } 1352 1352 + 1353 1353 + function drawColor(target: FBO | null, color: { r: number; g: number; b: number }) { 1354 1354 + colorProgram.bind(); 1355 1355 + gl.uniform4f(colorProgram.uniforms.color, color.r, color.g, color.b, 1); 1356 1356 + blit(target); 1357 1357 + } 1358 1358 + 1359 1359 + function drawDisplay(target: FBO | null) { 1360 1360 + const width = target === null ? gl.drawingBufferWidth : target.width; 1361 1361 + const height = target === null ? gl.drawingBufferHeight : target.height; 1362 1362 + 1363 1363 + displayMaterial.bind(); 1364 1364 + if (config.SHADING) { 1365 1365 + gl.uniform2f(displayMaterial.uniforms.texelSize, 1.0 / width, 1.0 / height); 1366 1366 + } 1367 1367 + gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0)); 1368 1368 + if (config.SUNRAYS) { 1369 1369 + gl.uniform1i(displayMaterial.uniforms.uSunrays, sunrays.attach(3)); 1370 1370 + } 1371 1371 + blit(target); 1372 1372 + } 1373 1373 + 1374 1374 + function render(target: FBO | null) { 1375 1375 + if (config.SUNRAYS) { 1376 1376 + applySunrays(dye.read, dye.write, sunrays); 1377 1377 + blur(sunrays, sunraysTemp, 1); 1378 1378 + } 1379 1379 + 1380 1380 + if (target === null || !config.TRANSPARENT) { 1381 1381 + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); 1382 1382 + gl.enable(gl.BLEND); 1383 1383 + } else { 1384 1384 + gl.disable(gl.BLEND); 1385 1385 + } 1386 1386 + 1387 1387 + if (!config.TRANSPARENT) { 1388 1388 + drawColor(target, { 1389 1389 + r: config.BACK_COLOR.r / 255, 1390 1390 + g: config.BACK_COLOR.g / 255, 1391 1391 + b: config.BACK_COLOR.b / 255 1392 1392 + }); 1393 1393 + } 1394 1394 + drawDisplay(target); 1395 1395 + } 1396 1396 + 1397 1397 + function wrap(value: number, min: number, max: number) { 1398 1398 + const range = max - min; 1399 1399 + if (range === 0) return min; 1400 1400 + return ((value - min) % range) + min; 1401 1401 + } 1402 1402 + 1403 1403 + let lastUpdateTime = Date.now(); 1404 1404 + let colorUpdateTimer = 0.0; 1405 1405 + 1406 1406 + function updateColors(dt: number) { 1407 1407 + if (!config.COLORFUL) return; 1408 1408 + colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED; 1409 1409 + if (colorUpdateTimer >= 1) { 1410 1410 + colorUpdateTimer = wrap(colorUpdateTimer, 0, 1); 1411 1411 + pointers.forEach((p) => { 1412 1412 + const c = generateColor(); 1413 1413 + p.color = [c.r, c.g, c.b]; 1414 1414 + }); 1415 1415 + } 1416 1416 + } 1417 1417 + 1418 1418 + function applyInputs() { 1419 1419 + if (splatStack.length > 0) multipleSplats(splatStack.pop()!); 1420 1420 + 1421 1421 + pointers.forEach((p) => { 1422 1422 + if (p.moved) { 1423 1423 + p.moved = false; 1424 1424 + splatPointer(p); 1425 1425 + } 1426 1426 + }); 1427 1427 + } 1428 1428 + 1429 1429 + function calcDeltaTime() { 1430 1430 + const now = Date.now(); 1431 1431 + let dt = (now - lastUpdateTime) / 1000; 1432 1432 + dt = Math.min(dt, 0.016666); 1433 1433 + lastUpdateTime = now; 1434 1434 + return dt; 1435 1435 + } 1436 1436 + 1437 1437 + function update() { 1438 1438 + const dt = calcDeltaTime() * (config.RENDER_SPEED ?? 1.0); 1439 1439 + if (resizeCanvas()) initFramebuffers(); 1440 1440 + if (!maskReady) { 1441 1441 + scheduleMaskDraw(); 1442 1442 + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); 1443 1443 + gl.clearColor(0.0, 0.0, 0.0, 1.0); 1444 1444 + gl.clear(gl.COLOR_BUFFER_BIT); 1445 1445 + animationId = requestAnimationFrame(update); 1446 1446 + return; 1447 1447 + } 1448 1448 + updateColors(dt); 1449 1449 + applyInputs(); 1450 1450 + if (!config.PAUSED) step(dt); 1451 1451 + render(null); 1452 1452 + animationId = requestAnimationFrame(update); 1453 1453 + } 1454 1454 + 1455 1455 + function hashCode(s: string) { 1456 1456 + if (s.length === 0) return 0; 1457 1457 + let hash = 0; 1458 1458 + for (let i = 0; i < s.length; i++) { 1459 1459 + hash = (hash << 5) - hash + s.charCodeAt(i); 1460 1460 + hash |= 0; 1461 1461 + } 1462 1462 + return hash; 1463 1463 + } 1464 1464 + 1465 1465 + function correctDeltaX(delta: number) { 1466 1466 + const aspectRatio = fluidCanvas.width / fluidCanvas.height; 1467 1467 + if (aspectRatio < 1) delta *= aspectRatio; 1468 1468 + return delta; 1469 1469 + } 1470 1470 + 1471 1471 + function correctDeltaY(delta: number) { 1472 1472 + const aspectRatio = fluidCanvas.width / fluidCanvas.height; 1473 1473 + if (aspectRatio > 1) delta /= aspectRatio; 1474 1474 + return delta; 1475 1475 + } 1476 1476 + 1477 1477 + function updatePointerDownData(pointer: Pointer, id: number, posX: number, posY: number) { 1478 1478 + pointer.id = id; 1479 1479 + pointer.down = true; 1480 1480 + pointer.moved = false; 1481 1481 + pointer.texcoordX = posX / fluidCanvas.width; 1482 1482 + pointer.texcoordY = 1.0 - posY / fluidCanvas.height; 1483 1483 + pointer.prevTexcoordX = pointer.texcoordX; 1484 1484 + pointer.prevTexcoordY = pointer.texcoordY; 1485 1485 + pointer.deltaX = 0; 1486 1486 + pointer.deltaY = 0; 1487 1487 + const c = generateColor(); 1488 1488 + pointer.color = [c.r, c.g, c.b]; 1489 1489 + } 1490 1490 + 1491 1491 + function updatePointerMoveData(pointer: Pointer, posX: number, posY: number) { 1492 1492 + pointer.prevTexcoordX = pointer.texcoordX; 1493 1493 + pointer.prevTexcoordY = pointer.texcoordY; 1494 1494 + pointer.texcoordX = posX / fluidCanvas.width; 1495 1495 + pointer.texcoordY = 1.0 - posY / fluidCanvas.height; 1496 1496 + pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX); 1497 1497 + pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY); 1498 1498 + pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0; 1499 1499 + } 1500 1500 + 1501 1501 + function updatePointerUpData(pointer: Pointer) { 1502 1502 + pointer.down = false; 1503 1503 + } 1504 1504 + 1505 1505 + // Event handlers - use container so events work over both canvases 1506 1506 + container.addEventListener('mouseenter', (e) => { 1507 1507 + // Create a small burst when mouse enters the card 1508 1508 + const rect = container.getBoundingClientRect(); 1509 1509 + const posX = scaleByPixelRatio(e.clientX - rect.left); 1510 1510 + const posY = scaleByPixelRatio(e.clientY - rect.top); 1511 1511 + const x = posX / fluidCanvas.width; 1512 1512 + const y = 1.0 - posY / fluidCanvas.height; 1513 1513 + const color = generateColor(); 1514 1514 + color.r *= 10.0; 1515 1515 + color.g *= 10.0; 1516 1516 + color.b *= 10.0; 1517 1517 + splat(x, y, 300 * (Math.random() - 0.5), 300 * (Math.random() - 0.5), color); 1518 1518 + }); 1519 1519 + 1520 1520 + container.addEventListener('mousedown', (e) => { 1521 1521 + const rect = container.getBoundingClientRect(); 1522 1522 + const posX = scaleByPixelRatio(e.clientX - rect.left); 1523 1523 + const posY = scaleByPixelRatio(e.clientY - rect.top); 1524 1524 + let pointer = pointers.find((p) => p.id === -1); 1525 1525 + if (!pointer) pointer = PointerPrototype(); 1526 1526 + updatePointerDownData(pointer, -1, posX, posY); 1527 1527 + }); 1528 1528 + 1529 1529 + container.addEventListener('mousemove', (e) => { 1530 1530 + const pointer = pointers[0]; 1531 1531 + const rect = container.getBoundingClientRect(); 1532 1532 + const posX = scaleByPixelRatio(e.clientX - rect.left); 1533 1533 + const posY = scaleByPixelRatio(e.clientY - rect.top); 1534 1534 + updatePointerMoveData(pointer, posX, posY); 1535 1535 + // Always create swish effect on hover 1536 1536 + if (pointer.moved) { 1537 1537 + pointer.moved = false; 1538 1538 + // Generate a new color for visual interest 1539 1539 + const c = generateColor(); 1540 1540 + pointer.color = [c.r, c.g, c.b]; 1541 1541 + splat( 1542 1542 + pointer.texcoordX, 1543 1543 + pointer.texcoordY, 1544 1544 + pointer.deltaX * config.SPLAT_FORCE * 12, 1545 1545 + pointer.deltaY * config.SPLAT_FORCE * 12, 1546 1546 + { 1547 1547 + r: pointer.color[0], 1548 1548 + g: pointer.color[1], 1549 1549 + b: pointer.color[2] 1550 1550 + } 1551 1551 + ); 1552 1552 + } 1553 1553 + }); 1554 1554 + 1555 1555 + container.addEventListener('mouseup', () => { 1556 1556 + updatePointerUpData(pointers[0]); 1557 1557 + }); 1558 1558 + 1559 1559 + container.addEventListener('touchstart', (e) => { 1560 1560 + e.preventDefault(); 1561 1561 + const touches = e.targetTouches; 1562 1562 + while (touches.length >= pointers.length) pointers.push(PointerPrototype()); 1563 1563 + for (let i = 0; i < touches.length; i++) { 1564 1564 + const rect = container.getBoundingClientRect(); 1565 1565 + const posX = scaleByPixelRatio(touches[i].clientX - rect.left); 1566 1566 + const posY = scaleByPixelRatio(touches[i].clientY - rect.top); 1567 1567 + updatePointerDownData(pointers[i + 1], touches[i].identifier, posX, posY); 1568 1568 + } 1569 1569 + }); 1570 1570 + 1571 1571 + container.addEventListener('touchmove', (e) => { 1572 1572 + e.preventDefault(); 1573 1573 + const touches = e.targetTouches; 1574 1574 + for (let i = 0; i < touches.length; i++) { 1575 1575 + const pointer = pointers[i + 1]; 1576 1576 + if (!pointer.down) continue; 1577 1577 + const rect = container.getBoundingClientRect(); 1578 1578 + const posX = scaleByPixelRatio(touches[i].clientX - rect.left); 1579 1579 + const posY = scaleByPixelRatio(touches[i].clientY - rect.top); 1580 1580 + updatePointerMoveData(pointer, posX, posY); 1581 1581 + } 1582 1582 + }); 1583 1583 + 1584 1584 + container.addEventListener('touchend', (e) => { 1585 1585 + const touches = e.changedTouches; 1586 1586 + for (let i = 0; i < touches.length; i++) { 1587 1587 + const pointer = pointers.find((p) => p.id === touches[i].identifier); 1588 1588 + if (pointer) updatePointerUpData(pointer); 1589 1589 + } 1590 1590 + }); 1591 1591 + 1592 1592 + // Initialize 1593 1593 + updateKeywords(); 1594 1594 + initFramebuffers(); 1595 1595 + multipleSplats(25); 1596 1596 + update(); 1597 1597 + 1598 1598 + // Auto splat interval 1599 1599 + splatIntervalId = setInterval(() => { 1600 1600 + multipleSplats(5); 1601 1601 + }, 500); 1602 1602 + 1603 1603 + // Resize observer - also triggers initial draw 1604 1604 + resizeObserver = new ResizeObserver(() => { 1605 1605 + resizeCanvas(); 1606 1606 + maskReady = false; 1607 1607 + scheduleMaskDraw(); 1608 1608 + }); 1609 1609 + resizeObserver.observe(container); 1610 1610 + 1611 1611 + // Mark as initialized after first resize callback 1612 1612 + isInitialized = true; 1613 1613 + } 1614 1614 + </script> 1615 1615 + 1616 1616 + <div bind:this={container} class="relative h-full w-full overflow-hidden bg-black"> 1617 1617 + <canvas bind:this={fluidCanvas} class="absolute h-full w-full"></canvas> 1618 1618 + <canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas> 1619 1619 + </div>

+36

src/lib/cards/FluidTextCard/FluidTextCardSettings.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Item } from '$lib/types'; 3 3 + import type { ContentComponentProps } from '../types'; 4 4 + import { Input, Label } from '@foxui/core'; 5 5 + 6 6 + let { item = $bindable<Item>() }: ContentComponentProps = $props(); 7 7 + 8 8 + // Initialize fontSize if not set 9 9 + if (item.cardData.fontSize === undefined) { 10 10 + item.cardData.fontSize = 0.33; 11 11 + } 12 12 + 13 13 + const displayPercent = $derived(Math.round((item.cardData.fontSize as number) * 100)); 14 14 + </script> 15 15 + 16 16 + <div class="flex flex-col gap-3"> 17 17 + <div> 18 18 + <Label class="mb-1 text-xs">Text</Label> 19 19 + <Input bind:value={item.cardData.text} placeholder="Enter text" class="w-full" /> 20 20 + </div> 21 21 + 22 22 + <div> 23 23 + <Label class="mb-1 text-xs">Font Size ({displayPercent}%)</Label> 24 24 + <input 25 25 + type="range" 26 26 + min="0.1" 27 27 + max="0.8" 28 28 + step="0.01" 29 29 + value={item.cardData.fontSize ?? 0.33} 30 30 + oninput={(e) => { 31 31 + item.cardData.fontSize = parseFloat(e.currentTarget.value); 32 32 + }} 33 33 + class="bg-base-200 dark:bg-base-700 h-2 w-full cursor-pointer appearance-none rounded-lg" 34 34 + /> 35 35 + </div> 36 36 + </div>

src/lib/cards/FluidTextCard/LDR_LLL1_0.png

This is a binary file and will not be displayed.

+28

src/lib/cards/FluidTextCard/index.ts

··· 1 1 + import type { CardDefinition } from '../types'; 2 2 + import CreateFluidTextCardModal from './CreateFluidTextCardModal.svelte'; 3 3 + import EditingFluidTextCard from './EditingFluidTextCard.svelte'; 4 4 + import FluidTextCard from './FluidTextCard.svelte'; 5 5 + import FluidTextCardSettings from './FluidTextCardSettings.svelte'; 6 6 + 7 7 + export const FluidTextCardDefinition = { 8 8 + type: 'fluid-text', 9 9 + contentComponent: FluidTextCard, 10 10 + editingContentComponent: EditingFluidTextCard, 11 11 + createNew: (card) => { 12 12 + card.cardType = 'fluid-text'; 13 13 + card.cardData = { 14 14 + text: '' 15 15 + }; 16 16 + card.w = 4; 17 17 + card.h = 2; 18 18 + card.mobileW = 4; 19 19 + card.mobileH = 2; 20 20 + }, 21 21 + creationModalComponent: CreateFluidTextCardModal, 22 22 + settingsComponent: FluidTextCardSettings, 23 23 + sidebarButtonText: 'Fluid Text', 24 24 + defaultColor: 'transparent', 25 25 + allowSetColor: false, 26 26 + minW: 2, 27 27 + minH: 2 28 28 + } as CardDefinition & { type: 'fluid-text' };

+2

src/lib/cards/index.ts

··· 18 18 import { YoutubeCardDefinition } from './YoutubeVideoCard'; 19 19 import { BlueskyProfileCardDefinition } from './BlueskyProfileCard'; 20 20 import { GithubProfileCardDefitition } from './GitHubProfileCard'; 21 21 + import { FluidTextCardDefinition } from './FluidTextCard'; 21 22 import { PopfeedReviewsCardDefinition } from './PopfeedReviews'; 22 23 import { TealFMPlaysCardDefinition } from './TealFMPlaysCard'; 23 24 import { PhotoGalleryCardDefinition } from './PhotoGalleryCard'; ··· 43 44 BlueskyProfileCardDefinition, 44 45 GithubProfileCardDefitition, 45 46 TetrisCardDefinition, 47 47 + FluidTextCardDefinition, 46 48 PopfeedReviewsCardDefinition, 47 49 TealFMPlaysCardDefinition, 48 50 PhotoGalleryCardDefinition,