From 89db3af185cf01367bacec02d8a0873265f77c21 Mon Sep 17 00:00:00 2001 From: David Haz Date: Sat, 19 Jul 2025 16:29:57 +0300 Subject: [PATCH] Small tweaks --- src/components/common/PreviewColor.vue | 2 +- .../code/Animations/crosshairCode.ts | 2 +- src/constants/code/Backgrounds/ditherCode.ts | 2 +- .../Animations/Crosshair/Crosshair.vue | 24 ++++---------- src/content/Backgrounds/Dither/Dither.vue | 20 ++++++----- src/demo/Animations/CrosshairDemo.vue | 33 +++++++++---------- src/demo/Backgrounds/DitherDemo.vue | 26 ++++++++++----- 7 files changed, 54 insertions(+), 55 deletions(-) diff --git a/src/components/common/PreviewColor.vue b/src/components/common/PreviewColor.vue index 2156b0a..a2cd2e0 100644 --- a/src/components/common/PreviewColor.vue +++ b/src/components/common/PreviewColor.vue @@ -27,7 +27,7 @@ const handleColorChange = (event: Event) => { } .color-label { - font-size: 0.875rem; + font-size: 14px; white-space: nowrap; } diff --git a/src/constants/code/Animations/crosshairCode.ts b/src/constants/code/Animations/crosshairCode.ts index 9145952..de129ea 100644 --- a/src/constants/code/Animations/crosshairCode.ts +++ b/src/constants/code/Animations/crosshairCode.ts @@ -18,4 +18,4 @@ export const crosshair: CodeObject = { const containerElement = computed(() => containerRef.value); `, code -}; +}; diff --git a/src/constants/code/Backgrounds/ditherCode.ts b/src/constants/code/Backgrounds/ditherCode.ts index 31561c1..495a8cc 100644 --- a/src/constants/code/Backgrounds/ditherCode.ts +++ b/src/constants/code/Backgrounds/ditherCode.ts @@ -24,4 +24,4 @@ export const dither: CodeObject = { import Dither from "./Dither.vue"; `, code -}; +}; diff --git a/src/content/Animations/Crosshair/Crosshair.vue b/src/content/Animations/Crosshair/Crosshair.vue index f7e0025..b01de1f 100644 --- a/src/content/Animations/Crosshair/Crosshair.vue +++ b/src/content/Animations/Crosshair/Crosshair.vue @@ -22,21 +22,11 @@ > - + - + @@ -215,9 +205,7 @@ onMounted(() => { animationId = requestAnimationFrame(render); }; - const links = props.containerRef - ? props.containerRef.querySelectorAll('a') - : document.querySelectorAll('a'); + const links = props.containerRef ? props.containerRef.querySelectorAll('a') : document.querySelectorAll('a'); links.forEach((link: HTMLAnchorElement) => { link.addEventListener('mouseenter', enter); @@ -227,12 +215,12 @@ onMounted(() => { cleanup = () => { target.removeEventListener('mousemove', handleMouseMove); target.removeEventListener('mousemove', onMouseMove); - + if (animationId !== null) { cancelAnimationFrame(animationId); animationId = null; } - + links.forEach((link: HTMLAnchorElement) => { link.removeEventListener('mouseenter', enter); link.removeEventListener('mouseleave', leave); @@ -246,4 +234,4 @@ onMounted(() => { } }); }); - + diff --git a/src/content/Backgrounds/Dither/Dither.vue b/src/content/Backgrounds/Dither/Dither.vue index e719b73..e404b1d 100644 --- a/src/content/Backgrounds/Dither/Dither.vue +++ b/src/content/Backgrounds/Dither/Dither.vue @@ -244,16 +244,19 @@ const handleMouseMove = (e: MouseEvent) => { if (!containerRef.value || !gl) return; const rect = containerRef.value.getBoundingClientRect(); - const dpr = window.devicePixelRatio || 1; - const x = (e.clientX - rect.left) * dpr; - const y = (e.clientY - rect.top) * dpr; + + const normalizedX = (e.clientX - rect.left) / rect.width; + const normalizedY = (e.clientY - rect.top) / rect.height; + + const x = normalizedX * gl.canvas.width; + const y = normalizedY * gl.canvas.height; + targetMouse = [x, y]; }; const handleMouseLeave = () => { if (!gl) return; - const dpr = window.devicePixelRatio || 1; - targetMouse = [gl.canvas.width / (2 * dpr), gl.canvas.height / (2 * dpr)]; + targetMouse = [gl.canvas.width / 2, gl.canvas.height / 2]; }; const update = (t: number) => { @@ -267,16 +270,15 @@ const update = (t: number) => { program.uniforms.mousePos.value[1] = currentMouse[1]; } else { if (gl) { - const dpr = window.devicePixelRatio || 1; - program.uniforms.mousePos.value[0] = gl.canvas.width / (2 * dpr); - program.uniforms.mousePos.value[1] = gl.canvas.height / (2 * dpr); + program.uniforms.mousePos.value[0] = gl.canvas.width / 2; + program.uniforms.mousePos.value[1] = gl.canvas.height / 2; } } if (!props.disableAnimation) { program.uniforms.time.value = t * 0.001; } - + program.uniforms.waveSpeed.value = props.waveSpeed; program.uniforms.waveFrequency.value = props.waveFrequency; program.uniforms.waveAmplitude.value = props.waveAmplitude; diff --git a/src/demo/Animations/CrosshairDemo.vue b/src/demo/Animations/CrosshairDemo.vue index 729be18..db6ee79 100644 --- a/src/demo/Animations/CrosshairDemo.vue +++ b/src/demo/Animations/CrosshairDemo.vue @@ -28,17 +28,16 @@ - + - + @@ -64,6 +63,8 @@ import CliInstallation from '@/components/code/CliInstallation.vue'; import CodeExample from '@/components/code/CodeExample.vue'; import Customize from '@/components/common/Customize.vue'; import PreviewColor from '@/components/common/PreviewColor.vue'; +import PreviewSelect from '@/components/common/PreviewSelect.vue'; + import Crosshair from '@/content/Animations/Crosshair/Crosshair.vue'; import { crosshair } from '@/constants/code/Animations/crosshairCode'; @@ -71,7 +72,7 @@ const DEFAULT_TEXT = 'Aim... aand...'; const linkText = ref(DEFAULT_TEXT); const color = ref('#ffffff'); -const targeted = ref(true); +const targetedMode = ref('targeted'); const minWidth = ref(0); const containerRef = useTemplateRef('containerRef'); @@ -79,6 +80,7 @@ const linkRef = useTemplateRef('linkRef'); const hiddenRef = useTemplateRef('hiddenRef'); const containerElement = computed(() => containerRef.value); +const targeted = computed(() => targetedMode.value === 'targeted'); const propData = [ { @@ -91,7 +93,8 @@ const propData = [ name: 'containerRef', type: 'Ref', default: 'null', - description: 'Optional container ref to limit crosshair to specific element. If null, crosshair will be active on entire viewport.' + description: + 'Optional container ref to limit crosshair to specific element. If null, crosshair will be active on entire viewport.' } ]; @@ -103,10 +106,6 @@ const handleMouseLeave = () => { linkText.value = DEFAULT_TEXT; }; -const toggleTargeted = () => { - targeted.value = !targeted.value; -}; - const updateMinWidth = async () => { await nextTick(); if (hiddenRef.value) { @@ -137,4 +136,4 @@ onUnmounted(() => { resizeObserver.disconnect(); } }); - + diff --git a/src/demo/Backgrounds/DitherDemo.vue b/src/demo/Backgrounds/DitherDemo.vue index d6da0e8..57293cc 100644 --- a/src/demo/Backgrounds/DitherDemo.vue +++ b/src/demo/Backgrounds/DitherDemo.vue @@ -73,18 +73,28 @@ import Dither from '../../content/Backgrounds/Dither/Dither.vue'; const { rerenderKey, forceRerender } = useForceRerender(); -const waveSpeed = ref(0.05); -const waveFrequency = ref(3); -const waveAmplitude = ref(0.3); -const waveColor = ref<[number, number, number]>([0.5, 0.5, 0.5]); +const waveSpeed = ref(0.1); +const waveFrequency = ref(2.5); +const waveAmplitude = ref(0.2); +const waveColor = ref<[number, number, number]>([0.1, 0.7, 0.5]); const colorNum = ref(4); -const pixelSize = ref(2); +const pixelSize = ref(3); const disableAnimation = ref(false); const enableMouseInteraction = ref(true); -const mouseRadius = ref(1); +const mouseRadius = ref(0.5); watch( - [waveSpeed, waveFrequency, waveAmplitude, waveColor, colorNum, pixelSize, disableAnimation, enableMouseInteraction, mouseRadius], + [ + waveSpeed, + waveFrequency, + waveAmplitude, + waveColor, + colorNum, + pixelSize, + disableAnimation, + enableMouseInteraction, + mouseRadius + ], () => { forceRerender(); }, @@ -147,4 +157,4 @@ const propData = [ description: 'Radius of the mouse interaction effect.' } ]; - +