From c0f01c6971d8148accdd9d3cd9fd048b12a69f6e Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Mon, 14 Jul 2025 01:13:38 +0300
Subject: [PATCH] Noise improvements

---
 src/content/Animations/Noise/Noise.vue |  98 +++++++++---------
 src/demo/Animations/NoiseDemo.vue      | 134 ++++++++++++-------------
 2 files changed, 113 insertions(+), 119 deletions(-)

diff --git a/src/content/Animations/Noise/Noise.vue b/src/content/Animations/Noise/Noise.vue
index 830384d..ef91be9 100644
--- a/src/content/Animations/Noise/Noise.vue
+++ b/src/content/Animations/Noise/Noise.vue
@@ -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>
diff --git a/src/demo/Animations/NoiseDemo.vue b/src/demo/Animations/NoiseDemo.vue
index 504b336..dc9757c 100644
--- a/src/demo/Animations/NoiseDemo.vue
+++ b/src/demo/Animations/NoiseDemo.vue
@@ -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>