atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Noise improvements

Browse Source
This commit is contained in:
David Haz
2025-07-14 01:13:38 +03:00
parent bb644cdbb1
commit c0f01c6971
2 changed files with 113 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/content/Animations/Noise/Noise.vue
View File

@@ -1,20 +1,24 @@
<template>
<canvas
ref="grainRef"
class="pointer-events-none absolute top-0 left-0 h-screen w-screen"
:style="`image-rendering: pixelated; mix-blend-mode: ${props.mixBlendMode}`"
></canvas>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { ref, onMounted, onBeforeUnmount } from 'vue';
interface NoiseProps { interface NoiseProps {
patternSize?: number;
patternScaleX?: number;
patternScaleY?: number;
patternRefreshInterval?: number; patternRefreshInterval?: number;
patternAlpha?: number; patternAlpha?: number;
mixBlendMode?: string;
} }
const props = withDefaults(defineProps<NoiseProps>(), { const props = withDefaults(defineProps<NoiseProps>(), {
patternSize: 250,
patternScaleX: 1,
patternScaleY: 1,
patternRefreshInterval: 2, patternRefreshInterval: 2,
patternAlpha: 10, patternAlpha: 10,
mixBlendMode: 'normal'
}); });
const grainRef = ref<HTMLCanvasElement | null>(null); const grainRef = ref<HTMLCanvasElement | null>(null);
@@ -26,31 +30,32 @@ const canvasSize = 1024;
const resize = () => { const resize = () => {
const canvas = grainRef.value; const canvas = grainRef.value;
if (!canvas) return; if (!canvas) return;
canvas.width = canvasSize; canvas.width = canvasSize;
canvas.height = canvasSize; canvas.height = canvasSize;
canvas.style.width = '100vw'; canvas.style.width = '100vw';
canvas.style.height = '100vh'; canvas.style.height = '100vh';
}; };
const drawGrain = (ctx: CanvasRenderingContext2D) => { let noiseData: ImageData;
const imageData = ctx.createImageData(canvasSize, canvasSize); let noise32: Uint32Array;
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) { const initImageData = (ctx: CanvasRenderingContext2D) => {
const value = Math.random() * 255; noiseData = ctx.createImageData(canvasSize, canvasSize);
data[i] = value; noise32 = new Uint32Array(noiseData.data.buffer);
data[i + 1] = value; };
data[i + 2] = value;
data[i + 3] = props.patternAlpha; const drawGrain = () => {
const a = props.patternAlpha << 24;
for (let i = 0; i < noise32.length; i++) {
const v = (Math.random() * 255) | 0;
noise32[i] = a | (v << 16) | (v << 8) | v;
} }
ctx.putImageData(imageData, 0, 0);
}; };
const loop = (ctx: CanvasRenderingContext2D) => { const loop = (ctx: CanvasRenderingContext2D) => {
if (frame % props.patternRefreshInterval === 0) { if (frame % Math.max(1, Math.round(props.patternRefreshInterval)) === 0) {
drawGrain(ctx); drawGrain();
ctx.putImageData(noiseData, 0, 0);
} }
frame++; frame++;
animationId = requestAnimationFrame(() => loop(ctx)); animationId = requestAnimationFrame(() => loop(ctx));
@@ -59,12 +64,15 @@ const loop = (ctx: CanvasRenderingContext2D) => {
onMounted(() => { onMounted(() => {
const canvas = grainRef.value; const canvas = grainRef.value;
if (!canvas) return; if (!canvas) return;
const ctx = canvas.getContext('2d', { alpha: true }); const ctx = canvas.getContext('2d', { alpha: true });
if (!ctx) return; if (!ctx) return;
resize(); resize();
initImageData(ctx);
drawGrain();
ctx.putImageData(noiseData, 0, 0);
loop(ctx); loop(ctx);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
}); });
@@ -73,9 +81,3 @@ onBeforeUnmount(() => {
cancelAnimationFrame(animationId); cancelAnimationFrame(animationId);
}); });
</script> </script>
<template>
<canvas ref="grainRef" class="pointer-events-none absolute top-0 left-0 h-screen w-screen"
style="image-rendering: pixelated">
</canvas>
</template>

78
src/demo/Animations/NoiseDemo.vue
View File

@@ -2,20 +2,14 @@
<div> <div>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden;"> <div class="demo-container h-[400px] overflow-hidden">
<div class="text-[#2ea043] text-[6rem] font-extrabold text-center opacity-50"> <div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
Ooh, edgy! <Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
</div>
<Noise :pattern-size="patternSize" :pattern-scale-x="patternScaleX" :pattern-scale-y="patternScaleY"
:pattern-alpha="patternAlpha" />
</div> </div>
<Customize> <Customize>
<PreviewSlider title="pattern Size" value-unit="px" v-model="patternSize" :min="50" :max="500" <PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
:step="10" /> <PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
<PreviewSlider title="Scale X" v-model="patternScaleX" :min="0.1" :max="5" :step="0.1" />
<PreviewSlider title="Scale Y" v-model="patternScaleY" :min="0.1" :max="5" :step="0.1" />
<PreviewSlider title="pattern Alpha" v-model="patternAlpha" :min="0" :max="25" :step="5" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
@@ -33,40 +27,32 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue' import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue' import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue' import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue' import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue' import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue' import PreviewSlider from '../../components/common/PreviewSlider.vue';
import Noise from '../../content/Animations/Noise/Noise.vue' import PreviewSelect from '../../components/common/PreviewSelect.vue';
import { noise } from '@/constants/code/Animations/noiseCode' import Noise from '../../content/Animations/Noise/Noise.vue';
import { noise } from '@/constants/code/Animations/noiseCode';
const patternSize = ref(250) const patternAlpha = ref(15);
const patternScaleX = ref(2) const mixBlendMode = ref('normal');
const patternScaleY = ref(2)
const patternAlpha = ref(10) const blendModeOptions = [
{ label: 'Normal', value: 'normal' },
{ label: 'Overlay', value: 'overlay' }
];
watch(mixBlendMode, newValue => {
if (newValue === 'overlay') {
patternAlpha.value = 50;
}
});
const propData = [ const propData = [
{
name: 'patternSize',
type: 'number',
default: '-',
description: 'Defines the size of the grain pattern.'
},
{
name: 'patternScaleX',
type: 'number',
default: '-',
description: 'Scaling factor for the X-axis of the grain pattern.'
},
{
name: 'patternScaleY',
type: 'number',
default: '-',
description: 'Scaling factor for the Y-axis of the grain pattern.'
},
{ {
name: 'patternRefreshInterval', name: 'patternRefreshInterval',
type: 'number', type: 'number',
@@ -78,6 +64,12 @@ const propData = [
type: 'number', type: 'number',
default: '10', default: '10',
description: 'Opacity of the grain pattern (0-255).' description: 'Opacity of the grain pattern (0-255).'
},
{
name: 'mixBlendMode',
type: 'string',
default: 'normal',
description: 'CSS mix-blend-mode value for how the noise blends with content behind it.'
} }
] ];
</script> </script>