mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
Noise improvements
This commit is contained in:
David Haz
@@ -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">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
interface NoiseProps {
|
||||
patternSize?: number;
|
||||
patternScaleX?: number;
|
||||
patternScaleY?: number;
|
||||
patternRefreshInterval?: number;
|
||||
patternAlpha?: number;
|
||||
patternRefreshInterval?: number;
|
||||
patternAlpha?: number;
|
||||
mixBlendMode?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<NoiseProps>(), {
|
||||
patternSize: 250,
|
||||
patternScaleX: 1,
|
||||
patternScaleY: 1,
|
||||
patternRefreshInterval: 2,
|
||||
patternAlpha: 10,
|
||||
patternRefreshInterval: 2,
|
||||
patternAlpha: 10,
|
||||
mixBlendMode: 'normal'
|
||||
});
|
||||
|
||||
const grainRef = ref<HTMLCanvasElement | null>(null);
|
||||
@@ -24,58 +28,56 @@ let frame = 0;
|
||||
const canvasSize = 1024;
|
||||
|
||||
const resize = () => {
|
||||
const canvas = grainRef.value;
|
||||
if (!canvas) return;
|
||||
|
||||
canvas.width = canvasSize;
|
||||
canvas.height = canvasSize;
|
||||
canvas.style.width = '100vw';
|
||||
canvas.style.height = '100vh';
|
||||
const canvas = grainRef.value;
|
||||
if (!canvas) return;
|
||||
canvas.width = canvasSize;
|
||||
canvas.height = canvasSize;
|
||||
canvas.style.width = '100vw';
|
||||
canvas.style.height = '100vh';
|
||||
};
|
||||
|
||||
const drawGrain = (ctx: CanvasRenderingContext2D) => {
|
||||
const imageData = ctx.createImageData(canvasSize, canvasSize);
|
||||
const data = imageData.data;
|
||||
let noiseData: ImageData;
|
||||
let noise32: Uint32Array;
|
||||
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const value = Math.random() * 255;
|
||||
data[i] = value;
|
||||
data[i + 1] = value;
|
||||
data[i + 2] = value;
|
||||
data[i + 3] = props.patternAlpha;
|
||||
}
|
||||
const initImageData = (ctx: CanvasRenderingContext2D) => {
|
||||
noiseData = ctx.createImageData(canvasSize, canvasSize);
|
||||
noise32 = new Uint32Array(noiseData.data.buffer);
|
||||
};
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
const loop = (ctx: CanvasRenderingContext2D) => {
|
||||
if (frame % props.patternRefreshInterval === 0) {
|
||||
drawGrain(ctx);
|
||||
}
|
||||
frame++;
|
||||
animationId = requestAnimationFrame(() => loop(ctx));
|
||||
if (frame % Math.max(1, Math.round(props.patternRefreshInterval)) === 0) {
|
||||
drawGrain();
|
||||
ctx.putImageData(noiseData, 0, 0);
|
||||
}
|
||||
frame++;
|
||||
animationId = requestAnimationFrame(() => loop(ctx));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const canvas = grainRef.value;
|
||||
if (!canvas) return;
|
||||
const canvas = grainRef.value;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext('2d', { alpha: true });
|
||||
if (!ctx) return;
|
||||
|
||||
const ctx = canvas.getContext('2d', { alpha: true });
|
||||
if (!ctx) return;
|
||||
resize();
|
||||
initImageData(ctx);
|
||||
drawGrain();
|
||||
ctx.putImageData(noiseData, 0, 0);
|
||||
loop(ctx);
|
||||
|
||||
resize();
|
||||
loop(ctx);
|
||||
window.addEventListener('resize', resize);
|
||||
window.addEventListener('resize', resize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resize);
|
||||
cancelAnimationFrame(animationId);
|
||||
window.removeEventListener('resize', resize);
|
||||
cancelAnimationFrame(animationId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="grainRef" class="pointer-events-none absolute top-0 left-0 h-screen w-screen"
|
||||
style="image-rendering: pixelated">
|
||||
</canvas>
|
||||
</template>
|
||||
|
||||
@@ -1,83 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden;">
|
||||
<div class="text-[#2ea043] text-[6rem] font-extrabold text-center opacity-50">
|
||||
Ooh, edgy!
|
||||
</div>
|
||||
<Noise :pattern-size="patternSize" :pattern-scale-x="patternScaleX" :pattern-scale-y="patternScaleY"
|
||||
:pattern-alpha="patternAlpha" />
|
||||
</div>
|
||||
<div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
|
||||
<Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="pattern Size" value-unit="px" v-model="patternSize" :min="50" :max="500"
|
||||
:step="10" />
|
||||
<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>
|
||||
<PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
|
||||
<PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="noise" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="noise" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="noise.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="noise.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import Noise from '../../content/Animations/Noise/Noise.vue'
|
||||
import { noise } from '@/constants/code/Animations/noiseCode'
|
||||
import { ref, watch } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import Noise from '../../content/Animations/Noise/Noise.vue';
|
||||
import { noise } from '@/constants/code/Animations/noiseCode';
|
||||
|
||||
const patternSize = ref(250)
|
||||
const patternScaleX = ref(2)
|
||||
const patternScaleY = ref(2)
|
||||
const patternAlpha = ref(10)
|
||||
const patternAlpha = ref(15);
|
||||
const mixBlendMode = ref('normal');
|
||||
|
||||
const blendModeOptions = [
|
||||
{ label: 'Normal', value: 'normal' },
|
||||
{ label: 'Overlay', value: 'overlay' }
|
||||
];
|
||||
|
||||
watch(mixBlendMode, newValue => {
|
||||
if (newValue === 'overlay') {
|
||||
patternAlpha.value = 50;
|
||||
}
|
||||
});
|
||||
|
||||
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',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Number of frames before the grain pattern refreshes.'
|
||||
},
|
||||
{
|
||||
name: 'patternAlpha',
|
||||
type: 'number',
|
||||
default: '10',
|
||||
description: 'Opacity of the grain pattern (0-255).'
|
||||
}
|
||||
]
|
||||
{
|
||||
name: 'patternRefreshInterval',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Number of frames before the grain pattern refreshes.'
|
||||
},
|
||||
{
|
||||
name: 'patternAlpha',
|
||||
type: 'number',
|
||||
default: '10',
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user